1. 概要
この Codelab では、Firebase Performance Monitoring を使用してチャット ウェブアプリのパフォーマンスを測定する方法を学びます。https://fireperf-friendchat.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] をクリックしてから、[Sign-in method] タブ（コンソールに移動）をクリックします。
- [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 するようにウェブアプリ テンプレートをセットアップしました。ただし、構成を取得するには、アプリを 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. [拡張] 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 によって自動的に収集されます。後で Firebase Performance コンソールに loadStyling というカスタム トレースが表示されます。
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アプリがあるプロジェクトを選択します。 - 左側のパネルで [Quality] セクションの [Performance] をクリックします。
デバイス上のデータを確認する
パフォーマンス モニタリングでアプリのデータが処理されると、ダッシュボードの上部にタブが表示されます。データやタブがまだ表示されない場合は、しばらくしてからもう一度ご確認ください。
- [デバイス] タブをクリックします。
- [ページの読み込み] の表には、ページの読み込み中にパフォーマンス モニタリングが自動的に収集するさまざまなパフォーマンス指標が表示されます。
- [Durations] の表には、アプリのコードで定義したカスタム トレースが表示されます。
- [Durations] テーブルの [saveImageMessage] をクリックして、トレースの特定の指標を確認します。
- [集計] をクリックして、画像サイズの分布を確認します。このカスタム トレースの画像サイズを測定するために追加した指標が表示されます。
- 前のステップの [集計] の横にある [時系列] をクリックします。カスタム トレースの [Duration] を確認することもできます。[さらに表示] をクリックすると、収集されたデータの詳細を確認できます。
- 表示されたページで [imageType] をクリックして、画像の MIME タイプ別に所要時間データを分割できます。カスタム トレースに追加した imageType 属性が原因で、このデータがログに記録されました。
ネットワーク データを確認する
HTTP/S ネットワーク リクエストは、ネットワーク呼び出しのレスポンス時間とペイロード サイズを取得するレポートです。
- パフォーマンス モニタリング ダッシュボードのメイン画面に戻ります。
- [ネットワーク] タブをクリックすると、ウェブアプリのネットワーク リクエスト エントリのリストが表示されます。
- これらを確認して、処理に時間がかかっているリクエストを特定し、アプリのパフォーマンスを改善するための修正に取り組みましょう。
12. お疲れさまでした
パフォーマンス モニタリング用の Firebase SDK を有効にし、自動トレースとカスタム トレースを収集して、チャットアプリの実際のパフォーマンスを測定しました。
学習した内容
- ウェブアプリに Firebase Performance Monitoring SDK を追加する。
- コードにカスタム トレースを追加する
- カスタム トレースに関連付けられたカスタム指標を記録します。
- カスタム属性を使用してパフォーマンス データを分割する。
- パフォーマンス モニタリング ダッシュボードを使用してアプリのパフォーマンスに関する分析情報を得る方法を理解する。