star back image
people4
電飾 電飾
moon
men
  • HOME
  • BLOG
  • 【MovableType.net】noteの記事を読み込ませたい
MovableType.net にnoteの記事を読み込ませたい

【MovableType.net】noteの記事を読み込ませたい

BLOG WEBログ
読了約:27分

mt.netブログにnoteブログの記事を読み込ませいたい。
そんな要件はありますでしょうか。

mtブログの中に、他のブログの記事を入れる。なぜ？

これから始めるmtブログ以外に、noteでブログを書いていて「チラ見せ」したいそうです。

そうなんですか。どうやるんでしょうか。

RSSもらって来て表示すればいいんじゃないですか。

ということです。
RSSはブロガーの人が昔よく使っていた印象です。

【簡単】phpが動くなら

phpが動く環境であれば、そのまま以下のphpを放り込んで完了です。

<div class="note">
  <div id="sonomama">
    <?php
    // タイムゾーンを日本に設定
    date_default_timezone_set('Asia/Tokyo');

    // 取得したいRSSのURLを設定
    $url = "https://note.com/saigami/rss";
    $max = 6;

    $rss = simplexml_load_file($url);
    $cnt = 0;
    $output = '';

    foreach ($rss->channel->item as $item) {
        if ($cnt >= $max) break;

        $date = date('Y年m月d', strtotime($item->pubDate));
        $link = (string)$item->link;
        $description = strip_tags((string)$item->description);
        $description = str_replace('続きをみる', '<a href="' . $link . '" class="lk" target="_blank" rel="noopener noreferrer">続きをみる</a>', $description);

        $output .= '<div class="mu">';
        $output .= '<img src="'. $item->children('media',true)->thumbnail . '">';
        $output .= '<small>'. $date .'</small>';
        $output .= '<h3>'. $item->title .'</h3>';
        $output .= '<div class="tx">' . $description . '</div>';
        $output .= '<div class="btn"><a class="blank" href="'. $link .'" target="_blank" rel="noopener noreferrer">続きをみる</a></div>';
        $output .= '</div>';
        $cnt++;
    }

    echo $output;
    ?>
  </div>
  <div class="link">
    <a class="more" href="https://note.com/saigami"><span class="txt">noteでもっと見る</span><span class="ico"></span></a>
  </div>
</div>

ところが、あれ？

ところが！？

mtのコードに仕込んだのですが。。

出力されない。

【検索】RSSはphpを利用するのが一般的

参考ソースを意気揚々と丸ごとコピペで適用したのに！

意気揚々とコピペしたのに？？

出力されない。なぜですか。

RSSで、自分のサイトにnoteを表示する：noteオフィシャル
https://www.help-note.com/
抜粋→
※RSSをご自身のWebサイトに埋め込みたい場合は、一度サーバ上で取り込んでからご利用いただく必要があります。直接RSSを埋め込むことはできません。

そしてphpを利用するようです。

できるだけ短いのはないものか探しだし、参考にしましたブログ。

GOKAN DESIGN STUDIOさんのブログ
https://gokansoichiro.com/blog/note_rss/

phpは間違ってなさそうです。

【調査結果】mt.netはphpを動かなくしている

phpファイルをmt.netにUPしてもウンともスンとも言ってくれません。

記述を間違っている？

参考ソースをそのまま使ってるのに？

調べるとどうやら、
mt.netは気軽にphpなど設置できないようです。

FAQ：mt.netオフィシャル
https://movabletype.net/faq/2016/12/mo.html
抜粋→ PHP などユーザー任意の CGI は動作しません。

動かないようにしているのですね。

ファイルマネージャでUPもしているのですが、
自前のwebサーバーのようには自由に使えないようです。

つまり、mt.net以外の場所にphpを置いて動作させないとダメでした。

本当に？間違ってませんか。

そんなに言われると自信がなくなってしまいます。

以上、この記事で言いたかったことはここまでです。
見ていただいた方、ありがとうございます。

・mt.netにはphpを置いても動かなくしている。
・どこかのサーバーに置いてそこから引っ張って表示すると吉だと思います。

※mt.netは簡易版低価格サービスです。mtの方では普通にphpは動作するかも。

【共有】再現ソースコード

mt.net（有料）なので、共有サンプルはそこで再現はしません。

共有サンプルページ
https://astrowave.jp/amnesia_record/note_kiji.php

要件は以下です。
・note記事を6件ほど出したい。
・サムネイル画像やタイトル、テキストも出したい。
・「もっと見る」ボタンでnoteのリンクを入れたい。

必要ファイルは2つです。
・note_rss.phpファイル（RSS読み込み）
・note_kiji.phpファイル（リクエストする側の公開ページ）

改めて確認として言います。
mt.netではphpが動かないので、
RSS読み込みのnote_rss.phpファイルを作成しています。

それを外部のサーバーに置いたのですね。

● note_rss.php（外部のサーバーに設置想定）

<?php
// CORSヘッダーを最初に設定
header("Access-Control-Allow-Origin: *");

// タイムゾーンを日本に設定
date_default_timezone_set('Asia/Tokyo');

// 取得したいRSSのURLを設定
$url = "https://note.com/saigami/rss";
// MAXの表示件数を設定
$max = 6;

// simplexml_load_file()でRSSをパースしてオブジェクトを取得、オブジェクトが空でなければブロック内を処理
if( $rss = simplexml_load_file( $url ) ){
$cnt = 0;
$output = '';
/*
* $item->title：タイトル
* $item->link：リンク
* strtotime( $item->pubDate )：更新日時のUNIX TIMESTAMP
* $item->description：詳細
*/
// item毎に処理
foreach( $rss->channel->item as $item ){
// MAXの表示件数を超えたら終了
if( $cnt >= $max ) break;

// 日付の表記の設定
$date = date( 'Y年m月d', strtotime( $item->pubDate ) );
$link = (string)$item->link;
$description = (string)$item->description;
$description = strip_tags($description);
$description = str_replace('続きをみる', '<a href="' . $link . '" class="lk" target="_blank" rel="noopener noreferrer">続きをみる</a>', $description);
// 出力するHTML
$output .= '<div class="mu">';
$output .= '<img src="'. $item->children('media',true)->thumbnail . '">';
$output .= '<small>'. $date .'</small>';
$output .= '<h3>'. $item->title .'</h3>';
$output .= '<div class="tx">' . $description . '</div>';
$output .= '<div class="btn"><a class="blank" href="'. $item->link .'" target="_blank" rel="noopener noreferrer">続きをみる</a></div>';
$output .= '</div>';
$cnt++;
}
// 文字列を出力
echo $output;
}
header("Access-Control-Allow-Origin: *");
?>

9行目の$urlに、サンプルrssのnoteアドレスを差し込みます。

以下のように出力されるのを確認です。
https://astrowave.jp/amnesia_record/note_rss.php
↑この内容をホームページ（note_kiji.php）に出力したいです。

● note_kiji.php（mt.netのテンプレート記述想定）

javascript & html

<script>
window.addEventListener('DOMContentLoaded', function() {
	var req1 = new XMLHttpRequest();
	req1.onreadystatechange = function() {
	if( req1.readyState == 4 && req1.status == 200 ) {
		document.getElementById( "rss_block" ).innerHTML = req1.responseText;
				}
			}
			req1.open( "GET", "https://astrowave.jp/amnesia_record/note_rss.php" ); 
			req1.send();
})
</script>

<div class="blogs">
  <div class="widget-blogs widget">
  <h2 class="blogs_ttl">サイガモノート</h2>
  <div class="note">
    <div id="rss_block"></div>
    <div class="link">
      <a class="more" href="https://note.com/saigami"><span class="txt">noteでもっと見る</span><span class="ico"></span></a>
    </div>
  </div>
</div>

( “rss_block” )のidの部分<div id=”rss_block”></div>の中に流し込みたいです。

css

.note {
  background-color: #fff;
  padding: 0 0 20px;
}
.note #rss_block,
.note #sonomama {
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.note p img {
  display: none;
}
.note figure {
  display: none;
}
.note .tx {
  font-size: 16px;
  line-height: 1.75;
}
.note .lk {
  display: none;
}
.note .btn {
  margin: 15px 0 0;
}
.note a.blank {
  display: inline-block;
  position: relative;
  text-align: left;
}
.note .mu {
  width: calc(50% - 20px);
  position: relative;
  margin: 10px 10px 20px;
}
.note .mu img {
  width: 100%;
  height: auto;
}
.note .mu h3 {
  margin: 0.1em 0 0.6em;
  font-size: 1.1rem;
  text-align: left;
  font-weight: bold;
}
.note .mu small {
  margin: 1.5em 0 0;
  font-size: 13px;
  display: inline-block;
}
.note .link{
  margin: 10px;
  background-color: #e6e6e6;
}
.note .blank {
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  letter-spacing: 0;
  font-weight: bold;
  box-sizing: border-box;
  background: linear-gradient(to bottom, #333 0%, #000 100%);
  color: #ffffff;
  padding: 10px 25px 8px;
  display: inline-block;
  border-radius: 20px;
  opacity: 1;
  transition: .3s;
}
.note .blank:hover {
  opacity: 0.5;
}
@media (width < 768px) {
  .note .mu {
    width: 100%;
    position: relative;
    margin: 0 0 30px;
  }
}

再現メモとなります。

【懸念】クロスドメインでエラーの可能性

もしかするとphpファイルを置く場所によってクロスドメインのエラーが発生して、アレかもしれません。

アレかも？

ここまでやっても出力されないとき、クロスドメインのエラーが出ている可能性があります。

どういうことか、たとえば。
https://astro.com/note_rss.phpからの、https://astrowave.jp/amnesia_record/note_kiji.phpのリクエストは、CORSエラーが発生する可能性が高いです。

note_rss.php側で、CORSヘッダーを設定して、他のドメインからのアクセスを許可する方法があります。PHPファイルに以下のコードを追加することで、他のドメインからのリクエストを許可できます。

// CORS ヘッダーを設定
header("Access-Control-Allow-Origin: *");

*を使うことで、どのドメインからのアクセスも許可しますが、特定のドメイン（例：https://astrowave.jp）だけを許可したい場合は以下のようにします。

header("Access-Control-Allow-Origin: https://astrowave.jp");

これにより、https://astrowave.jpからのリクエストのみが許可されます。

● note_rss.php（CORSヘッダーを最初に設定）

<?php
// CORSヘッダーを最初に設定
header("Access-Control-Allow-Origin: https://astrowave.jp");

// タイムゾーンを日本に設定
date_default_timezone_set('Asia/Tokyo');

// 取得したいRSSのURLを設定
$url = "https://note.com/saigami/rss";
// MAXの表示件数を設定
$max = 6;

// simplexml_load_file()でRSSをパースしてオブジェクトを取得、オブジェクトが空でなければブロック内を処理
if( $rss = simplexml_load_file( $url ) ){
$cnt = 0;
$output = '';
/*
* $item->title：タイトル
* $item->link：リンク
* strtotime( $item->pubDate )：更新日時のUNIX TIMESTAMP
* $item->description：詳細
*/
// item毎に処理
foreach( $rss->channel->item as $item ){
// MAXの表示件数を超えたら終了
if( $cnt >= $max ) break;

// 日付の表記の設定
$date = date( 'Y年m月d', strtotime( $item->pubDate ) );
$link = (string)$item->link;
$description = (string)$item->description;
$description = strip_tags($description);
$description = str_replace('続きをみる', '<a href="' . $link . '" class="lk" target="_blank" rel="noopener noreferrer">続きをみる</a>', $description);
// 出力するHTML
$output .= '<div class="mu">';
$output .= '<img src="'. $item->children('media',true)->thumbnail . '">';
$output .= '<small>'. $date .'</small>';
$output .= '<h3>'. $item->title .'</h3>';
$output .= '<div class="tx">' . $description . '</div>';
$output .= '<div class="btn"><a class="blank" href="'. $link .'" target="_blank" rel="noopener noreferrer">続きをみる</a></div>';
$output .= '</div>';
$cnt++;
}
// 文字列を出力
echo $output;
}
?>

こんな感じに一番上に仕込むといいかもとAIが言ってました。

PHPが使えないサイトの時にどうでしょうか。

クラウド系CMSはPHP使えないとか常識ですか？

知りません。

【AI】イラストを描いてもらった

今回の記事のキャッチ画像で使わせてもらいます「Memeplex.app」で作成した画像です。誰でもgoogleアカウントでログインして使えます。

この記事にピッタリなイラストのための考えたリクエストは、「無重力の船内でブログの原稿をbook型ノート端末に書く宇宙飛行士」です。

選んだモードは以下の3つです。
・特撮
・サイバーパンク風
・UnrealEngine5風

いい感じです。

Flux.1 Shunellで人気なのか、作成待ち人数が最近多いです。

参考サイト置き場

参考にさせていただきました。ありがとうございます。

noteの記事一覧を、rssを取得し : GOKAN DESIGN STUDIO
https://gokansoichiro.com/blog/note_rss/

Nakata Katsuhisa ICT Yorozu Weblog
https://weblog.ict-yorozu.com/note-rss-php-simplexmlelement/

別ドメインのjsonデータをXMLHttpRequestでやりとりする：バシャログ
https://bashalog.c-brains.jp/13/03/25-094455.php