noteの記事一覧を、rssを取得しwebサイトに掲載する方法【初心者向け】

こんにちは、フリーランスWebデザイナーのsowです。

今回は最近ユーザーがどんどん増えているnoteですが、
このnoteの記事一覧をrssを取得してWebサイトに掲載する方法を紹介します。

“note rss” 等でググると下記のサイトがヒットしたのですが、
ちょっと僕には難しくて途中でわからなくなってしまいました。

Nuxt.js + Netlify で RSS を取得して静的 JSON にする

ですが試行錯誤の結果、別の方法で掲載することが出来たので
プログラム初心者にも簡単にサクッと出来る方法をご紹介します。

RSSを読み込むPHPを作成する

まずはじめにnoteのrssを取得するためのphpを用意します。
以下のコードでphpファイルを作成してください。
丸っとコピペして「output_rss.php」とします。

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

// 取得したいRSSのURLを設定
$url = "RSSのURL";
// MAXの表示件数を設定
$max = 4;

// 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 ) );
// 出力するHTML
$output .= '<div class="mu">';
$output .= '<img src="'. $item->children('media',true)->thumbnail . '">';
$output .= '<h3><small>'.$date . "</small>" . $item->title.'</h3>';
$output .= $item->description;
$output .= '<a class="btn" href="'. $item->link .'">';
$output .= '</a>';
$output .= '</div>';
$cnt++;
}
// 文字列を出力
echo $output;
}
?>

5行目のRSSのURL

noteのURLの末尾にrssと付けるだけです。

例えばnote公式の「スタートアップ記事まとめ」のページの場合、
noteのURLがhttps://note.com/notemag/m/m567dc56dbe84
なので
rssはhttps://note.com/notemag/m/m567dc56dbe84/rss
となります。

書き出されるHTML

htmlは28〜34行目の部分が書き出されます。
特に難しい部分は無いと思いますが、class="mu"が記事1つ分です。
新しい記事が追加される毎に<div class="mu">〜</div>が生成されます。

表示される記事数を変えたい場合は
8行目の数字を変更してください。

リンク部分

32〜33行目がリンクの部分ですが、
<div class="mu">〜</div>全体を覆うようにしています。
CSSの紹介は最後で。

Javascriptを読み込む

次に以下のJavascriptを読み込みます。

<script>
// HTMLドキュメントの解析後に実行
window.addEventListener('DOMContentLoaded', function() {
// XMLHttpRequestのインスタンスを作成
var req = new XMLHttpRequest();

// 読み込み時の処理を設定
req.onreadystatechange = function() {
// readyState=4は全てのデータを受信済み、
// status=200は正常に処理されたことを意味します
if( req.readyState == 4 && req.status == 200 ) {
// 結果を代入
document.getElementById( "message" ).innerHTML = req.responseText;
}
}

// 接続先のURLやメソッドを設定します
req.open( "GET", "php/output_rss.php" );

// リクエストをサーバに送信
req.send();

})
</script>

表示用HTMLのID

13行目の"message"は表示用HTMLのid名になります。

phpファイルのパス

18行目に先ほど作成したPHPのファイル名を入れます。
パスも自分のサイトに合わせてください。

リンク部分

32〜33行目がリンクタグですが、今回はclass="mu"全体を覆うように設定しています。

表示用HTMLを記述する

HTMLは以下の1行だけですので、任意の場所に記述してください。

<div id="message"></div>

id名はjavascriptの13行目と同じにしてください。
ソースの確認は出来ませんが、

<div id="message">
   <div class="mu">〜</div>
   <div class="mu">〜</div>
   <div class="mu">〜</div>
   <div class="mu">〜</div>
</div>

という構造になるので、CSSでレイアウトを整えてください。

CSS例

以下はCSSの一例です。
4記事を横並びに表示します。

#message {
display: flex;
justify-content: space-between
}
#message p img {
display: none;
}
#message a.btn {
display: block;
position: absolute;
top:0;
left:0;
right:0;
bottom: 0
}
#message .mu {
width: 23%;
position: relative
}
#message .mu img {
width: 100%;
height: auto
}
#message .mu h3 {
margin-bottom: 1em;
font-size: 1.3rem;
text-align: left;
font-weight: normal
}
#message .mu small {
display: block
}

文章中の画像を非表示にする

6行目でimgの非表示設定は、
文章中の画像を拾ってきてしまうので、
それを非表示しています。

リンクを記事全体にかける

18行目で記事の大枠<div class="mu">〜</div>relativeを設定し、
8行目のaタグabsoluteにして全体を覆うようにしています。