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 は一般的なトピックに関する質問に答えることができます。chatbot には過去のコンテキストがあるので、その回答には、同じ会話で生徒が尋ねた以前の質問を考慮できます。

Video Hint アプリ

ある政府部門が、アクセシビリティを向上させるために動画に音声による説明を提供してほしいと考えていますが、アノテーションを付ける動画が何百本もあるため、合理的なアプローチが必要です。完成した 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 の指示に沿ってコードを正しく適用したかどうかわからない場合は、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. [プロジェクト名を入力してください] テキスト ボックスに「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 サービスを設定する

このセクションでは、この Codelab のウェブアプリで使用される複数の Firebase サービスをプロビジョニングして設定します。これらのサービスのすべてが各ウェブアプリで使用されるわけではありませんが、ここでサービスをすべて設定しておくと、この Codelab の作業に役立ちます。

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. [Response field] テキスト ボックスに「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 CLI を設定して、Firebase プロジェクトとやり取りする必要があります。

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 と Cloud Storage for Firebase のセキュリティ ルールのセットが含まれています。これらのセキュリティ ルールを 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. レビュー全体とレビューに使用されたプロンプトを表示するには、レビューのいずれかをクリックして、[PaLM プロンプトを表示] を選択します。

8. chatbot アプリ用に「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 Storage 用に選択したロケーションを選択します。
7. [言語モデル] プルダウンから [chat-bison] を選択します。
8. 他の値はすべてデフォルト値のままにします。
9. [拡張機能をインストール] をクリックし、拡張機能がインストールされるまで待ちます。

PaLM API 拡張機能を使用した chatbot を試す

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

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 CLI を設定して、Firebase プロジェクトとやり取りする必要があります。

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 と Cloud Storage for Firebase のセキュリティ ルールのセットが含まれています。これらのセキュリティ ルールを 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 コンソールを使用して拡張機能をトリガーすることで、この拡張機能の仕組みを理解するのに役立ちます。bot コレクションで Cloud Firestore ドキュメントが作成されると、拡張機能がトリガーされます。

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. [ステーション カメラ] プルダウンから [いいえ] を選択します。
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 フォルダが表示されない場合は、数秒待ってからページを更新してください。動画には Intelligence API がまだ動画を処理中である可能性があります。

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

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

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

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 Hint アプリでは使用していない 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 では、Video Hint ウェブアプリで 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 キーを押します。

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

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. [保存] をクリックし、ステータスが [ビルディング] から [有効] に変わるまで待ちます。

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

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

セキュリティ ルールのデプロイ

この Codelab のサンプルアプリには、Firestore と Cloud Storage for Firebase のセキュリティ ルールのセットが含まれています。これらのセキュリティ ルールを 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
   

Video Hints ウェブアプリをもう一度実行して表示します（機能が追加されました）

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

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 レスポンスをクエリに提供するようリクエストしました。

追加の演習（任意）: 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 の [コンソール] パネルに権限に関するエラーが発生した場合は、次の手順を行います。

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

3. Reviewly アプリに戻ります。（例: http://localhost:8080）。
4. [模擬レビューを追加] をクリックして、数秒待ちます。
   • レビューが表示された場合: これらのトラブルシューティングの手順を続ける必要はありません。この 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. [保存] をクリックします。