【Blogger】指定したラベルの記事を新着順で抽出して一覧表示する（ことに成功）

Atom | RSS

このサイトを検索 | Search this site

【Blogger】指定したラベルの記事を新着順で抽出して一覧表示する（ことに成功）

kzstock.blogspot.com /Scrap 2nd. (SC2) Inspection

このブログは、Googleが提供するブログサービス「Blogger」と AdSense（広告収益サービス）、Templatesyard にアップされたフリーのテンプレートを使用しています。

AdSenseは、Bloggerが標準対応していたのでブログ開設して3か月で審査に通りました。

テンプレートはカスタマイズが命

テンプレートは標準のままでも使い勝手がよいですが、しばらく運用するとこだわりが出てきます。

そしてこれまで、様々なカスタイマイズを施してきましたが、今回はAI（ChatGPT）の力を借りて、Javascriptを改造することに成功したので具体例を紹介します。Javascriptなので汎用性があります。

関連記事を抽出してアピール

このブログは投稿記事が1,600件超のため、数年前に投稿した記事は読者の目につくことは稀です。

過去記事を有効活用するために、表示された記事に関連する記事を自動的に表示して読者にアピールすることが重要だと考えました。

すでに、フッターにはその改造を施しており、記事の「ラベル」に対応する過去記事を新着順で10件自動的に表示するようにしています。

ラベルの選定、記事の抽出、リスト表示、リンク設定など全て Javascriptがバックグラウンドで行います。更新順のため、過去記事を修正するとその記事が優先的にリストアップされるようにしています。完全自動の動的コンテンツです。

自動的に生成されたフッターの記事リスト（スナップショット）

Javascriptによりラベルが選定され、次にラベルに対応する記事とリンクをBloggerから抽出、リスト形式で並べて、スタイルシートで整形。

そして今回は？

そして今回は、フリーソフトウェアを紹介するためのカードに関連記事を自動的に表示するようにしました。

Javascriptを利用してBloggerから記事を抽出するものですが、前項のスクリプトを使用すると、同一ページで同じラベルを使用した時に動作がおかしくなるという欠点があったため、カードには使えない状態でしたが、ChatGPTの力を借りてスクリプトを改善することができました。

Bloggerシステムから過去記事を取得するために、callback関数と引数にラベルを使用していますが、いずれも同一ページで複数回実行すると、最後に実行された結果が上書きされてしまうため、思い通りに動かない状態でした。

callback関数に引数を渡せない、という問題もChatGPTが解決してくれました。

ChatGPTを利用して感じたことは、適切に指示を出せないと間違った回答が返ってきます。（平気で嘘をつく）

裏を返せば、如何に適切な指示を出せるかということです。

「labelCounters がconst ulIdでも使われたということでよろしいか？」などと具体的に質問することが重要です。でないと、使い物にならない変なスクリプトを返してきます。

ソフトウェアカードのスナップショット

リスト表示したいラベルを指定すると、JavascriptがBloggerからラベルに対応する記事を更新順で5件抽出してリンク付きで表示する。（抽出する件数はパラメータ化しているのでクエリ時に変更可能）

スナップショットは、以下の記事から撮影したものです。

Gemini vs ChatGPT 3.5

今回の改造は、Google提供の Gemini、OpenAI提供の ChatGPT 3.5 を利用して回答を比較しました。

Javascriptの改造という点では、ChatGPTに軍配が上がり、適切なスクリプトを提示してくれました。Geminiは「コールバック関数に引数を渡す」という質問に対し、「できない」という回答でしたが、ChatGPTは Window.callback{} を使用することでその問題を解決してくれました。

さらに、GhatGPTはコピペするだけで使えるように完璧なスクリプトを提供してくれました。

ChatGPT 4.0も使いましたが、なぜか、古いChatGPT 3.5の方がレスポンスが早く、そして正しいスクリプトを返してくれました。

残念な点は、スクリプトが長かったので、すぐに1日の利用上限に達してしまい使えなくなりました。