noteを更新するだけで、HPのブログも更新される仕組みを作ってもらった

2026年10月19日 12:27

先日、ChatGPTで作ったHPに、noteの記事を自動表示する仕組みを追加してもらいました。

これまでは、HPのブログページに記事へのリンクを固定で載せていました。そのため、noteに新しい記事を書いても、HP側は別に更新する必要がありました。

今回お願いしたのは、次の内容です。

noteのRSSから記事を取得する

記事の取得には、noteが公開しているRSSを使っています。

RSSは、記事のタイトル・URL・投稿日などを、プログラムが読み取れる形式でまとめたものです。今回の取得先はこちらです。

サイト側でこのRSSを取得し、投稿日が新しい順に並べて、最新6記事を取り出します。

画像は、RSSに含まれるサムネイルを使用します。サムネイルの項目がない記事は、RSSの本文に含まれる画像を探す処理も追加してもらいました。

途中で「JSONファイルを構築」と出てきて、どこに保存しているのか気になりました。

今回の仕組みでは、RSSのXML形式のデータから必要な情報を取り出し、JSON形式に整理しています。保存する内容は、主に次の4つです。

保存する情報HPでの使い方記事タイトル一覧の見出し記事URLクリックしたときの移動先画像URL記事の画像表示投稿日日本時間での日付表示

この一覧を、サイト専用のデータベースに保存します。

画像そのものをコピーする仕組みではなく、noteにある画像のURLを使って表示しています。

また、初回の取得に失敗した場合にも記事を表示できるように、予備の記事データをJSONファイルとしてサイトのプログラムと一緒に保存しています。

今回のHPは、ChatGPTのSitesが管理するCloudflareの環境で動いています。

役割は次のように分かれています。

仕組み役割Cloudflare WorkersRSSの取得とブログページの生成Cloudflare D1取得した記事一覧の保存ChatGPTの自動タスク毎時、サイト側の取得処理を呼び出す

今回追加した処理は、私が契約しているXserverや、プレビューソフト用のVPSに置いたものではありません。

定期実行のきっかけはChatGPTの自動タスクですが、実際にRSSを取得して保存する処理はHP側で動きます。記事が増えるたびに、ChatGPTにHPのコードを書き直してもらう必要もありません。

ブログページを開くたびにRSSを取得すると、同じ情報を何度も取りに行くことになります。

そこで、取得した記事一覧を再利用する「キャッシュ」を設けています。

最後の取得から1時間以内なら保存済みの一覧を使い、1時間を過ぎていればRSSを取得し直します。毎時の自動タスクからも同じ処理を呼び出すため、ページを開いていない間も更新を確認する構成です。

RSSの取得に失敗したときは、前回取得できた記事一覧を表示し続けます。通信エラーでブログの一覧が突然空になることを避けるための工夫です。

一番驚いたのは、実装作業中に投稿した「第2章　AIにコードを書いてもらう前に、同じ設計図を見る」が、公開ページの確認時には最新記事として取得されていたことです。

あらかじめ用意した記事を並べただけではなく、その時点のRSSを読み取っていることが確認できました。

公開ページでは、最新6記事が出力されていることと、取得した情報がデータベースに保存されていることまで確認してもらいました。

見た目としてはブログの記事一覧ですが、その裏で取得・保存・更新・失敗時の対応まで作られています。

実際に自分で作れなくてもアイデアがあれば結構いろいろできるものだと感じました