【Gemini APIでチャットボット作成】#3
こんにちは！
エル・フィールドでエンジニアとして働いているT.Hと申します。
前回は、Djangoプロジェクトのセットアップ方法についてご紹介しました。
第3回となる今回は、いよいよチャットボットの実装を行っていきます！
■連載構成
・第1回：アプリケーションの概要
・第2回：環境構築
・第3回：アプリケーションの実装
・第4回：Gemini APIのチューニング
今回やること
本記事では、Gemini APIを利用したチャットボットの実装方法をご紹介します。
- Gemini APIキーの管理
- Djangoアプリの作成
- フロントエンドの作成
- Gemini APIとの連携
- ルーティングの設定
それでは、さっそく作業を進めていきましょう！
Gemini APIキーの管理
第2回で取得したAPIキーは、セキュリティ対策として「.env」ファイルで管理します。
① python-decoupleのインストール
次のコマンドを実行し、python-decoupleをインストールします。
| pip install python-decouple |
② .envファイルを作成し、APIキーを保存
プロジェクトルートに.envファイルを作成し、APIキーを定義します。
※「XXXXX」には取得したAPIキーを設定してください。
③ settings.pyで.envからAPIキーを読み込む
settings.pyを編集し、.envからAPIキーを読み込みます。
| from pathlib import Path from decouple import Config # Build paths inside the project like this: BASE_DIR / ‘subdir’. BASE_DIR = Path(__file__).resolve().parent.parent # .env の読み込み config = Config(BASE_DIR / “.env”) # Gemini APIキーの取得 GEMINI_API_KEY = config(“GEMINI_API_KEY”) |
※赤字箇所を追加
④ .gitignoreに.envを追加
将来的なGit利用を考慮し、.gitignoreに.envを追加しておきます。
※.gitignoreに定義したファイルは、Git管理の対象外になります。
Djangoアプリの作成
今回は「mychatbot」という名前でDjangoアプリを作成します。
※アプリ名は任意の名称で問題ありません。
次のコマンドを実行します。
| python manage.py startapp mychatbot |
コマンドを実行すると、Djangoアプリが作成されます。
INSTALLED_APPSにアプリを登録
Djangoアプリを作成したら、settings.pyのINSTALLED_APPSに追加します。
| INSTALLED_APPS = [ ‘django.contrib.admin’, ‘django.contrib.auth’, ‘django.contrib.contenttypes’, ‘django.contrib.sessions’, ‘django.contrib.messages’, ‘django.contrib.staticfiles’, ‘mychatbot’, |
※赤字箇所を追加
フロントエンド（chat.html）の作成
チャットボットの画面を作成します。
今回は、質問入力欄・Geminiからの回答表示エリア・送信ボタンのみのシンプルな構成とします。
<!DOCTYPE html> <html lang=”ja”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Gemini Chatbot</title> <script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script> </head> <body> <h1>Gemini チャットボット</h1> <form id=”chat-form”> <input type=”text” id=”question” placeholder=”質問を入力してください” size=”50″> <button type=”submit”>送信</button> </form> <h2>回答:</h2> <p id=”answer”></p> <script> $(document).ready(function(){ $(“#chat-form”).submit(function(event){ event.preventDefault(); // ページのリロードを防ぐ var question = $(“#question”).val() $.ajax({ type: “POST”, url: “”, data: { question: question, csrfmiddlewaretoken: “{{ csrf_token }}” }, success: function(response) { $(“#answer”).text(response.answer); }, error: function() { $(“#answer”).text(“エラーが発生しました。”); } }); }); }); </script> </body> </html> |
ビュー（views.py）の作成
views.pyを編集し、Gemini APIと連携する処理を実装します。
import os import google.generativeai as genai from django.shortcuts import render from django.http import JsonResponse # 環境変数から API キーを取得 API_KEY = os.getenv(“GEMINI_API_KEY”) # Gemini API の設定 genai.configure(api_key=API_KEY) model = genai.GenerativeModel(“gemini-1.5-flash”) def chat(request): if request.method == “POST”: user_input = request.POST.get(“question”, “”) # フォームから入力データ取得 # Gemini API に質問を送信 response = model.generate_content(user_input) bot_reply = response.text if response else “エラーが発生しました。” # JSON 形式でレスポンスを返す（AJAX通信を想定） return JsonResponse({“answer”: bot_reply}) return render(request, “chat.html”) |
※google.generativeaiに関する警告が表示された場合
環境によっては、google.generativeaiに関する警告が表示されることがあります。
その場合は、仮想環境を有効化したうえで、以下のコマンドを実行してください。
| venv\Scripts\activate |
| pip install google-generativeai |
ルーティング（urls.py）の設定
Djangoでビューを呼び出せるようにするため、urls.pyを編集します。
mychatbot/urls.py（アプリ側）
| from django.urls import path from mychatbot.views import chat urlpatterns = [ path(“”, chat, name=”chat”), # http://127.0.0.1:8000/chatbot/ で動作 ] |
chatbot/urls.py（プロジェクト側）
| from django.contrib import admin from django.urls import path, include urlpatterns = [ path(“admin/”, admin.site.urls), path(“chatbot/”, include(“mychatbot.urls”)), ] |
※赤字箇所を追加
動作確認
実装が完了したら、さっそく動作確認を行ってみましょう！
以下のコマンドを実行してサーバーを起動します。
| python manage.py runserver |
以下のURLにアクセスします。
| http://127.0.0.1:8000/chatbot/ |
質問を入力して送信ボタンをクリックすると、Gemini APIからの回答が表示されます。
以上で、Gemini APIと連携したシンプルなチャットボットの実装は完了です。
次回は、より実用的なチャットボットにするために、プロンプトの調整や応答品質の向上などのチューニングを行います。
ぜひ次回もご覧ください！👋
