1. 概要
この Codelab では、Firebase Performance Monitoring を使用してチャット ウェブアプリのパフォーマンスを測定する方法を学びます。ライブデモについては、https://fireperf-friendlychat.web.app/ をご覧ください。
ラボの内容
- Firebase Performance Monitoring をウェブアプリに追加して、すぐに使える指標（ページ読み込みとネットワーク リクエスト）を取得する方法。
- カスタム トレースで特定のコードを測定する方法
- カスタム トレースに関連付けられた追加のカスタム指標を記録する方法。
- カスタム属性を使ってパフォーマンス データをさらに分割する方法
- パフォーマンス モニタリング ダッシュボードを使用してウェブアプリのパフォーマンスを把握する方法。
必要なもの
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 プロジェクトを作成する
- Firebase コンソールで [プロジェクトを追加] をクリックします。
- Firebase プロジェクトに
FriendlyChatという名前を付けます。
Firebase プロジェクトのプロジェクト ID を覚えておいてください。
- [プロジェクトを作成] をクリックします。
プロジェクトに Firebase ウェブアプリを追加する
- ウェブアイコン
をクリックして、新しい Firebase ウェブアプリを作成します。 - アプリをニックネーム
Friendly Chatで登録し、[このアプリの Firebase Hosting も設定します] の横にあるチェックボックスをオンにします。 - [アプリを登録] をクリックします。
- 残りのステップをすべてクリックします。画面上の指示に従う必要はありません。これについては、この Codelab の後のステップで説明します。
Firebase Authentication での Google ログインを有効にする
ユーザーが Google アカウントでチャットアプリにログインできるように、Google ログイン方法を使用します。
Google ログインを有効にする必要があります。
- Firebase コンソールで、左側のパネルにある [開発] セクションを見つけます。
- [Authentication]、[ログイン方法] タブ（コンソールに移動）の順にクリックします。
- Google ログイン プロバイダを有効にして、[保存] をクリックします。
Cloud Firestore を有効にする
このウェブアプリは、Cloud Firestore を使用してチャット メッセージを保存し、新しいチャット メッセージを受信します。
Cloud Firestore を有効にする必要があります。
- Firebase コンソールの [開発] セクションで、[データベース] をクリックします。
- Cloud Firestore ペインで [データベースを作成] をクリックします。
- [テストモードで開始] オプションを選択し、セキュリティ ルールに関する免責条項を読み、[有効にする] をクリックします。
この Codelab のスターター コードには、より安全なルールが含まれています。これらは、この Codelab で後ほどデプロイします。
Cloud Storage を有効にする
このウェブアプリは、Cloud Storage for Firebase を使用して画像を保存、アップロード、共有します。
Cloud Storage を有効にする必要があります。
- Firebase コンソールの [開発] セクションで、[Storage] をクリックします。
- [利用開始] をクリックします。
- Firebase プロジェクトのセキュリティ ルールに関する免責条項を読み、[OK] をクリックします。
開始コードには、この Codelab の後半でデプロイする基本的なセキュリティ ルールが含まれています。
4. Firebase コマンドライン インターフェースをインストールする
Firebase コマンドライン インターフェース（CLI）では、Firebase Hosting を使用してウェブアプリをローカルで提供したり、ウェブアプリを Firebase プロジェクトにデプロイしたりできます。
- Firebase ドキュメントのこちらの手順に沿って CLI をインストールします。
- ターミナルで次のコマンドを実行して、CLI が正しくインストールされていることを確認します。
firebase --version
Firebase CLI のバージョンが v8.0.0 以降であることを確認します。
- 次のコマンドを実行して、Firebase CLI を承認します。
firebase login
アプリのローカル ディレクトリ（Codelab の前半でクローンを作成したリポジトリ）から Firebase Hosting のアプリの構成を pull するウェブアプリ テンプレートをセットアップしました。ただし、構成を pull するには、アプリを Firebase プロジェクトに関連付ける必要があります。
- コマンドラインでアプリのローカル
performance-monitoring-startディレクトリにアクセスしていることを確認します。 - 次のコマンドを実行して、アプリを Firebase プロジェクトに関連付けます。
firebase use --add
- プロンプトが表示されたら、プロジェクト ID を選択し、Firebase プロジェクトにエイリアスを指定します。
エイリアスは複数の環境（本番環境、ステージングなど）がある場合に役立ちます。ただし、この Codelab では default のエイリアスのみを使用します。
- コマンドラインの残りの手順に沿って操作します。
5. Firebase Performance Monitoring と統合する
ウェブ用 Firebase Performance Monitoring SDK と統合するには、さまざまな方法があります（詳しくは、こちらのドキュメントをご覧ください）。この Codelab では、Hosting URL からパフォーマンス モニタリングを有効にします。
パフォーマンス モニタリングを追加して Firebase を初期化する
src/index.jsファイルを開き、TODOの下に次の行を追加して Firebase Performance Monitoring SDK をインクルードします。
index.js
// TODO: Import the Firebase Performance Monitoring library here.
import {
getPerformance,
trace
} from 'firebase/performance';
- また、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>
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 を使用して、カスタム トレースの開始と終了を定義します。
src/index.jsファイルでパフォーマンス オブジェクトを取得し、画像メッセージをアップロードするためのカスタム トレースを作成します。
index.js
// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
- カスタム トレースを記録するには、トレースの開始点と停止点を指定する必要があります。トレースはタイマーと考えることができます。
index.js
// TODO: Start the "timer" for the custom trace.
t.start();
...
// TODO: Stop the "timer" for the custom trace.
t.stop();
これで、カスタム トレースが正常に定義されました。コードをデプロイした後、ユーザーが画像メッセージを送信した場合、カスタム トレースの継続時間が記録されます。これにより、実際のユーザーがチャットアプリで画像を送信するのにかかる時間を把握できます。
7. アプリにカスタム指標を追加します。
さらに、スコープ内で発生したパフォーマンス関連イベントのカスタム指標を記録するようにカスタム トレースを構成することもできます。たとえば、指標を使用して、前のステップで定義したカスタム トレース用の画像のサイズによってアップロード時間が影響を受けるかどうかを調査できます。
- 前のステップのカスタム トレース（
src/index.jsファイルで定義）を見つけます。 TODOの下に次の行を追加して、アップロードされた画像のサイズを記録します。
index.js
...
// TODO: Record image size.
t.putMetric('imageSize', file.size);
...
この指標により、パフォーマンス モニタリングでカスタム トレース期間とアップロードされた画像サイズを記録できます。
8. アプリにカスタム属性を追加する
ここまでの手順で、カスタム トレースでカスタム属性を収集することもできます。カスタム属性を使用すると、アプリに固有のカテゴリでデータを分類できます。たとえば、画像ファイルの MIME タイプを収集して、その MIME タイプがパフォーマンスに与える影響を調査できます。
src/index.jsファイルで定義されたカスタム トレースを使用します。TODOの下に次の行を追加して、アップロードされた画像の MIME タイプを記録します。
index.js
...
// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);
...
パフォーマンス モニタリングでは、この属性を使用して、アップロードされたイメージのタイプに基づいてカスタム トレース期間を分類できます。
9. [Extend] User Timing API を使用してカスタム トレースを追加する
Firebase Performance Monitoring SDK は非同期で読み込めるように設計されているため、ページの読み込み中にウェブアプリのパフォーマンスに悪影響を及ぼすことはありません。SDK を読み込む前は、Firebase Performance Monitoring API は使用できません。この場合でも、User Timing API を使用すればカスタム トレースを追加できます。Firebase Performance SDK は measure() から所要時間を取得し、カスタム トレースとしてログに記録します。
ここでは、User Timing API を使用して、アプリのスタイル設定スクリプトを読み込む時間を測定します。
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>
- 以下の行を追加して、アプリスタイル設定スクリプトの読み込み終了をマークして、開始から終了までの時間を測定します。
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 によって自動的に収集されます。loadStyling というカスタム トレースは、後で Firebase Performance コンソールに表示されます。
10. イメージをデプロイして開始する
Firebase Hosting にデプロイする
Firebase Performance Monitoring をコードに追加したら、次の手順に沿ってコードを Firebase Hosting にデプロイします。
- コマンドラインでアプリのローカル
performance-monitoring-startディレクトリにアクセスしていることを確認します。 - 次のコマンドを実行して、ファイルを Firebase プロジェクトにデプロイします。
firebase deploy
- コンソールに次のように表示されます。
=== 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
- 2 つの Firebase サブドメイン（
https://<projectId>.firebaseapp.comとhttps://<projectId>.web.app）で、Firebase Hosting を使用して完全にホストされたウェブアプリにアクセスします。
パフォーマンス モニタリングが有効になっていることを確認する
Firebase コンソールを開き、[パフォーマンス] タブに移動します。「SDK が検出されました」というウェルカム メッセージが表示された場合は、Firebase Performance Monitoring と正常に統合されています。
画像メッセージを送信
チャットアプリで画像を送信して、パフォーマンス データを生成します。
- チャットアプリにログインしたら、画像のアップロード ボタン
をクリックします。 - ファイル選択ツールを使用して画像ファイルを選択します。
- カスタム指標とカスタム属性の分布をテストできるように、複数の画像（いくつかのサンプルが
public/images/に保存されている）を送信してみてください。
新しいメッセージは、選択した画像とともにアプリの UI に表示されます。
11. ダッシュボードをモニタリングする
ウェブアプリをデプロイしてユーザーとして画像メッセージを送信したら、パフォーマンス モニタリング ダッシュボード（Firebase コンソール）でパフォーマンス データを確認できます。
ダッシュボードにアクセスする
- Firebase コンソールで、
Friendly Chatアプリがあるプロジェクトを選択します。 - 左側のパネルで [品質] セクションを見つけ、[パフォーマンス] をクリックします。
デバイス上のデータを確認する
パフォーマンス モニタリングでアプリのデータが処理されると、ダッシュボードの上部にタブが表示されます。データやタブがまだ表示されない場合は、しばらくしてからもう一度ご確認ください。
- [デバイス] タブをクリックします。
- [ページの読み込み] の表には、ページの読み込み中にパフォーマンス モニタリングが自動的に収集するさまざまなパフォーマンス指標が表示されます。
- [Durations] テーブルには、アプリのコードで定義したカスタム トレースが表示されます。
- [Durations] テーブルの [saveImageMessage] をクリックして、トレースの特定の指標を確認します。
- [集計] をクリックして、画像サイズの分布を確認します。このカスタム トレースの画像サイズを測定するために追加した指標を確認できます。
- 前の手順の [集計] の横にある [時系列] をクリックします。カスタム トレースの [Duration] を表示することもできます。[さらに表示] をクリックすると、収集されたデータの詳細を確認できます。
- 表示されたページで [imageType] をクリックすると、再生時間データを画像の MIME タイプ別に分割できます。このデータは、カスタム トレースに追加した imageType 属性が原因でログに記録されました。
ネットワーク データを確認する
HTTP/S ネットワーク リクエストは、ネットワーク呼び出しのレスポンス時間とペイロード サイズを取得するレポートです。
- パフォーマンス モニタリング ダッシュボードのメイン画面に戻ります。
- [ネットワーク] タブをクリックして、ウェブアプリのネットワーク リクエスト エントリのリストを表示します。
- これらを参照して遅いリクエストを特定し、アプリのパフォーマンスを改善するための修正に取り組みます。
12. お疲れさまでした
Firebase SDK のパフォーマンス モニタリングを有効にし、自動トレースとカスタム トレースを収集して、チャットアプリの実際のパフォーマンスを測定しました。
学習した内容
- ウェブアプリに Firebase Performance Monitoring SDK を追加する。
- コードにカスタム トレースを追加する
- カスタム トレースに関連付けられたカスタム指標を記録しています。
- カスタム属性を使用してパフォーマンス データを分類する。
- パフォーマンス モニタリング ダッシュボードを使用してアプリのパフォーマンスを分析する方法を理解する。