Firebase Extensions for Gemini API を使用して AI を活用したウェブアプリを構築する

1. 始める前に

Firebase Extensions を使用すると、最小限のコードで、あらかじめパッケージ化された機能（AI を活用した機能など）をアプリに追加できます。この Codelab では、2 つの Firebase 拡張機能をウェブアプリに統合して、Gemini API を活用し、提供されたコンテキストとエンドユーザーの入力に基づいて、画像の説明、要約、パーソナライズされたおすすめを生成する方法について説明します。

この Codelab では、Firebase Extensions を使用して魅力的なユーザー エクスペリエンスを提供し、AI を活用したウェブアプリを構築する方法を学びます。

前提条件

• Node.js、Next.js、TypeScript の知識。

学習内容

• Gemini API 用の Firebase Extensions を使用して言語を処理する方法。
• Cloud Functions for Firebase を使用して、言語モデルの拡張コンテキストを作成する方法。
• JavaScript を使用して Firebase Extensions によって生成された出力にアクセスする方法。

必要なもの

• 任意のブラウザ（Google Chrome など）
• コードエディタとターミナルを備えた開発環境
• Firebase プロジェクトの作成と管理に使用する Google アカウント

注: この Codelab では、Cloud 請求先アカウントを必要とする Firebase サービスと Google サービスを使用します。Firebase と Google Cloud を初めて使用する場合は、$300 のクレジットと無料トライアル用 Cloud 請求先アカウントを利用してサービスを試せるかどうか確認してください。それ以外の場合は、Cloud 請求先アカウントを設定するためにお支払い方法（クレジット カードなど）を指定する必要があります（お支払い方法の詳細については、Cloud Billing のドキュメントをご覧ください）。

2. ウェブアプリ、Firebase サービス、拡張機能を確認する

このセクションでは、この Codelab で作成するウェブアプリを確認し、使用する Firebase サービスと Firebase Extensions について学びます。

ウェブアプリ

この Codelab では、Friendly Conf というウェブアプリを作成します。

Friendly Conference のスタッフは、AI を使用して参加者に快適でパーソナライズされたユーザー エクスペリエンスを提供することにしました。完成したカンファレンス アプリは、マルチモーダル生成 AI モデル（大規模言語モデルまたは LLM とも呼ばれます）を搭載した会話型 AI チャットボットを参加者に提供します。このチャットボットは、カンファレンスのスケジュールとトピックに合わせて、一般的なトピックに関する質問に答えることができます。chatbot は、過去のコンテキストと、現在の日時、Friendly Conf のトピックとスケジュールに関する知識を備えているため、応答にこれらのコンテキストをすべて考慮できます。

注: これは、多くの手順を含む大規模な Codelab です。この Codelab を最大限に活用するには:

• 休憩を挟みながら、自分のペースで進めましょう。
• コードを扱う際は、考えずにコピー＆ペーストするのではなく、コードの内容と仕組みを理解するようにしてください。
• 行き詰まった場合は、手順をさかのぼって最後に動作した状態に戻り、各手順を正確に完了していることを確認してください。
• Codelab またはそのコードにバグを見つけた場合は、GitHub で問題を報告してください。

Firebase サービス

この Codelab では、多くの Firebase サービスと機能を使用します。それらのほとんどのスターター コードは提供されています。次の表に、使用するサービスとその理由を示します。

サービス	使用の理由
Firebase Authentication	ウェブアプリで Google でログイン機能を使用している。
Cloud Firestore	テキストデータは Cloud Firestore に保存され、Firebase Extensions によって処理されます。
Cloud Storage for Firebase	Cloud Storage から読み書きして、ウェブアプリ内に画像ギャラリーを表示します。
Firebase セキュリティ ルール	セキュリティ ルールをデプロイして、Firebase サービスへのアクセスを保護します。
Firebase Extensions	AI 関連の Firebase Extensions を構成してインストールし、結果をウェブアプリ内に表示します。
ボーナス: Firebase Hosting	必要に応じて、Firebase Hosting を使用してウェブアプリを提供できます（GitHub リポジトリなし）。
ボーナス: Firebase App Hosting	必要に応じて、新しい効率化された Firebase App Hosting を使用して、動的な Next.js ウェブアプリ（GitHub リポジトリに接続）を提供できます。

Firebase Extensions

この Codelab で使用する Firebase Extensions は次のとおりです。

• Gemini API を使用して Chatbot を構築する
• Gemini API を使用したマルチモーダル タスク

拡張機能は、Firebase プロジェクトで発生したイベントに応答するため、便利です。この Codelab で使用する両方の拡張機能は、Cloud Firestore の事前構成されたコレクションで新しいドキュメントを作成すると応答します。

3. 開発環境を設定する

Node.js バージョンを確認する

1. ターミナルで、Node.js バージョン 20.0.0 以降がインストールされていることを確認します。

   node -v
   

2. Node.js バージョン 20.0.0 以降がない場合は、最新の LTS バージョンをダウンロードしてインストールします。

Codelab のソースコードを取得する

GitHub アカウントをお持ちの場合:

1. github.com/FirebaseExtended/codelab-gemini-api-extensions のテンプレートを使用して、新しいリポジトリを作成します。
2. 作成したばかりの Codelab の GitHub リポジトリのクローンを作成します。

   git clone https://github.com/<your-github-handle>/codelab-gemini-api-extensions
   

git がインストールされていない場合や、新しいリポジトリを作成したくない場合:

GitHub リポジトリを zip ファイルとしてダウンロードします。

フォルダ構造を確認する

ルートフォルダには、簡略化された手順でウェブアプリを実行するためのクイック スタートを提供する README.md ファイルが含まれています。ただし、初めて学習する場合は、この Codelab（クイックスタートではなく）を完了する必要があります。この Codelab には、最も包括的な手順が記載されているためです。

この Codelab の手順に沿ってコードを正しく適用できたかどうか不明な場合は、end git ブランチでソリューション コードを確認できます。

Firebase CLI をインストールする

1. Firebase CLI がインストールされており、バージョンが 13.6 以降であることを確認します。

   firebase --version
   

2. Firebase CLI がインストールされているが、バージョンが 13.6 以降でない場合は、更新します。

   npm update -g firebase-tools
   

3. Firebase CLI がインストールされていない場合は、インストールします。

   npm install -g firebase-tools
   

権限エラーのため Firebase CLI を更新またはインストールできない場合は、npm のドキュメントを参照するか、別のインストール オプションを使用してください。

Firebase にログインする

1. ターミナルで、codelab-gemini-api-extensions フォルダに移動し、Firebase にログインします。

   cd codelab-gemini-api-extensions
   firebase login
   

   端末に Firebase にすでにログインしていると表示された場合は、この Codelab のFirebase プロジェクトを設定するセクションに進んでください。
2. ターミナルで、Firebase にデータを収集させるかどうかによって、Y または N を入力します。（この Codelab ではどちらのオプションでも動作します）
3. ブラウザで Google アカウントを選択し、[許可] をクリックします。

4. Firebase プロジェクトを設定する

このセクションでは、Firebase プロジェクトを設定し、Firebase ウェブアプリを登録します。この Codelab では、後ほどサンプル ウェブアプリで使用される Firebase サービスも有効にします。

このセクションの手順はすべて、Firebase コンソールで行います。

Firebase プロジェクトを作成する

1. 前の手順で使用したのと同じ Google アカウントを使用して、Firebase コンソールにログインします。
2. ボタンをクリックして新しいプロジェクトを作成し、プロジェクト名（例: AI Extensions Codelab）を入力します。
   

   このプロジェクト名は Firebase インターフェースで表示名として使用され、Firebase はこのプロジェクト名に基づいて一意のプロジェクト ID を自動作成します。必要に応じて、ここで編集アイコンをクリックして、任意のプロジェクト ID を設定できます。ただし、プロジェクトの作成後にこの ID を変更することはできません。

   後で Firebase CLI で Firebase プロジェクトを識別するために必要となるため、プロジェクト ID を覚えておいてください。ID を忘れた場合は、後で [プロジェクトの設定] で確認できます。

3. [続行] をクリックします。
4. Firebase の利用規約が表示されたら、内容を読み、同意して [続行] をクリックします。
5. （省略可）Firebase コンソールで AI アシスタンス（「Gemini in Firebase」）を有効にします。
6. この Codelab では Google アナリティクスは必要ないため、Google アナリティクスのオプションをオフに切り替えます。
7. [プロジェクトを作成] をクリックし、プロジェクトのプロビジョニングが完了するまで待ってから、[続行] をクリックします。

Firebase の料金プランをアップグレードする

Firebase Extensions（およびその基盤となるクラウド サービス）と Cloud Storage for Firebase を使用するには、Firebase プロジェクトが従量課金制（Blaze）のお支払いプランに登録されている必要があります。つまり、Cloud 請求先アカウントにリンクされている必要があります。

• Cloud 請求先アカウントには、クレジット カードなどの支払い方法が必要です。
• Firebase と Google Cloud を初めて使用する場合は、$300 のクレジットと無料トライアル用 Cloud 請求先アカウントを利用できるかどうかご確認ください。
• この Codelab をイベントの一環として行う場合は、利用可能な Cloud クレジットがあるかどうかを主催者に確認してください。

また、Firebase プロジェクトで課金が有効になっている場合、拡張機能が Gemini API に対して行う呼び出しに対して課金されます（プロバイダとして Google AI と Vertex AI のどちらを選択しても同様です）。Google AI と Vertex AI の料金についてご確認ください。

プロジェクトを Blaze プランにアップグレードする手順は次のとおりです。

1. Firebase コンソールで、プランをアップグレードします。
2. Blaze プランを選択します。画面の指示に沿って、Cloud 請求先アカウントをプロジェクトにリンクします。
   このアップグレードの一環として Cloud 請求先アカウントを作成する必要があった場合は、Firebase コンソールのアップグレード フローに戻ってアップグレードを完了する必要がある場合があります。

注: この Codelab を完了したら、プロジェクトを料金不要（Spark）のお支払いプランにダウングレードできます。

Firebase プロジェクトにウェブアプリを追加する

1. Firebase プロジェクトの [プロジェクトの概要] 画面に移動し、 [ウェブ] をクリックします。
2. [アプリのニックネーム] テキスト ボックスに、覚えやすいアプリのニックネーム（My AI Extensions など）を入力します。
3. [アプリの登録] > [次へ] > [次へ] > [コンソールに進む] をクリックします。
   この Codelab の後半でホスティング サービスを任意で設定するため、ウェブアプリ フローの「ホスティング」に関連する手順はすべてスキップできます。

これで、これで、新しい Firebase プロジェクトにウェブアプリが登録されました。

Firebase Authentication を設定する

1. 左側のナビゲーション パネルを使用して [認証] に移動します。
2. [開始] をクリックします。
3. [追加のプロバイダ] 列で、[Google > 有効にする] をクリックします。
4. [プロジェクトの公開名] テキスト ボックスに、My AI Extensions Codelab などのわかりやすい名前を入力します。
5. [プロジェクトのサポートメール] メニューで、メールアドレスを選択します。
6. [保存] をクリックします。

Cloud Firestore を設定する

1. Firebase コンソールの左側のパネルで [ビルド] を展開し、[Firestore データベース] を選択します。
2. [データベースを作成] をクリックします。
3. [データベース ID] は (default) に設定したままにします。
4. データベースの場所を選択し、[次へ] をクリックします。
   実際のアプリでは、ユーザーに近い場所を選択します。
5. [テストモードで開始] をクリックします。セキュリティ ルールに関する免責条項を確認します。
   この Codelab の後半で、データを保護するためのセキュリティ ルールを追加します。データベースのセキュリティ ルールを追加せずに、アプリを配布または公開しないでください。
6. [作成] をクリックします。

Cloud Storage for Firebase を設定する

1. Firebase コンソールの左側のパネルで [ビルド] を展開し、[Storage] を選択します。
2. [開始] をクリックします。
3. デフォルトの Storage バケットのロケーションを選択します。
   US-WEST1、US-CENTRAL1、US-EAST1 のバケットは、Google Cloud Storage の「無料枠」を利用できます。他のすべてのロケーションのバケットは、Google Cloud Storage の料金と使用量に従います。
4. [テストモードで開始] をクリックします。セキュリティ ルールに関する免責条項を確認します。
   この Codelab の後半で、データを保護するためのセキュリティ ルールを追加します。Storage バケットのセキュリティ ルールを追加せずに、アプリを配布または公開しないでください。
5. [作成] をクリックします。

この Codelab の次のセクションでは、この Codelab 全体でウェブアプリで使用する 2 つの Firebase 拡張機能をインストールして構成します。

5. 「Build Chatbot with the Gemini API」拡張機能を設定する

注: この Codelab で使用する Firebase 拡張機能については、十分にドキュメント化されています。詳細については、各拡張機能の該当するページ（特に [スタートガイド]、[構成可能なパラメータ]、[課金] の各ページ）をご覧ください。

「Build Chatbot with the Gemini API」拡張機能をインストールする

1. 「Build Chatbot with the Gemini API」拡張機能に移動します。
2. [Firebase コンソールにインストール] をクリックします。
3. Firebase プロジェクトを選択し、[次へ] をクリックします。
4. [有効にした API と作成したリソースを確認する] セクションで、推奨されたサービスの横にある [有効にする] をクリックし、[次へ] をクリックします。
5. 提案された権限については、[許可] を選択し、[次へ] をクリックします。
6. 拡張機能を構成します。
   1. [Gemini API Provider] メニューで、Google AI または Vertex AI のどちらの Gemini API を使用するかを選択します。Firebase を使用するデベロッパーには、Vertex AI の使用をおすすめします。
   2. [Firestore コレクションのパス] テキスト ボックスに「users/{uid}/messages」と入力します。
      この Codelab の以降の手順では、このコレクションにドキュメントを追加すると、拡張機能が Gemini API を呼び出すようになります。
   3. [Cloud Functions のロケーション] メニューで、優先するロケーション（Iowa (us-central1) や、Firestore データベースで以前に指定したロケーションなど）を選択します。
   4. 他の値はすべてデフォルト値のままにします。
7. [拡張機能をインストール] をクリックし、拡張機能がインストールされるまで待ちます。

注: 拡張機能のインストール中は、お気に入りの猫動画の再生リストを視聴していても構いません。

ヒント: インストールに失敗した場合は、インストールを再試行してください。プロジェクトで、サービス アカウントの作成と権限の割り当てに関連するタイミングの問題が発生することがあります。

「Build Chatbot with the Gemini API」拡張機能を試す

この Codelab の目標は、ウェブアプリで「Gemini API を使用してチャットボットを構築する」拡張機能を操作することですが、まず Firebase コンソールで試してみることで、拡張機能の仕組みを理解するのに役立ちます。

この拡張機能は、Firebase コンソールで users/{uid}/discussion/{discussionId}/messages コレクションに Firestore ドキュメントが作成されるたびにトリガーされます。

1. Firebase コンソールで [Firestore] に移動し、最初の列にある [コレクションを開始] をクリックします。
2. [コレクション ID] テキスト ボックスに「users」と入力し、[次へ] をクリックします。
3. [ドキュメント ID] テキスト ボックスで [自動 ID] をクリックし、[保存] をクリックします。
4. users コレクションで、[コレクションを開始] をクリックします。
5. [コレクション ID] テキスト ボックスに「messages」と入力し、[次へ] をクリックします。
   1. [ドキュメント ID] テキスト ボックスで、[自動 ID] をクリックします。
   2. [フィールド] テキスト ボックスに「prompt」と入力します。
   3. [値] テキスト ボックスに「Tell me 5 random fruits」と入力します。
6. [保存] をクリックして数秒待ちます。

このドキュメントを追加すると、拡張機能がトリガーされ、Gemini API が呼び出されます。messages コレクションに追加したドキュメントには、prompt だけでなく、モデルの response もクエリに含まれるようになりました。

別のドキュメントを messages コレクションに追加して、拡張機能をもう一度トリガーします。

1. messages コレクションで、 [ドキュメントを追加] をクリックします。
2. [ドキュメント ID] テキスト ボックスで、[自動 ID] をクリックします。
3. [フィールド] テキスト ボックスに「prompt」と入力します。
4. [値] テキスト ボックスに「And now, vegetables」と入力します。
5. [保存] をクリックして数秒待ちます。messages コレクションに追加したドキュメントに、クエリへの response が含まれるようになりました。
   
   この回答を生成する際、基盤となる Gemini モデルは以前のクエリの履歴知識を使用しました。

6. ウェブアプリを設定する

ウェブアプリを実行するには、ターミナルでコマンドを実行し、コード エディタ内でコードを追加する必要があります。

Firebase プロジェクトに対して実行するように Firebase CLI を設定する

ターミナルで次のコマンドを実行して、Firebase プロジェクトを使用するように CLI に指示します。

firebase use YOUR_PROJECT_ID

ヒント: プロジェクト ID を忘れた場合は、Firebase コンソールの [プロジェクトの設定] でいつでも確認できます。

Firestore と Cloud Storage のセキュリティ ルールをデプロイする

この Codelab のコードベースには、Firestore セキュリティ ルールと Cloud Storage セキュリティ ルールのセットがすでに記述されています。これらのセキュリティ ルールをデプロイすると、Firebase プロジェクトの Firebase サービスが不正使用から保護されます。

1. セキュリティ ルールをデプロイするには、ターミナルで次のコマンドを実行します。

   firebase deploy --only firestore:rules,storage
   

2. クロスサービス ルールを使用するために Cloud Storage に IAM ロールを付与するかどうかを尋ねられたら、Y または N を入力します。（この Codelab ではどちらのオプションでも動作します）

ウェブアプリを Firebase プロジェクトに接続する

ウェブアプリのコードベースは、データベースやストレージなどに使用する Firebase プロジェクトを認識する必要があります。これを行うには、アプリのコードベースに Firebase 構成を追加します。

1. Firebase 構成を取得します。
   1. Firebase コンソールで、Firebase プロジェクト内の [プロジェクトの設定] に移動します。
   2. [マイアプリ] セクションまで下にスクロールし、登録済みのウェブアプリを選択します。
   3. [SDK の設定と構成] ペインで、firebaseConfig 定数を含む initializeApp コード全体をコピーします。
2. ウェブアプリのコードベースに Firebase 構成を追加します。
   1. コードエディタで src/lib/firebase/firebase.config.js ファイルを開きます。
   2. ファイル内のすべてを選択し、コピーしたコードに置き換えます。
   3. ファイルを保存します。

ブラウザでウェブアプリをプレビューする

1. ターミナルで、依存関係をインストールしてからウェブアプリを実行します。

   npm install
   npm run dev
   

2. ブラウザで、ローカルでホストされている Hosting URL に移動して、ウェブアプリを表示します。たとえば、ほとんどの場合、URL は http://localhost:3000/ のようになります。

ウェブアプリの chatbot を使用する

注: localhost は、Firebase Authentication のデフォルトの承認済みドメインです。別のもの（127.0.0.1 など）を使用する場合は、ホスト名を [承認済みドメイン] リストに追加する必要があります。

1. ブラウザで、ローカルで実行されている Friendly Conf ウェブアプリのタブに戻ります。
2. [Google でログイン] をクリックし、必要に応じて Google アカウントを選択します。
3. ログインすると、空のチャット ウィンドウが表示されます。
4. 挨拶文（hi など）を入力して、[送信] をクリックします。
5. チャットボットが応答するまで数秒待ちます。

アプリの chatbot から一般的な回答が返されます。

アプリ用に chatbot を特化させる

ウェブアプリのチャットボットで使用される基盤となる Gemini モデルは、アプリを使用する参加者向けにモデルが回答を生成する際に、会議固有の詳細情報を把握する必要があります。これらの回答を制御および誘導する方法はたくさんありますが、この Codelab のサブセクションでは、最初のプロンプトで「コンテキスト」を提供することで（ウェブアプリのユーザーからの入力のみではなく）、非常に基本的な方法を示します。

1. ブラウザのウェブアプリで、赤い [x] ボタン（チャット履歴のメッセージの横）をクリックして会話をクリアします。
2. コードエディタで src/app/page.tsx ファイルを開きます。
3. 下にスクロールし、93 行目付近にある prompt: userMsg というコードを次のコードに置き換えます。
   prompt: preparePrompt(userMsg, messages),
4. ファイルを保存します。
5. ブラウザで実行中のウェブアプリに戻ります。
6. もう一度、挨拶（hi など）を入力して、[送信] をクリックします。
7. チャットボットが応答するまで数秒待ちます。

chatbot は、src/app/lib/context.md で提供されたコンテキストに基づいて知識を応答します。具体的なリクエストを入力していなくても、基盤となる Gemini モデルは、このコンテキストと現在の日時に基づいてパーソナライズされたおすすめを生成します。これで、追加の質問を指定して、さらに詳しく調べることができます。

この拡張コンテキストはチャットボットにとって重要ですが、ウェブアプリのユーザーには表示すべきではありません。非表示にする方法は次のとおりです。

1. コードエディタで src/app/page.tsx ファイルを開きます。
2. 下にスクロールし、56 行目付近にある ...doc.data(), というコードを次のコードに置き換えます。
   ...prepareMessage(doc.data()),
3. ファイルを保存します。
4. ブラウザで実行中のウェブアプリに戻ります。
5. ページを再読み込みします。

履歴コンテキストを使用して chatbot と会話する機能も試すことができます。

1. [メッセージを入力] テキスト ボックスに、次のような質問を入力します。Any other interesting talks about AI?Chatbot から回答が返されます。
2. [メッセージを入力] テキスト ボックスに、前の質問に関連するフォローアップの質問を入力します。Give me a few more details about the last one.

chatbot は、履歴情報を使用して応答します。チャット履歴がコンテキストの一部になったため、chatbot はフォローアップの質問を理解します。

7. 「Gemini API によるマルチモーダル タスク」拡張機能をセットアップする

注: この Codelab で使用する Firebase 拡張機能については、十分にドキュメント化されています。詳細については、各拡張機能の該当するページ（特に [スタートガイド]、[構成可能なパラメータ]、[課金] の各ページ）をご覧ください。

「Gemini API を使用したマルチモーダル タスク」拡張機能は、テキスト プロンプトとサポートされているファイル URL または Cloud Storage URL を含むマルチモーダル プロンプトを使用して Gemini API を呼び出します（Google AI Gemini API も、基盤となるファイル URL インフラストラクチャとして Cloud Storage URL を使用します）。この拡張機能は、Cloud Firestore ドキュメントの値を置き換えてテキスト プロンプトをカスタマイズするための handlebars 変数もサポートしています。

アプリで Cloud Storage バケットに画像をアップロードするたびに、URL を生成してその URL を新しい Cloud Firestore ドキュメントに追加できます。これにより、拡張機能がトリガーされ、マルチモーダル プロンプトが作成されて Gemini API が呼び出されます。この Codelab のソースコードには、画像をアップロードして URL を Firestore ドキュメントに書き込むコードがすでに用意されています。

「Gemini API を使用したマルチモーダル タスク」拡張機能をインストールする

1. 「Multimodal Tasks with the Gemini API」拡張機能に移動します。
2. [Firebase コンソールにインストール] をクリックします。
3. Firebase プロジェクトを選択します。
4. [次へ > 次へ > 次へ] をクリックして、[拡張機能を構成する] セクションが表示されるまで進みます。
   1. [Gemini API Provider] メニューで、Google AI または Vertex AI のどちらの Gemini API を使用するかを選択します。Firebase を使用するデベロッパーには、Vertex AI の使用をおすすめします。
   2. [Firestore コレクションのパス] テキスト ボックスに「gallery」と入力します。
   3. [プロンプト] テキスト ボックスに「Please describe the provided image; if there is no image, say "no image"」と入力します。
   4. [Image field] テキスト ボックスに「image」と入力します。
   5. [Cloud Functions のロケーション] メニューで、優先するロケーション（Iowa (us-central1) や、Firestore データベースで以前に指定したロケーションなど）を選択します。
   6. 他の値はすべてデフォルト値のままにします。
5. [拡張機能をインストール] をクリックし、拡張機能がインストールされるまで待ちます。

注: 拡張機能のインストール中は、お気に入りの猫動画の再生リストを視聴していても構いません。

「Multimodal Tasks with the Gemini API」拡張機能を試す

この Codelab の目標は、ウェブアプリで「Gemini API によるマルチモーダル タスク」拡張機能を操作することですが、まず Firebase コンソールで試してみることで、拡張機能の仕組みを理解するのに役立ちます。

この拡張機能は、Firebase コンソールで users/{uid}/gallery コレクションに Firestore ドキュメントが作成されるたびにトリガーされます。次に、拡張機能は Cloud Firestore ドキュメント内の Cloud Storage 画像 URL を取得し、Gemini API の呼び出しでマルチモーダル プロンプトの一部として渡します。

まず、Cloud Storage バケットに画像をアップロードします。

1. Firebase プロジェクト内の [ストレージ] に移動します。
2. [フォルダを作成] をクリックします。
3. [フォルダ名] テキスト ボックスに「gallery」と入力します。
4. [フォルダを追加] をクリックします。
5. gallery フォルダで、[ファイルをアップロード] をクリックします。
6. アップロードする JPEG 画像ファイルを選択します。

次に、イメージの Cloud Storage URL を Firestore ドキュメント（拡張機能のトリガー）に追加します。

1. Firebase プロジェクト内の [Firestore] に移動します。
2. 最初の列の [コレクションを開始] をクリックします。
3. [コレクション ID] テキスト ボックスに「gallery」と入力し、[次へ] をクリックします。
4. コレクションにドキュメントを追加します。
   1. [ドキュメント ID] テキスト ボックスで、[自動 ID] をクリックします。
   2. [フィールド] テキスト ボックスに「image」と入力します。[値] ボックスに、アップロードしたばかりの画像の Storage location URI を入力します。
5. [フィールドを追加] をクリックします。
6. [フィールド] テキスト ボックスに「published」と入力します。[型] ボックスで [boolean] を選択します。[値] ボックスで true を選択します。
7. [保存] をクリックして数秒待ちます。

gallery コレクションに、クエリに対するレスポンスを含むドキュメントが含まれるようになりました。

ウェブアプリの画像ギャラリーを使用する

1. ブラウザで、ローカルで実行されている Friendly Conf ウェブアプリのタブに戻ります。
2. ナビゲーション タブの [ギャラリー] をクリックします。
3. アップロードされた画像と AI 生成の説明のギャラリーが表示されます。Storage バケットの gallery フォルダに、以前にアップロードした画像が表示されます。
4. [アップロード] ボタンをクリックして、別の JPEG 画像を選択します。
5. 数秒待つと、画像がギャラリーに表示されます。しばらくすると、新たにアップロードされた画像の AI 生成の説明も表示されます。

この実装方法のコードについて理解したい場合は、ウェブアプリのコードベースの src/app/gallery/page.tsx をご覧ください。

ヒント: 画像の説明が生成されず、PERMISSION_DENIED エラーが表示された場合は、拡張機能をアンインストールして再インストールし、使用するサービス アカウントに正しい権限を設定できるようにします。

8. ボーナス: アプリケーションをデプロイする

Firebase では、ウェブ アプリケーションをデプロイする方法がいくつか用意されています。この Codelab では、次のいずれかのオプションを選択します。

• オプション 1: Firebase Hosting - 独自の GitHub リポジトリを作成しない（ソースコードがローカル マシンにのみ保存されている）場合は、このオプションを使用します。
• オプション 2: Firebase App Hosting - 独自の GitHub リポジトリに変更を push するたびに自動デプロイを行う場合は、このオプションを使用します。この新しい Firebase サービスは、動的な Next.js アプリケーションと Angular アプリケーションのニーズに合わせて特別に構築されています。

オプション 1: Firebase Hosting を使用してデプロイする

独自の GitHub リポジトリを作成しない場合（ソースコードがローカルマシンにのみ保存されている場合）は、このオプションを使用します。

1. ターミナルで、次のコマンドを実行して Firebase Hosting を初期化します。

   firebase experiments:enable webframeworks
   firebase init hosting
   

2. プロンプト「Detected an existing Next.js codebase in your current directory, should we use this?」が表示されたら、Y キーを押します。
3. プロンプト In which region would you like to host server-side content, if applicable? で、デフォルトのロケーションか、この Codelab の前半で使用したロケーションを選択します。Enter（macOS の場合は return）を押します。
4. プロンプト「Set up automatic builds and deploys with GitHub?」が表示されたら、N キーを押します。
5. 次のコマンドを実行して、ウェブアプリを Hosting にデプロイします。

   firebase deploy --only hosting
   

これで最後です。アプリを更新して新しいバージョンをデプロイする場合は、firebase deploy --only hosting を再実行するだけで、Firebase Hosting がアプリをビルドして再デプロイします。

オプション 2: Firebase App Hosting を使用してデプロイする

独自の GitHub リポジトリに変更を push するたびに自動デプロイを行う場合は、このオプションを使用します。

1. 変更を GitHub に commit します。
2. Firebase コンソールで、Firebase プロジェクト内の [アプリホスティング] に移動します。
3. [Get started] > [Connect to GitHub] をクリックします。
4. [GitHub アカウント] と [リポジトリ] を選択します。[Next] をクリックします。
5. [デプロイ設定 > ルート ディレクトリ] に、ソースコードを含むフォルダの名前を入力します（package.json がリポジトリのルート ディレクトリにない場合）。
6. [ライブブランチ] で、GitHub リポジトリの main ブランチを選択します。[Next] をクリックします。
7. バックエンドの ID を入力します（例: chatbot）。
8. [Finish and Deploy] をクリックします。

新しいデプロイの準備が整うまでに数分かかります。デプロイのステータスは、Firebase コンソールの App Hosting セクションで確認できます。

これ以降、GitHub リポジトリに変更を push するたびに、Firebase App Hosting がアプリを自動的にビルドしてデプロイします。

9. まとめ

これで完了です。この Codelab では多くのことを学びました。

拡張機能のインストールと構成

Firebase コンソールを使用して、生成 AI を使用するさまざまな Firebase 拡張機能を構成してインストールしました。Firebase Extensions を使用すると、Google Cloud サービスとの認証を処理するためのボイラープレート コードや、Firestore と Google Cloud サービスおよび API をリッスンして操作するためのバックエンド Cloud Functions ロジックについて学習して記述する必要がないため、便利です。

Firebase コンソールを使用して拡張機能を試す

コードに直接飛び込むのではなく、Firestore または Cloud Storage を介して提供した入力に基づいて、これらの genAI 拡張機能がどのように機能するかを理解する時間をかけました。これは、拡張機能の出力をデバッグする際に特に役立ちます。

AI を活用したウェブアプリの構築

Firebase Extensions を使用して Gemini モデルのいくつかの機能にアクセスする、AI を活用したウェブアプリを構築しました。

ウェブアプリでは、「Gemini API を使用した Chatbot」拡張機能を使用して、会話のアプリ固有のコンテキストと履歴コンテキストを含むインタラクティブなチャット インターフェースをユーザーに提供します。ここで各メッセージが保存されます。特定のユーザーをスコープとする Firestore ドキュメントで管理できます。

また、このウェブアプリは「Gemini API によるマルチモーダル タスク」拡張機能を使用して、アップロードされた画像の画像説明を自動生成していました。

次のステップ

• Google AI Studio または Vertex AI Studio でプロンプトを試して、大きなコンテキスト ウィンドウを活用します。
• AI 検索拡張生成（RAG）検索について学習する。
• Genkit（新しい AI フレームワーク サービス）を使用して、既存の Firebase アプリに chatbot を追加する方法を示す、自分のペースで進められるコードラボをお試しください。
• Firestore の類似性検索機能と Cloud SQL for PostgreSQL について学習する。
• 関数呼び出しを使用して、既存のアプリを呼び出すようにチャットボットをトレーニングします。