【ShinのAI活動ログ】サイトに「生成AIニュース」コーナーを実装した話

外部のデータと連携できないか

最新AIニュースを自動で表示できないかと考えました。

コンセプトバナーやセキュリティ診断など、サイトの機能が一通り形になってきたあとだったので、次の一手としてちょうどいいステップだと思ったのです。

調べてみると、無料で使える方法が2つ見つかりました。OpenAIなどが公式に配信しているRSSフィードと、Google Newsのキーワード検索結果をRSSとして取得する方法です。

どちらもAPIキーや登録が要らず、無料の範囲で組めることが分かったので、両方を組み合わせる構成に決めました。

WordPressにコードを安全に追加する

RSSを取得して整形するには、WordPress側にPHPコードを追加する必要があります。以前おみくじの累計機能を作った際に導入した「WPCode」というプラグインを使い、ショートコード形式で実装することにしました。

OpenAI公式RSSから最新記事を、Google Newsの「ChatGPT」「Claude」「Gemini」それぞれのキーワード検索からも最新記事を取得し、新しい順にまとめて一覧表示する。これが今回の基本設計です。

重複表示を解消

無事に動き始めたニュース一覧を見ていると、同じ記事が「ChatGPT」と「Claude」の両方のタグで重複して表示される現象が出ていました。

一つの記事が、複数のキーワード検索結果に同時にヒットしてしまったために起きていたものです。

記事のリンクとタイトルを比較して、すでに表示した記事と同じものはスキップする処理を追加し、この問題は解決しました。

著作権についても考えておきたい

ニュースの見出しとリンクを表示する仕組みである以上、著作権や利用規約は一度きちんと確認しておきたいところです。

調べてみると、本文を転載せず見出しとリンクだけを表示し、クリックすると元記事に移動する今回の形は、一般的なニュースアグリゲーターサイトで広く行われている使い方であることが分かり、ひと安心しました。

それでも念のため、コーナーの下に「公式RSS経由で取得していること」「本文の転載はしていないこと」を明記する注記を加えて、より丁寧な作りにしておきました。

見た目も整える

最初はサイトの基調に合わせてシアン×ネイビーの配色で作りましたが、上から下まで似た色のウィジェットが続いてしまい、どうも単調な印象になっていました。

そこで思い切って配色を変え、ニュースコーナーは紙の掲示板をイメージしたコルクボード調のベージュに、各記事は独立したカードにして画用ピンを添えるデザインにしました。

各AIのタグも、OpenAI系は緑、Claudeはオレンジ、Geminiは紫と、それぞれのブランドカラーに寄せて色分けしています。

隣接するセキュリティバナーも同じシアン系だったので、こちらは深い緑を基調にしたマトリクス風のデザインに変更し、サイト全体でメリハリのある配色に整えました。

---

おわりに

今回もまた、保存の段階でセキュリティ機能との攻防が発生しましたが、これはサーバー側の防御がしっかり機能している証拠でもあります。

トラブルの数だけ、サイトの仕組みについての理解も深まっていく気がします。これでサイトに、生成AI業界の最新動向が自動で流れ込む窓口ができました。