【note】記事一覧を取得して表示する方法｜RSSの活用と実装例

【note】記事一覧を取得して表示する方法｜RSSの活用と実装例 Webサイト全般

note の記事一覧を自分のサイトに自動表示したい場合、現時点では公式の公開 API は提供されていません。そのため、note が案内している「RSS」もしくは「埋め込み用 iframe」を使うのが実務的な解です。本記事では RSS の取得方法と、Web サイトで一覧表示する実装例を紹介します。:contentReference[oaicite:0]{index=0}

前提：公式 API はないため RSS を使う

note は「公式公開 API はない」と明言しており、サイトへの表示は RSS または iframe の利用を案内しています。記事一覧の自動更新が目的なら RSS を選び、単一記事の紹介だけなら「サイトに貼る」（iframe）を使う、という整理になります。:contentReference[oaicite:1]{index=1}

RSS フィード URL の取得方法

クリエイターページ（例：https://note.com/ユーザー名）やマガジンページの URL 末尾に /rss を付けると、そのページの RSS を取得できます。ブラウザで開いて XML が表示されれば正しい URL です。:contentReference[oaicite:2]{index=2}

例：https://note.com/ユーザー名/rss、https://note.com/ユーザー名/m/マガジンID/rss。RSS は既定で 最新25件（note pro の独自ドメイン適用時は 50件）まで配信されます。:contentReference[oaicite:3]{index=3}

表示要素と制限事項

RSS には見出し画像・投稿日・タイトル・冒頭文などが含まれます。note 側の仕様として件数に上限がある点と、RSS をそのまま HTML に直挿しできない（自前で取得・整形が必要）点を押さえておきます。:contentReference[oaicite:4]{index=4}

実装例（サーバーで RSS→JSON 化）

クライアント直読みは CORS の都合で詰まりやすいため、サーバーやサーバーレス関数で RSS を取得して JSON に変換し、フロントはその JSON を描画する構成が扱いやすいです。:contentReference[oaicite:5]{index=5} 

// 例：Next.js の API Routes (/pages/api/note.js)
// npm i fast-xml-parser cross-fetch
import fetch from "cross-fetch";
import { XMLParser } from "fast-xml-parser";

export default async function handler(req, res) {
  const feed = process.env.NOTE_RSS_URL; // 例: https://note.com/ユーザー名/rss
  const rsp = await fetch(feed, { headers: { "User-Agent": "RSS fetch" }});
  const xml = await rsp.text();

  const parser = new XMLParser({ ignoreAttributes: false });
  const data = parser.parse(xml);
  const items = (data.rss?.channel?.item || []).map(it => ({
    title: it.title,
    link: it.link,
    pubDate: it.pubDate,
    description: it.description,           // 冒頭HTML
    thumbnail: it["media:thumbnail"]?.["@_url"] || null
  }));

  res.setHeader("Cache-Control", "s-maxage=300, stale-while-revalidate=600");
  res.status(200).json({ count: items.length, items });
}

フロント側は上記 API から JSON を取得し、カード一覧として描画します。 

<!-- 例：シンプルな描画（フレームワーク不問） -->
<section id="notes"></section>
<script>
(async () => {
  const res = await fetch("/api/note");
  const { items } = await res.json();
  const $root = document.getElementById("notes");
  $root.innerHTML = items.map(x => `
    <article class="note">
      ${x.thumbnail ? `<img src="${x.thumbnail}" alt="">` : ""}
      <h3><a href="${x.link}" target="_blank" rel="noopener">${x.title}</a></h3>
      <time datetime="${new Date(x.pubDate).toISOString()}">${new Date(x.pubDate).toLocaleDateString()}</time>
      <div class="excerpt">${x.description || ""}</div>
    </article>
  `).join("");
})();
</script>

実装例（.NET で RSS を読み込む）

C# なら SyndicationFeed を用いて RSS を解析し、MVC/Minimal API で JSON を返すのが簡潔です。 

using System.ServiceModel.Syndication;
using System.Xml;

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

app.MapGet("/api/note", async () =>
{
    var url = Environment.GetEnvironmentVariable("NOTE_RSS_URL"); // https://note.com/ユーザー名/rss
    using var reader = XmlReader.Create(url);
    var feed = SyndicationFeed.Load(reader);

    var items = feed.Items.Select(it => new {
        title = it.Title.Text,
        link = it.Links.FirstOrDefault()?.Uri.ToString(),
        pubDate = it.PublishDate.UtcDateTime,
        summary = it.Summary?.Text
    });

    return Results.Json(new { count = items.Count(), items });
});

await app.RunAsync();

単一記事を貼る（iframe）

単発の紹介なら、note 記事の「… > サイトに貼る」から取得できる iframe コードを貼るだけで完了します。見出し画像やタイトル、冒頭文などが自動表示され、クリックで note 側へ遷移します。:contentReference[oaicite:6]{index=6}

運用時のポイント

RSS の配信件数は無料で 25 件（note pro の独自ドメイン適用時は 50 件）という上限があります。より多くの件数や全文の配信が必要な場合は、note pro の「全文 RSS」設定やマガジン RSS の活用も検討してください。:contentReference[oaicite:7]{index=7}

まとめ

note の記事一覧をサイトに出す最短ルートは RSS の活用です。URL 末尾に /rss を付けたフィードをサーバー側で取得し JSON 化、フロントでカード表示、という構成にしておけば、更新も自動反映されます。公式 API は未提供のため、ヘルプで案内されている RSS/iframe をベースに、安全かつシンプルに実装しましょう。:contentReference[oaicite:8]{index=8}