Menu

note の RSS を PHP で解析・取得・出力する

2024年02月26日

コンテンツの投稿先として note を使用している方も多く、note に投稿したコンテンツを自分のホームページやブログに掲載したいという場合もあると思います。

note に投稿したコンテンツを自分のホームページやブログに掲載するには iframe を使用する方法と RSS を使用する方法がありますが、この記事では RSS を使用する方法について記載します。

2024年2月26日時点の note の RSS の仕様を（noteの注目記事とクリエイターにて）確認してみたところ、以下のような構造であることを確認しました。

<rss xmlns:webfeeds="http://webfeeds.org/rss/1.0" xmlns:note="https://note.com" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
	<script/>
	<channel>
		<title></title>
		<description></description>
		<link></link>
		<atom:link rel="self" type="application/rss+xml" href=""/>
		<copyright></copyright>
		<webfeeds:icon></webfeeds:icon>
		<webfeeds:logo></webfeeds:logo>
		<webfeeds:accentColor></webfeeds:accentColor>
		<webfeeds:related layout="card" target="browser"/>
		<webfeeds:analytics id="" engine="GoogleAnalytics"/>
		<language></language>
		<lastBuildDate></lastBuildDate>
		<item>
			<title></title>
			<media:thumbnail></media:thumbnail>
			<description></description>
			<note:creatorImage></note:creatorImage>
			<note:creatorName></note:creatorName>
			<pubDate></pubDate>
			<link></link>
			<guid></guid>
		</item>
	</channel>
</rss>

channel 直下に RSS に関する基本情報が含まれており、item が投稿となります。

では早速、この RSS を PHP の SimpleXMLElement クラスで解析し、各種情報の取得をしていきます。

以下のサンプルコードでは、note 注目の記事の RSS から情報を取得し、各種情報ごとに var_dump しています。

※ 変数 $url を自身や取得したいクリエイター等の RSS URL に変更すれば、その RSS の投稿一覧を取得することが可能なことも合わせて確認しました。

$url = "https://note.com/recommend/rss";
$feed = file_get_contents($url);
if ( $feed !== false ) :
	$rss = new SimpleXMLElement($feed);
	echo '<pre>';
	var_dump((string)$rss->channel->title);
	var_dump((string)$rss->channel->description);
	var_dump((string)$rss->channel->link);
	var_dump((string)$rss->channel->children('atom',true)->attributes()->rel);
	var_dump((string)$rss->channel->children('atom',true)->attributes()->type);
	var_dump((string)$rss->channel->children('atom',true)->attributes()->href);
	var_dump((string)$rss->channel->copyright);
	var_dump((string)$rss->channel->children('webfeeds',true)->icon);
	var_dump((string)$rss->channel->children('webfeeds',true)->logo);
	var_dump((string)$rss->channel->children('webfeeds',true)->accentColor);
	var_dump((string)$rss->channel->children('webfeeds',true)->related->attributes()->layout);
	var_dump((string)$rss->channel->children('webfeeds',true)->related->attributes()->target);
	var_dump((string)$rss->channel->children('webfeeds',true)->analytics->attributes()->id);
	var_dump((string)$rss->channel->children('webfeeds',true)->analytics->attributes()->engine);
	var_dump((string)$rss->channel->language);
	var_dump((string)$rss->channel->lastBuildDate);
	foreach($rss->channel->item as $item) :
		var_dump((string)$item->title);
		var_dump((string)$item->children('media',true)->thumbnail);
		var_dump((string)$item->description);
		var_dump((string)$item->children('note',true)->creatorImage);
		var_dump((string)$item->children('note',true)->creatorName);
		var_dump((string)$item->pubDate);
		var_dump((string)$item->link);
		var_dump((string)$item->guid);
	endforeach;
	echo '</pre>';
endif;

SimpleXMLElement クラスで取得した内容はオブジェクト型として格納されますので、文字列 string でキャストしています。

特に rss->channel->item->description は CDATA ですので、string にキャストしなければ情報が取得できませんでした。

上記のソースコードでは、取得可能な情報を確認のため var_dump してみましたが、実際には atom や webfeeds は使う機会が少ないかもしれません。

ということで、実際には以下のような PHP ソースコードで情報を取得して出力するのかなぁという印象です。

$url = "https://note.com/recommend/rss";
$feed = file_get_contents($url);
if ( $feed !== false ) :
	$rss = new SimpleXMLElement($feed);
	foreach($rss->channel->item as $item) :
		$title = (string)$item->title;
		$link = (string)$item->link;
		$pubdate = (string)$item->pubDate;
		$date = new DateTimeImmutable($pubdate);
		$thumbnail = (string)$item->children('media',true)->thumbnail;
		$description = (string)$item->description;
		$description = strip_tags($description);
		$description = str_replace('続きをみる', '<a href="' . $link . '" target="_blank" rel="noopener noreferrer">続きをみる</a>', $description);
		echo '<div style="margin-bottom:1.5em">';
		echo '<div><a href="' . $link .'" target="_blank" rel="noopener noreferrer">' . $title . '</a></div>';
		echo '<div>' . $date->format('Y年m月d日') . '</div>';
		if ( $thumbnail !== '' ) :
			echo '<div><img src="' . $thumbnail . '" width="800" height="419"></div>';
		endif;
		echo '<div>' . $description . '</div>';
		echo '</div>';
	endforeach;
endif;

note の記事見出し画像（アイキャッチ画像）は 1280 px × 670 px と推奨サイズが定められており、RSS で取得できるサムネイルは 横幅 800 px がデフォルト。

そのような仕様と捉えて img 属性には width=”800″ height=“419” と指定しています。

取得できるサムネイルの URL のパラメータ width を 400 などに変更するとそのサイズに可変するように設計されているようでしたので、好みのサイズにリサイズして縦横比を入れておくのも良いかもしれません（仕様が変更となるかもしれませんが）。

上記の PHP ソースコードは CSS のスタイルを適用していないので実運用としては使い物になりませんが、note の RSS から情報をどのように取得すればよいかの参考となりましたら幸いです。

参考情報
iframe、RSSで、自分のサイトにnoteを表示する – noteヘルプセンター
画像の推奨サイズ一覧 – noteヘルプセンター

広告