1. はじめに
概要
AI を利用した構築は、今日からどこで始められますか？それは、プロトタイプを作成する価値のあるアイデアという火花から始まります。Google AI Studio のビルドモードでは、「バイブ コーディング」を通じて、ひらめきを現実のものにできます。Gemini モデルを活用することで、会話型コード生成を通じてフルスタック ウェブ アプリケーションを設計、テスト、デプロイできます。
この Codelab では、現実世界の地図データと生成 AI を組み合わせたインタラクティブな地理空間ゲームである Block Explorer を作成します。AI Studio を使用してアプリケーションを生成し、Google Maps Platform と Gemini API に統合します。次に、完成したアプリケーションを Cloud Run に直接デプロイして、他のユーザーが試せるようにする方法を学びます。
演習内容
- Google AI Studio を使用して、インタラクティブな地理空間マッピングとトリビアのウェブ アプリケーションのプロトタイプを作成します。
- AI Studio ワークスペース内で Google Maps Platform デモキーを有効にして自動的にプロビジョニングします。
- 自然言語プロンプトを使用して、動的アドレスのジオコーディング、場所の検出、AI 生成のトリビア クイズを実装します。
- Maps Grounding Lite を統合して、トリビア クイズの精度を高めます。
- インタラクティブ プレビューのサンドボックスでアプリケーションをテストしてイテレーションを行います。
- Google AI Studio UI から Cloud Run にアプリケーションを直接デプロイします。
学習内容
- Google AI Studio の Build モードを使用して、自然言語でフルスタック サービスのプロトタイプを迅速に作成する方法。
- Google Maps Platform API を使用して地理空間データを含むアプリケーションを構築する方法。
- LLM プロンプトを現実世界の地理空間コンテキストでグラウンディングして、動的なクイズやローカルな分析情報を生成する方法。
- AI Studio アプリケーションを Cloud Run のサーバーレス コンテナとしてデプロイする方法。
以下は pp のプレビューです。
2. プロジェクトをセットアップする
AI Studio を起動する前に、アカウントのステータス、前提条件、API アクセスを確認します。
Google アカウントとティア情報
- Google アカウントをまだお持ちでない場合は、Google アカウントを作成します。
- ヒント: 可能であれば、このラボでは個人の Google アカウントを使用してください。グループ アカウント、企業アカウント、学校アカウントでは、試験運用版機能やクラウド統合を無効にするポリシーが適用される場合があります。
- デプロイの請求の詳細を確認します。
- Google Cloud スターター ティア: 完全な Google Cloud 請求先アカウントを設定しなくても、選択したリージョンに最大 2 つのフルスタック アプリケーションを無料で公開できます。
- 標準デプロイ: 既存の有料 Google Cloud プロジェクトに接続し、ストレージの上限、CPU リソース、API を拡張します。
Google Maps Platform デモキー
プロトタイピングを効率化するため、Google AI Studio は Google Maps Platform とネイティブに統合されています。これにより、プロジェクト内で直接、Google Maps Platform のコア API（Maps JavaScript API、Geocoding API、Places API、Routes API など）をテストして構築する際に、摩擦をゼロにすることができます。AI Studio は、Google Maps Platform デモキーを自動的に生成します。
デモキーの主なメリット:
- クレジット カードや請求先の設定は不要: Google Cloud 請求先アカウントを設定しなくても、すぐにプロトタイピングと評価を行うことができます。
- 十分なプロトタイピング割り当て: テストとイテレーション用に、API ごとに 1 日あたり最大 100 件の無料リクエストが含まれます。
- シームレスな組み込み統合: 外部ポータルに移動したり、認証情報をコピーして貼り付けたりする必要はありません。Google AI Studio は、アプリケーションで Google Maps Platform との統合が必要な場合を自動的に検出し、設定を行います。
3. AI Studio のビルドモードでアプリケーション シェルを作成する
まず、Google AI Studio を使用してアプリケーション シェルを作成します。
- Google AI Studio アプリパネルに移動し、[新しいアプリ] をクリックします（または、[ビルド] タブを選択します）。
- プロンプト入力ボックスに、地理空間アプリケーションの最初の説明を入力します。プロンプト候補の下にある Google Maps Platform 検出チップをクリックすることもできます。
Build a highly polished, responsive, split-screen application. This application should be called "Block Explorer". It is meant to be a geospatial exploration app. It will use Google Maps Platform.
Key Features & Functionality:
- Split-Screen Layout: On desktop, a 1/3-width left-side editorial control panel and a 2/3-width right-side full-height map.
- Include a search bar where users can type a location such as a city or neighborhood. Submitting should issue a Geocoding request to the Google Geocoding V4 API REST endpoint (https://geocode.googleapis.com/v4/geocode/address/). Then pan the map to the geocoded location.
- Interactive Google Map: Render the Map inside an interactive container allowing users to pan, drag, and zoom freely. Place customized markers representing the currently selected/geocoded location.
- Also include five buttons for presets the users can click on: Buenos Aires, Shibuya, Copacabana, Cologne, and Lima. Clicking on this should geocode the location and pan the map there.
- Make sure to also include a mechanism to clearly show error messages when they occur so users can easily troubleshoot.
- [ビルド] をクリックして、アプリケーション生成プロセスを開始します。
AI Studio がアプリケーション コードの生成を開始します。デザイン テーマを選択するよう求められたら、お好みのスタイルを選択します。
Google Maps Platform を有効にしてデモキーをプロビジョニングする
Google Maps Platform には、Geocoding API が用意されています。この API は、人が読める住所のクエリ（「渋谷」や「ブエノスアイレス」など）を地理座標（緯度と経度）に変換して、地図の中心を設定し、マーカーを表示します。
地理空間インテントを含むプロンプト（Google マップ、店舗検索、ローカル探索のリクエストなど）を送信すると、AI Studio は地理空間の要件を自動的に検出し、キーのプロビジョニングを支援します。
- コンテキスト内アクティベーション カーテン: 会話のターンに「Google Maps Platform を設定」というタイトルのインライン カードが表示されます。
- 利用規約に同意して有効にする:
- マップ デモ プロジェクトの利用規約（および、求められた場合はスターター ティアの追加利用規約）を確認して同意します。
- [Google マップを有効にする] をクリックします。
- キーの自動プロビジョニングとシークレットの挿入: AI Studio は、Google Hosted Project（GHP）インフラストラクチャで Google Maps Platform デモキーを自動的にプロビジョニングし、
GOOGLE_MAPS_PLATFORM_KEYという名前でプロジェクトのシークレットに直接挿入します。 - インスタント ライブ プレビュー: アプリケーション プレビュー サンドボックスが、完全に機能するインタラクティブな Google マップで即座に更新されます。
新しい位置情報を入力するか、プリセットされた位置情報ボタンのいずれかを選択して、プレビュー サンドボックスでアプリをテストします。
4. Gemini API を使用してローカル分析情報を追加する
次に、Gemini API を統合して、ユーザーが地図を探索する際に、場所に関する豊富なローカライズされた分析情報を生成します。
- チャット ウィンドウで AI アシスタントに次のプロンプトを送信します。
Now, let's bring in the AI using the Gemini API.
1. Once geocoding successfully identifies the City and State (e.g., "Miami, Florida"), trigger a call to the Gemini API (using the gemini-3.8-flash model).
2. Use the following prompt template for the AI:
"You are a local tour guide for [City, State]. Give me exactly 3 short, highly engaging, and unusual or surprising fun facts about this place. Keep each fact under 2 sentences. Format the response as a clean HTML unordered list (<ul>) so I can inject it directly."
3. Display these fun facts in a beautiful "Local Insights" banner on the bottom portion of the map screen. Add a subtle loading spinner while the AI is thinking.
4. Make sure to make this handling robust. If an API request fails, display a user-friendly error notification in the UI.
- プレビュー ペインで、場所を選択または検索すると、Gemini が生成した動的な豆知識が表示されることを確認します。
AI Studio がアプリケーションを更新し、画面の下部に [ローカル分析情報] セクションが追加されます。
5. AI 生成のトリビアクイズを作成する
アプリケーションで位置座標とローカライズされた分析情報を取得できるようになったので、これらの機能を組み合わせて、選択した目的地に基づくインタラクティブなトリビア クイズを生成します。
- テスト生成プロンプトをエージェントに送信します。
Now let's build the actual game! We will have Gemini generate a 3-question quiz based on the real places we just got information about.
After the local insights are generated, show the user a button to "Test their local knowledge". Once clicked, offer them 3 options to choose from:
- Local cuisine
- Art and culture
- Local history
Once selected, generate a 3-question quiz based on the category and the place. The quiz should be multiple choice. Once the user submits the quiz show them their score and the correct answer.
- プレビュー ウィンドウで生成されたクイズを再生して、状態管理、回答の選択、スコアのレンダリングをテストします。
6. マップ Grounding Lite を統合する
デフォルトでは、Gemini はトレーニング データの知識を使用して事実とクイズを生成します。精度を高め、リアルタイムの空間データを活用するには、Maps Grounding Lite を統合します。このサービスは、Gemini を Google Maps Platform からのライブデータに直接接続します。
- AI Studio で次のプロンプトを送信します。
Add a toggle to make the quiz more difficult. Call this "Hyperlocal mode". When enabled, use the Google Maps Grounding Lite service with the Gemini API to fetch more local data, making the quiz more difficult.
Add information for the user so they know that Hyperlocal Mode is more difficult and how it works.
- プレビュー ウィンドウで [ハイパーローカル モード] 切り替えをテストして、グラウンディングされたクイズの生成を確認します。
LLM は、特定の営業時間、最近の開店、正確なプレイス ID をハルシネーションすることがあります。Maps Grounding Lite は、実際の Google マップの場所エンティティと属性を使用して回答をグラウンディングし、トリビアの質問に対する事実の精度を大幅に向上させます。
7. Cloud Run にデプロイする
プロトタイプが完全に機能したら、AI Studio から直接 Cloud Run に公開サーバーレス コンテナとしてデプロイします。
- Google AI Studio の右上にある [公開] ボタンをクリックして、デプロイ ウィザードを開始します。
- [開始] をクリックして、Google Cloud プロジェクトを構成します。
- ターゲットの Google Cloud プロジェクトのプルダウンが、目的のデプロイ プロジェクトと一致していることを確認します。
- AI Studio は、Cloud Run インスタンスの一意のサービス ID を自動的に生成します。
- [アプリを公開] をクリックします。
- コンテナのビルド、登録、サービス デプロイはバックグラウンドで実行されます。通常、このプロセスは 2 ～ 4 分で完了します。
- デプロイが完了したら、生成されたアプリの URL をコピーして、ブラウザタブでライブ アプリケーションのリンクにアクセスします。
8. セキュリティと運用のベスト プラクティスを確認する
このアプリをプロトタイプから本番環境に移行する際は、次のセキュリティの柱を念頭に置いてください。
1. Google Maps API キーの制限
本番環境の Google Maps API キーを無制限のままにしないでください。Google Cloud コンソールで:
- API の制限: 特定の API（Maps JavaScript API、Geocoding API、Places API）のみを呼び出せるようにキーを制限します。
- アプリケーションの制限: HTTP リファラー（例:
https://yourgame.com/*）を使用してキーを制限し、サードパーティ サイトでの不正使用を防ぎます。
2. Gemini API キーの保護
Gemini API キーをクライアントサイドの JavaScript で公開しないでください。
- 本番環境のアーキテクチャ: プロキシとして機能する軽量のバックエンド サービス（Cloud Run や Cloud Functions など）を構築します。フロントエンドがバックエンド（
/api/get-fun-facts）を呼び出し、バックエンドが環境変数（GEMINI_API_KEY）を使用して Google AI Studio と安全に通信します。
9. リソースをクリーンアップする
予期しない課金が発生しないようにするか、ワークスペース リソースをクリーンアップするには:
- Google AI Studio で、[アプリ] ページに移動します。
- グリッドまたはリストでアプリケーションを見つけます。
- ゴミ箱アイコンをクリックして、アプリの状態を削除し、Cloud Run からサービスの公開を取り消します。
- 標準プロジェクトを使用してデプロイし、すべてのリソースを完全にシャットダウンする場合は、Google Cloud コンソールのプロジェクト設定に移動して、基盤となるプロジェクトを削除します。
10. まとめ
おめでとうございます！Google AI Studio から AI を活用した地理空間ウェブ アプリケーションを設計、開発、デプロイしました。Google Maps Platform API を使用して、現実世界のデータに基づいたインタラクティブなゲームを正常に作成しました。
こちらのリンクにアクセスして、Builder Journey を完了したバッジを獲得しましょう。
次のラボに進むには、goo.gle/builders にアクセスしてください。