every Tech Blog

株式会社エブリーのTech Blogです。

新卒1年目Web系エンジニアがChatGPTを利用した社内ChatAppのテンプレート機能の実装に挑戦した話

新卒1年目Web系エンジニアが社内ChatAppのテンプレート機能の実装に挑戦した話
新卒1年目Web系エンジニアが社内ChatAppのテンプレート機能の実装に挑戦した話

新卒1年目Web系エンジニアが社内ChatAppのテンプレート機能の実装に挑戦した話

目次

はじめに

こんにちは。 トモニテ開発部でバックエンドやフロントエンドの設計・開発に携わっている 新卒1年目エンジニアのktanonymousです。
every Tech Blog Advent Calendar 2023 の22日目の記事執筆担当者として参加させていただきました! いよいよ最終日が近づいてきていますが、是非最後までチェックしていってください!

先日、エブリーでは開発部全体のイベントである挑戦week1が開催されました。
挑戦weekの運営についての記事も出していますので是非ご覧ください。

こちらの記事では、 挑戦weekで実装した社内ChatApp2のテンプレート機能についてご紹介していきたいと思います。

現在の社内ChatAppについて

ChatGPTが使えるようになって以降、作業の効率化やクリエイティブな活動など非常に様々な場面で利活用されるようになっています。

弊社でも例に漏れず、ChatGPTを利用した社内ChatAppが利用されています。 ChatAppの仕様はシンプルで、プロンプトを入力して送信することで回答を得られます。

現在のChatAppの画面
現在のChatAppの画面
また、上記画像には写っていませんが、会話の履歴をcsvファイルとしてダウンロードすることもできます。

今回自分が挑戦するテーマを考えるにあたり、ChatGPTに対して常々思っていたことがありました。 それは、「プロンプト考えるの面倒だし、何が『良い』プロンプトか分からない!」ということです。
これは共感していただける方が多いと思っているのですが、プロンプトを考えるのは面倒だし、 かといって適当に書いたプロンプトで中途半端に間違えられると修正の方がゼロから作るより大変になることもあるのが辛みポイントだと感じています。 そこで、プロンプト自体をChatGPTに生成してもらい、それをテンプレートとして利用することで 手軽に「良い」プロンプトを使えるようにしたいと考え、テンプレート機能の実装に挑戦することにしました。

実装したテンプレート機能について

プロンプトのテンプレート機能を実装するにあたり、どのように使えると便利になるかを考え以下の要件を設定しました。

  • 簡単な用件を伝えるだけで「良い」プロンプトのテンプレートを生成することができる
  • 生成したプロンプトのテンプレートを保存しておくことで再利用・共有できる
  • 保存されているプロンプトのテンプレートを書き換えるだけで類似の用件のプロンプトをすぐに作成できる

以下のようなイメージです。

テンプレート機能のイメージ
テンプレート機能のイメージ

最終的に実装したものは以下のような手順で利用できるようになりました。

  1. テンプレートを生成する(Template Generator)
    1. テンプレート生成ページにアクセスして、用件のジャンルを選択する
      ページトップに表示されるジャンルから希望のものを選択します。
      用件のジャンルを選択する
      用件のジャンルを選択する
    2. 用件を送信する
      先ほど選択したジャンルに応じた用件を入力して送信します。
      用件を送信する
      用件を送信する
    3. 生成されたプロンプトのテンプレートを確認・保存する
      プロンプトが生成されて画面に表示されます。 左下の「Save templates」ボタンを押すと、テンプレートを保存することができます。
      生成されたプロンプトのテンプレートを確認・保存する
      生成されたプロンプトのテンプレートを確認・保存する
  2. テンプレートを利用する(Use Template)
    1. テンプレート利用ページにアクセスして、セレクトボックスから使用したいテンプレートを選択する
      テンプレートはGoogleスプレッドシートに保存されているため、社内全体で共有することもできますし、Template Generator以外で作成したテンプレートを各自で保存することもできます。
      使用したいテンプレートを選択する
      使用したいテンプレートを選択する
    2. 必要に応じてテキストを編集して送信する
      選択したテンプレートがテキストエリアに書き出されるので、必要に応じて編集します。
      必要に応じてテキストを編集して送信する
      必要に応じてテキストを編集して送信する

おまけ: 用件「テックブログの書き方を教えて」から生成されたプロンプトへの回答

テックブログの書き方についてのガイドラインは以下の通りです。

  1. テックブログを書く目的とその重要性: テックブログを書く目的は、技術的な知識や経験を共有し、読者に価値を提供することです。これにより、著者は自身の専門知識を示し、業界内での信頼性を築くことができます。また、コミュニティとの関わりを深め、新しい技術トレンドやアイデアを広めるプラットフォームとしても機能します。重要性は、教育的なリソースを提供し、同時にSEOを通じてオンラインでの可視性を高めることにあります。
  2. ターゲットオーディエンスの特定方法:
    • オーディエンス分析: 読者がどのような技術的背景を持っているか、どのような情報を求めているかを理解します。
    • ニーズの特定: 読者が直面している問題や興味を持っているトピックを特定します。
    • フィードバック: コメントやソーシャルメディアを通じて読者からのフィードバックを収集し、それに基づいてコンテンツを調整します。
  3. 効果的なタイトルの作り方:
    • 明確さ: タイトルは具体的で、読者が記事の内容をすぐに理解できるようにします。
    • キーワードの使用: 検索エンジンで見つけやすいように、関連するキーワードを含めます。
    • 興味を引く: 読者の好奇心を刺激するような言葉遣いを使い、クリックを促します。
  4. テックブログの構成:
    • 導入: 読者に記事のトピックとその重要性を紹介し、興味を引きます。
    • 本文: 論点を明確にし、段落ごとに一つのアイデアに焦点を当てます。サブヘッダー、リスト、画像などを使用して情報を整理し、読みやすくします。
    • 結論: 主要なポイントをまとめ、読者に次のステップを促すような結びを提供します。
  5. SEOの基本とテクニック:
    • キーワードリサーチ: 記事に関連するキーワードを見つけ、それらをタイトル、見出し、本文に適切に組み込みます。
    • メタデータ: メタタイトルとメタディスクリプションにもキーワードを含め、検索結果でのクリック率を高めます。
    • 内部リンク: 関連する他のブログ記事へのリンクを含めることで、サイト内での滞在時間を延ばし、SEOを強化します。
  6. 関心を持ち続けるコンテンツの書き方:
    • 教育的価値: 読者が新しい知識を得られるようにします。
    • 事例の使用: 実際の例やケーススタディを取り入れ、理論を実践に結びつけます。
    • ビジュアル: 画像、図表、動画を使用して、複雑な情報を視覚的に表現します。
  7. 定期的な更新の重要性とスケジュール管理:
    • 一貫性: 定期的な更新は読者に信頼感を与え、検索エンジンによる評価も高まります。
    • スケジュール: コンテンツカレンダーを作成し、投稿の頻度とトピックを計画的に管理します。
  8. プロモーション戦略とソーシャルメディアの活用:
    • ソーシャルメディア: Twitter、LinkedIn、Facebookなどで記事を共有し、関連するコミュニティやフォーラムでディスカッションを促進します。
    • メーリングリスト: ニュースレターを通じて定期的にコンテンツを配信し、読者との関係を築きます。
    • ゲストブログ: 他のブログやメディアにゲスト投稿をすることで、新しいオーディエンスにリーチします。

これらのガイドラインに従うことで、テックブログの品質を高め、より多くの読者に価値を提供することができます。

以上の手順で、簡単な要件から「良い」プロンプトを利用して回答を得ることができます。
ここからは、機能の核を担う Template Generator について詳しく説明していきます。

Template Generator

Template Generatorは、与えられた用件をChatAppに尋ねるための「良い」プロンプトを生成する機能です。 ChatGPT自身にプロンプトを考えてもらうことで、利用者の負担の軽減を実現することができます。
「良い」プロンプトを生成してもらうために、アプリ内部でユーザーの入力を利用して、 先ほどの用件を入力して送信している画像のように肉付けしたプロンプトをメッセージとして送信します。 プロンプトの工夫はプロンプトエンジニアリングと呼ばれますが、筆者はプロンプトの肉付けをする上で以下のようなことを意識していました。

  1. プロンプト生成の過程でユーザーにアクションを求めさせない
  2. 指示が具体的になるようにする
  3. テンプレートして使いまわしやすいようにシステムメッセージが極力入り込まず、かつ、整形されている
  4. プロンプトを受け取るChatGPTに役割を自覚させるような文言を盛り込ませる
  5. プロンプトを受け取るChatGPTに発破をかけるような文言を盛り込ませる

上記の点はテンプレートを受け取るChatGPT向けの視点で書かれていますが、 テンプレートを生成するためのプロンプト自身にも反映されるように気をつけました。 また、用件・条件・それ以外のメッセージが明確に区別されるようにもしました。
これらの中で特に工夫した点として、4, 5が挙げられます。 4. に挙げているのは、モデルに役割設定を与える手法です3。 また、5. に挙げているのは、Emotion Promptsと呼ばれる手法4で、モデルに 感情的な言葉を投げかけることでパフォーマンスが向上するそうです。
プロンプトエンジニアリングの世界も奥深く、筆者自身知らないことが多いです。 興味のある方は是非調べてみてください。

また、生成したテンプレートの保存先はGoogleスプレッドシートとしました。 テンプレートの保存先をGoogleスプレッドシートにすることで社内全体で共有することができ、 さらに、直接編集することでテンプレートの微調整や自分で作成したプロンプトをテンプレートとして保存することもできます。

今後について&まとめ

今回の挑戦では社内ChatAppの本番環境へのリリースまでは間に合わなかったので、なるべく早くリリースして社内のみんなに使っていただきたいと思っています。 また、やりきれなかったことも多いと思っているので、隙を見て改善を進めていけたら良いなと思っていたりもします。 以下の点は特に改善したいと思っている点です。

  • 実はジャンルがハードコーディングされているので、ジャンルもスプレッドシートで管理したい
  • 「テンプレート」とはいうものの、いわゆる穴埋めして利用できるテンプレートにはなっていない
    • AIの力を借りて穴埋め形式にしてみたり、テンプレートの中身を自動で臨機応変に書き換えてもらうのはアリかもしれない

本記事では、先日開催された挑戦weekで取り組んだ社内ChatAppのテンプレート機能の実装についてご紹介させていただきました。 OpenAIのChatGPT-3の発表以降、急速に勢いを増しているLLMを利用した開発に携わることができたのは非常に貴重な経験でした。 AIに限らず技術の変化は日々進んでいるので、これからも様々な技術に触れてキャッチアップしていきたいと思っています。


  1. エブリーでは今年、1週間普段の業務から離れて開発事業の推進のために技術的な挑戦に集中する期間の設定を試みていました。
  2. エブリーではChatGPTを利用した社員向けのチャットアプリが利用されています。
  3. SkillUp AI | ChatGPTのプロンプトエンジニアリングとは|7つのプロンプト例や記述のコツを紹介
  4. GigaziNE | AIに「それがファイナルアンサーなの?」「全力を尽くして」といった感情的な命令文を伝えるとパフォーマンスが向上する