Firebase Extensions を使用してウェブアプリに新しい機能をすばやく追加する

1. はじめに

目標

この Codelab では、Firebase Extensions を使用して、オンライン マーケットプレイス アプリに機能を追加します。この Codelab では、拡張機能を使用してアプリの開発と管理タスクにかかる時間を短縮する方法について説明します。

作成するアプリの概要

この Codelab では、オンライン マーケットプレイスのウェブアプリに以下の機能を追加します。

• 画像を高速で読み込んでユーザー維持率を高める
• データベースのエントリを制限して、パフォーマンスを向上させ、請求額を削減する
• 古いユーザーデータの自動削除を実装してユーザーデータの保護を強化

学習内容

• 一般的なユースケースの拡張機能を見つける方法
• プロジェクトに拡張機能をインストールして構成する方法
• プロジェクトで拡張機能を維持（モニタリング、更新、アンインストール）する方法

この Codelab では、Firebase 拡張機能に焦点を当てます。この Codelab で説明した他の Firebase プロダクトの詳細については、Firebase のドキュメントと他の Codelab をご覧ください。

必要なもの

• 最新のウェブブラウザ（Chrome を推奨）がインストールされたパソコン
• Google アカウント

2. Firebase プロジェクトを作成して設定する

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

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

これから構築するアプリでは、ウェブアプリに使用できるいくつかの Firebase プロダクトを使用します。

• Firebase Authentication: ユーザーを簡単に識別できます。
• Firebase Realtime Database: 構造化データをクラウドに保存し、データが更新されたらすぐに通知を受け取れます。
• 画像をクラウドに保存する Cloud Storage for Firebase

次に、Firebase コンソールを使用して、これらの Firebase プロダクトを有効にして構成します。

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

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

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

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

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

メールアドレスによるログインを有効にする

認証はこの Codelab の主要なトピックではありませんが、アプリではなんらかの形の認証を行い、アプリのユーザーをそれぞれ一意に識別することが重要です。メールアドレスでログインします。

1. Firebase コンソールの左側のパネルで [開発] をクリックします。
2. [認証] をクリックし、[ログイン方法] タブをクリックします（または、ここをクリックして [ログイン方法] タブに直接移動します）。
3. [ログイン プロバイダ] リストで [メール/パスワード] をクリックし、[有効にする] スイッチをオンの位置に設定して、[保存] をクリックします。

Realtime Database を有効にする

アプリは Firebase Realtime Database を使用して販売アイテムを保存します。

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

データベースのセキュリティ ルールを設定する

次に、このアプリに必要なセキュリティ ルールを設定します。アプリのセキュリティ保護に役立つ基本的なルールの例をいくつか示します。これらのルールでは、誰でも販売中のアイテムを閲覧できますが、他の読み取りと書き込みはログインしたユーザーのみが実行できます。これらのルールの詳細は気にしないでください。アプリを起動して実行するために、コピーして貼り付けるだけです。

1. Realtime Database ダッシュボードの上部にある [ルール] タブをクリックします。

2. 次のルールセットをコピーして、[ルール] タブのルール フィールドに貼り付けます。

   {
     "rules": {
       ".read": false,
       ".write": false,
         "drafts": {
           ".indexOn": "seller",
           ".read": "auth.uid !== null",
           ".write": "auth.uid !== null"
       },
       "sellers": {
           ".read": "auth.uid !== null",
           ".write": "auth.uid !== null"
       },
         "forsale": {
           ".read": true,
           ".write": "auth.uid !== null"
         }
     }
   }
   

3. [公開] をクリックします。

Cloud Storage for Firebase を設定する

このアプリは Cloud Storage for Firebase を使用して、販売する商品の画像を保存します。

Firebase プロジェクトで 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. [作成] をクリックします。

Storage バケットのセキュリティ ルールを設定する

次に、このアプリに必要なセキュリティ ルールを設定します。これらのルールでは、認証されたユーザーのみが新しい画像を投稿できますが、リストに登録されたアイテムの画像は誰でも閲覧できます。

1. [ストレージ] ダッシュボードの上部にある [ルール] タブをクリックします。

2. 次のルールセットをコピーして、[ルール] タブのルール フィールドに貼り付けます。

   rules_version = '2';
   service firebase.storage {
     match /b/{bucket}/o {
       match /friendlymarket/{ImageId} {
         allow read;
         allow write: if request.auth != null;
       }
     }
   }
   

3. [公開] をクリックします。

3. サンプルアプリを実行する

StackBlitz プロジェクトをフォークする

この Codelab では、複数の Firebase ワークフローが統合されたオンライン エディタである StackBlitz を使用してアプリをビルドしてデプロイします。Stackblitz では、ソフトウェアのインストールや特別な StackBlitz アカウントは必要ありません。

StackBlitz では、プロジェクトを他のユーザーと共有できます。StackBlitz プロジェクトの URL を持っている他のユーザーは、コードを表示してプロジェクトをフォークできますが、StackBlitz プロジェクトを編集することはできません。

1. 開始コードについては、https://stackblitz.com/edit/friendlymarket-codelab にアクセスしてください。
2. StackBlitz ページの上部にある [Fork] をクリックします。

これで、開始コードのコピーが独自の StackBlitz プロジェクトとして作成されました。ログインしていないため、「アカウント」は @anonymous と表示されますが、問題ありません。プロジェクトには、一意の名前と一意の URL があります。すべてのファイルと変更はこの StackBlitz プロジェクトに保存されます。

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

1. StackBlitz で src/firebase-config.js ファイルを表示します。ここに Firebase 構成オブジェクトを追加します。
2. Firebase コンソールに戻り、左上の [プロジェクトの概要] をクリックして、プロジェクトの概要ページに移動します。
3. プロジェクトの概要ページの中央にあるウェブアイコン をクリックして、新しい Firebase ウェブアプリを作成します。
4. アプリをニックネーム FriendlyMarket Codelab で登録します。
5. この Codelab では、[このアプリの Firebase Hosting も設定します] の横にあるチェックボックスをオンにしないでください。代わりに、StackBlitz のプレビュー ペインを使用します。
6. [アプリの登録] をクリックします。
7. アプリの Firebase 構成オブジェクトをクリップボードにコピーします。<script> タグはコピーしないでください。注: 後で構成を確認する必要がある場合は、こちらの手順に沿って操作します。

8. [コンソールに進む] をクリックします。

プロジェクトの構成をアプリに追加します。

1. StackBlitz に戻り、src/firebase-config.js ファイルに移動します。
2. 構成スニペットをファイルに貼り付けます。完了すると、次のようになります（ただし、構成オブジェクトの値はプロジェクトの値に置き換えられます）。

このアプリの出発点はどこですか？

StackBlitz 画面の右側にあるインタラクティブ プレビューをご覧ください。

この Codelab では、基本的なマーケットプレイス アプリのコードから始めます。どのユーザーも販売中のアイテムのリストを表示し、リンクをクリックしてアイテムの詳細ページを表示できます。ログインしているユーザーには、価格交渉や商品の購入ができるよう、販売者の連絡先情報が表示されます。

アプリを試す:

1. ホーム画面上部のボタンからログインします。架空のメールアドレス、名前、パスワードを使用できます。
2. 右下の [出品する] ボタンをクリックして、出品を作成します。
3. [タイトル] に「Xylophone」と入力します。
4. [Asking Price] に「50」と入力します。
5. [Item Description]（アイテムの説明）に「This high quality xylophone can be used to play music.」と入力します。
6. この木琴の画像をパソコンにダウンロードし、[商品の写真] ボタンでアップロードします。

file_download画像をダウンロード

7. すべてのフィールドに入力して画像をアップロードしたら、[投稿] をクリックします。
8. 新しいリスティングを見つけます。商品をクリックして詳細画面を表示し、[販売者の連絡先情報] パネルを開きます。
9. Firebase コンソールに戻ります。[データベース] ダッシュボードの forsale ノードの下に、投稿したアイテムのエントリが表示されます。[ストレージ] ダッシュボードの friendlymarket パスにも、アップロードした画像が表示されます。

4. 拡張機能を見つけてインストールする

問題

アプリのユーザー調査を行った結果、ほとんどのユーザーがパソコンではなくスマートフォンからサイトにアクセスしていることがわかりました。しかし、モバイル ユーザーは数秒でサイトを離脱する傾向があることも統計情報に示されています。

そこで、モバイル接続速度でサイトをテストしてみます。（手順については、こちらをご覧ください）。画像の読み込みに非常に時間がかかり、ブラウザにキャッシュ保存されていないことがわかります。この長い読み込み時間は、すべてのページビューで発生します。

解決策

画像を最適化する方法を読んだ後、画像の読み込みパフォーマンスを改善するために次の 2 つの手順を実行することにしました。

• 画像を圧縮します。携帯電話で撮影した画像でも、このアプリのニーズに必要な解像度よりもはるかに高い解像度で撮影されています。ファイルサイズを小さくすると、アプリの解像度が著しく低下することなく、読み込み時間を短縮できます。
• キャッシュ保存。デフォルトでは、Cloud Storage オブジェクトにはブラウザに画像をキャッシュに保存しないように指示するヘッダーがあります。つまり、ユーザーのブラウザは同じ画像を何度もダウンロードすることになります。幸いなことに、これらのヘッダーを変更してキャッシュ保存を許可できます。クライアントサイドの Cloud Storage SDK と Firebase Admin SDK の両方で、これらのヘッダーを設定できます。

画像を圧縮するには、アップロード品質を制限するか、画像のサイズを変更するサーバーサイドのプロセスが必要です。トレードオフを考えてみましょう。

• クライアントサイド。クライアントサイドのプロセスでは、アップロードされる画像のファイルサイズを制限するだけで済みます。つまり、新しいサーバー ロジックを記述したり、保守したりする必要はありません。しかし、出品者は自分で画像のサイズを変更する方法を把握する必要があるため、新しいリスティングを作成する際の面倒で直感的でない障壁にもなります。
• サーバーサイド。Cloud Functions for Firebase を使用している場合は、アップロード時に画像を自動的にサイズ変更する関数をトリガーできます。つまり、販売者は好きなサイズの画像をアップロードでき（追加の作業は不要）、バックエンド関数で画像をシームレスにサイズ変更できます。この機能のサンプルも用意されています。

サーバーサイドが適しているようですが、この方法でも、サンプルを複製し、設定手順に沿って操作してから、Firebase CLI で関数をデプロイする必要があります。画像のサイズ変更は、一般的なユースケースのように思えます。もっと簡単な解決策はないでしょうか？

より簡単な解決策

そのような方に朗報です。もっと簡単な解決策があります。Firebase Extensions です。Firebase ウェブサイトで、利用可能な拡張機能のカタログを確認しましょう。

ご覧ください。「Resize Images」という拡張機能があります。これは期待できそうです。

この拡張機能をアプリで使用してみましょう。

拡張機能をインストールする

1. [詳細を表示] をクリックすると、この拡張機能の詳細が表示されます。[ユーザーが構成可能な機能] で、サイズ変更するディメンションを設定できます。また、キャッシュ ヘッダーを設定することもできます。正解です。
2. 拡張機能の詳細ページで、[コンソールにインストール] ボタンをクリックします。すべてのプロジェクトが一覧表示された Firebase コンソールのページが表示されます。
3. この Codelab 用に作成した FriendlyMarket プロジェクトを選択します。
4. [拡張機能を構成] の手順が表示されるまで、画面上の手順に沿って操作します。手順には、拡張機能の基本的な概要、作成するリソース、必要なアクセスロールが表示されます。
5. [**Cache-Control** リサイズされた画像のヘッダー] フィールドに、次のように入力します。

public, max-age=31536000

6. 他のパラメータはデフォルト値のままにします。
7. [拡張機能をインストール] をクリックします。

インストールが完了するまで...

Firebase コマンドライン インターフェースを使用してインストールする

コマンドライン ツールに慣れている場合は、Firebase CLI を使用して拡張機能をインストールして管理することもできます。CLI の最新バージョンで使用できる firebase ext コマンドを使用します。詳しくは、こちらをご覧ください。

（省略可） Cache-Control ヘッダーの詳細

Cache-Control ヘッダー値 public, max-age=31536000 は、画像が最大 1 年間キャッシュに保存されることを意味します。Cache-Control ヘッダーの詳細については、こちらのドキュメントをご覧ください。

クライアント コードを更新する

インストールした拡張機能は、サイズ変更後の画像を元の画像と同じバケットに書き込みます。サイズ変更された画像のファイル名には、構成されたサイズが追加されます。たとえば、元のファイルパスが friendlymarket/user1234-car.png の場合、サイズ変更された画像のファイルパスは friendlymarket/user1234-car_200x200.png になります。

フルサイズの画像の代わりにサイズ変更された画像を取得するようにアプリを更新しましょう。

1. StackBlitz で src/firebase-refs.js ファイルを開きます。
2. 既存の getImageRef 関数を次のコードに置き換えて、サイズ変更された画像の ref を作成します。

export function getImageRef(storage, imagePath) {
  const xDimension = 200;
  const yDimension = 200;

  // find the '.' in 'file.jpg', 'file.png', etc
  const fileExtensionIndex = imagePath.lastIndexOf('.');

  const pathNameWithoutExtension = imagePath.substring(0, fileExtensionIndex);
  const dimensions = `${xDimension}x${yDimension}`;
  const fileExtension = imagePath.substring(fileExtensionIndex);

  return {
    resized: storage().ref(
      `${pathNameWithoutExtension}_${dimensions}${fileExtension}`
    ),
    original: storage().ref(imagePath)
  };
}

テストする

この拡張機能は新しい画像のアップロードを監視するため、既存の画像のサイズは変更されません。

新しい投稿を作成して、拡張機能の動作を確認します。

1. アプリの上部バーにある [Friendly Market] をクリックして、ホーム画面に移動します。
2. アプリの右下にある [Sell something]（出品する）ボタンをクリックして、出品情報を作成します。
3. [タイトル] に「Coffee」と入力します。
4. [Asking Price] に「1」と入力します。
5. [Item Description]（アイテムの説明）に「Selling one cafe latte. It has foam art in the shape of a bear」と入力します。
6. このコーヒー カップの画像をパソコンにダウンロードし、[商品の写真] ボタンでアップロードします。file_download画像をダウンロード
7. すべてのフィールドに入力して画像をアップロードしたら、[投稿] をクリックします。コーヒーのリスティングが木琴の下に表示されます。
8. Firebase コンソールの Functions ダッシュボードで、[ログ] タブをクリックします。関数が実行されたことを示すログが表示されます。

9. ストレージ ダッシュボードに移動して、元のコーヒー画像とサイズ変更されたバージョンの両方が friendlymarket パスにあることを確認します。
10. StackBlitz のプレビュー ペインで、アプリのホーム画面を数回再読み込みします。コーヒーの画像が木琴の画像よりも大幅に速く読み込まれることがわかります。

画像が小さいため、最初のページ読み込みでは読み込みが速くなります。また、その後のページ更新では、ネットワーク リクエストをトリガーするのではなく、ブラウザのキャッシュから読み込まれます。

5. 拡張機能を再構成する

問題

アプリは、販売者のリスティングの下書きバージョンを自動的に保存します。ユーザーはこの機能を気に入っていますが、統計情報が少し心配です。レポートによると、下書きの約 10% しか実際に投稿されておらず、残りの 90% はデータベースの容量を占有しているだけです。

解決策

概算で計算した結果、保存する必要がある下書きは常に 5 つ程度であることがわかりました。

Firebase Extensions のカタログを覚えていますか？この状況に対応するソリューションがすでに構築されているかもしれません。Limit Child Nodes 拡張機能をインストールして、保存された下書きの数を自動的に 5 個以下に保ちましょう。新しい下書きが追加されるたびに、最も古い下書きが削除されます。

1. 拡張機能の詳細ページで [インストール] ボタンをクリックします。
2. マーケットプレイス ウェブアプリで使用している Firebase プロジェクトを選択します。
3. [拡張機能を構成] の手順が表示されるまで、画面上の手順に沿って操作します。
4. [Realtime Database path] に「drafts」と入力します。これは、下書きが保存されるデータベース内のパスです。
5. [保持するノードの最大数] に「5」と入力します。つまり、各アイテムのリスティングの 5 つの下書きが保存され、別の下書きが追加されると、最も古い下書きが自動的に削除されます。
6. [拡張機能をインストール] をクリックします。

インストールが完了するまでお待ちください...

モニタリング拡張機能

拡張機能をインストールすると、プロセスによって複数の関数が作成されます。これらの関数の実行頻度を確認したり、ログやエラー率を表示したりできます。拡張機能をモニタリングする方法の詳細については、インストールされている拡張機能を管理するをご覧ください。ドキュメントの手順に沿って、前の手順で Resize Images 拡張機能によって作成された関数を表示します。

拡張機能をアンインストールする

プロジェクトから拡張機能を削除する際に、拡張機能が作成した個々の関数を削除したくなるかもしれませんが、1 つの拡張機能が複数の関数を作成している可能性があるため、予期しない動作につながる可能性があります。ドキュメントで、拡張機能をアンインストールする方法をご確認ください。

アンインストールすると、その拡張機能のインスタンス用に作成されたすべてのリソース（拡張機能の関数など）とサービス アカウントが削除されます。ただし、拡張機能によって作成されたアーティファクト（サイズ変更された画像など）は、拡張機能のアンインストール後もプロジェクトに残ります。

1 つのプロジェクトに拡張機能の複数のコピーをインストールする

プロジェクトに特定の拡張機能のインスタンスを 1 つだけインストールする必要はありません。別のパスのエントリを制限する場合は、この拡張機能の別のインスタンスをインストールできます。ただし、この Codelab では、拡張機能を 1 回だけインストールします。

実例を見る

1. 木琴やラテの投稿に使用したアカウントでログインしていることを確認します。
2. 下書きを生成します。
3. アプリの右下にある [Sell something]（何かを売る）ボタンをクリックします。
4. [タイトル] を「下書き 1」に変更します。
5. [下書き] セクションまでスクロールして、下書きの数を確認します。少なくとも 2 つ必要です。
6. アプリバーの上部にある [FRIENDLY MARKET] ボタンをクリックします。これで、下書きは保存されますが、投稿する必要はありません。
7. 「下書き 2」、「下書き 3」など、「下書き 6」まで繰り返します。
8. 「下書き 6」を作成すると、「下書き 1」が [下書き] セクションから消えます。
9. Resize Images 拡張機能と同様に、関数ログを調べて、どの関数がトリガーされたかを確認できます。

下書きの保存上限が小さすぎます

お客様のサポートチームから連絡があり、最も活発な販売者の何人かが、下書きを投稿する前に削除されたと訴えていることがわかりました。チームメンバーと計算結果を確認したところ、計算結果が 10,000 倍もずれていることがわかりました。

この問題を解決するにはどうすればよいですか？インストール済みの拡張機能を再構成しましょう。

1. Firebase コンソールの左側のペインで、[拡張機能] をクリックします。
2. インストールした拡張機能のカードの [管理] をクリックします。
3. 右上の [拡張機能を再構成] をクリックします。
4. [保持するノードの最大数] を 50000 に変更します。
5. [保存] をクリックします。

これで完了です。拡張機能の更新に時間がかかる場合は、サポートチームに連絡して、修正がすでにデプロイされていることを伝えてください。

6. ユーザーデータを自動的に削除する

問題

カスタマー サポート チームから再度ご連絡いたします。アカウントを削除した販売者が、他のユーザーからメールを受信し続けており、怒っています。これらの販売者は、アカウントを削除するとメールアドレスがシステムから削除されることを想定していました。

現在、サポートチームは各ユーザーのデータを手動で削除していますが、もっと良い方法があるはずです。そこで、定期的に実行され、削除されたアカウントからメールアドレスをクリアする独自のバッチジョブを作成することを検討します。しかし、ユーザーデータの削除はかなり一般的な問題のようです。Firebase Extensions もこの問題の解決に役立つかもしれません。

解決策

ユーザーがアカウントを削除したときにデータベース内の users/uid ノードを自動的に削除するように、ユーザーデータの削除拡張機能を構成します。

1. 拡張機能の詳細ページで [インストール] ボタンをクリックします。
2. マーケットプレイス ウェブアプリで使用している Firebase プロジェクトを選択します。
3. [拡張機能を構成] の手順が表示されるまで、画面上の手順に沿って操作します。
4. [Realtime Database のパス] に「sellers/{UID}」と入力します。sellers の部分は、子にユーザーのメールアドレスを含むノードで、{UID} はワイルドカードです。この構成により、UID が 1234 のユーザーがアカウントを削除したときに、拡張機能がデータベースから sellers/1234 を削除する必要があることを認識します。
5. [拡張機能をインストール] をクリックします。

インストールが完了するまでお待ちください...

カスタマイズ性について

この Codelab では、Firebase Extensions が一般的なユースケースの解決に役立ち、アプリのニーズに合わせて拡張機能を構成できることを確認しました。

ただし、拡張機能ですべての問題を解決できるわけではありません。ユーザーデータの削除の問題はその一例です。ユーザーがアカウントを削除した後もメールが公開されたままになっているという現在の苦情に対応するため、ユーザーデータ削除拡張機能が導入されましたが、この拡張機能ですべてが削除されるわけではありません。たとえば、商品リスティングは引き続き利用可能で、Cloud Storage 内の画像もそのまま残ります。Delete User Data 拡張機能では、削除する Cloud Storage パスを構成できますが、ユーザーはさまざまな名前のファイルを多数アップロードできるため、これらのアーティファクトを自動的に削除するようにこの拡張機能を構成することはできません。このような状況では、アプリのデータモデルに固有のコードを記述できるように、Cloud Functions for Firebase の方が適している場合があります。

拡張機能と課金

Firebase 拡張機能自体は無料で使用できます（課金されるのは使用した基盤リソースのみです）。ただし、拡張機能に必要な基盤リソースの一部では課金が必要になる場合があります。この Codelab は、請求先アカウントなしで完了できるように設計されています。ただし、Flame プランまたは Blaze プランを設定すると、非常に興味深い Firebase 拡張機能の多くを利用できるようになります。

たとえば、URL を短縮したり、メールをトリガーしたり、コレクションを BigQuery にエクスポートしたりできます。拡張機能の全カタログについては、こちらをご覧ください。

ご希望の拡張機能が現在利用できない場合は、ぜひお知らせください。新しい拡張機能を提案するには、Firebase サポートに機能リクエストを送信してください。

実例を見る

拡張機能のインストールが完了したら、ユーザーを削除して、何が起こるかを確認します。

1. Firebase コンソールで、Realtime Database ダッシュボードに移動します。
2. sellers ノードを開きます。
3. 各販売者の情報は、ユーザー UID にキー付けされます。ユーザーの UID を選択します。
4. Firebase コンソールで、認証ダッシュボードに移動し、そのユーザーの UID を見つけます。
5. UID の右にあるメニューを開き、[アカウントを削除] を選択します。

6. Realtime Database ダッシュボードに戻ります。販売者の情報は削除されます。

7. 完了

この Codelab では多くのコードを記述しませんでしたが、マーケットプレイス アプリに重要な機能を追加しました。

拡張機能の検出、構成、インストール、再構成の方法について説明しました。また、インストールされている拡張機能をモニタリングする方法と、必要に応じてアンインストールする方法についても説明しました。

次のステップ

その他の拡張機能もご確認ください。

• Cloud Firestore でのテキスト文字列の翻訳（請求先アカウントが必要）
• Mailchimp のメールリストに新しいユーザーを追加する（お支払いアカウントが必要）
• URL を短縮する（請求先アカウントが必要）

カスタム サーバーサイド コードを追加する必要がある場合

• Cloud Functions for Firebase Codelab を確認する

その他の役立つドキュメント

拡張機能の管理:

• Firebase CLI を使用して拡張機能を管理する
• 予算アラートを設定する
• インストールした拡張機能の実行頻度を確認する
• インストールした拡張機能を新しいバージョンに更新する
• 拡張機能をアンインストールする

広告表示オプションの詳細について学習する:

• 各拡張機能のソースコードとドキュメントは GitHub で確認できます。
• 拡張機能に付与される権限とアクセスについて