1。概要
このコードラボでは、FirebasePerformanceMonitoringを使用してチャットウェブアプリのパフォーマンスを測定する方法を学習します。ライブデモを見るには、 https：//fireperf-friendlychat.web.app/にアクセスしてください。
あなたが学ぶこと
- Firebase Performance Monitoringをウェブアプリに追加して、すぐに使用できる指標（ページの読み込みとネットワークリクエスト）を取得する方法。
- カスタムトレースを使用して特定のコードを測定する方法。
- カスタムトレースに関連付けられた追加のカスタムメトリックを記録する方法。
- カスタム属性を使用してパフォーマンスデータをさらにセグメント化する方法。
- パフォーマンス監視ダッシュボードを使用してWebアプリのパフォーマンスを理解する方法。
必要なもの
2.サンプルコードを取得します
コマンドラインからcodelabのGitHubリポジトリのクローンを作成します。
git clone https://github.com/firebase/codelab-friendlychat-web
または、gitがインストールされていない場合は、リポジトリをzipファイルとしてダウンロードできます。
スターターアプリをインポートする
IDEを使用して、複製されたリポジトリから📁performance performance-monitoring-startディレクトリを開くかインポートします。この📁performance performance-monitoring-startディレクトリには、チャットWebアプリであるcodelabの開始コードが含まれています。
3.Firebaseプロジェクトを作成して設定します
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ペインでデータベースの作成をクリックします。
- [テストモードで開始]オプションを選択し、セキュリティルールに関する免責事項を読んだ後、[有効にする]をクリックします。
このコードラボのスターターコードには、より安全なルールが含まれています。それらは後でコードラボにデプロイします。
クラウドストレージを有効にする
ウェブアプリはCloudStoragefor Firebaseを使用して、写真を保存、アップロード、共有します。
クラウドストレージを有効にする必要があります。
- Firebaseコンソールの[開発]セクションで、[ストレージ]をクリックします。
- [開始]をクリックします。
- Firebaseプロジェクトのセキュリティルールに関する免責事項を読み、[取得]をクリックします。
開始コードには基本的なセキュリティルールが含まれており、これは後でコードラボで展開します。
4.Firebaseコマンドラインインターフェースをインストールします
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のエイリアスを使用してみましょう。
- コマンドラインの残りの指示に従います。
5.Firebaseパフォーマンスモニタリングと統合する
Firebase Performance Monitoring SDK for Webと統合するには、さまざまな方法があります（詳細については、ドキュメントを参照してください）。このコードラボでは、ホスティングURLからのパフォーマンス監視を有効にします。
パフォーマンスモニタリングを追加し、Firebaseを初期化します
src/index.jsファイルを開き、TODOの下に次の行を追加して、Firebase PerformanceMonitoringSDKを含めます。
index.js
// TODO: Import the Firebase Performance Monitoring library here.
import {
getPerformance,
trace
} from 'firebase/performance';
- また、Firebaseプロジェクトと使用するウェブアプリに関する情報を含む構成オブジェクトを使用してFirebaseSDKを初期化する必要があります。 Firebase Hostingを使用しているため、この構成を行う特別なスクリプトをインポートできます。このコードラボでは、
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();
パフォーマンスモニタリングは、ユーザーがサイトを使用するときに、ページの読み込みとネットワークリクエストの指標を自動的に収集するようになりました。自動ページロードトレースの詳細については、ドキュメントを参照してください。
最初の入力遅延ポリフィルライブラリを追加します
ユーザーの操作に応答するブラウザーは、アプリの応答性に関する第一印象をユーザーに与えるため、最初の入力遅延は便利です。
最初の入力遅延は、ユーザーがボタンやハイパーリンクをクリックするなど、ページ上の要素を最初に操作したときに始まります。ブラウザが入力に応答できるようになるとすぐに停止します。つまり、ブラウザはコンテンツの読み込みや解析に忙しくありません。
このポリフィルライブラリは、パフォーマンスモニタリングの統合ではオプションです。
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>
この時点で、コードでのFirebasePerformanceMonitoringとの統合が完了しました。
次の手順では、FirebasePerformanceMonitoringを使用してカスタムトレースを追加する方法について説明します。自動トレースのみを収集する場合は、「イメージのデプロイと送信の開始」セクションに進んでください。
6.アプリにカスタムトレースを追加します
パフォーマンスモニタリングを使用すると、カスタムトレースを作成できます。カスタムトレースは、アプリの実行ブロック期間中のレポートです。 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.[拡張]UserTimingAPIを使用してカスタムトレースを追加します
Firebase Performance Monitoring SDKは、非同期で読み込むことができるように設計されているため、ページの読み込み中にウェブアプリのパフォーマンスに悪影響を与えることはありません。 SDKが読み込まれる前は、Firebase PerformanceMonitoringAPIは利用できません。このシナリオでも、 UserTimingAPIを使用してカスタムトレースを追加できます。 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>
ここで作成したエントリは、FirebasePerformanceMonitoringによって自動的に収集されます。後でFirebasePerformanceコンソールでloadStylingというカスタムトレースを見つけることができます。
10.イメージをデプロイして送信を開始します
FirebaseHostingにデプロイする
コードにFirebasePerformanceMonitoringを追加したら、次の手順に従ってコードを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.appの2つの独自のFirebaseサブドメインで、FirebaseHostingを使用して完全にホストされているウェブアプリにアクセスします。
パフォーマンス監視が有効になっていることを確認します
Firebaseコンソールを開き、[パフォーマンス]タブに移動します。 「SDKが検出されました」というウェルカムメッセージが表示された場合は、FirebasePerformanceMonitoringと正常に統合されています。
画像メッセージを送信する
チャットアプリで画像を送信して、パフォーマンスデータを生成します。
- チャットアプリにサインインした後、画像アップロードボタンをクリックします
。 - ファイルピッカーを使用して画像ファイルを選択します。
- カスタムメトリックとカスタム属性の分布をテストできるように、複数の画像を送信してみてください（いくつかのサンプルは
public/images/に保存されています）。
新しいメッセージは、選択した画像とともにアプリのUIに表示されます。
11.ダッシュボードを監視します
ウェブアプリをデプロイしてユーザーとして画像メッセージを送信した後、パフォーマンスモニタリングダッシュボード（Firebaseコンソール）でパフォーマンスデータを確認できます。
ダッシュボードにアクセスする
- Firebaseコンソールで、
Friendly Chatアプリがあるプロジェクトを選択します。 - 左側のパネルで、[品質]セクションを見つけて、[パフォーマンス]をクリックします。
デバイス上のデータを確認する
パフォーマンスモニタリングがアプリのデータを処理すると、ダッシュボードの上部にタブが表示されます。データやタブがまだ表示されていない場合は、後でもう一度確認してください。
- [デバイス上]タブをクリックします。
- ページ読み込みテーブルには、ページの読み込み中にパフォーマンス監視が自動的に収集するさまざまなパフォーマンス指標が表示されます。
- 期間テーブルには、アプリのコードで定義したカスタムトレースが表示されます。
- トレースの特定のメトリックを確認するには、[期間]テーブルの[ saveImageMessage]をクリックします。
- [集計]をクリックして、画像サイズの分布を確認します。このカスタムトレースの画像サイズを測定するために追加したメトリックを確認できます。
- 前の手順の[集計]の横にある[時間の経過]をクリックします。カスタムトレースの期間を表示することもできます。収集されたデータをより詳細に確認するには、[詳細を表示]をクリックします。
- 開いたページで、 imageTypeをクリックすると、画像MIMEタイプごとに期間データをセグメント化できます。この特定のデータは、カスタムトレースに追加したimageType属性のためにログに記録されました。
ネットワークデータを確認する
HTTP / Sネットワーク要求は、ネットワーク呼び出しの応答時間とペイロードサイズをキャプチャするレポートです。
- パフォーマンス監視ダッシュボードのメイン画面に戻ります。
- [ネットワーク]タブをクリックして、Webアプリのネットワーク要求エントリのリストを表示します。
- それらを参照して遅いリクエストを特定し、アプリのパフォーマンスを向上させるための修正作業を開始してください。
12.おめでとうございます！
Firebase SDKを有効にしてパフォーマンスを監視し、自動トレースとカスタムトレースを収集して、チャットアプリの実際のパフォーマンスを測定しました。
私たちがカバーしたこと：
- Firebase PerformanceMonitoringSDKをウェブアプリに追加します。
- コードにカスタムトレースを追加します。
- カスタムトレースに関連付けられたカスタムメトリックを記録します。
- カスタム属性を使用してパフォーマンスデータをセグメント化します。
- パフォーマンス監視ダッシュボードを使用してアプリのパフォーマンスに関する洞察を得る方法を理解する。