ウェブ向け Firebase Performance Monitoring

1. 概要

このコードラボでは、Firebase Performance Monitoring を使用してチャット ウェブアプリのパフォーマンスを測定する方法について学習します。https://fireperf-friendlychat.web.app/ でライブデモをご覧ください。

3b1284f5144b54f6.png

ラボの内容

  • Firebase Performance Monitoring をウェブアプリに追加して、すぐに使用できる指標（ページ読み込みとネットワーク リクエスト）を取得する方法。
  • カスタム トレースを使用して特定のコード部分を測定する方法。
  • カスタム トレースに関連付けられた追加のカスタム指標を記録する方法。
  • カスタム属性を使用してパフォーマンス データをさらに分割する方法。
  • パフォーマンス モニタリング ダッシュボードを使用してウェブアプリのパフォーマンスを把握する方法。

必要なもの

  • 任意の IDE またはテキスト エディタ（WebStorm、Atom、Sublime、VS Code など）
  • ターミナル/コンソール
  • 任意のブラウザ（Chrome など）
  • Codelab のサンプルコード（コードの入手方法については、この Codelab の次のセクションをご覧ください）。

2. サンプルコードを取得する

コマンドラインから、Codelab の GitHub リポジトリのクローンを作成します。

git clone https://github.com/firebase/codelab-friendlychat-web

git がインストールされていない場合は、リポジトリを ZIP ファイルとしてダウンロードすることもできます。

スターター アプリをインポートする

IDE を使用して、クローンを作成したリポジトリから 📁? performance-monitoring-start ディレクトリを開くか、インポートします。この 📁? performance-monitoring-start ディレクトリには、Codelab の開始コード（チャット ウェブアプリ）が含まれています。

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

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

  1. Firebase コンソールで [プロジェクトを追加] をクリックします。
  2. Firebase プロジェクトに FriendlyChat という名前を付けます。

Firebase プロジェクトのプロジェクト ID を覚えておいてください。

  1. [プロジェクトを作成] をクリックします。

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

Cloud Storage for Firebase を使用するには、Firebase プロジェクトが従量課金制（Blaze）のお支払いプラン（Cloud 請求先アカウントにリンクされている）である必要があります。

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

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

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

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

  1. ウェブアイコン 58d6543a156e56f9.png をクリックして、新しい Firebase ウェブアプリを作成します。
  2. Friendly Chat というニックネームでアプリを登録し、[このアプリの Firebase Hosting も設定します] の横のチェックボックスをオンにします。
  3. [アプリの登録] をクリックします。
  4. 残りのステップをすべてクリックします。画面上の手順に今すぐ従う必要はありません。これらの手順については、この Codelab の後半で説明します。

ea9ab0db531a104c.png

Firebase Authentication 用に Google ログインを有効にする

ユーザーが Google アカウントでチャットアプリにログインできるようにするには、Google ログイン方法を使用します。

Google ログインを有効にする必要があります。

  1. Firebase コンソールの左側のパネルで、[開発] セクションを見つけます。
  2. [認証] をクリックし、[ログイン方法] タブをクリックします（コンソールに移動）。
  3. [Google] ログイン プロバイダを有効にし、[保存] をクリックします。

7f3040a646c2e502.png

Cloud Firestore を設定する

このウェブアプリは Cloud Firestore を使用してチャット メッセージを保存し、新しいチャット メッセージを受信します。

Firebase プロジェクトで Cloud Firestore を設定する方法は次のとおりです。

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

Cloud Storage for Firebase を設定する

このウェブアプリは Cloud Storage for Firebase を使用して画像ファイルを保存、アップロード、共有します。

Firebase プロジェクトで Cloud Storage for Firebase を設定する方法は次のとおりです。

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

4. Firebase コマンドライン インターフェースをインストールする

Firebase コマンドライン インターフェース（CLI）を使用すると、Firebase Hosting を使用してウェブアプリをローカルで提供したり、Firebase プロジェクトにデプロイしたりできます。

  1. Firebase ドキュメントのこちらの手順に沿って CLI をインストールします。
  2. ターミナルで次のコマンドを実行して、CLI が正しくインストールされていることを確認します。
firebase --version

Firebase CLI のバージョンが v8.0.0 以降であることを確認します。

  1. 次のコマンドを実行して、Firebase CLI を承認します。
firebase login

ウェブアプリ テンプレートは、アプリのローカル ディレクトリ（前述の Codelab でクローンを作成したリポジトリ）から Firebase Hosting 用のアプリの構成を pull するように設定されています。ただし、構成を取得するには、アプリを Firebase プロジェクトに関連付ける必要があります。

  1. コマンドラインがアプリのローカル performance-monitoring-start ディレクトリにアクセスしていることを確認します。
  2. 次のコマンドを実行して、アプリを Firebase プロジェクトに関連付けます。
firebase use --add
  1. プロンプトが表示されたら、プロジェクト ID を選択して、Firebase プロジェクトにエイリアスを指定します。

エイリアスは、複数の環境（本番環境、ステージング環境など）を使用する場合に役立ちます。ただし、この Codelab では、default というエイリアスのみを使用します。

  1. コマンドラインで残りの手順に沿って操作します。

5. Firebase Performance Monitoring と統合する

Firebase Performance Monitoring SDK for web を統合する方法はいくつかあります（詳しくはドキュメントをご覧ください）。この Codelab では、ホスティング URL からパフォーマンス モニタリングを有効にします。

パフォーマンス モニタリングを追加して Firebase を初期化する

  1. src/index.js ファイルを開き、TODO の下に次の行を追加して Firebase Performance Monitoring SDK を追加します。

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';
  1. また、Firebase プロジェクトと使用するウェブアプリに関する情報が含まれる構成オブジェクトを使用して Firebase SDK を初期化する必要があります。Firebase Hosting を使用しているため、この構成を自動で行う特別なスクリプトをインポートできます。この Codelab では、public/index.html ファイルの末尾に次の行がすでに追加されていますが、追加されていることを再度確認してください。

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
  1. src/index.js ファイルで、TODO の下に次の行を追加して、パフォーマンス モニタリングを初期化します。

index.js

// TODO: Initialize Firebase Performance Monitoring.
getPerformance();

Performance Monitoring では、ユーザーがサイトを使用する際に、ページ読み込みとネットワーク リクエストの指標が自動的に収集されるようになりました。自動ページ読み込みトレースの詳細については、ドキュメントをご覧ください。

初回入力遅延にポリフィル ライブラリを追加する

初回入力遅延は、ユーザーの操作に対するブラウザの応答でアプリの第一印象が決まります。このため、この指標は非常に重要です。

初回入力遅延は、ボタンやハイパーリンクのクリックなど、ユーザーがページ上の要素を最初に操作したときに開始します。ブラウザが入力に応答できるようになった直後に停止します。つまり、ブラウザでコンテンツの読み込みと解析が完了したときに停止します。

このポリフィル ライブラリは、パフォーマンス モニタリングとの統合に必要ありません。

public/index.html ファイルを開き、次の行のコメント化を解除します。

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

これで、コードでの Firebase Performance Monitoring との統合は完了です。

次の手順では、Firebase Performance Monitoring を使用してカスタム トレースを追加する方法について説明します。自動トレースのみを収集する場合は、[イメージをデプロイして送信を開始する] セクションに進みます。

6. アプリにカスタム トレースを追加する

Performance Monitoring では、カスタム トレースを作成できます。カスタム トレースは、アプリ内の実行ブロックの所要時間のレポートです。SDK に用意された API を使用して、カスタム トレースの開始と終了を定義します。

  1. src/index.js ファイルでパフォーマンス オブジェクトを取得し、画像メッセージをアップロードするためのカスタム トレースを作成します。

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
  1. カスタム トレースを記録するには、トレースの開始点と終了点を指定する必要があります。トレースはタイマーと考えることができます。

index.js

// TODO: Start the "timer" for the custom trace.
t.start();

 ...

    // TODO: Stop the "timer" for the custom trace.
    t.stop();

カスタム トレースを正常に定義しました。コードをデプロイすると、ユーザーが画像メッセージを送信した場合に、カスタム トレースの時間が記録されます。これにより、実際のユーザーがチャットアプリで画像を送信するのにかかる時間を把握できます。

7. アプリにカスタム指標を追加します。

また、カスタム トレースを詳細に構成することで、該当する範囲内で発生したパフォーマンス関連イベントのカスタム指標を記録することもできます。たとえば、指標を使用して、前の手順で定義したカスタム トレースの画像のサイズがアップロード時間に影響しているかどうかを調査できます。

  1. 前の手順で作成したカスタム トレース（src/index.js ファイルで定義）を見つけます。
  2. TODO の下に次の行を追加して、アップロードされた画像のサイズを記録します。

index.js

 ...

// TODO: Record image size.
t.putMetric('imageSize', file.size);

 ...

この指標を使用すると、パフォーマンス モニタリングでカスタム トレースの所要時間とアップロードされた画像のサイズを記録できます。

8. アプリにカスタム属性を追加する

前の手順を踏まえて、カスタム トレースでカスタム属性を収集することもできます。カスタム属性を使用すると、アプリ固有のカテゴリ別にデータをセグメント化できます。たとえば、画像ファイルの MIME タイプを収集して、MIME タイプがパフォーマンスに与える影響を調査できます。

  1. src/index.js ファイルで定義されたカスタム トレースを使用します。
  2. TODO の下に次の行を追加して、アップロードされた画像の MIME タイプを記録します。

index.js

 ...

// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);

 ...

この属性を使用すると、アップロードされた画像の種類に基づいて、カスタム トレースの所要時間を分類できます。

9. [拡張] User Timing API を使用してカスタム トレースを追加する

Firebase Performance Monitoring SDK は、非同期で読み込まれるように設計されているため、ページの読み込み中にウェブアプリのパフォーマンスに悪影響を及ぼすことはありません。SDK が読み込まれる前は、Firebase Performance Monitoring API を使用できません。このシナリオでも、User Timing API を使用してカスタム トレースを追加できます。Firebase Performance SDK は、measure() から経過時間を取得し、カスタム トレースとしてロギングします。

User Timing API を使用して、アプリのスタイル設定スクリプトの読み込み時間を測定します。

  1. public/index.html ファイルに次の行を追加して、アプリのスタイル設定スクリプトの読み込みの開始をマークします。

index.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>
  1. 次の行を追加して、アプリのスタイル設定スクリプトの読み込みの終了をマークし、開始と終了の間の時間を測定します。

index.html

<!-- TODO: Mark the ending of `timer` for loading App Styling script. Measure the duration from start to end. -->
<script type="text/javascript">
  performance && performance.mark('loadStylingEnd');
  performance && performance.measure('loadStyling', 'loadStylingStart', 'loadStylingEnd');
</script>

ここで作成したエントリは、Firebase Performance Monitoring によって自動的に収集されます。後で Firebase Performance コンソールで、loadStyling というカスタム トレースを探すことができます。

10. デプロイして画像の送信を開始する

Firebase Hosting にデプロイする

Firebase Performance Monitoring をコードに追加したら、次の手順でコードを Firebase Hosting にデプロイします。

  1. コマンドラインがアプリのローカル performance-monitoring-start ディレクトリにアクセスしていることを確認します。
  2. 次のコマンドを実行して、ファイルを Firebase プロジェクトにデプロイします。
firebase deploy
  1. コンソールに次のように表示されます。
=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.firebasestorage.app
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com
  1. Firebase Hosting を使用して完全にホストされているウェブアプリに、独自の 2 つの Firebase サブドメイン（https://<projectId>.firebaseapp.com と https://<projectId>.web.app）からアクセスします。

パフォーマンス モニタリングが有効になっていることを確認する

Firebase コンソールを開き、[パフォーマンス] タブに移動します。「SDK を検出しました」というウェルカム メッセージが表示されたら、Firebase Performance Monitoring と正常に統合されています。

30df67e5a07d03b0.png

画像メッセージを送信する

チャットアプリで画像を送信して、パフォーマンス データを生成します。

  1. チャットアプリにログインしたら、画像アップロード ボタン 13734cb66773e5a3.png をクリックします。
  2. ファイル選択ツールを使用して画像ファイルを選択します。
  3. カスタム指標とカスタム属性の分布をテストできるように、複数の画像を送信してみてください（いくつかのサンプルは public/images/ に保存されます）。

選択した画像とともに、新しいメッセージがアプリの UI に表示されます。

11. ダッシュボードをモニタリングする

ウェブアプリをデプロイし、ユーザーとして画像メッセージを送信したら、パフォーマンス モニタリング ダッシュボード（Firebase コンソール）でパフォーマンス データを確認できます。

ダッシュボードにアクセスする

  1. Firebase コンソールで、Friendly Chat アプリを含むプロジェクトを選択します。
  2. 左側のパネルで [品質] セクションを見つけて、[パフォーマンス] をクリックします。

デバイス上のデータを確認する

パフォーマンス モニタリングでアプリのデータが処理されると、ダッシュボードの上部にタブが表示されます。データやタブが表示されない場合は、しばらくしてからもう一度ご確認ください。

  1. [デバイス] タブをクリックします。
  • [ページの読み込み] 表には、ページの読み込み中にパフォーマンス モニタリングによって自動的に収集されるさまざまなパフォーマンス指標が表示されます。
  • [Durations] 表には、アプリのコードで定義したカスタム トレースがすべて表示されます。
  1. [Durations] テーブルで [saveImageMessage] をクリックして、トレースの特定の指標を確認します。

e28758fd02d9ffac.png

  1. [集計] をクリックして、画像サイズの分布を確認します。このカスタム トレースの画像サイズを測定するために追加した指標を確認できます。

c3cbcfc0c739a0a8.png

  1. 前の手順の [集計] の横にある [経時的] をクリックします。カスタム トレースの時間も確認できます。[もっと見る] をクリックすると、収集されたデータの詳細を確認できます。

16983baa31e05732.png

  1. 表示されたページで、[imageType] をクリックすると、画像の MIME タイプ別に再生時間データを分割できます。この特定のデータは、カスタム トレースに加えた imageType 属性が原因でロギングされました。

8e5c9f32f42a1ca1.png

ネットワーク データを確認する

HTTP/S ネットワーク リクエストは、ネットワーク呼び出しのレスポンス時間とペイロード サイズをキャプチャするレポートです。

  1. パフォーマンス モニタリング ダッシュボードのメイン画面に戻ります。
  2. [ネットワーク] タブをクリックして、ウェブアプリのネットワーク リクエスト エントリのリストを表示します。
  3. これらのデータを確認して、遅いリクエストを特定し、修正してアプリのパフォーマンスを改善しましょう。

26a2be152a77ffb9.png

12. 完了

パフォーマンス モニタリング用に Firebase SDK を有効にし、自動トレースやカスタム トレースを収集して、チャットアプリの実際のパフォーマンスを測定できました。

学習した内容

  • Firebase Performance Monitoring SDK をウェブアプリに追加する。
  • コードにカスタム トレースを追加する。
  • カスタム トレースに関連付けられたカスタム指標の記録。
  • カスタム属性を使用してパフォーマンス データをセグメント化する。
  • パフォーマンス モニタリング ダッシュボードを使用してアプリのパフォーマンスに関する分析情報を取得する方法について学習します。

詳細: