このページは Cloud Translation API によって翻訳されました。

Gemini API 用の Firebase Extensions を使用して AI 搭載ウェブアプリを構築する

1. 始める前に

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

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

前提条件

Node.js、Next.js、TypeScript に関する知識。

学習内容

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

必要なもの

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

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

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

ウェブアプリ

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

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

Firebase サービス

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

Service	使用の理由
Firebase Authentication	ウェブアプリで Google でログイン機能を使用している。
Cloud Firestore	テキストデータを Cloud Firestore に保存し、Firebase Extensions で処理します。
Cloud Storage for Firebase	Cloud Storage との間で読み取りと書き込みを行い、ウェブアプリ内に画像ギャラリーを表示します。
Firebase セキュリティルール	セキュリティルールをデプロイすると、Firebase サービスへのアクセスを保護できます。
Firebase Extensions	AI 関連の Firebase Extensions を構成してインストールし、結果をウェブアプリ内に表示します。
ボーナス: Firebase Local Emulator Suite	必要に応じて、クラウド内の多くのライブ Firebase サービスに接続する代わりに、Local Emulator Suite を使用してアプリをローカルで実行できます。
ボーナス: Firebase Hosting	必要に応じて、Firebase Hosting を使用してウェブアプリを提供できます（GitHub リポジトリなし）。
ボーナス: Firebase App Hosting	必要に応じて、新しい Firebase App Hosting を使用して、動的 Next.js ウェブアプリ（GitHub リポジトリに接続）を提供できます。

Firebase Extensions

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

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

3. 開発環境を設定する

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

ターミナルで、Node.js バージョン 20.0.0 以降がインストールされていることを確認します。
```
node -v
```
Node.js バージョン 20.0.0 以降がインストールされていない場合は、最新の LTS バージョンをダウンロードしてインストールします。

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

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

github.com/FirebaseExtended/codelab-gemini-api-extensions のテンプレートを使用して、新しいリポジトリを作成します。
作成した 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 をインストールする

Firebase CLI がインストールされており、バージョンが 13.6 以降であることを確認します。
```
firebase --version
```
Firebase CLI がインストールされているが、バージョンが 13.6 以降でない場合は、更新します。
```
npm update -g firebase-tools
```
Firebase CLI がインストールされていない場合は、
```
npm install -g firebase-tools
```
インストールします。

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

Firebase にログインする

ターミナルで codelab-gemini-api-extensions フォルダに移動し、Firebase にログインします。
```
cd codelab-gemini-api-extensions
firebase login
```
ターミナルに Firebase にすでにログインしているというメッセージが表示された場合は、この Codelab のFirebase プロジェクトを設定するセクションに進んでください。
ターミナルで、Firebase にデータを収集させるかどうかに応じて、Y または N を入力します。（この Codelab ではどちらのオプションでも使用できます）。
ブラウザで Google アカウントを選択し、[許可] をクリックします。

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

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

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

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

Google アカウントを使用して Firebase コンソールにログインします。
[プロジェクトを作成] をクリックし、プロジェクト名（AI Extensions Codelab など）を入力します。
Firebase プロジェクトに自動的に割り当てられたプロジェクト ID を覚えておいてください（または、編集アイコンをクリックして、お好みのプロジェクト ID を設定してください）。この ID は、Firebase CLI で Firebase プロジェクトを識別するために後で必要になります。ID を忘れた場合は、[プロジェクトの設定] でいつでも確認できます。
[続行] をクリックします。
Firebase の利用規約が表示されたら、内容を読み、同意し、[続行] をクリックします。
この Codelab では Google アナリティクスは不要であるため、Google アナリティクスのオプションをオフに切り替えます。
[プロジェクトを作成] をクリックし、プロジェクトがプロビジョニングされるのを待ってから、[続行] をクリックします。

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 プランにアップグレードする手順は次のとおりです。

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

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

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

Firebase プロジェクトに作成されたウェブアプリ

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

Firebase Authentication を設定する

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

Cloud Firestore を設定する

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

Cloud Storage for Firebase を設定する

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

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

5. 「Build Chatbot with the Gemini API」拡張機能をセットアップする

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

[Build Chatbot with the Gemini API] 拡張機能に移動します。
[Firebase コンソールでインストール] をクリックします。
Firebase プロジェクトを選択し、[次へ] をクリックします。
[有効にした API と作成されたリソースを確認する] セクションで、提案されたサービスの横にある [有効にする] をクリックし、[次へ] をクリックします。
提案された権限については、[付与] を選択し、[次へ] をクリックします。
拡張機能を構成します。
1. [Gemini API プロバイダ] メニューで、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. 他の値はすべてデフォルト値のままにします。
[拡張機能をインストール] をクリックし、拡張機能がインストールされるまで待ちます。

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

この Codelab の目標は、ウェブアプリで「Build Chatbot with the Gemini API」拡張機能を操作することですが、まず Firebase コンソールで拡張機能を試して、拡張機能の仕組みを理解することをおすすめします。

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

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

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

Firestore ドキュメント内の言語モデルレスポンス

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

messages コレクションで、 [ドキュメントを追加] をクリックします。
[ドキュメント ID] テキストボックスで、[自動 ID] をクリックします。
[フィールド] テキストボックスに「prompt」と入力します。
[値] テキストボックスに「And now, vegetables」と入力します。
[保存] をクリックし、数秒待ちます。messages コレクションに追加したドキュメントに、クエリの response が追加されました。

このレスポンスを生成する際に、基盤となる Gemini モデルは、前のクエリの過去の知識を使用しました。

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

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

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

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

firebase use YOUR_PROJECT_ID

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

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

セキュリティルールをデプロイするには、ターミナルで次のコマンドを実行します。
```
firebase deploy --only firestore:rules,storage
```
クロスサービスルールを使用する IAM ロールを Cloud Storage に付与するかどうかを尋ねられたら、Y または N を入力します。（この Codelab ではどちらのオプションでも使用できます）。

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

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

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

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

ターミナルで依存関係をインストールしてから、ウェブアプリを実行します。
```
npm install
npm run dev
```
ブラウザでローカルにホストされている Hosting URL に移動して、ウェブアプリを表示します。たとえば、ほとんどの場合、URL は http://localhost:3000/ などです。

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

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

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

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

ウェブアプリの chatbot で使用される基盤となる Gemini モデルは、アプリを使用している参加者向けの回答を生成するときに、カンファレンス固有の詳細を把握する必要があります。これらのレスポンスを制御して調整する方法はたくさんありますが、この Codelab のサブセクションでは、（ウェブアプリのユーザーからの入力だけでなく）最初のプロンプトで「コンテキスト」を提供するという非常に基本的な方法を説明します。

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

chatbot は、src/app/lib/context.md で提供されたコンテキストに基づいて知識を使用して応答します。特定のリクエストを入力していなくても、基盤となる Gemini モデルは、このコンテキストと現在の日時に基づいてパーソナライズされたおすすめを生成します。フォローアップの質問を指定することで、より深く掘り下げることができます。

この拡張コンテキストは chatbot にとって重要ですが、ウェブアプリのユーザーには表示しないでください。非表示にする方法は次のとおりです。

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

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

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

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

ボーナス: Firebase Local Emulator Suite を使用してウェブアプリを実行する

Firebase Local Emulator Suite を使用すると、ウェブアプリのほとんどの機能をローカルでテストできます。

ターミナルで、ウェブアプリのルートにあることを確認します。
次のコマンドを実行して Firebase Local Emulator Suite をインストールし、実行します。
```
firebase init emulators
firebase emulators:start
```

7. 「Multimodal Tasks with the Gemini API」拡張機能をセットアップする

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

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

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

「Multimodal Tasks with the Gemini API」拡張機能に移動します。
[Firebase コンソールでインストール] をクリックします。
Firebase プロジェクトを選択します。
[次へ > 次へ > 次へ] をクリックして、[拡張機能を構成する] セクションが表示されるまで進みます。
1. [Gemini API プロバイダ] メニューで、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. 他の値はすべてデフォルト値のままにします。
[拡張機能をインストール] をクリックし、拡張機能がインストールされるまで待ちます。

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

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

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

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

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

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

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

gallery コレクションに、クエリへのレスポンスを含むドキュメントが追加されました。

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

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

この実装方法のコードを確認するには、ウェブアプリのコードベースの src/app/gallery/page.tsx をご覧ください。

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

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

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

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

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

ターミナルで、次のコマンドを実行して Firebase Hosting を初期化します。
```
firebase experiments:enable webframeworks
firebase init hosting
```
プロンプト Detected an existing Next.js codebase in your current directory, should we use this? の場合は、Y を押します。
プロンプト In which region would you like to host server-side content, if applicable? で、デフォルトのロケーションまたはこの Codelab の前半で使用したロケーションを選択します。Enter キー（macOS の場合は return）を押します。
プロンプト Set up automatic builds and deploys with GitHub? の場合は、N を押します。
次のコマンドを実行して、ウェブアプリを Hosting にデプロイします。
```
firebase deploy --only hosting
```

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

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

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

変更を GitHub に commit します。
Firebase コンソールで、Firebase プロジェクト内の [アプリのホスティング] に移動します。
[使ってみる] > [GitHub に接続] をクリックします。
GitHub アカウントとリポジトリを選択します。[Next] をクリックします。
[Deployment setting > Root directory] で、ソースコードを含むフォルダの名前を入力します（package.json がリポジトリのルートディレクトリにない場合）。
[ライブブランチ] で、GitHub リポジトリの [main] ブランチを選択します。[Next] をクリックします。
バックエンドのID を入力します（例: chatbot）。
[Finish and Deploy] をクリックします。

新しいデプロイが準備されるまで数分かかることがあります。デプロイのステータスは、Firebase コンソールの [App Hosting] セクションで確認できます。

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

9. まとめ

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

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

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

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

コードにすぐに飛び込むのではなく、Firestore または Cloud Storage から提供した入力に基づいて、これらの genAI 拡張機能の仕組みを理解しました。これは、拡張機能の出力をデバッグする際に特に便利です。

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

Firebase Extensions を使用して Gemini モデルの一部の関数にアクセスする、AI を活用したウェブアプリを構築しました。

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

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

次のステップ

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