このコードラボでは、Firebase PerformanceMonitoringを使用してチャットウェブアプリのパフォーマンスを測定する方法を学習します。 https://fireperf-friendlychat.web.app/にアクセスして、ライブデモをご覧ください。
あなたが学ぶこと
- Firebase Performance Monitoringをウェブアプリに追加して、すぐに使用できる指標（ページの読み込みとネットワークリクエスト）を取得する方法。
- カスタムトレースを使用して特定のコードを測定する方法。
- カスタムトレースに関連付けられた追加のカスタムメトリックを記録する方法。
- カスタム属性を使用してパフォーマンスデータをさらにセグメント化する方法。
- パフォーマンス監視ダッシュボードを使用してWebアプリのパフォーマンスを理解する方法。
必要なもの
コマンドラインからcodelabのGitHubリポジトリのクローンを作成します。
git clone https://github.com/firebase/codelab-friendlychat-web
または、gitがインストールされていない場合は、リポジトリをzipファイルとしてダウンロードできます。
スターターアプリをインポートする
IDEを使用して、複製されたリポジトリから📁performance performance-monitoring-startディレクトリを開くかインポートします。この📁performance performance-monitoring-startディレクトリには、チャットWebアプリであるcodelabの開始コードが含まれています。
Firebaseプロジェクトを作成する
- Firebaseコンソールで、[プロジェクトの追加]をクリックします。
- Firebaseプロジェクトに
FriendlyChat名前を付けます。
FirebaseプロジェクトのプロジェクトIDを覚えておいてください。
- [プロジェクトの作成]をクリックします。
FirebaseWebアプリをプロジェクトに追加します
- Webアイコンをクリックします
新しいFirebaseWebアプリを作成します。 - ニックネーム
Friendly Chatアプリを登録し、[このアプリのFirebaseHostingも設定する]の横にあるチェックボックスをオンにします。 - [アプリの登録]をクリックします。
- 残りの手順をクリックします。画面の指示に従う必要はありません。これらについては、このコードラボの後のステップで説明します。
Firebase認証でGoogleサインインを有効にする
ユーザーが自分のGoogleアカウントでチャットアプリにサインインできるようにするために、 Googleのサインイン方法を使用します。
Googleサインインを有効にする必要があります。
- Firebaseコンソールで、左側のパネルの[開発]セクションを見つけます。
- [認証]をクリックし、[サインイン方法]タブをクリックします（コンソールに移動します）。
- Googleサインインプロバイダーを有効にして、[保存]をクリックします。
CloudFirestoreを有効にする
Webアプリは、 Cloud Firestoreを使用してチャットメッセージを保存し、新しいチャットメッセージを受信します。
CloudFirestoreを有効にする必要があります。
- Firebaseコンソールの[開発]セクションで、[データベース]をクリックします。
- CloudFirestoreペインでデータベースの作成をクリックします。
- [テストモードで開始]オプションを選択し、セキュリティルールに関する免責事項を読んだ後、[有効にする]をクリックします。
このコードラボのスターターコードには、より安全なルールが含まれています。それらは後でコードラボにデプロイします。
クラウドストレージを有効にする
ウェブアプリはCloudStorage for Firebaseを使用して、写真を保存、アップロード、共有します。
クラウドストレージを有効にする必要があります。
- Firebaseコンソールの[開発]セクションで、[ストレージ]をクリックします。
- [開始]をクリックします。
- Firebaseプロジェクトのセキュリティルールに関する免責事項を読み、[ Gotit ]をクリックします。
開始コードには基本的なセキュリティルールが含まれており、後でコードラボで展開します。
Firebaseコマンドラインインターフェース（CLI）を使用すると、Firebase Hostingを使用してウェブアプリをローカルで提供したり、ウェブアプリをFirebaseプロジェクトにデプロイしたりできます。
- Firebaseドキュメントの次の手順に従ってCLIをインストールします。
- ターミナルで次のコマンドを実行して、CLIが正しくインストールされていることを確認します。
firebase --version
FirebaseCLIのバージョンがv8.0.0以降であることを確認してください。
- 次のコマンドを実行して、FirebaseCLIを承認します。
firebase login
アプリのローカルディレクトリ（コードラボで以前に複製したリポジトリ）からFirebaseHostingのアプリの構成をプルするようにウェブアプリテンプレートを設定しました。ただし、構成をプルするには、アプリをFirebaseプロジェクトに関連付ける必要があります。
- コマンドラインがアプリのローカルの
performance-monitoring-startディレクトリにアクセスしていることを確認してください。 - 次のコマンドを実行して、アプリをFirebaseプロジェクトに関連付けます。
firebase use --add
- プロンプトが表示されたら、プロジェクトIDを選択し、Firebaseプロジェクトにエイリアスを付けます。
エイリアスは、複数の環境（本番環境、ステージングなど）がある場合に役立ちます。ただし、このコードラボでは、 defaultのエイリアスを使用してみましょう。
- コマンドラインの残りの指示に従います。
Firebase Performance Monitoring SDK for Webと統合するにはさまざまな方法があります（詳細については、ドキュメントを参照してください）。このコードラボでは、ホスティングURLからのパフォーマンス監視を有効にします。
パフォーマンスモニタリングを追加し、Firebaseを初期化します
public/index.htmlファイルを開き、TODO下に次の行を追加して、Firebase Performance MonitoringSDKを含めます。
index.html
<!-- TODO: Import the Firebase Performance Monitoring library here. -->
<script src="/__/firebase/7.14.2/firebase-performance.js"></script>
- また、Firebaseプロジェクトと使用するウェブアプリに関する情報を含む構成オブジェクトを使用してFirebaseSDKを初期化する必要があります。 Firebase Hostingを使用しているため、この構成を行う特別なスクリプトをインポートできます。このコードラボでは、
public/index.htmlファイルの最後に次の行を追加しましたが、そこにあることを再確認してください。
index.html
<script src="/__/firebase/init.js"></script>
-
public/scripts/main.jsファイルで、TODO下に次の行を追加して、パフォーマンス監視を初期化します。
main.js
// TODO: Initialize Firebase Performance Monitoring.
firebase.performance();
パフォーマンスモニタリングは、ユーザーがサイトを使用するときに、ページの読み込みとネットワークリクエストの指標を自動的に収集するようになりました。自動ページロードトレースの詳細については、ドキュメントを参照してください。
最初の入力遅延ポリフィルライブラリを追加します
ユーザーの操作に応答するブラウザーは、アプリの応答性に関する第一印象をユーザーに与えるため、最初の入力遅延は便利です。
最初の入力遅延は、ユーザーがボタンやハイパーリンクをクリックするなど、ページ上の要素を最初に操作したときに始まります。ブラウザが入力に応答できるようになるとすぐに停止します。つまり、ブラウザはコンテンツの読み込みや解析に忙しくありません。
このポリフィルライブラリは、パフォーマンスモニタリングの統合ではオプションです。
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 PerformanceMonitoringとの統合が完了しました。
次の手順では、Firebase PerformanceMonitoringを使用してカスタムトレースを追加する方法について説明します。自動トレースのみを収集する場合は、「展開してイメージの送信を開始する」セクションに進みます。
パフォーマンスモニタリングを使用すると、カスタムトレースを作成できます。カスタムトレースは、アプリの実行ブロックの期間のレポートです。 SDKが提供するAPIを使用して、カスタムトレースの開始と終了を定義します。
-
public/scripts/main.jsファイルで、パフォーマンスオブジェクトを取得し、イメージメッセージをアップロードするためのカスタムトレースを作成します。
main.js
// TODO: Create a custom trace to monitor image upload.
const trace = firebase.performance().trace('saveImageMessage');
- カスタムトレースを記録するには、トレースの開始点と停止点を指定する必要があります。トレースはタイマーと考えることができます。
main.js
// TODO: Start the "timer" for the custom trace.
trace.start();
...
// TODO: Stop the "timer" for the custom trace.
trace.stop();
これで、カスタムトレースが正常に定義されました。コードをデプロイした後、ユーザーが画像メッセージを送信すると、カスタムトレースの期間が記録されます。これにより、実際のユーザーがチャットアプリで画像を送信するのにかかる時間がわかります。
さらに、カスタムトレースを構成して、そのスコープ内で発生するパフォーマンス関連イベントのカスタムメトリックを記録できます。たとえば、メトリックを使用して、アップロード時間が前の手順で定義したカスタムトレースの画像のサイズによって影響を受けるかどうかを調査できます。
- 前の手順（
public/scripts/main.jsファイルで定義）のカスタムトレースを見つけます。 -
TODO下に次の行を追加して、アップロードされた画像のサイズを記録します。
main.js
...
// TODO: Record image size.
trace.putMetric('imageSize', file.size);
...
このメトリックにより、パフォーマンスモニタリングで、カスタムトレース期間とアップロードされた画像サイズを記録できます。
前の手順に基づいて、カスタムトレースのカスタム属性を収集することもできます。カスタム属性は、アプリに固有のカテゴリでデータをセグメント化するのに役立ちます。たとえば、イメージファイルのMIMEタイプを収集して、MIMEタイプがパフォーマンスにどのように影響するかを調査できます。
-
public/scripts/main.jsファイルで定義されているカスタムトレースを使用します。 -
TODO下に次の行を追加して、アップロードされた画像のMIMEタイプを記録します。
main.js
...
// TODO: Record image MIME type.
trace.putAttribute('imageType', file.type);
...
この属性を使用すると、パフォーマンスモニタリングで、アップロードされた画像タイプに基づいてカスタムトレース期間を分類できます。
Firebase Performance Monitoring SDKは、非同期で読み込むことができるように設計されているため、ページの読み込み中にウェブアプリのパフォーマンスに悪影響を与えることはありません。 SDKが読み込まれる前は、Firebase Performance MonitoringAPIは利用できません。このシナリオでも、 User TimingAPIを使用してカスタムトレースを追加できます。 Firebase Performance SDKは、 measure（）から期間を取得し、カスタムトレースとしてログに記録します。
User TimingAPIを使用してアプリスタイリングスクリプトを読み込む時間を測定します。
-
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 PerformanceMonitoringによって自動的に収集されます。後でFirebasePerformanceコンソールでloadStylingというカスタムトレースを見つけることができます。
FirebaseHostingにデプロイする
コードにFirebasePerformance Monitoringを追加した後、次の手順に従ってコードをFirebaseHostingにデプロイします。
- コマンドラインがアプリのローカルの
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
-
https://<projectId>.firebaseapp.comとhttps://<projectId>.web.app2つの独自のFirebaseサブドメインでFirebaseHostingを使用して完全にホストされているウェブアプリにhttps://<projectId>.firebaseapp.comしhttps://<projectId>.web.app。
パフォーマンス監視が有効になっていることを確認します
Firebaseコンソールを開き、[パフォーマンス]タブに移動します。 「SDKが検出されました」というウェルカムメッセージが表示された場合は、Firebase PerformanceMonitoringと正常に統合されています。
画像メッセージを送信する
チャットアプリで画像を送信して、パフォーマンスデータを生成します。
- チャットアプリにサインインした後、画像のアップロードボタンをクリックします
。 - ファイルピッカーを使用して画像ファイルを選択します。
- カスタムメトリックとカスタム属性の分布をテストできるように、複数の画像を送信してみてください（いくつかのサンプルは
public/images/保存されています）。
新しいメッセージは、選択した画像とともにアプリのUIに表示されます。
ウェブアプリをデプロイし、ユーザーとして画像メッセージを送信した後、パフォーマンスモニタリングダッシュボード（Firebaseコンソール）でパフォーマンスデータを確認できます。
ダッシュボードにアクセスする
- Firebaseコンソールで、
Friendly Chatアプリがあるプロジェクトを選択します。 - 左側のパネルで、[品質]セクションを見つけて、[パフォーマンス]をクリックします。
デバイス上のデータを確認する
パフォーマンスモニタリングがアプリのデータを処理すると、ダッシュボードの上部にタブが表示されます。データやタブがまだ表示されていない場合は、後でもう一度確認してください。
- [デバイス上]タブをクリックします。
- ページ読み込みテーブルには、ページの読み込み中にパフォーマンスモニタリングが自動的に収集するさまざまなパフォーマンス指標が表示されます。
- 期間テーブルには、アプリのコードで定義したカスタムトレースが表示されます。
- [期間]テーブルで[ saveImageMessage]をクリックして、トレースの特定のメトリックを確認します。
- [集計]をクリックして、画像サイズの分布を確認します。このカスタムトレースの画像サイズを測定するために追加したメトリックを確認できます。
- 前の手順の[集計]の横にある[時間の経過]をクリックします。カスタムトレースの期間を表示することもできます。収集されたデータをより詳細に確認するには、[詳細を表示]をクリックします。
- 開いたページで、 imageTypeをクリックすると、画像MIMEタイプごとに期間データをセグメント化できます。この特定のデータは、カスタムトレースに追加したimageType属性のためにログに記録されました。
ネットワークデータを確認する
HTTP / Sネットワーク要求は、ネットワーク呼び出しの応答時間とペイロードサイズをキャプチャするレポートです。
- パフォーマンス監視ダッシュボードのメイン画面に戻ります。
- [ネットワーク]タブをクリックして、Webアプリのネットワークリクエストエントリのリストを表示します。
- それらを参照して遅いリクエストを特定し、アプリのパフォーマンスを向上させるための修正作業を開始してください。
パフォーマンスモニタリング用にFirebaseSDKを有効にし、自動トレースとカスタムトレースを収集して、チャットアプリの実際のパフォーマンスを測定しました。
私たちがカバーしたこと：
- Firebase Performance MonitoringSDKをウェブアプリに追加します。
- コードにカスタムトレースを追加します。
- カスタムトレースに関連付けられたカスタムメトリックを記録します。
- カスタム属性を使用してパフォーマンスデータをセグメント化します。
- パフォーマンス監視ダッシュボードを使用してアプリのパフォーマンスに関する洞察を得る方法を理解する。