noteの最新記事一覧を自分のサイトに自動的に表示する方法

記事一覧を取得・表示するには？

具体的にどうやるのかというと、「noteのRSSを取得して、そのデータを表示する」という仕組みを作ります。

RSSとは、Webサイトの更新情報を配信するためのフォーマットのことを指します。主にニュースサイトなどで使われており、noteも各アカウントごとのRSSを配信しています。

note 公式ヘルプセンターにも、以下のような記載があります。

noteの「サイトに貼る」や「RSS」機能を利用すると、自分のサイトにnoteの更新情報を載せることができます。

公式としてもサポートしている方法ですので、他の方法（非公式APIやスクレイピングなど）に比べ、安全な方法です。

ただ、基本的にはプログラミングが必要となります。（WordPressの場合はプラグインによる対応も可能なようですが、本記事では触れません）

実際に記事一覧を取得してサイトに表示してみた

実際にnoteのRSSを取得して、そのデータを表示してみましたので、コードを共有したいと思います。

コードは、GitHub Gist にて公開しています。技術的な詳細は割愛しますが、人気Webフレームワーク「Next.js」で実装しており、数十行のみのコードで実現できました。

こちらのコードで、以下のようにサイト表示することができました。（※ note 公式アカウントの記事一覧を表示するようにしています）

note のRSSでは、記事のサムネ画像や投稿日時なども取得できるため、これらも表示してみました。また、各記事をクリックするとnoteの記事ページに移動します。

もちろん、表示する項目やレイアウトなどは自由に決めることができますので、サイトにあったデザインをあてれば、馴染みの良い記事一覧セクションを作ることができます。

注意：noteのRSSは、最新の25件のみしか取れない

実は前述のヘルプセンターにも記載があったのですが、このnoteのRSSは、最新の25件のみ取得可能（note pro は50件）という仕様になっています。

そのため、たとえば以下のようなニーズには応えることができません。

• 25件を超えて表示したい
• 古い順に表示したい
• 何らかのフィルターをかけたリストを表示したい

この点にはご注意ください。

まとめ

本記事では、noteの最新記事一覧を自分のサイトに自動的に表示する方法を紹介しました。

この方法を使えば、サイト側は手動更新する必要がなくなるため、効率化にもつながります。ぜひ試してみてください。