ウェブ向け Firebase Performance Monitoring

1. 概要

この Codelab では、Firebase Performance Monitoring を使用してチャット ウェブアプリのパフォーマンスを測定する方法を学びます。https://fireperf-friendchat.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. [Authentication] をクリックしてから、[Sign-in method] タブ（コンソールに移動）をクリックします。
  3. [Google] ログイン プロバイダを有効にして、[保存] をクリックします。

7f3040a646c2e502.png

Cloud Firestore を設定する

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

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

  1. Firebase コンソールの左側のパネルで [Build] を開き、[Firestore データベース] を選択します。
  2. [データベースを作成] をクリックします。
  3. [Database ID] は (default) に設定されたままにします。
  4. データベースのロケーションを選択し、[Next] をクリックします。
    実際のアプリでは、ユーザーに近いロケーションを選択します。
  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 を統合するにはさまざまな方法があります（詳しくは、ドキュメントをご覧ください）。この Codelab では、Hosting 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 は、ユーザーがサイトを使用するときに、ページ読み込みとネットワーク リクエストの指標を自動的に収集します。自動ページ読み込みトレースの詳細については、ドキュメントをご覧ください。

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

初回入力遅延（First Input Delay）は、ユーザー操作に反応するブラウザが、アプリの応答性についての第一印象をユーザーに与えるためです。

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

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

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. 左側のパネルで [Quality] セクションの [Performance] をクリックします。

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

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

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

e28758fd02d9ffac.png

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

c3cbcfc0c739a0a8.png

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

16983baa31e05732.png

  1. 表示されたページで [imageType] をクリックして、画像の MIME タイプ別に所要時間データを分割できます。カスタム トレースに追加した imageType 属性が原因で、このデータがログに記録されました。

8e5c9f32f42a1ca1.png

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

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

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

26a2be152a77ffb9.png

12. 完了

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

学習した内容

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

詳細: