fumi WEB フミウェブ

お見積もり・ご相談はこちら

fumi Blog

コーディング中心に活動中のフリーランス、
fumicaのブログ。
日々取得した技術や勉強の記録をまとめています。

ホーム＞ブログ＞HTML/CSS＞【静的HTMLコーディング】note記事の連携方法
HTML/CSS

【静的HTMLコーディング】note記事の連携方法

最近利用者が増えているnote。

ホームページに最新の記事を掲載したい、という方も増えているのではないかと思います。

今回は静的HTMLサイトで、サムネイル＋タイトルの形式で、noteの最新記事を取得する方法について解説します。

静的サイトでnote記事を取得する方法

今回紹介するのは、RSSをPHPで取得してフロントで整形する方法になります。

rss2jsonのapiを取得する方法もありますが、一日の利用制限があるため、実案件や企業サイトでは以下の方法がおすすめです。

  • note掲載ページのみhtmlからphpファイルに変換
  • RSS取得
  • サーバーアップロードして表示確認

note連携のあるサイトの場合は、htmlファイルでコーディングを進める→最後にphpファイルへ変換後、note連携→サーバーアップロード確認、という流れがおすすめです。

RSSとは？

 RSSとは「Webサイトの更新情報を配布しているXMLファイル」です。

早速確認してみましょう。

以下はテスト用に作成したnoteアカウントです。

https://note.com/prime_weasel7525

ユーザー名の横の・・・をクリック→RSSから確認できます。

https://note.com/prime_weasel7525/rss

noteのRSSのURLは必ず以下のようになります。

https://note.com/アカウント名/rss

開くと以下のようなコードが出てきます。

とりあえず、<item>～</item>が１つの記事情報、と覚えておきましょう。

<item><br>
    <title>テスト記事</title><br>
    <media:thumbnail>https://assets.st-note.com/production/uploads/images/252661675/rectangle_large_type_2_17bfdb63fac7e0ac67e2656987149441.png?width=800</media:thumbnail><br>
    <description><br>
        <![CDATA[ <p name="47541415-6902-40b6-9669-d117d7a9db59" id="47541415-6902-40b6-9669-d117d7a9db59">テスト</p><p name="f49b98ad-0250-4ba0-9ee8-94b4561b7b1f" id="f49b98ad-0250-4ba0-9ee8-94b4561b7b1f"><br></p><br/><a href='https://note.com/prime_weasel7525/n/nf03fd581b7fa'>続きをみる</a> ]]><br>
    </description><br>
    <note:creatorImage>https://d2l930y2yx77uc.cloudfront.net/assets/default/default_profile_3-39088fff430aa9ec11d6e2a385dbcad45c8b79bde6c0c9ded10cd7abb960174f.png</note:creatorImage><br>
    <note:creatorName>tst</note:creatorName><br>
    <pubDate>Wed, 18 Feb 2026 11:34:07 +0900</pubDate><br>
    <link>https://note.com/prime_weasel7525/n/nf03fd581b7fa</link><br>
    <guid>https://note.com/prime_weasel7525/n/nf03fd581b7fa</guid><br>
</item>

今回のHTML/CSSコード

noteリスト用のHTML/CSSコードは以下になります。

3つ並びのカードレイアウトを想定しています。

<ul class="note-list grid-3 fadeInTrigger">
    <li> <a href="#" target="_blank">
            <div class="list-img"> <img src="./images/thumb-note.png" alt=""> </div>
            <p> タイトル等タイトル等タイトル等タイトル等タイトル等タイトル等タイトル等タイトル等タイトル等タイトル等タイトル等タイトル等タイト </p>
        </a> </li>
    <li> <a href="#" target="_blank">
            <div class="list-img"> <img src="./images/thumb-note.png" alt=""> </div>
            <p> タイトル等タイトル等タイトル等タイトル等タイトル等タイトル等タイトル等タイトル等タイトル等タイトル等タイトル等タイトル等タイト </p>
        </a> </li>
    <li> <a href="#" target="_blank">
            <div class="list-img"> <img src="./images/thumb-note.png" alt=""> </div>
            <p> タイトル等タイトル等タイトル等タイトル等タイトル等タイトル等タイトル等タイトル等タイトル等タイトル等タイトル等タイトル等タイト </p>
        </a> </li>
</ul>

note連携用PHP

上から二行目、noteアカウント名の所を連携したいnoteアカウントへ変更してください。

<?php
$rss_url = "https://note.com/noteアカウント名/rss";
$xml = simplexml_load_file($rss_url);

$items = $xml->channel->item;
?>



<?php if (count($items) === 0): ?>

    <!-- 記事がない場合 -->
    <div class="coming-soon">
        <p>Coming Soon</p>
    </div>

<?php else: ?>
<ul class="note-list">
    <?php
    $count = 0;
    foreach ($items as $item):
        if ($count >= 3) break;

        $title = (string)$item->title;
        $link  = (string)$item->link;

        $media = $item->children('media', true);
        
        <!--サムネイルが未設定の場合のダミー画像を設定-->
        $image = "./images/thumb-note.png";

        <!--サムネイルが設定されている時-->
        if (isset($media->thumbnail)) {
            $image = (string)$media->thumbnail;
        }
    ?>

    <li>
        <a href="<?php echo htmlspecialchars($link); ?>" target="_blank" rel="noopener">
        <!-- サムネイル -->
            <div class="list-img">
                <img src="<?php echo htmlspecialchars($image); ?>" alt="<?php echo htmlspecialchars($title); ?>">
            </div>
            <!-- 記事タイトル -->
            <p><?php echo htmlspecialchars($title); ?></p>
        </a>
    </li>

    <?php
        $count++;
    endforeach;
    ?>
</ul>
<?php endif; ?>

コード解説

RSSを取得している部分

$rss_url = "https://note.com/noteアカウント名/rss";
$xml = simplexml_load_file($rss_url);

simplexml_load_file()で 指定したURLのXMLを読み込んでいます。

記事一覧（item）を取り出す

$items = $xml->channel->item;

RMSの構造はこのようになっています。

<rss>
  <channel>
    <item> ← 記事1
    <item> ← 記事2

つまりこのコードで記事の配列を取り出しています。

記事がない場合の処理

if (count($items) === 0)
    <!-- 記事がない場合 -->
    <div class="coming-soon">
        <p>Coming Soon</p>
    </div>

記事数が0なら Coming Soonのテキストを表示するようにしています。

記事公開前の表示はこのようになります。

サイト公開直後は記事がない場合もあるため、記事がない場合の処理も入れておくと安心です。

記事ループ処理

foreach ($items as $item)

一記事ずつ処理したあとに最大３件表示に制限。

if ($count >= 3) break;

今回は最大3件表示に制限していますが、実装に合わせて数を変更します。

タイトルとリンクを取得

$title = (string)$item->title;
$link  = (string)$item->link;

RSS内の<title>と<link>を取得します。

⑥ サムネイル画像を取得

noteのRSSでは画像は<media:thumbnail>にあります。

$media = $item->children('media', true);

if (isset($media->thumbnail)) {
    $image = (string)$media->thumbnail;
}

thumbnailで 実際の画像URLを取得しています。

サムネイルが未設定の場合のダミー画像も設定しておきましょう。

<!--サムネイルが未設定の場合のダミー画像を設定-->
$image = "./images/thumb-note.png";

まとめ

静的サイトでnoteを連携するならこの方法がおすすめ。

  • PHPでRSS取得
  • media:thumbnailを見てサムネイル取得
  • Coming Soon分岐を入れて記事公開前の対策

デモサイト

テスト用のnoteアカウントを使用したデモサイトを作成しました。

今回の実装方法で作成していますので、ご確認ください。

デモサイトはこちら