ウェブ向け Firebase Performance Monitoring

1. 概要

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

ラボの内容

• 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 を覚えておいてください。

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

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

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

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

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

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

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

Cloud Firestore を有効にする

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

Cloud Firestore を有効にする必要があります。

1. Firebase コンソールの [開発] セクションで、[データベース] をクリックします。
2. [Cloud Firestore] ペインで [データベースを作成] をクリックします。
3. [テストモードで開始] オプションを選択し、セキュリティ ルールに関する免責条項を読んでから [有効にする] をクリックします。

この Codelab のスターター コードには、より安全なルールが含まれています。これらのビューは、Codelab の後半でデプロイします。

Cloud Storage を有効にする

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

Cloud Storage を有効にする必要があります。

1. Firebase コンソールの [開発] セクションで、[Storage] をクリックします。
2. [利用開始] をクリックします。
3. Firebase プロジェクトのセキュリティ ルールに関する免責条項を読み、[OK] をクリックします。

開始時のコードには、この Codelab で後ほどデプロイする基本的なセキュリティ ルールが含まれています。

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

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

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

firebase --version

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

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

firebase login

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

4. コマンドラインがアプリのローカル performance-monitoring-start ディレクトリにアクセスしていることを確認します。
5. 次のコマンドを実行して、アプリを Firebase プロジェクトに関連付けます。

firebase use --add

6. プロンプトが表示されたら、プロジェクト ID を選択し、Firebase プロジェクトにエイリアスを指定します。

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

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

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';

2. また、使用する 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>

3. 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");

2. カスタム トレースを記録するには、トレースの開始点と終了点を指定する必要があります。トレースはタイマーと考えることができます。

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>

2. 以下の行を追加して、アプリのスタイル設定スクリプトの読み込みの終了をマークし、開始から終了までの時間を測定します。

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

3. コンソールに次のように表示されます。

=== 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.appspot.com
✔  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

4. 2 つの Firebase サブドメイン（https://<projectId>.firebaseapp.com と https://<projectId>.web.app）で、Firebase Hosting を使用して完全にホストされたウェブアプリにアクセスします。

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

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

画像メッセージを送信

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

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

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

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

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

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

1. Firebase コンソールで、Friendly Chat アプリがあるプロジェクトを選択します。
2. 左側のパネルで [Quality] セクションの [Performance] をクリックします。

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

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

1. [デバイス] タブをクリックします。

• [ページ読み込み] テーブルには、ページの読み込み中に Performance Monitoring が自動的に収集するさまざまなパフォーマンス指標が表示されます。
• [Durations] の表には、アプリのコードで定義したカスタム トレースが表示されます。

2. [Durations] テーブルの [saveImageMessage] をクリックして、トレースの特定の指標を確認します。

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

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

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

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

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

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

12. 完了

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

学習した内容

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

詳細:

• firebase.google.com
• firebase.google.com/docs/perf-mon/get-started-web
• web.dev/fast/