1. はじめに
目標
この Codelab では、Firebase Extensions を使用して、オンライン ショッピングモール アプリに機能を追加します。この Codelab では、拡張機能を使用してアプリの開発と管理のタスクに費やす時間を短縮する方法を学びます。
作成するアプリの概要
この Codelab では、オンライン ショッピングモール ウェブアプリに以下の機能を追加します。
- 画像の読み込みを高速化してユーザー維持率を高める
- データベース内のエントリを制限してパフォーマンスを向上させ、請求額を削減する
- 古いユーザーデータの自動削除を実装してユーザーデータの保護を強化
ラボの内容
- 一般的なユースケースの拡張機能を見つける方法
- プロジェクトに拡張機能をインストールして構成する方法
- プロジェクトの拡張機能を維持する（モニタリング、更新、アンインストールする）方法
この Codelab では、Firebase Extensions を中心に説明します。この Codelab で説明した他の Firebase プロダクトの詳細については、Firebase のドキュメントと他の Codelab をご覧ください。
必要なもの
- 最新のウェブブラウザがインストールされたパソコン（Chrome を推奨）
- Google アカウント
2. Firebase プロジェクトを作成して設定する
Firebase プロジェクトを作成する
- Firebase コンソールで [プロジェクトを追加] をクリックし、Firebase プロジェクトに FriendlyMarket という名前を付けます。
- プロジェクト作成オプションをクリックします。Firebase の利用規約に同意します。このアプリではアナリティクスを使用しないため、Google アナリティクスの設定はスキップします。
- プロジェクトがプロビジョニングされるのを待ってから、[続行] をクリックします。
これから構築するアプリでは、ウェブアプリで利用できる次の 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 プランにアップグレードする手順は次のとおりです。
- Firebase コンソールで、プランをアップグレードを選択します。
- Blaze プランを選択します。画面上の手順に沿って、Cloud 請求先アカウントをプロジェクトにリンクします。
このアップグレードの一環として Cloud 請求先アカウントを作成する必要があった場合は、Firebase コンソールのアップグレード フローに移動してアップグレードを完了する必要があります。
メールによるログインを有効にする
認証はこの Codelab の主要なトピックではありませんが、アプリではなんらかの形の認証を行うことが重要です。アプリを使用するすべてのユーザーを一意に識別するためです。メールアドレスでログインします。
- Firebase コンソールの左側のパネルで [開発] をクリックします。
- [認証] をクリックし、[ログイン方法] タブをクリックします（または、ここをクリックして [ログイン方法] タブに直接移動します）。
- [ログイン プロバイダ] リストで [メール/パスワード] をクリックし、[有効にする] スイッチをオンの位置に設定して、[保存] をクリックします。
Realtime Database を有効にする
このアプリは Firebase Realtime Database を使用して、販売する商品を保存します。
- Firebase コンソールの左側のパネルで [Build] を開き、[Realtime Database] を選択します。
- [データベースを作成] をクリックします。
- データベースのロケーションを選択し、[次へ] をクリックします。
実際のアプリの場合は、ユーザーに近いロケーションを選択します。 - [テストモードで開始] をクリックします。セキュリティ ルールに関する免責条項を確認します。
この Codelab の次のステップでは、セキュリティ ルールを追加してデータを保護します。データベースのセキュリティ ルールを追加せずに、アプリを配布または公開しないでください。 - [作成] をクリックします。
データベースのセキュリティ ルールを設定する
次に、このアプリに必要なセキュリティ ルールを設定します。以下は、アプリのセキュリティ確保に役立つ基本的なルールの例です。これらのルールでは、誰でも商品を閲覧できますが、他の読み取りと書き込みはログインしたユーザーのみが行えます。これらのルールの詳細については心配する必要はありません。コピーして貼り付けるだけで、アプリを稼働させることができます。
- Realtime Database ダッシュボードの上部にある [ルール] タブをクリックします。
- 次のルールセットをコピーして、[ルール] タブのルール フィールドに貼り付けます。
{ "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" } } } - [公開] をクリックします。
Cloud Storage for Firebase を設定する
このアプリは Cloud Storage for Firebase を使用して、販売中のアイテムの画像を保存します。
Firebase プロジェクトで Cloud Storage for Firebase を設定する方法は次のとおりです。
- Firebase コンソールの左側のパネルで [Build] を開き、[Storage] を選択します。
- [開始] をクリックします。
- デフォルトの Storage バケットのロケーションを選択します。
US-WEST1、US-CENTRAL1、US-EAST1のバケットでは、Google Cloud Storage の「Always Free」階層を利用できます。他のすべてのロケーションのバケットは、Google Cloud Storage の料金と使用量に従います。 - [テストモードで開始] をクリックします。セキュリティ ルールに関する免責条項を確認します。
この Codelab の次のステップでは、セキュリティ ルールを追加してデータを保護します。Storage バケットのセキュリティ ルールを追加せずに、アプリを配布または公開しないでください。 - [作成] をクリックします。
Storage バケットのセキュリティ ルールを設定する
次に、このアプリに必要なセキュリティ ルールを設定します。これらのルールでは、認証されたユーザーのみが新しい画像を投稿できますが、リストに表示されたアイテムの画像は誰でも表示できます。
- [ストレージ] ダッシュボードの上部にある [ルール] タブをクリックします。
- 次のルールセットをコピーして、[ルール] タブのルール フィールドに貼り付けます。
rules_version = '2'; service firebase.storage { match /b/{bucket}/o { match /{allPaths=**} { allow read, write: if request.auth != null; } match /friendlymarket/{ImageId} { allow read; allow write: if request.auth != null; } } } - [公開] をクリックします。
3. サンプルアプリを実行します。
StackBlitz プロジェクトをフォークする
この Codelab では、いくつかの Firebase ワークフローが統合されたオンライン エディタである StackBlitz を使用して、アプリをビルドしてデプロイします。Stackblitz では、ソフトウェアのインストールや特別な StackBlitz アカウントは必要ありません。
StackBlitz では、プロジェクトを他のユーザーと共有できます。StackBlitz プロジェクトの URL を知っている他のユーザーは、コードを表示したり、プロジェクトをフォークしたりできますが、StackBlitz プロジェクトを編集することはできません。
- 開始コードについては、https://stackblitz.com/edit/friendlymarket-codelab にアクセスしてください。
- StackBlitz ページの上部にある [Fork] をクリックします。
これで、開始コードのコピーが独自の StackBlitz プロジェクトとして作成されました。ログインしていないため、アカウント名は @anonymous になっていますが、問題ありません。プロジェクトには一意の名前と一意の URL があります。すべてのファイルと変更は、この StackBlitz プロジェクトに保存されます。
Firebase ウェブアプリをプロジェクトに追加する
- StackBlitz で
src/firebase-config.jsファイルを表示します。ここに Firebase 構成オブジェクトを追加します。 - Firebase コンソールに移動し、左上の [プロジェクトの概要] をクリックしてプロジェクトの概要ページに移動します。
- プロジェクトの概要ページの中央にあるウェブアイコン
をクリックして、新しい Firebase ウェブアプリを作成します。
- アプリを FriendlyMarket Codelab というニックネームで登録します。
- この Codelab では、[このアプリの Firebase Hosting も設定します] の横にあるチェックボックスはオンにしないでください。代わりに、StackBlitz のプレビューペインを使用します。
- [アプリの登録] をクリックします。
- アプリの Firebase 構成オブジェクトをクリップボードにコピーします。
<script>タグはコピーしないでください。注: 後で構成を確認する必要がある場合は、こちらの手順に沿って操作してください。
- [コンソールに進む] をクリックします。
プロジェクトの構成をアプリに追加します。
- StackBlitz に戻り、
src/firebase-config.jsファイルに移動します。 - 構成スニペットをファイルに貼り付けます。変更すると、次のような構成になります（ただし、構成オブジェクトには独自のプロジェクトの値が使用されます）。
このアプリの出発点は何ですか？
StackBlitz 画面の右側にあるインタラクティブなプレビューを確認します。
この Codelab では、まず基本的なショッピングモール アプリのコードから始めます。どのユーザーも、販売中のアイテムのリストを表示し、リンクをクリックしてアイテムの詳細ページを表示できます。ユーザーがログインしている場合は、販売者の連絡先情報が表示され、価格交渉して商品を購入できます。
アプリを試す:
- ホーム画面上部のボタンでログインします。メールアドレス、名前、パスワードは偽のものを入力できます。
- 右下の [商品を販売] ボタンをクリックしてリスティングを作成します。
- [タイトル] に「
Xylophone」と入力します。 - [Asking Price] に「
50」と入力します。 - [Item Description] に「
This high quality xylophone can be used to play music.」と入力します。 - この木琴の画像をパソコンにダウンロードし、[商品の画像] ボタンでアップロードします。
- すべてのフィールドに入力し、画像をアップロードしたら、[投稿] をクリックします。
- 新しいリスティングを見つけます。商品をクリックして詳細画面を表示し、[販売者の連絡先情報] パネルを開きます。
- Firebase コンソールに戻ります。[Database] ダッシュボードに、投稿したアイテムのエントリが
forsaleノードに表示されます。[Storage] ダッシュボードにも、アップロードした画像がfriendlymarketパスに表示されます。
4. 拡張機能を見つけてインストールする
問題
アプリのユーザー調査を行った結果、ほとんどのユーザーがパソコンではなくスマートフォンからサイトにアクセスしていることがわかりました。ただし、統計情報によると、モバイル ユーザーは数秒でサイトから離脱する傾向があります（「離脱」）。
モバイル接続速度でサイトをテストすると、（手順については、こちらをご覧ください）。画像の読み込みに非常に時間がかかり、ブラウザにキャッシュに保存されない。この長い読み込み時間は、ページビューごとに発生します。
解決策
画像を最適化する方法を読んで、画像の読み込みパフォーマンスを改善するために次の 2 つのステップを実施することにしました。
- 画像を圧縮する。スマートフォンでも、このアプリのニーズに必要な解像度よりもはるかに高い解像度の画像を撮影できます。ファイルサイズを小さくすると、アプリの解像度が著しく低下することなく、読み込み時間が短縮されます。
- キャッシュ保存。デフォルトでは、Cloud Storage オブジェクトには、画像をキャッシュに保存しないようにブラウザに指示するヘッダーが含まれています。つまり、ユーザーのブラウザは同じ画像を何度も再ダウンロードすることになります。幸い、これらのヘッダーを変更してキャッシュを許可できます。クライアントサイドの Cloud Storage SDK と Firebase Admin SDK の両方で、これらのヘッダーを設定できます。
画像を圧縮するには、アップロードの品質を制限するか、画像のサイズを変更するサーバーサイド プロセスが必要です。トレードオフについて考えてみましょう。
- クライアントサイド。クライアントサイド プロセスでは、アップロードする画像のファイルサイズを制限するだけで済みます。つまり、新しいサーバー ロジックを記述したり、メンテナンスしたりする必要はありません。ただし、販売者は独自の画像のサイズを変更する方法を自分で見つける必要があり、これは新しいリスティングを作成する際の煩雑で直感的でない障害となります。
- サーバーサイド。Cloud Functions for Firebase を使用している場合は、アップロード時に画像のサイズを自動的に変更する関数をトリガーできます。つまり、販売者は任意のサイズの画像をアップロードでき（追加作業は不要）、バックエンド関数で画像のサイズをシームレスに変更できます。この関数にはサンプルも用意されています。
サーバーサイドが適切な方法のように思えますが、この方法でも、サンプルをクローン化し、設定手順に沿って、Firebase CLI で関数をデプロイする必要があります。画像のサイズ変更は、一般的なユースケースのように思えます。もっと簡単な解決策はないでしょうか。
より簡単な解決策
そのような方に朗報です。もっと簡単な方法があります。Firebase Extensions です。利用可能な拡張機能のカタログについては、Firebase ウェブサイトをご覧ください。
「画像のサイズ変更」という拡張機能があります。期待できそうです。
この拡張機能をアプリで使用しましょう。
拡張機能をインストールする
- [詳細を表示] をクリックすると、この拡張機能の詳細が表示されます。[構成可能な項目] で、サイズ変更するディメンションを設定できます。また、キャッシュ ヘッダーを設定することもできます。正解です。
- 拡張機能の詳細ページで [コンソールでインストール] ボタンをクリックします。すべてのプロジェクトが一覧表示された Firebase コンソールのページが表示されます。
- この Codelab 用に作成した FriendlyMarket プロジェクトを選択します。
- [拡張機能を設定] の手順が表示されるまで、画面上の手順に沿って操作します。手順には、拡張機能の基本的な概要と、作成されるリソース、必要なアクセス権が表示されます。
- **
Cache-Control**サイズ変更された画像のヘッダー フィールドに、次のように入力します。
public, max-age=31536000
- 他のパラメータはデフォルト値のままにします。
- [拡張機能をインストール] をクリックします。
インストールが完了するまで待ちます。
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 になります。
フルサイズの画像ではなく、サイズ変更された画像を取得するようにアプリを更新しましょう。
- StackBlitz で
src/firebase-refs.jsファイルを開きます。 - 既存の
getImageRef関数を次のコードに置き換えて、サイズ変更された画像の参照を作成します。
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)
};
}
テストする
この拡張機能は新しい画像のアップロードを監視するため、既存の画像はサイズ変更されません。
新しい投稿を作成して、拡張機能がどのように機能するかを確認します。
- アプリの上部バーにある [Friendly Market] をクリックして、ホーム画面に移動します。
- アプリの右下にある [商品を販売] ボタンをクリックしてリスティングを作成します。
- [タイトル] に「
Coffee」と入力します。 - [Asking Price] に「
1」と入力します。 - [Item Description] に「
Selling one cafe latte. It has foam art in the shape of a bear」と入力します。 - コーヒーカップの画像をパソコンにダウンロードし、[商品の画像] ボタンでアップロードします。
- すべての項目に入力し、画像をアップロードしたら、[投稿] をクリックします。ザイロフォンの下にコーヒーのリスティングが表示されます。
- Firebase コンソールの Functions ダッシュボードで、[ログ] タブをクリックします。関数が実行されたことを示すログが表示されます。
- Storage ダッシュボードに移動すると、
friendlymarketパスに元のコーヒー画像とサイズ変更されたバージョンの両方が表示されます。 - StackBlitz のプレビューペインで、アプリのホーム画面を数回再読み込みします。コーヒーの画像は、木琴の画像よりも大幅に速く読み込まれます。
画像が小さいため、最初のページ読み込みではより速く読み込まれ、その後のページの更新では、ネットワーク リクエストをトリガーするのではなく、ブラウザのキャッシュから読み込まれます。
5. 拡張機能を再構成する
問題
販売者のリスティングの下書きバージョンがアプリに自動的に保存されます。ユーザーはこの機能に満足していますが、統計情報は少し心配です。報告によると、下書きの約 10% のみが実際に投稿され、残りの 90% はデータベースの容量を占有しているだけです。
解決策
ざっと計算してみると、一度に保存しておく下書きは 5 つ程度で済むとわかります。
Firebase Extensions のカタログを覚えていますか？このような状況に対応するソリューションがすでに構築されている可能性があります。子ノードを制限する拡張機能をインストールして、保存した下書きの数を 5 個以下に自動的に維持しましょう。新しい下書きが追加されるたびに、最も古い下書きが削除されます。
- 拡張機能の詳細ページで [インストール] ボタンをクリックします。
- ショッピングモール ウェブアプリで使用している Firebase プロジェクトを選択します。
- [拡張機能を設定] の手順が表示されるまで、画面上の手順に沿って操作します。
- [Realtime Database path] に「
drafts」と入力します。下書きが保存されるデータベース内のパスです。 - [保持するノードの最大数] に「
5」と入力します。つまり、商品リスティングごとに 5 つの下書きが保存され、さらに追加された場合は、最も古い下書きが自動的に削除されます。 - [拡張機能をインストール] をクリックします。
インストールが完了するまで待ちます。
モニタリング拡張機能
拡張機能をインストールすると、プロセスによって複数の関数が作成されます。これらの関数の実行頻度を確認したり、ログやエラー率を表示したりできます。拡張機能をモニタリングする方法の詳細については、インストール済みの拡張機能を管理するをご覧ください。ドキュメントの手順に沿って、前の手順で Resize Images 拡張機能によって作成された関数を表示します。
拡張機能のアンインストール
プロジェクトから拡張機能を削除する際に、拡張機能が作成した個々の関数を削除したくなることがありますが、1 つの拡張機能で複数の関数が作成される可能性があるため、予期しない動作が発生する可能性があります。ドキュメントで拡張機能をアンインストールする方法をご確認ください。
アンインストールすると、すべてのリソース（拡張機能の関数など）と、その拡張機能のインスタンスに作成されたサービス アカウントが削除されます。ただし、拡張機能によって作成されたアーティファクト（サイズ変更された画像など）は、拡張機能をアンインストールした後もプロジェクトに残ります。
1 つのプロジェクトに拡張機能の複数のコピーをインストールする
プロジェクトに特定の拡張機能のインスタンスを 1 つだけインストールすることはできません。別のパスのエントリを制限する場合は、この拡張機能の別のインスタンスをインストールします。ただし、この Codelab では、拡張機能を 1 回だけインストールします。
実例を見る
- シロフォンまたはラテを投稿したアカウントでログインしていることを確認します。
- 回答案を生成します。
- アプリの右下にある [商品を販売] ボタンをクリックします。
- [タイトル] を「ドラフト 1」に編集します。
- [下書き] セクションまでスクロールして、下書きの数を確認します。2 つ以上必要です。
- アプリバーの上部にある [FRIENDLY MARKET] ボタンをクリックします。こうすれば、下書きは保存されますが、投稿する必要はありません。
- 「ドラフト 2」、「ドラフト 3」と繰り返して「ドラフト 6」まで作成します。
- [下書き 6] を作成すると、[下書き] セクションから [下書き 1] が消えます。
- 画像のサイズ変更拡張機能の場合と同様に、関数ログを確認して、トリガーされた関数を確認できます。
保存できる下書きの上限が小さすぎます
カスタマー サポート チームから、最も多くの商品を販売している販売者の一部から、下書きが投稿される前に削除されるという苦情が寄せられているという連絡を受けた。チームメイトと計算を確認したところ、計算が 10,000 倍も間違っていたことに気づきました。
解決するにはどうすればよいですか？インストール済みの拡張機能を再構成しましょう。
- Firebase コンソールの左側のペインで、[拡張機能] をクリックします。
- インストールした拡張機能のカードの [管理] をクリックします。
- 右上の [拡張機能を再構成] をクリックします。
- [保持するノードの最大数] を
50000に変更します。 - [保存] をクリックします。
これで設定は完了です。拡張機能の更新が完了するまでの間、サポートチームに連絡し、修正がすでにデプロイされていることを伝えることができます。
6. ユーザーデータを自動的に削除する
問題
カスタマー サポート チームから再度ご連絡いたします。アカウントを削除した販売者にも他のユーザーからのメールが届き、販売者は怒っています。これらの販売者は、アカウントを削除したときにメールアドレスがシステムから削除されることを想定していました。
現時点では、サポートチームが各ユーザーのデータを手動で削除していますが、もっと良い方法があるはずです。考えた結果、定期的に実行され、削除されたアカウントからメールアドレスを削除する独自のバッチジョブを作成することを検討します。ただし、ユーザーデータの削除は非常に一般的な問題のようです。Firebase Extensions もこの問題の解決に役立つ可能性があります。
解決策
ユーザーがアカウントを削除したときに、データベース内の users/uid ノードを自動的に削除するように Delete User Data 拡張機能を構成します。
- 拡張機能の詳細ページで [インストール] ボタンをクリックします。
- ショッピングモール ウェブアプリで使用している Firebase プロジェクトを選択します。
- [拡張機能を設定] の手順が表示されるまで、画面上の手順に沿って操作します。
- [Realtime Database のパス] に「
sellers/{UID}」と入力します。sellers部分は、子にユーザーのメールアドレスを含むノードであり、{UID}はワイルドカードです。この設定により、UID が 1234 のユーザーがアカウントを削除すると、拡張機能はデータベースからsellers/1234を削除する必要があります。 - [拡張機能をインストール] をクリックします。
インストールが完了するまで待ちます。
カスタマイズについて
この Codelab では、Firebase Extension が一般的なユースケースの解決に役立つこと、拡張機能はアプリのニーズに合わせて構成できることを確認しました。
ただし、拡張機能ですべての問題を解決できるわけではありません。ユーザーデータの削除の問題はその一例です。ユーザーデータ削除拡張機能は、ユーザーがアカウントを削除した後もメールが公開されているという現在の苦情に対処するものですが、すべてのデータが削除されるわけではありません。たとえば、商品リスティングは引き続き利用可能で、Cloud Storage 内の画像も残ります。[ユーザーデータを削除] 拡張機能では、削除する Cloud Storage パスを構成できますが、ユーザーがさまざまな名前のさまざまなファイルをアップロードできるため、これらのアーティファクトを自動的に削除するようにこの拡張機能を構成することはできません。このような状況では、Cloud Functions for Firebase の方が適しているかもしれません。アプリのデータモデルに固有のコードを書くことができるためです。
拡張機能と課金
Firebase Extensions 自体は無料で使用できます（課金の対象になるのは使用した基盤リソースのみです）。ただし、拡張機能に必要な基盤リソースの一部には課金が必要になる場合があります。この Codelab は、請求先アカウントなしで完了できるように設計されています。ただし、Flame プランまたは Blaze プランを設定すると、非常に興味深い Firebase 拡張機能が多数利用できるようになります。
たとえば、URL を短縮したり、メールをトリガーしたり、コレクションを BigQuery にエクスポートしたりできます。拡張機能のカタログ全体については、こちらをご覧ください。
ご希望の拡張機能が現在ご利用いただけない場合は、お気軽にお問い合わせください。新しい拡張機能の提案については、Firebase サポートに機能リクエストを送信してください。
実例を見る
拡張機能のインストールが完了したら、ユーザーを削除して、どうなるかを確認します。
- Firebase コンソールで、Realtime Database ダッシュボードに移動します。
sellersノードを展開します。- 各販売者の情報がユーザーの UID にキー付けされます。ユーザーの UID を選択します。
- Firebase コンソールで 認証ダッシュボードに移動し、そのユーザーの UID を見つけます。
- UID の右側にあるメニューを開き、[アカウントを削除] を選択します。
- Realtime Database ダッシュボードに戻ります。販売者の情報は削除されます。
7. 完了
この Codelab ではコードをあまり記述していませんが、マーケットプレイス アプリに重要な機能を追加しました。
拡張機能の検出、構成、インストール、再構成の方法について学習しました。また、インストールされている拡張機能をモニタリングする方法と、必要に応じてアンインストールする方法についても説明しました。
次のステップ
その他の拡張機能もご覧ください。
- Cloud Firestore でのテキスト文字列の翻訳（請求先アカウントが必要）
- Mailchimp メールリストに新規ユーザーを追加する（お支払いアカウントが必要）
- URL を短縮する（請求先アカウントが必要）
サーバーサイドのカスタム コードがさらに必要な場合
その他の役立つドキュメント
拡張機能の管理:
- Firebase CLI を使用して拡張機能を管理する
- 予算アラートを設定する
- インストールした拡張機能の実行頻度の確認
- インストールした拡張機能を新しいバージョンに更新する
- 拡張機能をアンインストールする
広告表示オプションの詳細: