ChatGPTを使ってウェブ記事に3行要約機能を実装してみた(未完)
ライブドアニュースなんかにある、冒頭の3行要約機能。あれ、ChatGPTで実装できないかな？と考え、やってみました。結論、それらしきものはできたので、備忘録としてまとめてみます。
コードはClaudeに全部に聞きました
当方、ゴリゴリの文系で、プログラミングの知識は皆無。ということで生成AIにコードをゼロからつくってもうことに。コードの作成は、ChatGPTより賢いと噂の「Claude3」にお願いしました。ファーストステップはこんな感じ。
「WP」はワードプレスのことです。私自身も要件が定まっていないので、「ステップバイ、ステップで私に質問しながら作成いただけたらと思います」と向こうに突っ込みを入れてもらう形でやりました。これがかなりよかった。
ド文系でも「それらしきもの」はできた
今日の進捗はこんなところ、ChatgptのAPIをかましてボタン実装→生成まではできました。本当は要約を本文に表示させたいのに、タイトル上に出てしまったり、生成時間が思いのほか長く(10秒～20秒くらい)、読者に提供できるレベルでは程遠い。ボタンのデザインもダサすぎますね笑
実装までの手順
phpファイルの編集がかなり複雑ですね。1行エラーがあっただけで、サイト全体が見れなくなったりするのでヒヤヒヤしました。またjavascriptもClaudeさんに全て提供してもらったのですが、意味を全く理解してないので、右から左にコピペした感じです。以下はClaudeさんにまとめてもらった手順です。
OpenAI APIキーの設定
functions.phpにOpenAI APIキーを定義
php
カスタムフィールドの作成
「show_summary」カスタムフィールド：要約ボタンを表示するかどうかを制御
要約ボタンの表示
single-type1.phpとsingle-type2.phpに要約ボタンを表示するコードを追加
JavaScriptによるAPIリクエストの送信
functions.phpにJavaScriptコードを追加し、wp_footerアクションフックを使用して出力
要約の表示
JavaScriptコードを修正し、要約を表示する専用の要素を使用
要約を表示する前に、要約を表示するための要素の内容をクリア
今後の課題
出力速度の改善
リアルタイム生成ではなく、事前に要約を生成しておく方法を検討
記事の保存・更新時にバックグラウンドでChatGPT APIを呼び出し、要約を生成・保存
要約ボタンクリック時に、保存された要約を取得して表示
要約ボタンと要約表示位置の調整
要約ボタンの位置を、タイトルの下、本文の上に配置
要約表示位置を、要約ボタンの近くに配置
エラーハンドリングの改善
APIリクエストが失敗した場合のエラーメッセージの表示
要約生成中のローディング表示の実装
デザインの調整
要約ボタンと要約表示部分のデザインをCSSで調整
要約表示部分の枠線、背景色、フォントサイズなどを設定
設定画面の作成
管理画面に設定ページを追加
APIキーの設定、要約の長さ、デザインなどをカスタマイズできるようにする
今日はとりあえず備忘録的な記事でした。完成度が高められれば再現性のある形でコードなども公開したいと思っています。