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

1. 始める前に

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

前提条件

• Node.js と JavaScript の知識

学習内容

• AI 関連の拡張機能を使用して、言語入力と動画入力を処理する方法。
• Cloud Functions for Firebase を使用して拡張機能間でパイプラインを形成する方法。
• JavaScript を使用して拡張機能によって生成された出力にアクセスする方法。

必要なもの

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

2. ウェブアプリとその Firebase サービスを確認する

このセクションでは、この Codelab で作成するウェブアプリと、その作成に使用する Firebase について説明します。

Reviewly アプリ

ある T シャツの会社が、ある T シャツに対する長いレビューに圧倒され、全体的な評価が定かではありません。完成した Reviewly ウェブアプリは、各レビューを要約し、各レビューの星評価を表示し、各レビューを使用して商品の総合的な評価を推測します。ユーザーは、要約された各レビューを開いて元のレビューを確認することもできます。

Chatbot アプリ

学校の教職員は、一般的なトピックに関する繰り返しの質問に圧倒されているため、回答を自動化したいと考えています。完成した Chatbot アプリでは、大規模言語モデル（LLM）を搭載した会話型 chatbot が、一般的なトピックに関する質問に回答します。chatbot には過去のコンテキストが保存されているため、生徒が同じ会話で以前に尋ねた質問を回答に反映できます。

Video Hint アプリ

政府機関が動画に音声による説明を追加してユーザー アクセシビリティを改善したいと考えていますが、アノテーションを付ける動画が数百あり、効率的なアプローチが必要です。完成した動画ヒントアプリはプロトタイプであり、担当部門が効果を評価するために審査します。

Video Hint アプリで使用される拡張機能は次のとおりです。

• Cloud Video AI で動画にラベルを付ける拡張機能 - Storage にアップロードされた各動画からラベルを抽出します。
• PaLM API による言語タスク拡張機能 - ラベルを要約してテキストの説明に変換します。
• Convert Text to Speech 拡張機能 - 動画の説明の音声バージョンを作成できます。

3. 開発環境を設定する

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

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

   node -v
   

2. Node.js v20.0.0 以降がない場合は、ダウンロードしてインストールします。

リポジトリをダウンロードする

1. git がインストールされている場合は、Codelab の GitHub リポジトリのクローンを作成します。

   git clone https://github.com/FirebaseExtended/ai-extensions-codelab.git
   

2. git をインストールしていない場合は、GitHub リポジトリを ZIP ファイルとしてダウンロードします。

フォルダ構造を確認する

ローカルマシンで、クローンを作成したリポジトリを見つけて、フォルダ構造を確認します。次の表に、フォルダとその説明を示します。

各フォルダには readme.md ファイルが含まれています。このファイルでは、簡単な手順で各ウェブアプリを実行するためのクイック スタートが提供されます。ただし、初めて学習する場合は、この Codelab を完了することをおすすめします。この Codelab には、最も包括的な手順が含まれています。

この Codelab で指示したとおりにコードを正しく適用したかどうかわからない場合は、reviewly-end、chatbot-end、video-hint-end フォルダでそれぞれのアプリの解答コードを確認できます。

Firebase CLI をインストールする

次のコマンドを実行して、Firebase CLI がインストールされ、v12.5.4 以降であることを確認します。

firebase --version

• Firebase CLI がインストールされているが、v12.5.4 以降でない場合は、更新します。

  npm update -g firebase-tools
  

• Firebase CLI をインストールしていない場合は、インストールします。

  npm install -g firebase-tools
  

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

Firebase にログインする

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

   cd ai-extensions-codelab
   firebase login
   

2. Firebase にすでにログインしているというメッセージがターミナルに表示された場合は、この Codelab のFirebase プロジェクトを設定するセクションに進みます。
3. Firebase でデータを収集するかどうかに応じて、「Y」または「N」と入力します。
4. ブラウザで Google アカウントを選択し、[許可] をクリックします。

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

このセクションでは、Firebase プロジェクトを設定し、Firebase ウェブアプリを関連付けます。また、サンプル ウェブアプリで使用する Firebase サービスも有効にします。

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

1. Firebase コンソールで [プロジェクトを追加] をクリックします。
2. [Enter your project name] テキスト ボックスに「AI Extensions Codelab」（または任意のプロジェクト名）と入力し、[続行] をクリックします。
3. この Codelab では Google アナリティクスは必要ないため、[このプロジェクトの Google アナリティクスを有効にする] オプションをオフにします。
4. [プロジェクトの作成] をクリックします。
5. プロジェクトがプロビジョニングされるのを待ってから、[続行] をクリックします。
6. Firebase プロジェクトで、プロジェクトの設定に移動します。後で必要になるため、プロジェクト ID をメモしておきます。この一意の識別子によって、プロジェクトが識別されます（Firebase CLI など）。

Firebase サービス アカウントをダウンロードする

この Codelab で作成するウェブアプリの中には、Next.js でサーバー側レンダリングを使用するものもあります。

Node.js 用の Firebase Admin SDK は、サーバー側のコードからセキュリティ ルールを確実に機能させるために使用します。Firebase Admin で API を使用するには、Firebase コンソールから Firebase サービス アカウントをダウンロードする必要があります。

1. Firebase コンソールで、[プロジェクトの設定] の [サービス アカウント] ページに移動します。
2. [新しい秘密鍵の生成] > [鍵を生成] をクリックします。
3. ファイルがファイルシステムにダウンロードされたら、そのファイルのフルパスを取得します。
   たとえば、ファイルを [ダウンロード] フォルダにダウンロードした場合、フルパスは次のようになります。/Users/me/Downloads/my-project-id-firebase-adminsdk-123.json
4. ターミナルで、ダウンロードした秘密鍵のパスに GOOGLE_APPLICATION_CREDENTIALS 環境変数を設定します。Unix 環境では、コマンドは次のようになります。

   export GOOGLE_APPLICATION_CREDENTIALS="/Users/me/Downloads/my-project-id-firebase-adminsdk-123.json"
   

5. 新しいターミナル セッションを開始すると、環境変数が失われる可能性があるため、この Codelab の残りの部分ではこのターミナルを開いたままにします。
   新しいターミナル セッションを開く場合は、前のコマンドを再実行する必要があります。

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

Cloud Functions と Firebase Extensions を使用するには、Firebase プロジェクトが Blaze 料金プラン（Cloud 請求先アカウントに関連付けられているプロジェクト）である必要があります。

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

ただし、この Codelab を完了しても実際の料金は発生しません。

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

1. Firebase コンソールで、プランをアップグレードを選択します。
2. ダイアログで Blaze プランを選択し、画面上の手順に沿ってプロジェクトを Cloud 請求先アカウントに関連付けます。
   Cloud 請求先アカウントを作成する必要がある場合は、Firebase コンソールのアップグレード フローに戻ってアップグレードを完了する必要があります。

Firebase コンソールで Firebase サービスを設定する

このセクションでは、この Codelab のウェブアプリで使用する複数の Firebase サービスをプロビジョニングして設定します。これらのサービスのすべてがそれぞれのウェブアプリで使用されるわけではありませんが、これらすべてのサービスを今すぐセットアップしておくと、この Codelab を簡単に作業できるようになります。

Authentication を設定する

Authentication は、Chatbot アプリと Video Hint アプリの両方で使用します。ただし、実際のアプリを作成する場合は、アプリごとに独自の Firebase プロジェクトを作成する必要があることを忘れないでください。

1. Firebase コンソールで [認証] に移動します。
2. [Get started] をクリックします。
3. [その他のプロバイダ] 列で、[Google] > [有効にする] をクリックします。

4. [プロジェクトの一般公開名] テキスト ボックスに、覚えやすい名前（My AI Extensions Codelab など）を入力します。
5. [プロジェクトのサポートメール] プルダウンから、メールアドレスを選択します。
6. [保存] をクリックします。
   

Cloud Firestore を設定する

3 つのアプリすべてで Firestore を使用します。ただし、実際のアプリを構築する場合は、アプリごとに固有の Firebase プロジェクトを用意する必要があります。

1. Firebase コンソールで [Firestore] に移動します。
2. [データベースを作成] > [テストモードで開始] > [次へ] をクリックします。
   この Codelab の後半で、セキュリティ ルールを追加してデータを保護します。データベースのセキュリティ ルールを追加せずに、アプリを配布または公開しないでください。
3. デフォルトのロケーションを使用するか、任意のロケーションを選択します。
   実際のアプリの場合は、ユーザーの近くのロケーションを選択します。このロケーションは後で変更できません。また、デフォルトの Cloud Storage バケットのロケーションにも自動的に設定されます（次のステップ）。
4. [Done] をクリックします。

Cloud Storage for Firebase を設定する

Cloud Storage を Video Hint アプリとともに使用し、テキスト読み上げの変換 拡張機能を試します（Codelab の次のステップ）。

1. Firebase コンソールで [ストレージ] に移動します。
2. [使ってみる] > [テストモードで開始] > [次へ] をクリックします。
   この Codelab の後半で、セキュリティ ルールを追加してデータを保護します。Storage バケットのセキュリティ ルールを追加せずに、アプリを配布または公開しないでください。
3. バケットのロケーションは、前の手順で Firestore をセットアップしたため、すでに選択されています。
4. [Done] をクリックします。

この Codelab の次のセクションでは、拡張機能をインストールして、この Codelab の各サンプルアプリのコードベースを変更して、3 種類のウェブアプリを動作させます。

5. Reviewly アプリ用の「PaLM API　による言語タスク」拡張機能をセットアップする

PaLM API 拡張機能による言語タスク拡張機能をインストールする

1. PaLM API による言語タスク拡張機能に移動します。
2. [Firebase コンソールでインストール] をクリックします。
3. Firebase プロジェクトを選択します。
4. [API の有効化とリソースの作成を確認する] セクションで、提案されたサービスの横にある [有効にする] をクリックします。

5. [次へ] > [次へ] をクリックします。
6. [コレクションパス] テキスト ボックスに「bot」と入力します。
7. [Prompt] テキスト ボックスに「{{ input }}」と入力します。
8. [変数フィールド] テキスト ボックスに「input」と入力します。
9. [レスポンス フィールド] テキスト ボックスに「text」と入力します。
10. [Cloud Functions のロケーション] プルダウンから、[アイオワ（us-central1）] または以前に Firestore と Cloud Storage 用に選択したロケーションを選択します。
11. [言語モデル] プルダウンから [text-bison-001] を選択します。
12. 他の値はすべてデフォルト値のままにします。
13. [拡張機能をインストール] をクリックし、拡張機能がインストールされるまで待ちます。

PaLM API 拡張機能による言語タスク拡張機能を試す

この Codelab の目標は、ウェブアプリで PaLM API による言語タスク拡張機能を操作することですが、Firebase コンソールを使用して拡張機能をトリガーすることで、拡張機能の仕組みを理解するのに役立ちます。この拡張機能は、Cloud Firestore ドキュメントが bot コレクションに追加されるとトリガーされます。

Firebase コンソールを使用して拡張機能の動作を確認する手順は次のとおりです。

1. Firebase コンソールで Firestore に移動します。
2. bot コレクションで、 [ドキュメントを追加] をクリックします。
3. [ドキュメント ID] テキスト ボックスで、[自動 ID] をクリックします。
4. [フィールド] テキスト ボックスに「input」と入力します。
5. [値] テキスト ボックスに「Tell me about the moon」と入力します。
6. [保存] をクリックして、数秒待ちます。bot コレクション内のドキュメントに、クエリの回答が追加されました。

6. Firebase を使用するように Reviewly アプリを設定する

Reviewly アプリを実行するには、Firebase プロジェクトを操作するようにアプリのコードと Firebase CLI を設定する必要があります。

アプリのコードに Firebase のサービスと構成を追加する

Firebase を使用するには、アプリのコードベースに、使用するサービスの Firebase SDK と、使用する Firebase プロジェクトを SDK に指示する Firebase 構成が必要です。

この Codelab のサンプルアプリには、SDK に必要なインポートと初期化のコードがすべてすでに含まれているため（reviewly-start/js/reviews.js を参照）、これらを追加する必要はありません。ただし、サンプルアプリには Firebase 構成のプレースホルダ値のみが含まれています（reviewly-start/js/firebase-config.js を参照）。そのため、アプリの一意の Firebase 構成値を取得するには、アプリを Firebase プロジェクトに登録する必要があります。

1. Firebase コンソールで Firebase プロジェクトの [プロジェクトの概要] に移動し、 [ウェブ] をクリックします。
   
2. [アプリのニックネーム] テキスト ボックスに、覚えやすいアプリのニックネーム（My Reviewly app など）を入力します。
3. [このアプリの Firebase Hosting も設定します] チェックボックスはオンにしないでください。これらのステップは、この Codelab で後ほど行います。
4. [アプリを登録] をクリックします。
5. アプリ固有の Firebase 構成オブジェクトで Firebase SDK を追加して初期化するためのコード スニペットがコンソールに表示されます。Firebase 構成オブジェクトのすべてのプロパティをコピーします。
6. コードエディタで reviewly-start/js/firebase-config.js ファイルを開きます。
7. プレースホルダの値を、先ほどコピーした値に置き換えます。Reviewly アプリで使用しない Firebase サービスのプロパティと値があっても問題ありません。
8. ファイルを保存します。
9. Firebase コンソールに戻り、[コンソールに進む] をクリックします。

Firebase プロジェクトに対して Firebase CLI コマンドを実行するようにターミナルを設定する

1. ターミナルで、先ほどダウンロードした ai-extensions-codelab フォルダに移動します。
2. reviewly-start ウェブアプリ フォルダに移動します。

   cd reviewly-start
   

3. Firebase CLI で特定の Firebase プロジェクトに対してコマンドを実行するようにします。

   firebase use YOUR_PROJECT_ID
   

Reviewly ウェブアプリを実行して表示する

ウェブアプリを実行して表示する手順は次のとおりです。

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

   npm install
   
   # Include the parentheses in the following command.
   (cd functions && npm install)
   
   npm run dev
   

2. ブラウザで、ターミナルに表示された URL に移動します。例: http://localhost:8080。

ページは読み込まれますが、さまざまな機能が不足していることがわかります。これらは、この Codelab の次のステップで追加します。

7. 機能を追加する Reviewly アプリ

この Codelab の最後のステップでは、Reviewly アプリをローカルで実行しましたが、あまり機能しておらず、インストールされた拡張機能もまだ使用していません。この Codelab のステップでは、この機能を追加し、ウェブアプリを使用して拡張機能をトリガーします。

セキュリティ ルールをデプロイする

この Codelab のサンプルアプリには、Firestore と Firebase Cloud Storage 用のセキュリティ ルールのセットが含まれています。これらのセキュリティ ルールを Firebase プロジェクトにデプロイすると、データベースとバケット内のデータが不正使用から保護されます。

これらのルールは、firestore.rules ファイルと storage.rules ファイルで確認できます。

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

   firebase deploy --only firestore:rules,storage
   

2. 「"Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?"」というメッセージが表示されたら、[はい] を選択します。

アプリのコードを更新して拡張機能をトリガーする

Reviewly アプリでは、Firestore に新しいレビューが追加されると、レビューを要約する拡張機能がトリガーされます。

1. コードエディタで functions/add-mock-reviews.js ファイルを開きます。
2. reviewWithPrompt 変数を次のコードに置き換えます。これにより、言語モデルに確認の時間を短縮できます。

   const reviewWithPrompt = `Here's a user supplied review. Give me a shorter summary of the review, and a rating out of 5, and a flag which indicates if there was a product defect.
   
   Product name: "Blue t-shirt with cat picture". Review: """${review}"""
   
   Craft your response as JSON with properties has_defect, summary and rating. Don't include any extra text.`;
   

3. reviewWithPrompt 変数の後で、reviewDocument 変数を次のコードに置き換えます。これにより、レビュー ドキュメントが作成されて Firestore に追加できます。

   const reviewDocument = {
           input: reviewWithPrompt,
           originalReview: review,
           timestamp: Timestamp.now(),
   };
   
   getFirestore().collection(DB_COLLECTION_NAME).add(reviewDocument);
   

4. ファイルを保存します。
5. js/reviews.js ファイルの Insert code below, to import your Firebase Callable Cloud Function コメントの後に、httpsCallable ヘルパーを使用して Firebase HTTP 呼び出し可能関数をインポートします。

   const addMockReviews = httpsCallable(functions, "addMockReviews");
   

6. Insert code below, to invoke your Firebase Callable Cloud Function コメントの後で、Firebase HTTP 呼び出し可能関数を呼び出します。

   await addMockReviews();
   

7. ファイルを保存します。

新しいレビューを追加する関数をデプロイする

Reviewly ウェブアプリは、Cloud Functions を使用してクチコミを追加します。ただし、現在、Cloud Functions はデプロイされていません。

Firebase CLI を使用して関数をデプロイする手順は次のとおりです。

1. ターミナルで reviewly-start フォルダに移動したまま、Control+C キーを押してサーバーを停止します。
2. 関数をデプロイします。

   firebase deploy --only functions
   

3. Permission denied while using the Eventarc Service Agent などのエラーが表示された場合は、数分待ってからコマンドを再試行します。

Cloud Functions で最初のカスタム関数をデプロイしました。Firebase コンソールには、Firebase プロジェクトにデプロイしたすべての関数を表示できるダッシュボードがあります。

Reviewly ウェブアプリを再度実行して表示します（機能が追加されています）

実際に機能するウェブアプリを実行して表示する手順は次のとおりです。

1. ターミナルで、サーバーをもう一度実行します。

   npm run dev
   

2. ブラウザで、ターミナルに表示された URL に移動します。例: http://localhost:8080。
3. アプリで [Add some mock reviews] をクリックし、長いレビューがいくつか表示されるまで数秒待ちます。
   バックグラウンドでは、PaLM API による言語タスク拡張機能が、新しいレビューを表す新しいドキュメントに反応します。前に追加したプロンプトは、言語モデルに短い要約をリクエストします。
4. レビュー全体と、レビューに使用されたプロンプトを表示するには、いずれかのレビューをクリックして、[Show PaLM prompt] を選択します。

8. 「chatbot with PaLM API」を設定するの chatbot アプリ

PaLM API を使用した Chatbot 拡張機能をインストールする

1. PaLM API を使用した Chatbot 拡張機能に移動します。
2. [Firebase コンソールでインストール] をクリックします。
3. Firebase プロジェクトを選択します。
4. [次へ > 次へ > 次へ] をクリックして、[拡張機能を構成する] セクションに移動します。
5. [コレクションパス] テキスト ボックスに「users/{uid}/discussion/{discussionId}/messages」と入力します。
6. [Cloud Functions のロケーション] プルダウンから、[アイオワ（us-central1）] または Firestore と Cloud ストレージで以前に選択したロケーションを選択します。
7. [言語モデル] プルダウンから、[chat-bison] を選択します。
8. 他の値はすべてデフォルト値のままにします。
9. [拡張機能をインストール] をクリックし、拡張機能がインストールされるまで待ちます。

Chatbot with PaLM API 拡張機能を試す

この Codelab の目標は、ウェブアプリで PaLM API による chatbot 拡張機能を操作することですが、Firebase コンソールを使用して拡張機能をトリガーすることで、拡張機能の仕組みを理解するのに役立ちます。この拡張機能は、Cloud Firestore ドキュメントが users/{uid}/discussion/{discussionId}/messages コレクション内に作成されるとトリガーされます。

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

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

9. Firebase を使用するように Chatbot アプリを設定する

Chatbot アプリを実行するには、Firebase プロジェクトとやり取りするようにアプリのコードと Firebase CLI を設定する必要があります。

Firebase サービスと構成をアプリのコードに追加する

Firebase を使用するには、アプリのコードベースに、使用するサービスの Firebase SDK と、使用する Firebase プロジェクトを SDK に指示する Firebase 構成が必要です。

この Codelab のサンプルアプリには、SDK に必要なインポート コードと初期化コードがすべて含まれています（chatbot-start/lib/firebase/firebase.js を参照）。追加する必要はありません。ただし、サンプルアプリには Firebase 構成のプレースホルダ値のみが含まれています（chatbot-start/lib/firebase/firebase-config.js を参照）。そのため、アプリの一意の Firebase 構成値を取得するには、アプリを Firebase プロジェクトに登録する必要があります。

1. Firebase コンソールで Firebase プロジェクトの [プロジェクトの概要] に移動し、[ ウェブ] をクリックします（または、すでにプロジェクトにアプリを登録している場合、[アプリを追加] をクリックします）。
2. [アプリのニックネーム] テキスト ボックスに、覚えやすいアプリのニックネーム（My Chatbot app など）を入力します。
3. [このアプリの Firebase Hosting も設定します] チェックボックスは選択しないでください。この手順は、Codelab の後半で説明します。
4. [アプリを登録] をクリックします。
5. コンソールに、アプリ固有の Firebase 構成オブジェクトを使用して Firebase SDK を追加して初期化するコードスニペットが表示されます。Firebase 構成オブジェクト内のすべてのプロパティをコピーします。
6. コードエディタで chatbot-start/lib/firebase/firebase-config.js ファイルを開きます。
7. プレースホルダの値を、先ほどコピーした値に置き換えます。Chatbot アプリで使用しない Firebase サービスのプロパティと値が存在しても問題ありません。
8. ファイルを保存します。
9. Firebase コンソールに戻り、[コンソールに進む] をクリックします。

Firebase プロジェクトに対して Firebase CLI コマンドを実行するようにターミナルを設定する

1. ターミナルで Control+C キーを押して、サーバーが前のウェブアプリを実行しないようにします。
2. ターミナルで、chatbot-start ウェブアプリ フォルダに移動します。

   cd ../chatbot-start
   

3. Firebase CLI が特定の Firebase プロジェクトに対してコマンドを実行するようにします。

   firebase use YOUR_PROJECT_ID
   

フレームワーク対応の Firebase Hosting を使用するようにアプリのコードベースを設定する

この Codelab では、Chatbot ウェブアプリと Hosting 対応のウェブ フレームワーク（プレビュー）を使用します。

1. ターミナルで、Firebase Hosting を使用してウェブ フレームワークを有効にします。

   firebase experiments:enable webframeworks
   

2. Firebase Hosting を初期化します。

   firebase init hosting
   

3. 「Detected an existing」Next.js codebase in your current directory, should we use this? というメッセージが表示されたら、Y キーを押します。
4. In which region would you like to host server-side content, if applicable? と表示されたら、デフォルトのリージョン、または以前に Firestore と Cloud Storage に対して選択したロケーションを選択して、Enter を押します（macOS の場合は return）。
5. Set up automatic builds and deploys with GitHub? というプロンプトが表示されたら、N を押します。

Chatbot ウェブアプリを実行して表示する

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

   npm install
   firebase emulators:start --only hosting
   

2. ブラウザで、ローカルでホストされている Hosting の URL に移動します。ほとんどの場合、http://localhost:5000/ などになります。

ページは読み込まれますが、さまざまな機能が欠落しています。これらは、この Codelab の次のステップで追加します。

ウェブアプリの実行に関するトラブルシューティング

ウェブページに「Error: Firebase session cookie has incorrect...」のようなエラーが表示された場合は、localhost 環境内のすべての Cookie を削除する必要があります。手順については、Cookie を削除する | DevTools のドキュメントをご覧ください。

10. 機能を追加する chatbot アプリ

この Codelab の最後のステップでは、Chatbot アプリをローカルで実行しましたが、あまり機能しておらず、インストールされた拡張機能もまだ使用していません。この Codelab のステップでは、この機能を追加し、ウェブアプリを使用して拡張機能をトリガーします。

セキュリティ ルールをデプロイする

この Codelab のサンプルアプリには、Firestore と Firebase Cloud Storage 用のセキュリティ ルールのセットが含まれています。これらのセキュリティ ルールを Firebase プロジェクトにデプロイすると、データベースとバケット内のデータが不正使用から保護されます。

これらのルールは、firestore.rules ファイルと storage.rules ファイルで確認できます。

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

   firebase deploy --only firestore:rules,storage
   

2. 「"Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?"」というメッセージが表示されたら、[はい] を選択します。

Cloud Firestore にメッセージを追加するようにコードを更新する

Chatbot アプリでは、ユーザーからの新しいメッセージが Firestore に追加され、それによって拡張機能がトリガーされ、レスポンスが生成されます。

1. コードエディタで lib/firebase/firestore.js ファイルを開きます。
2. ファイルの末尾付近で、新しいメッセージの追加を処理する addNewMessage 関数を見つけます。
   この関数は、すでに次のオブジェクト プロパティを受け取っています。
   

   パラメータ	説明
   userId	ログイン中のユーザーの ID
   discussionId	メッセージが追加されたディスカッション ID
   message	メッセージのテキスト コンテンツ
   db	Firestore データベース インスタンス

   これらの変数を準備したら、新しいメッセージを表す Cloud Firestore ドキュメントを追加できます。
3. addNewMessage 関数本体の // Insert your code below ⬇️ コメントの後に、次のコードを追加します。

   await addDoc(
           collection(
                   db,
                   "users",
                   userId,
                   "discussion",
                   discussionId,
                   "messages"
           ),
           {
                   prompt: message,
                   createTime: serverTimestamp(),
           }
   );
   
   await updateDoc(doc(db, "users", userId, "discussion", discussionId), {
           latestMessage: message,
           updatedTime: serverTimestamp(),
   });
   

コードを更新してメッセージを取得するクエリを作成する

1. 引き続き lib/firebase/firestore.js ファイルで、getMessagesQuery 関数を見つけます。この関数は、users/{uid}/discussion/{discussionId}/messages コレクション パスに保存されているメッセージを見つける Cloud Firestore クエリを返す必要があります。
2. getMessagesQuery 関数全体を次のコードに置き換えます。

   function getMessagesQuery(db, userId, discussionId) {
           if (!userId || !discussionId) {
                   return null;
           }
           const messagesRef = collection(
                   db,
                   "users",
                   userId,
                   "discussion",
                   discussionId,
                   "messages"
           );
           return query(messagesRef, orderBy("createTime", "asc"));
   }
   

Cloud Firestore メッセージ ドキュメントを処理するようにコードを更新する

1. 引き続き lib/firebase/firestore.js ファイルで handleMessageDoc 関数を見つけます。この関数は、1 つのメッセージを表す Cloud Firestore ドキュメントを受け取ります。
   この関数は、データの形式と構造が chatbot アプリの UI に対する目的に合っている必要があります。
2. handleMessageDoc 関数全体を次のコードに置き換えます。

   function handleMessageDoc(doc) {
           const data = doc.data();
           const item = {
                   prompt: data.prompt,
                   response: data.response,
                   id: doc.id,
                   createTime: formatDate(data.createTime.toDate()),
           };
   
           if (data?.status?.completeTime) {
                   item.completeTime = formatDate(data.status.completeTime.toDate());
           }
   
           return item;
   }
   

3. ファイルを保存します。

Chatbot ウェブアプリを再度実行して表示します（機能が追加されています）

機能するウェブアプリを実行して表示する手順は次のとおりです。

1. ブラウザで、Chatbot ウェブアプリのタブに戻り、ページを再読み込みします。
2. [Sign in with Google] をクリックします。
3. 必要に応じて、Google アカウントを選択します。
4. ログインしたら、ページを再読み込みします。
5. [メッセージを入力] テキスト ボックスに、Tell me about space などのメッセージを入力します。
6. [送信] をクリックし、Chatbot ウェブアプリが応答するまで数秒待ちます。

PaLM API を使用した Chatbot 拡張機能のもう一つのメリットは、会話履歴です。

以下のステップで、過去のコンテキストと会話する能力の例を確認します。

1. [メッセージを入力] テキスト ボックスに「What are five random fruits?」などの質問をします。
2. [メッセージを入力] テキスト ボックスに、前の質問に関連するフォローアップ質問を入力します（例: And what about vegetables?）。

Chatbot ウェブアプリは、履歴情報を使用して応答します。前の質問でランダムな野菜を 5 つ指定していませんが、PaLM API を使用する Chatbot 拡張機能はフォローアップの質問に対応しています。

11. Video Hint App の「テキスト読み上げの変換」拡張機能を設定する

テキスト読み上げの変換 拡張機能をインストールします。

1. テキスト読み上げの変換 拡張機能に移動します。
2. [Firebase コンソールでインストール] をクリックします。
3. Firebase プロジェクトを選択します。
4. [Next] をクリックします。
5. [有効な API と作成済みのリソースの確認] セクションで、推奨されるサービスの横にある [有効にする] をクリックします。

6. [次へ] をクリックし、権限の候補の横にある [付与] を選択します。

7. [Next] をクリックします。
8. [コレクションパス] テキスト ボックスに「bot」と入力します。
9. [ストレージのパス] テキスト ボックスに「tts」と入力します。
10. 他の値はすべてデフォルト オプションのままにします。
11. [拡張機能をインストール] をクリックし、拡張機能がインストールされるまで待ちます。

テキスト読み上げの変換 拡張機能を試す

この Codelab の目標は、ウェブアプリで テキスト読み上げの変換 拡張機能を操作することですが、Firebase コンソールを使用して拡張機能をトリガーすることで、この拡張機能の仕組みを理解するのに役立ちます。この拡張機能は、Cloud Firestore ドキュメントが bot コレクション内に作成されるとトリガーされます。

Firebase コンソールを使用して拡張機能の動作を確認する手順は次のとおりです。

1. Firebase コンソールで Firestore に移動します。
2. [コレクションを開始] をクリックします。
3. [コレクション ID] テキスト ボックスに「bot」と入力します。
4. [Next] をクリックします。

5. [ドキュメント ID] テキスト ボックスで、[自動 ID] をクリックします。
6. [フィールド] テキスト ボックスに「text」と入力します。
7. [値] テキスト ボックスに「The quick brown fox jumps over the lazy dog」と入力します。
8. [保存] をクリックします。

作成した MP3 ファイルを表示して再生する手順は次のとおりです。

1. Firebase コンソールで [ストレージ] に移動します。
2. ファイルをアップロードできるペインで、gs:// 値の後にバケット名をメモします。これは、このプロジェクトのデフォルト バケットの名前です。この Codelab のさまざまなタスクで必要になります。

3. Google Cloud コンソールで、[Cloud ストレージ] に移動します。
4. プロジェクトを選択します。
   プロジェクトの最近のリストに目的のプロジェクトが表示されない場合は、[プロジェクトを選択] をクリックして、プロジェクト選択ツールでプロジェクトを見つけます。

5. デフォルトの Storage バケットを選択します。
6. tts/ フォルダに移動します。
7. MP3 ファイルをクリックします。
8. MP3 ファイルの末尾にある をクリックすると、テキストが音声に変換されます。

12. Video Hint アプリの「Cloud Video AI による動画のラベル付け」拡張機能を設定する

Cloud Video AI を使用した動画のラベル付け拡張機能をインストールする

1. Cloud Video AI を使用した動画のラベル付け拡張機能に移動します。
2. [Firebase コンソールでインストール] をクリックします。
3. Firebase プロジェクトを選択します。
4. [次へ > 次へ > 次へ] をクリックして、[拡張機能を構成する] セクションが表示されるまで進みます。
5. [Cloud Functions のロケーション] プルダウンから、サポートされているロケーション（Firestore と Cloud ストレージで以前に選択したロケーションか、それに最も近いロケーション）を選択します。サポートされているロケーションについては、AnnotateVideoRequest の location_id セクションをご覧ください。
6. [モデル] プルダウンから、[最新] を選択します。
7. [Stationary camera] プルダウンから [No] を選択します。
8. 他の値はすべてデフォルト値のままにします。
9. [拡張機能をインストール] をクリックし、拡張機能がインストールされるまで待ちます。

Cloud Video AI で動画にラベルを付ける拡張機能を試す

この Codelab の目標は、ウェブアプリから Cloud Video AI による動画のラベル付け拡張機能を操作することですが、Firebase コンソールを使用して拡張機能をトリガーすることで、この拡張機能の仕組みを理解しておくことをおすすめします。この拡張機能は、動画ファイルが Storage バケットにアップロードされるとトリガーされます。

Firebase コンソールを使用して拡張機能の動作を確認する手順は次のとおりです。

1. Firebase プロジェクト内の [ストレージ] > [フォルダを作成] に移動します。
2. [フォルダ名] テキスト ボックスに「video_annotation_input」と入力します。

3. [フォルダを追加] をクリックします。
4. video_annotation_input フォルダで、[ファイルをアップロード] をクリックします。
5. 先ほどクローンまたはダウンロードした ai-extensions-codelab/video-hint-start/public/videos フォルダで、最初の動画ファイルを選択します。
6. ブラウザに戻り、Google Cloud コンソールで Cloud ストレージ に移動します。
7. 先ほどメモしたデフォルトの Storage バケットを選択します。
8. video_annotation_output フォルダをクリックします。
   video_annotation_output フォルダが表示されない場合は、Video Intelligence API がまだ動画を処理している可能性があるため、数秒待ってからページを更新してください。

9. 先ほどアップロードしたファイルと似た名前の JSON ファイルが存在することを確認します。
10. [ ファイル名をダウンロード] をクリックします。
11. ダウンロードした JSON ファイルをコードエディタで開きます。これには Video Intelligence API からの未加工の出力が含まれ、アップロードした動画で検出されたラベルが含まれます。

13. Firebase を使用するように Video Hints アプリを設定する

Video Hint アプリを実行するには、Firebase プロジェクトを操作するようにアプリのコードを設定して、Firebase CLI をセットアップする必要があります。

Firebase サービスと構成をアプリのコードに追加する

Firebase を使用するには、アプリのコードベースに、使用するサービスの Firebase SDK と、使用する Firebase プロジェクトを SDK に指示する Firebase 構成が必要です。

この Codelab のサンプルアプリには、SDK に必要なインポート コードと初期化コードがすべて含まれています（video-hint-start/lib/firebase/firebase.js を参照）。追加する必要はありません。ただし、サンプルアプリには Firebase 構成のプレースホルダ値のみが含まれています（video-hint-start/lib/firebase/firebase-config.js を参照）。そのため、アプリの一意の Firebase 構成値を取得するには、アプリを Firebase プロジェクトに登録する必要があります。

1. Firebase コンソールで Firebase プロジェクトの [プロジェクトの概要] に移動し、[ ウェブ] をクリックします（または、すでにプロジェクトにアプリを登録している場合、[アプリを追加] をクリックします）。
2. [アプリのニックネーム] テキスト ボックスに、覚えやすいアプリのニックネーム（My Video Hint app など）を入力します。
3. [このアプリの Firebase Hosting も設定します] チェックボックスはオンにしないでください。これらのステップは、この Codelab で後ほど行います。
4. [アプリを登録] をクリックします。
5. コンソールに、アプリ固有の Firebase 構成オブジェクトを使用して Firebase SDK を追加して初期化するコードスニペットが表示されます。Firebase 構成オブジェクト内のすべてのプロパティをコピーします。
6. コードエディタで video-hint-start/lib/firebase/firebase-config.js ファイルを開きます。
7. プレースホルダの値を、先ほどコピーした値に置き換えます。Video Hints アプリで使用しない Firebase サービスのプロパティと値が存在しても問題ありません。
8. ファイルを保存します。
9. Firebase コンソールに戻り、[コンソールに進む] をクリックします。

Firebase プロジェクトに対して Firebase CLI コマンドを実行するようにターミナルを設定する

1. ターミナルで Control+C を押して、サーバーによる以前のウェブアプリの実行を停止します。
2. ターミナルで、video-hint-start ウェブアプリ フォルダに移動します。

   cd ../video-hint-start
   

3. Firebase CLI が特定の Firebase プロジェクトに対してコマンドを実行するようにします。

   firebase use YOUR_PROJECT_ID
   

フレームワーク対応の Firebase Hosting を使用するようにアプリのコードベースを設定する

この Codelab では、Hosting を使用したウェブ フレームワーク（プレビュー版）と Video Hint ウェブアプリを使用します。

1. ターミナルで、Firebase Hosting でウェブ フレームワークを有効にします。

   firebase experiments:enable webframeworks
   

2. Firebase Hosting を初期化します。

   firebase init hosting
   

3. Detected an existing Next.js codebase in your current directory, should we use this? というメッセージが表示されたら、Y キーを押します。
4. In which region would you like to host server-side content, if applicable? と表示されたら、デフォルトのリージョン、または以前に Firestore と Cloud Storage に対して選択したロケーションを選択して、Enter を押します（macOS の場合は return）。
5. Set up automatic builds and deploys with GitHub? というプロンプトが表示されたら、N を押します。

動画ヒント ウェブアプリを実行して表示する

1. ターミナルで、video-hint-start フォルダと functions フォルダに依存関係をインストールしてから、アプリを実行します。

   npm install
   
   # Include the parentheses in the following command.
   (cd functions && npm install)
   
   firebase emulators:start --only hosting
   

2. ブラウザで、ローカルでホストされている Hosting の URL に移動します。ほとんどの場合、http://localhost:5000/ などになります。

ページは読み込まれますが、さまざまな機能が不足していることがわかります。これらは、この Codelab の次のステップで追加します。

ウェブアプリの実行に関するトラブルシューティング

DevTools の [Console] ペインに Error: The query requires an index. You can create it here: https://console.firebase.google.com のようなエラー メッセージが表示される場合は、次の手順を行います。

1. 指定された URL に移動します。

2. [保存] をクリックし、ステータスが [Building] から [Enabled] に変わるまで待ちます。

14. Video Hint アプリに機能を追加する

この Codelab の最後のステップでは、Video Hint アプリをローカルで実行しましたが、多くの機能がなく、インストールされた拡張機能はまだ使用していません。この Codelab のステップでは、この機能を追加し、ウェブアプリを使用して拡張機能をトリガーします。

セキュリティ ルールをデプロイする

この Codelab のサンプルアプリには、Firestore と Firebase Cloud Storage 用のセキュリティ ルールのセットが含まれています。これらのセキュリティ ルールを Firebase プロジェクトにデプロイすると、データベースとバケット内のデータが不正使用から保護されます。

これらのルールは、firestore.rules ファイルと storage.rules ファイルで確認できます。

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

   firebase deploy --only firestore:rules,storage
   

2. 「"Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?"」というメッセージが表示されたら、[はい] を選択します。

コードを更新して関数を組み合わせる

1. コードエディタで functions フォルダを開きます。
   このフォルダには、拡張機能のパイプラインを形成するために組み合わせる複数の関数が含まれています。次の表に、各関数を示します。

   関数	説明
   functions/01-handle-video-upload.js	拡張機能パイプラインの最初のステップ。ユーザーがアップロードした動画ファイルを処理します。
   functions/02-handle-video-labels.js	拡張機能パイプラインの 2 番目のステップ。storage-label-videos 拡張機能によって生成された動画ラベル ファイルを処理します。
   functions/03-handle-audio-file.js	拡張機能パイプラインの 3 番目のステップ。文字変換された音声ファイルを処理します。

   ただし、これらの関数をグループ化したファイルを追加する必要があります。
2. functions/index.js ファイルに、次のコードを追加します。

   import { initializeApp } from "firebase-admin/app";
   
   export * from "./01-handle-video-upload.js";
   export * from "./02-handle-video-labels.js";
   export * from "./03-handle-audio-file.js";
   
   initializeApp();
   

このコードでは、JavaScript モジュールを使用して index.js ファイルから関数をインポートおよびエクスポートし、すべての関数を 1 か所に集約しています。

動画のアップロードを処理するようにコードを更新する

1. コードエディタで lib/firebase/storage.js ファイルを開きます。
2. uploadVideo 関数を見つけます。
   この関数は、userId パラメータ、filePath パラメータ、file パラメータを受け取ります。このデータは Cloud ストレージにファイルをアップロードするのに十分です。
3. uploadVideo 関数の本文に、次のコードを追加します。

   const storageRef = ref(storage, `video_annotation_input/${filePath}`);
   
   const uploadTask = uploadBytesResumable(storageRef, file, {
           customMetadata: {
                   uid: userId,
           },
   });
   
   return uploadTask;
   

関数をデプロイする

Firebase CLI を使用して関数をデプロイする手順は次のとおりです。

1. ターミナルで video-hint-start フォルダに移動したまま、Control+C を押して現在のプロセスを停止します。
2. 関数をデプロイ:

   firebase deploy --only functions
   

   以前の Cloud Functions の関数の削除について確認を求められたら、No を選択します。
3. Permission denied while using the Eventarc Service Agent のようなメッセージが表示された場合は、数分待ってからコマンドを再試行してください。
4. コマンドが完了したら、アプリをローカルでもう一度実行します。

   firebase emulators:start --only hosting
   

動画ヒントウェブアプリを再度実行して表示します（機能が追加されています）

実際に機能するウェブアプリを実行して表示する手順は次のとおりです。

1. ブラウザで、http://localhost:5000 に移動したタブを探します。
2. 必要に応じて [Google でログイン] をクリックし、Google アカウントを選択します。
3. [サンプル動画 1 をアップロード] をクリックし、数分待って動画の概要の結果を確認します。
4. 動画をアップロードしても結果が表示されない場合は、この Codelab の付録にある Cloud Functions に関するエラーのトラブルシューティングをご覧ください。

15. まとめ

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

Firebase Extensions のインストールと構成

Firebase コンソールを使用して、さまざまな AI 拡張機能を構成し、インストールしました。拡張機能を使用すると、Google Cloud サービスでの認証、Firestore からの読み取りと書き込み、Google Cloud サービスとのやり取り、およびそれらのタスクに関連するさまざまなニュアンスに関するボイラープレート コードを大量に記述する必要がないため、便利です。

Firebase コンソールを使用して拡張機能の操作を行った

コードにすぐに取り掛かるのではなく、コンソールから Firestore や Cloud Storage に入力した入力に基づいて AI 拡張機能の仕組みを理解しました。この種の操作は、拡張機能の出力をデバッグする必要がある場合に特に便利です。

Firebase Extensions を使用する AI 搭載ウェブアプリを 3 つ構築

Reviewly

Reviewly ウェブアプリで、Language Tasks with PaLM API 拡張機能を使用して、ユーザーが T シャツ商品に対して投稿した長いレビューを要約しました。また、言語モデルに、クエリに対する JSON レスポンスを提供するようリクエストしました。この JSON には、星評価と、元の長いレビューの要約が含まれています。

任意の演習: T シャツ会社は、要約されたレビューに満足していますが、不具合の性質に関する追加の要約を求めています。不具合の概要を返すようにプロンプトを調整し、ウェブアプリのユーザー インターフェース内にその概要を含めることができますか？

チャットボット

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

追加の演習: 生徒には chatbot には満足していますが、教職員はさらに機能を強化したいと考えています。生徒が回答した後で、考えさせられる質問を投げかけます。次に例を示します。

Student asks: What is the ozone?
Response: The ozone is a molecule composed of...How do you think human activities can impact the ozone layer?

ヒント: 構成可能な コンテキスト オプションを使用してこれを実現できます。

動画のヒント

動画ヒント ウェブアプリでは、テキストを音声に変換、PaLM API による言語タスク、Cloud Video で動画にラベルを付ける拡張機能を使用して、動画のテキストと音声の説明を生成するための拡張機能パイプラインを作成しました。

オプションの演習: 政府機関はプロトタイプに興味を持ち、ユーザーがテキストベースのラベルをクリックして、ラベルが検出された動画内のポイントにジャンプできるようにしたいと考えています。

16. 付録: Cloud Functions のエラーのトラブルシューティング

ウェブアプリが想定どおりに機能せず、関数に問題があると思われる場合は、このトラブルシューティング ページの手順に沿って対応してください。

未認証の公開アクセスを許可する

Chrome DevTools の [Console] パネルに権限関連のエラーが表示された場合は、次の手順を行います。

1. 認証の概要 |Cloud Run ページ
2. リンクをクリックして、関数に対する未認証の公開アクセスを許可するために必要なタスクを表示し、完了します。

3. Reviewly アプリに戻ります。（例: http://localhost:8080）。
4. [Add some mock reviews] をクリックして数秒待ちます。
   • レビューが表示された場合: このトラブルシューティングの手順を続ける必要はありません。この Codelab の Chatbot ウェブアプリを設定するに進んでください。
   • レビューが表示されない場合: このトラブルシューティングのセクションにお進みください。

権限不足のエラーを処理する

1. Firebase コンソールで [Functions] に移動します。
2. addMockReviews 関数にカーソルを合わせ、 > ログを表示をクリックします。

3. 次のいずれかのエラーが見つかるまでログをスクロールします。

   Exception from a finished function: Error: 7 PERMISSION_DENIED: Missing or insufficient permissions.
   

   0001-compute@developer.gserviceaccount.com does not have storage.objects.get access to the Google Cloud Storage object. Permission 'storage.objects.get' denied on resource (or it may not exist).
   

4. Google Cloud コンソールで [IAM 権限] ページに移動し、プロジェクトを選択します。
5. テーブルで [名前] 列を見つけます。
   [IAM と管理] ページには、ユーザーとロールの表があります。テーブルの name 列には、ユーザー（プリンシパル）の用途が示されます。デフォルトのコンピューティング サービス アカウントという名前のプリンシパルが存在する場合があります。

[デフォルトのコンピューティング サービス アカウント] が表示されている場合は、次の操作を行います。

1. [プリンシパルを編集します] をクリックします。

2. この Codelab のデフォルトのコンピューティング サービス アカウントにロールを追加するに進んでください。

[デフォルトのコンピューティング サービス アカウント] が表示されない場合は、次の操作を行います。

1. [アクセス権を付与] をクリックします。
2. [新しいプリンシパル] テキスト ボックスに「compute」と入力します。
3. 表示された自動候補のメニューで、[デフォルトのコンピューティング サービス アカウント] を選択します。

デフォルトのコンピューティング サービス アカウントにロールを追加する

デフォルトのコンピューティング サービス アカウントの [ロールを割り当てる] セクションで、次の操作を行います。

1. [ロールを選択] メニューを開きます。
2. [フィルタ] テキスト ボックスに「Cloud Datastore User」と入力します。
3. 表示された候補のメニューで、[Cloud Datastore ユーザー] を選択します。
4. [別のロールを追加] をクリックします。
   1. [ロールを選択] メニューを開きます。
   2. [フィルタ] テキスト ボックスに「Cloud Storage for Firebase Admin」と入力します。
   3. 表示された自動候補のメニューで、[Cloud Storage for Firebase 管理者] を選択します。
5. [別のロールを追加] をクリックします。
   1. [ロールを選択] メニューを開きます。
   2. [フィルタ] テキスト ボックスに「Cloud Storage for Firebase Service Agent」と入力します。
   3. 表示された自動補完のメニューで、[Cloud Storage for Firebase サービス エージェント] を選択します。
6. [保存] をクリックします。