ChatGPTを使ってウェブ記事に3行要約機能を実装してみた(未完)

ライブドアニュースなんかにある、冒頭の3行要約機能。あれ、ChatGPTで実装できないかな？と考え、やってみました。結論、それらしきものはできたので、備忘録としてまとめてみます。

コードはClaudeに全部に聞きました

当方、ゴリゴリの文系で、プログラミングの知識は皆無。ということで生成AIにコードをゼロからつくってもうことに。コードの作成は、ChatGPTより賢いと噂の「Claude3」にお願いしました。ファーストステップはこんな感じ。

「WP」はワードプレスのことです。私自身も要件が定まっていないので、「ステップバイ、ステップで私に質問しながら作成いただけたらと思います」と向こうに突っ込みを入れてもらう形でやりました。これがかなりよかった。

ド文系でも「それらしきもの」はできた

今日の進捗はこんなところ、ChatgptのAPIをかましてボタン実装→生成まではできました。本当は要約を本文に表示させたいのに、タイトル上に出てしまったり、生成時間が思いのほか長く(10秒～20秒くらい)、読者に提供できるレベルでは程遠い。ボタンのデザインもダサすぎますね笑

モザイクかけちゃってわかりづらいですが…3行バッチリ出ました

実装までの手順

phpファイルの編集がかなり複雑ですね。1行エラーがあっただけで、サイト全体が見れなくなったりするのでヒヤヒヤしました。またjavascriptもClaudeさんに全て提供してもらったのですが、意味を全く理解してないので、右から左にコピペした感じです。以下はClaudeさんにまとめてもらった手順です。

1. OpenAI APIキーの設定

   • functions.phpにOpenAI APIキーを定義

     1. php

2. カスタムフィールドの作成

   • 「show_summary」カスタムフィールド：要約ボタンを表示するかどうかを制御

3. 要約ボタンの表示

   • single-type1.phpとsingle-type2.phpに要約ボタンを表示するコードを追加

1. JavaScriptによるAPIリクエストの送信

   • functions.phpにJavaScriptコードを追加し、wp_footerアクションフックを使用して出力

1. 要約の表示

   • JavaScriptコードを修正し、要約を表示する専用の要素を使用

   • 要約を表示する前に、要約を表示するための要素の内容をクリア

今後の課題

1. 出力速度の改善

   • リアルタイム生成ではなく、事前に要約を生成しておく方法を検討

   • 記事の保存・更新時にバックグラウンドでChatGPT APIを呼び出し、要約を生成・保存

   • 要約ボタンクリック時に、保存された要約を取得して表示

2. 要約ボタンと要約表示位置の調整

   • 要約ボタンの位置を、タイトルの下、本文の上に配置

   • 要約表示位置を、要約ボタンの近くに配置

3. エラーハンドリングの改善

   • APIリクエストが失敗した場合のエラーメッセージの表示

   • 要約生成中のローディング表示の実装

4. デザインの調整

   • 要約ボタンと要約表示部分のデザインをCSSで調整

   • 要約表示部分の枠線、背景色、フォントサイズなどを設定

5. 設定画面の作成

   • 管理画面に設定ページを追加

   • APIキーの設定、要約の長さ、デザインなどをカスタマイズできるようにする

今日はとりあえず備忘録的な記事でした。完成度が高められれば再現性のある形でコードなども公開したいと思っています。