しとちゃぶろぐ

こんにちは！この記事では、AI コーディングアシスタント Cline (Roo) と協力し、Google の Gemini API と discord.js を使って、会話履歴の記憶、画像生成・編集、Web検索連携などの機能を持つ多機能な Discord Bot「きつねぷりりん」を作成した手順を紹介します。

この記事のポイント:

• AI アシスタントとの対話を通じて、アイデアを形にしていく開発プロセスを追体験できます。
• Discord Bot 作成や Gemini API 利用の基本的な流れを学べます。
• AI との協働における試行錯誤やデバッグの様子も垣間見えます。

想定読者:

• Node.js と npm の基本的な操作（インストール、npm install など）ができる方。
• AI コーディングアシスタントの活用に興味がある方。
• Discord Bot 作成や API 利用に興味がある方。

(注記) この記事では Bot の主要な機能と、AI との対話による実装のポイントを解説します。実際に Bot を動作させるには、記事に記載されていない部分を含む完全なプロジェクトコードが必要です。また、API キーの取得やアカウント作成など、AI が直接実行できない手順も含まれます。

今回、AI アシスタント Cline (Roo) と一緒に作成した「きつねぷりりん」は、こんなことができる AI アシスタントです。

• 自然な会話: きつねとプリンが合わさったような、元気でちょっとおっちょこちょいな「ぷりりん」として、個性的な口調でユーザーと会話します。（キャラクター設定も AI と相談しながら決めました！）
• 会話履歴の記憶: ユーザーごとに会話の流れを記憶しており、文脈に沿った応答ができます。記憶する長さは設定可能です (.env ファイルの HISTORY_SIZE_LIMIT)。
• 画像生成・編集: ユーザーの指示に基づいて画像を生成したり、直前に生成・添付された画像を編集したりできます。会話の流れを考慮して、より意図に沿った画像を生成しようとします。
• Google 検索連携: 天気や最新ニュースなど、リアルタイムな情報が必要な質問には、Google 検索を使って情報を取得し、応答に反映させます。（ただし、関連検索クエリの表示は現在オフにしています。）
• コマンド: !help, !chat, !generate, !reset などのコマンドで特定の操作を実行できます。
• 一時ファイルの管理: Bot 起動時に古い一時画像ファイルを自動で削除します。

まずは開発に必要なものを準備しましょう。これらの準備は AI アシスタントにはお願いできないので、自分で行う必要があります。

1. Node.js: JavaScript の実行環境です。公式サイト から LTS 版をインストールしてください。インストールすると npm も一緒に使えるようになります。
2. Discord Bot アプリケーション:
   • アプリケーション作成: Discord Developer Portal にアクセスし、右上の「New Application」ボタンから新しいアプリケーションを作成します。名前は自由です（例: きつねぷりりん Bot）。
   • Bot作成: 作成したアプリケーションの左メニューから「Bot」を選択し、「Add Bot」ボタンをクリックして Bot ユーザーを作成します。
   • トークン取得: Bot ユーザー作成後、「TOKEN」セクションにある「Reset Token」ボタン（または「View Token」）をクリックしてトークンを表示・コピーします。このトークンは Bot を動かすための秘密鍵なので、絶対に他人に教えたり公開したりしないでください。
   • インテント有効化: 同じ「Bot」タブ内の「Privileged Gateway Intents」セクションで、「MESSAGE CONTENT INTENT」を必ず有効にしてください。これを有効にしないと、Bot はメッセージの内容を読み取れません。
   • クライアントID取得: 左メニューの「OAuth2」>「General」を選択し、「CLIENT INFORMATION」セクションにある「APPLICATION ID」をコピーします。これがクライアントIDです。
   • サーバーへの追加: 左メニューの「OAuth2」>「URL Generator」を選択します。「SCOPES」で bot と applications.commands にチェックを入れます。次に表示される「BOT PERMISSIONS」で、Bot に必要な権限を選択します（最低限必要なものとして Send Messages, Read Message History, Attach Files など。必要に応じて追加してください）。権限を選択すると下に URL が生成されるので、その URL にアクセスし、Bot を追加したい自分の Discord サーバーを選択して認証します。
3. Gemini API キー:
   • Google AI Studio (旧 MakerSuite) または Google Cloud Console から Gemini API を利用するための API キーを取得します。
   • Google AI Studio であれば、「Get API key」メニューから簡単に取得できます。Google Cloud プロジェクトの作成と請求先アカウントの設定が必要になる場合があります。
   • 取得した API キーも他人に教えたり公開したりしないでください。

ここからは AI アシスタント Cline (Roo) と協力して進められます。

1. ディレクトリ作成と移動: ターミナルでプロジェクト用のディレクトリを作成し、移動します。
   Copy

   mkdir kitune_puddiddin_DISCORDBOT
   cd kitune_puddiddin_DISCORDBOT
   

2. npm プロジェクト初期化: ターミナルで以下のコマンドを実行します。
   Copy

   npm init -y
   

3. ライブラリのインストール: 必要なライブラリを AI に指示してインストールしてもらいます。「discord.js, @google/generative-ai, dotenv をインストールして」のように依頼します。AI は以下のようなコマンドを実行してくれるはずです。
   Copy

   npm install discord.js @google/generative-ai dotenv
   

4. .env ファイル作成: AI に指示して、プロジェクトルートに .env ファイルを作成し、以下の内容を書き込んでもらいます。その後、自分でトークンと API キーを貼り付けます。
   Copy

   # Discord BOTの設定
   DISCORD_TOKEN=ここにあなたのDiscordボットトークンを貼り付け
   CLIENT_ID=ここにあなたのBotのクライアントIDを貼り付け
   
   # Gemini APIの設定
   GEMINI_API_KEY=ここにあなたのGemini APIキーを貼り付け
   HISTORY_SIZE_LIMIT=5 # 記憶する会話の往復数 (お好みで調整)
   

5. .gitignore ファイル作成: 同様に AI に指示して .gitignore ファイルを作成・編集してもらいます。
   Copy

   node_modules/
   .env
   src/temp_images/
   

6. ディレクトリ構造: AI に指示して、必要なディレクトリ (src, src/commands, src/services, src/utils) を作成してもらいます。（src/temp_images/ は実行時に自動生成されます）
   Copy

   kitune_puddiddin_DISCORDBOT/
   ├── node_modules/
   ├── src/
   │   ├── commands/
   │   ├── services/
   │   ├── utils/
   │   ├── temp_images/ # (実行時に自動生成)
   │   └── index.js     # (後で作成)
   ├── .env
   ├── .gitignore
   ├── package-lock.json
   └── package.json
   

ここからは、各ファイルのコードを AI アシスタント Cline (Roo) に指示して生成・修正してもらった流れを解説します。

• src/index.js (エントリーポイント):
  • 最初に、基本的な Bot の起動とメッセージ応答の雛形を AI に作成してもらいました。
  • 機能追加（会話履歴、画像処理、コマンド）に伴い、messageCreate イベント内の処理を AI に修正・追加してもらいました。
  • ユーザーごとのセッション管理 (chatSessions) のロジックも AI に実装してもらいました。
  • 最終的に、主要なチャット処理は chatHandler.js に委譲するようにリファクタリングを依頼しました。
  • 一時ファイルのクリーンアップ処理も AI に追加してもらいました。
• src/services/gemini.js (Gemini API 連携):
  • Gemini API を使うための初期設定コードを AI に生成してもらいました。
  • キャラクター設定 (systemInstruction) を AI と相談しながら調整し、設定してもらいました。
  • Google 検索ツールを有効にする設定も AI に追加してもらいました。
  • 会話履歴を考慮し、テキスト応答と画像アクション指示（JSON）を出し分ける handleMessage 関数は、AI との試行錯誤（応答形式のブレなど）を経て完成しました。
• src/services/image-generation.js (画像生成・編集):
  • 画像生成/編集用のモデルを使うための基本的なコードを AI に生成してもらいました。（この記事では詳細は省略）
• src/services/chatHandler.js (主要チャットロジック):
  • index.js が複雑になってきたため、メンションや !chat コマンドに対する応答処理を共通化するモジュールとして、AI に作成・リファクタリングしてもらいました。
  • 添付画像の処理、gemini.js の呼び出し、応答に応じた処理分岐、履歴・画像パスの更新などを担当します。
• src/commands/ (コマンド群):
  • help.js: AI に基本的なヘルプコマンドを作成してもらい、機能追加に合わせて説明を更新してもらいました。
  • reset.js: 会話リセット機能の要件を伝え、AI にコマンドファイルを作成してもらいました。
  • chat.js: chatHandler.js を利用して !chat コマンドを実装するように AI に指示しました。
  • generate.js: （省略）
• src/utils/fileUtils.js (ファイル操作):
  • 画像ダウンロードや一時保存・送信の処理が複数の場所で必要になったため、共通関数として AI に切り出してもらい、このファイルを作成しました。
• デバッグと改善:
  • 開発途中、「画像編集の一貫性がない」「LLM の応答形式が安定しない」「グラウンディング結果が表示されない」などの問題が発生しました。
  • これらの問題に対し、Bot の動作ログや Discord 上での実際の応答を AI にフィードバックし、原因の推測とコードの修正（ログ追加、プロンプト調整、処理ロジック変更など）を AI に依頼して解決していきました。

ターミナルでプロジェクトディレクトリに移動し、以下のコマンドを実行します。（これは自分で操作）

node src/index.js

コンソールに Logged in as きつねぷりりん#XXXX のようなメッセージが表示されれば起動成功です。Discord で Bot にメンションしたり、コマンドを実行したりしてみましょう！

Bot が起動したら、Discord サーバーで実際に「きつねぷりりん」と対話してみましょう！ 主な対話方法は以下の2つです。

1. メンション: チャットで @きつねぷりりん (または Bot の実際の名前) と入力し、続けてメッセージを送ります。
2. !chat コマンド: !chat こんにちは！ のように、コマンドに続けてメッセージを送ります。

どちらの方法でも、ぷりりんが応答してくれます。以下にいくつかの遊び方の例を示します。（画像は後ほど挿入してください）

内部的な仕組みについて: ぷりりんは、受け取ったメッセージを Gemini API に送り、応答を生成してもらっています。その際、過去の会話履歴も一緒に送ることで、文脈を理解した応答ができるようになっています。 また、メッセージの内容に応じて、ぷりりん（内部のテキストLLM）が「これは画像生成の指示だな」「これは検索が必要だな」と判断し、適切なアクション（画像生成モデルの呼び出しやGoogle検索の実行）を行うように指示されています。

例1: 簡単な会話

[画像: 通常会話の例]

例2: 情報検索 (グラウンディング)

合ってるかは不明…

[画像: 情報検索の例]

• ポイント: 天気のような最新情報が必要な場合、ぷりりん（内部のテキストLLM）が Google 検索ツールを使うべきだと判断し、検索結果に基づいた応答を生成します。（現在は関連検索クエリの表示はオフにしています）

例3: 画像生成

[画像: 画像生成の例]

• ポイント: 「描いて」のような指示があると、ぷりりん（内部のテキストLLM）が画像生成アクションが必要だと判断し、画像生成に適したプロンプト（この例では日本語）を考えて、画像生成モデルに指示を出します。

例4: 画像編集 (直前の画像に対して)

[画像: 画像編集の例]

• ポイント: ユーザーが画像を添付せずに編集を指示した場合、ぷりりんは直前に生成または添付された画像を記憶しており、それを編集対象として処理しようとします。テキストLLMが画像編集アクションとプロンプトを生成し、画像生成モデルが元の画像とプロンプトを元に新しい画像を生成します。

例5: ヘルプコマンド

[画像: ヘルプコマンドの例]

例6: 会話リセット

[画像: リセットコマンドの例]

このように、メンションや !chat コマンドを使って、様々な会話や機能を楽しむことができます。

今回の Bot は基本的な機能を実装しましたが、さらに以下のような改善や機能追加が考えられます。（これらも AI と協力して進められますね！）

• エラーハンドリングの強化: API エラーや予期せぬ応答に対する処理をより丁寧にする。
• 画像編集機能の改善: 「色をつけて」のような指示で構図が変わってしまう問題に対し、プロンプト生成の指示をさらに工夫する、あるいは別の画像編集特化モデルや手法を検討する。
• より複雑なコマンド: 特定のタスクを実行するコマンド（例: 要約、翻訳など）を追加する。
• 一時ファイルの管理: Bot 終了時にも一時ファイルを削除する、ファイル数や容量の上限を設けるなど。
• 設定の外部化: キャラクター設定などを設定ファイルで管理しやすくする。
• グラウンディング結果の活用: 現在は関連検索クエリを表示していませんが、検索結果のソース（groundingChunks）を表示したり、応答生成にさらに活用したりする。

AI コーディングアシスタント Cline (Roo) と協力することで、アイデア出しから実装、デバッグ、リファクタリングまで、対話を通じてスムーズに進めることができました。特に、Gemini API のような新しい技術を使った複雑な機能も、AI に基本的なコード生成や使い方を教えてもらいながら実装できたのは大きなメリットでした。途中で発生した問題も、AI に状況を説明し、ログを見せることで的確な修正案を得られました。

この記事が、皆さんが AI アシスタントと共に Discord Bot やその他のアプリケーション開発を進める上での参考になれば幸いです。ぜひ、AI との協働開発を楽しんでみてください！ぷりりんも応援してるよ！こんこん♪