Route B Phase 3 : Advanced

B-06：【応用】リアルAI連動型への道

GASとAPI連携で、パーソナライズされた診断を実現する

これまでのレッスンで、あなたは「ルールベース」の診断ツールを完成させました。これは高速で安定していますが、結果は常に数パターンのいずれかです。

この応用レッスンでは、さらに一歩進んで、ユーザーの回答ごとにAIがその場でユニークなアドバイスを生成する「リアルAI連動型」の仕組みを、AIに質問しながら自走形式で構築する方法を学びます。

1. なぜこの仕組みが必要なのか？（APIキーの保護）

診断ツールのHTMLコードにAPIキーを直接書き込むと、第三者に盗まれ、不正利用される危険性があります。これを防ぐため、ユーザーから見えない「安全なサーバー（バックエンド）」でAPIキーを管理する必要があります。今回は、その役割をGoogle Apps Script (GAS) に担わせます。

リアルAI連動型の全体像

① フロントエンド

（診断ツールHTML）

↔

② バックエンド

（GAS）

↔

③ AI

（Gemini API）

2. AIを司令塔にして実装するロードマップ

AIにいきなり「部品」を作らせるのではなく、まず「全体像」を共有して司令塔になってもらいます。以下のステップで進めましょう。

【最重要】Step 0: プロジェクトの全体像をAIにインプットする

まず、新しいチャットを開始し、以下のプロンプトを投げてAIにプロジェクトの全体像とあなたの現在のコードを教え込みます。これにより、AIは文脈を完全に理解した「専属エンジニア」になります。

# プロジェクト概要

これから、既存の「ルールベースWeb診断ツール」を、リアルタイムでAIが個別のアドバイスを生成する「リアルAI連動型」にアップグレードします。



# 技術スタック

- フロントエンド: HTML, CSS, JavaScript (既存のコードを改修)

- バックエンド: Google Apps Script (GAS)

- AI: Gemini API



# 現状の成果物

以下が、現在完成している診断ツールのHTMLコードです。

---

(ここに、B-05で完成した診断ツールのHTMLコードを全て貼り付ける)

---



# 実行計画

これから私が指示を出すので、あなたは優秀なフルスタックエンジニアとして、以下のステップで開発を進めてください。

1. バックエンドとなるGASのコードを実装する。

2. フロントエンドのJavaScriptを修正し、GASと連携させる。



まずは、この計画と提供されたコードを理解した上で、プロジェクトを開始する準備ができたか「準備完了です。最初の指示をどうぞ。」とだけ返答してください。

Step 1: バックエンド（GAS）の作成を指示する

AIが「準備完了です。」と返答したら、同じチャットで続けて以下の指示を出します。Googleスプレッドシートを開き、「拡張機能」>「Apps Script」からエディタを起動しておきましょう。

承知しました。では最初の指示です。

バックエンドとなるGoogle Apps Script (GAS) のコードを作成してください。



【要件】

1. 外部からPOSTリクエストを受け取るための `doPost(e)` 関数を実装。

2. リクエストボディのJSONデータ（例: `{"answers": ["回答1", "回答2"]}`）を解析。

3. APIキーはコードに直接書き込まず、安全な「スクリプトプロパティ」から読み込む。

4. 受け取った回答データを元にGemini APIへ送信するプロンプトを組み立て、`UrlFetchApp` を使ってAPIを呼び出す。

5. Geminiから返ってきた診断結果のテキストを、`ContentService` を使ってレスポンスとして返却。



この仕様を満たすGASのコード全文を提示してください。

Step 2: フロントエンド（診断ツール）の改修を指示する

GASのコードが生成されたら、次にフロントエンドの修正を指示します。AIはStep 0で受け取ったHTMLコードを覚えているので、コードを再送する必要はありません。

次に、フロントエンドのJavaScriptを修正してください。

最後の質問に答えた後、合計スコアを計算して結果を表示する代わりに、以下の処理を行うように変更してください。



1. ユーザーの全回答を配列としてまとめる。

2. `fetch` APIを使い、その回答データをJSON形式で先ほど作成したGASのWebアプリURLにPOST送信する。

3. GASから診断結果のテキストが返ってくるまで、ローディングアニメーションを表示する。

4. 返ってきたテキストを、診断結果表示エリアにinnerHTMLで挿入する。



この修正を反映した、HTMLコード全体を提示してください。

Step 3: AIへの指示（プロンプト）の調整

AIが生成する文章の質を上げるため、GASコード内のプロンプトをより具体的にする指示を出します。

GASのコード内でGemini APIに投げるプロンプトを、より高品質なものに修正してください。



「あなたはプロのキャリアコンサルタントです。以下のユーザーの回答内容を分析し、その人に寄り添ったパーソナライズされた転職アドバイスを、300字程度の情熱的な文章で生成してください。



ユーザーの回答：

{ここにユーザーの回答データ}

」



このプロンプトを組み込んだGASコードの全文を再度提示してください。

Step 4: GASの設定方法をAIに質問する

最後に、GASを動かすための設定手順をAI自身に教えてもらいます。

ありがとうございます。

作成したGASコードを実際に動作させるために必要な、以下の設定手順を、初心者でも分かるようにステップバイステップで詳しく教えてください。



1. Gemini APIキーを「スクリプトプロパティ」に安全に保存する方法。

2. このスクリプトを「Webアプリ」としてデプロイ（公開）し、外部からアクセスするためのURLを取得する方法。

3. CORSエラーを回避するために必要な設定。

Route B、コンプリート。

おめでとうございます！これで、Web診断ツール開発の全工程をマスターしました。
この知識を応用すれば、「AI職務経歴書作成ツール」など、さまざまなWebアプリケーションを開発できます。

ポータルへ戻り、次のプロジェクトを探す