機能ロールアウトのパフォーマンス監視

1。概要

この Codelab では、機能のロールアウト中にアプリのパフォーマンスをモニタリングする方法を学びます。サンプル アプリには基本的な機能があり、Firebase Remote Config フラグに基づいて異なる背景画像を表示するように設定されています。アプリのパフォーマンスを監視するためのトレースのインストルメント化、アプリへの構成変更のロールアウト、効果の監視、パフォーマンスの改善方法について説明します。

学習内容

  • Firebase Performance Monitoring をモバイルアプリに追加して、すぐに使用できる指標 (アプリの開始時間、遅いまたはフリーズしたフレームなど) を取得する方法
  • カスタム トレースを追加して、ユーザー ジャーニーの重要なコード パスを理解する方法
  • Performance Monitoring ダッシュボードを使用してメトリックを理解し、機能のロールアウトなどの重要な変更を追跡する方法
  • パフォーマンス アラートを設定して主要な指標を監視する方法
  • Firebase Remote Config の変更をロールアウトする方法

前提条件

  • Android Studio 4.0 以降
  • API レベル 16 以上の Android エミュレーター。
  • Java バージョン 8 以降
  • Firebase Remote Configの基本的な理解

2. サンプル プロジェクトのセットアップ

コードをダウンロード

次のコマンドを実行して、この Codelab のサンプル コードのクローンを作成します。これにより、マシンにcodelab-perf-rc-androidというフォルダーが作成されます。

$ git clone https://github.com/FirebaseExtended/codelab-feature-rollout-performance.git

マシンに Git がない場合は、GitHub からコードを直接ダウンロードすることもできます。

firebase-perf-rc-android-startフォルダーの下のプロジェクトを Android Studio にインポートします。実行時例外が表示されるか、 google-services.jsonファイルが見つからないという警告が表示される可能性があります。次のセクションでこれを修正します。

この Codelab では、 Firebase Assistantプラグインを使用して、Android アプリを Firebase プロジェクトに登録し、必要な Firebase 構成ファイル、プラグイン、依存関係を Android プロジェクトに追加します。すべて Android Studio 内から行います。

アプリを Firebase に接続する

  1. Android Studio / Help > Check for updatesに移動して、最新バージョンの Android Studio と Firebase Assistant を使用していることを確認します。
  2. [ツール] > [Firebase]を選択して[アシスタント]ペインを開きます。

c0e42ef063d21eab.png

  1. [Performance Monitoring]を選択してアプリに追加し、 [Get started with Performance Monitoring]をクリックします。
  2. [Firebase に接続]をクリックして、Android プロジェクトを Firebase に接続します(ブラウザで Firebase コンソールが開きます) 。
  3. Firebase コンソールで[プロジェクトを追加]をクリックし、Firebase プロジェクト名を入力します(既に Firebase プロジェクトがある場合は、その既存のプロジェクトを代わりに選択できます) 。 [続行]をクリックして条件に同意し、Firebase プロジェクトと新しい Firebase アプリを作成します。

次に、新しい Firebase アプリを Android Studio プロジェクトに接続するためのダイアログが表示されます。

51a549ebde2fe57a.png

  1. [接続]をクリックします。
  2. Android Studio を開きます。 [アシスタント]ペインに、アプリが Firebase に接続されているという確認が表示されます。

40c24c4a56a45990.png

アプリに Performance Monitoring を追加する

Android Studio のAssistantペインで、 Add Performance Monitoring to your appをクリックします。

変更を受け入れるダイアログが表示された後、Android Studio はアプリを同期して、必要なすべての依存関係が追加されていることを確認します。

3046f3e1f5fea06f.png

最後に、Android Studio の[アシスタント]ペインに、すべての依存関係が正しく設定されたことを示す成功メッセージが表示されます。

62e79fd18780e320.png

追加の手順として、「(オプション)デバッグ ロギングを有効にする」の手順に従って、デバッグ ロギングを有効にします。同じ手順は、公開ドキュメントにも記載されています。

3. アプリを実行する

アプリのモジュール (アプリレベル) ディレクトリにgoogle-services.jsonファイルが表示され、アプリがコンパイルされるはずです。 Android Studio で、 [Run ] > [Run 'app']をクリックして、Android エミュレーターでアプリをビルドして実行します。

アプリの実行中は、最初に次のようなスプラッシュ スクリーンが表示されます。

ffbd413a6983b205.png

次に、数秒後に、デフォルトの画像を含むメイン ページが表示されます。

d946cab0df319e50.png

ボンネットの下で何が起こっているのですか？

スプラッシュ スクリーンはSplashScreenActivityに実装され、次のことを行います。

  1. onCreate()では、Firebase Remote Config 設定を初期化し、この Codelab の後半で Remote Config ダッシュボードに設定する構成値を取得します。
  2. executeTasksBasedOnRC()では、 seasonal_image_urlフラグの構成値を読み取ります。 URL が config 値によって提供される場合、画像を同期的にダウンロードします。
  3. ダウンロードが完了すると、アプリはMainActivityに移動し、 finish()を呼び出してSplashScreenActivityを終了します。

MainActivityでは、Remote Config でseasonal_image_urlが定義されている場合、機能が有効になり、ダウンロードした画像がメイン ページの背景として表示されます。それ以外の場合は、デフォルトの画像 (上に表示) が表示されます。

4. Remote Config を設定する

アプリが実行されるようになったので、新しい機能フラグを設定できます。

  1. Firebase コンソールの左パネルでEngageセクションを見つけて、 Remote Config をクリックします。
  2. [構成の作成]ボタンをクリックして構成フォームを開き、 seasonal_image_urlをパラメーター キーとして追加します。
  3. [説明を追加]をクリックして、次の説明を入力します: Shows a seasonal image (replaces default) in the main page when the restaurant list is empty.
  4. Add new -> Conditional value -> Create new conditionをクリックします。
  5. 条件名にSeasonal image rolloutと入力します。
  6. [ Applies if...セクションで、 User in random percentile <= 0%を選択します。 (後のステップでロールアウトする準備が整うまで、この機能を無効にしておく必要があります。)
  7. [条件を作成]をクリックします。後でこの条件を使用して、新しい機能をユーザーにロールアウトします。

7a07526eb9e81623.png

  1. 最初のパラメーターの作成フォームを開き、季節イメージ ロールアウトの値フィールドを見つけます。季節の画像がダウンロードされる URL を入力してください: https://images.unsplash.com/photo-1552691021-7043334e0b51
  2. デフォルト値を空の文字列のままにします。これは、URL からダウンロードされた画像ではなく、コードベースのデフォルトの画像が表示されることを意味します。
  3. [保存]をクリックします。

99e6cd2ebcdced.png

新しい構成がドラフトとして作成されていることがわかります。

  1. [変更を公開]をクリックし、上部の変更を確認してアプリを更新します。

39cd3e96d370c7ce.png

5.データ読み込み時間の監視を追加

アプリはMainActivity表示する前にいくつかのデータをプリロードし、スプラッシュ スクリーンを表示してこのプロセスを非表示にします。この画面でユーザーを長時間待たせたくないので、通常はスプラッシュ画面が表示される時間を監視することをお勧めします。

Firebase Performance Monitoring は、まさにそれを行う方法を提供します。カスタム コード トレースを計測して、データの読み込み時間や新機能の処理時間など、アプリ内の特定のコードのパフォーマンスを監視できます。

スプラッシュ スクリーンが表示されている時間を追跡するには、スプラッシュ スクリーンを実装するActivityであるSplashScreenActivityにカスタム コード トレースを追加します。

  1. splash_screen_traceという名前のカスタム コード トレースを初期化、作成、および開始します。

SplashScreenActivity.java

// ...
import com.google.firebase.perf.FirebasePerformance;
import com.google.firebase.perf.metrics.Trace;
// ...

public class SplashScreenActivity extends AppCompatActivity {

    private static final String TAG = "SplashScreenActivity";
    private static final String SEASONAL_IMAGE_URL_RC_FLAG = "seasonal_image_url";

    // TODO: Initialize splash_screen_trace
    private final Trace splashScreenTrace = FirebasePerformance.startTrace("splash_screen_trace");
    
    // ...
}
  1. SplashScreenActivityのonDestroy()メソッドでトレースを終了します。

SplashScreenActivity.java

@Override
protected void onDestroy() {
    super.onDestroy();

    // TODO: Stop the splash_screen_trace here
    splashScreenTrace.stop();
}

新しい機能は画像をダウンロードして処理するため、機能がSplashScreenActivityに追加した時間を追跡する 2 つ目のカスタム コード トレースを追加します。

  1. splash_seasonal_image_processingという名前のカスタム コード トレースを初期化、作成、および開始します。

SplashScreenActivity.java

private void executeTasksBasedOnRC(FirebaseRemoteConfig rcConfig) {
    String seasonalImageUrl = rcConfig.getString(SEASONAL_IMAGE_URL_RC_FLAG);
    Log.d(TAG, SEASONAL_IMAGE_URL_RC_FLAG + ": " + seasonalImageUrl);

    if (!seasonalImageUrl.isEmpty()) {
        // TODO: Start the splash_seasonal_image_processing here
        final Trace seasonalImageProcessingTrace = FirebasePerformance
            .startTrace("splash_seasonal_image_processing");

        // ...
    }
}
  1. RequestListenerのonLoadFailed()メソッドとonResourceReady()メソッドの両方でトレースを終了します。

SplashScreenActivity.java

Glide.with(SplashScreenActivity.this.getApplicationContext())
    .asBitmap()
    .load(seasonalImageUrl)
    .signature(new ObjectKey(Utils.getCacheUUID()))
    .listener(new RequestListener<Bitmap>() {
        @Override
        public boolean onLoadFailed(
            @Nullable GlideException e,
            Object model, Target<Bitmap> target,
            boolean isFirstResource) {

            // TODO: Stop the splash_seasonal_image_processing here
            seasonalImageProcessingTrace.stop();

            launchMainActivity();
            return true;
        }

        @Override
        public boolean onResourceReady(Bitmap resource, Object model,
            Target<Bitmap> target, DataSource dataSource,
            boolean isFirstResource) {

            // TODO: Stop the splash_seasonal_image_processing here
            seasonalImageProcessingTrace.stop();

            launchMainActivity();
            return true;
        }
     })
     .preload();

カスタム コード トレースを追加して、スプラッシュ スクリーンの継続時間 ( splash_screen_trace)と新機能の処理時間 ( splash_seasonal_image_processing ) を追跡したら、Android Studio でアプリを再度実行します。 Logging trace metric: splash_screen_traceを含むログ メッセージが表示され、その後にトレースの期間が続きます。新しい機能をまだ有効にしていないため、 splash_seasonal_image_processingのログ メッセージは表示されません。

6.カスタム属性をトレースに追加します

カスタム コード トレースの場合、Performance Monitoring はデフォルトの属性（アプリのバージョン、国、デバイスなどの一般的なメタデータ）を自動的にログに記録するため、 Firebase コンソールでトレースのデータをフィルタリングできます。カスタム属性を追加して監視することもできます。

アプリでは、スプラッシュ スクリーンの継続時間と新機能の処理時間を監視する 2 つのカスタム コード トレースを追加しました。これらの期間に影響を与える可能性のある要因は、表示される画像がデフォルトの画像であるかどうか、または画像を URL からダウンロードする必要があるかどうかです。そして、最終的には、画像をダウンロードする別の URL を使用する可能性があります。

そこで、季節ごとの画像 URL を表すカスタム属性をこれらのカスタム コード トレースに追加しましょう。そうすれば、後でこれらの値で期間データをフィルタリングできます。

  1. executeTasksBasedOnRCメソッドの先頭に、 splash_screen_traceのカスタム属性 ( seasonal_image_url_attribute ) を追加します。

SplashScreenActivity.java

private void executeTasksBasedOnRC(FirebaseRemoteConfig rcConfig) {
    String seasonalImageUrl = rcConfig.getString(SEASONAL_IMAGE_URL_RC_FLAG);
    Log.d(TAG, SEASONAL_IMAGE_URL_RC_FLAG + ": " + seasonalImageUrl);

    // TODO: Add a custom attribute "seasonal_image_url_attribute" to splash_screen_trace
    if (seasonalImageUrl.isEmpty()) {
        splashScreenTrace.putAttribute("seasonal_image_url_attribute", "unset");
    } else {
        splashScreenTrace.putAttribute("seasonal_image_url_attribute", seasonalImageUrl);
    }

    // ...
}
  1. startTrace("splash_seasonal_image_processing")呼び出しの直後に、 splash_seasonal_image_processingの同じカスタム属性を追加します。

SplashScreenActivity.java

if (!seasonalImageUrl.isEmpty()) {
    // TODO: Start the splash_seasonal_image_processing here
    final Trace seasonalImageProcessingTrace = FirebasePerformance
        .startTrace("splash_seasonal_image_processing");

    // TODO: Add a custom attribute "seasonal_image_url_attribute" to splash_seasonal_image_processing
    seasonalImageProcessingTrace
        .putAttribute("seasonal_image_url_attribute", seasonalImageUrl);

    // ...
}

両方のカスタム トレース ( splash_screen_traceとsplash_seasonal_image_processing ) にカスタム属性 ( seasonal_image_url_attribute ) を追加したので、Android Studio でアプリを再度実行します。 Setting attribute 'seasonal_image_url_attribute' to 'unset' on trace 'splash_screen_trace'. Remote Config パラメータのseasonImageUrl をまだ有効にしていないため、属性値がunsetなっています。

Performance Monitoring SDK はトレース データを収集し、それらを Firebase に送信します。 Firebase コンソールのパフォーマンスダッシュボードでデータを表示できます。これについては、コードラボの次のステップで詳しく説明します。

7. Performance Monitoring ダッシュボードを構成する

機能を監視するようにダッシュボードを構成する

Firebase コンソールで、Friendly Eats アプリを含むプロジェクトを選択します。

左側のパネルで、 [リリースと監視]セクションを見つけて、 [パフォーマンス]をクリックします。

メトリクス ボードに最初のデータ ポイントが表示されたパフォーマンスダッシュボードが表示されます。 Performance Monitoring SDK はアプリからパフォーマンス データを収集し、収集から数分以内に表示します。

f57e5450b70034c9.png

このメトリクス ボードでは、アプリの主要なメトリクスを追跡できます。デフォルトのビューには、アプリの開始時間トレースの期間が含まれていますが、最も重要な指標を追加できます。追加した新機能を追跡しているので、ダッシュボードを調整して、カスタム コード トレースの期間を表示するsplash_screen_traceことができます。

  1. 空のメトリックの選択ボックスのいずれかをクリックします。
  2. ダイアログ ウィンドウで、カスタム トレースのトレース タイプとトレース名splash_screen_traceを選択します。

1fb81f4dba3220e0.png

  1. Select metricをクリックすると、ダッシュボードに追加されたsplash_screen_traceの期間が表示されます。

これらの同じ手順を使用して、関心のある他のメトリックを追加して、時間の経過やリリースが異なる場合でもパフォーマンスがどのように変化するかをすばやく確認できます。

1d465c021e58da3b.png

メトリクス ボードは、ユーザーが経験した主要なメトリクスのパフォーマンスを追跡するための強力なツールです。この Codelab では、狭い時間範囲の小さなデータ セットがあるため、機能のロールアウトのパフォーマンスを理解するのに役立つ他のダッシュボード ビューを使用します。

8. 機能を展開する

モニタリングの設定が完了したので、以前に設定した Firebase Remote Config の変更 ( seasonal_image_url)をロールアウトする準備が整いました。

変更をロールアウトするには、Firebase コンソールのRemote Config ページに戻り、ターゲット条件のユーザー パーセンタイルを増やします。通常、新しい機能をごく一部のユーザーにロールアウトし、問題がないと確信できる場合にのみそれを増やします。ただし、この Codelab ではアプリの唯一のユーザーであるため、パーセンタイルを 100% に変更できます。

  1. ページの上部にある[条件]タブをクリックします。
  2. 前に追加したSeasonal image rollout条件をクリックします。
  3. パーセンタイルを 100% に変更します。
  4. [条件を保存]をクリックします。
  5. [変更を公開]をクリックし、変更を確認します。

70f993502b27e7a0.png

Android Studio に戻り、エミュレータでアプリを再起動して、新しい機能を確認します。スプラッシュ スクリーンの後に、新しい空の状態のメイン スクリーンが表示されます。

b0cc91b6e48fb842.png

9. パフォーマンスの変化を確認する

それでは、Firebase コンソールのパフォーマンスダッシュボードを使用して、スプラッシュ スクリーンの読み込みのパフォーマンスを確認してみましょう。 Codelab のこのステップでは、ダッシュボードのさまざまな部分を使用してパフォーマンス データを表示します。

  1. メインの[ダッシュボード]タブで、トレース テーブルまで下にスクロールし、 [カスタム トレース]タブをクリックします。この表には、以前に追加したカスタム コード トレースと、すぐに使用できるいくつかのトレースが表示されます。
  2. 新しい機能を有効にしたので、画像のダウンロードと処理にかかった時間を測定したカスタム コード トレースsplash_seasonal_image_processingを探します。トレースのDuration値から、このダウンロードと処理にかなりの時間がかかることがわかります。

439adc3ec71805b7.png

  1. splash_seasonal_image_processingのデータがあるため、このトレースの期間を[ダッシュボード]タブの上部にあるメトリック ボードに追加できます。

前と同様に、空の[メトリックを選択]ボックスの 1 つをクリックします。ダイアログ ウィンドウで、トレース タイプCustom tracesとトレース名splash_seasonal_image_processingを選択します。最後に、 [メトリックの選択]をクリックして、このメトリックをメトリック ボードに追加します。

7fb64d2340410576.png

  1. 違いをさらに確認するには、 splash_screen_traceのデータを詳しく見てみましょう。メトリクス ボードでsplash_screen_traceカードをクリックし、 [メトリクスの詳細を表示]をクリックします。

b1c275c30679062a.png

  1. 詳細ページの左下に、以前に作成したカスタム属性を含む属性のリストが表示されます。カスタム属性seasonal_image_url_attributeをクリックして、季節ごとの画像 URL ごとのスプラッシュ スクリーンの継続時間を右側に表示します。

8fa1a69019bb045e.png

  1. スプラッシュ スクリーンの継続時間の値は、おそらく上記のスクリーンショットの値とは少し異なりますが、URL から画像をダウンロードした場合と、デフォルトの画像 (「未設定」で表される) を使用した場合の継続時間は長くなるはずです。

この Codelab では、この長い期間の理由は簡単かもしれませんが、実際のアプリではそれほど明白ではないかもしれません。収集された期間データは、さまざまなネットワーク接続条件でアプリを実行しているさまざまなデバイスから取得されます。これらの条件は、予想よりも悪い可能性があります。これが実際の状況である場合、この問題をどのように調査するかを見てみましょう。

  1. ページの上部にある[パフォーマンス]をクリックして、ダッシュボードのメイン タブに戻ります。 640b696b79d90103.png
  2. ページの下部にあるトレース テーブルで、 [ネットワーク リクエスト]タブをクリックします。この表には、 images.unsplash.com/** ** URL パターンを含むURL パターンに集約されたアプリからのすべてのネットワーク リクエストが表示されます。この応答時間の値を、イメージのダウンロードと処理にかかる全体の時間 (つまり、 splash_seasonal_image_processingトレースの期間) と比較すると、イメージのダウンロードに多くの時間が費やされていることがわかります。

6f92ce0f23494507.png

パフォーマンスの調査結果

Firebase Performance Monitoring を使用して、新機能を有効にしたエンドユーザーに次のような影響があることを確認しました。

  1. SplashScreenActivityに費やされる時間が増加しました。
  2. splash_seasonal_image_processingの所要時間は非常に長かった。
  3. 遅延は、イメージのダウンロードの応答時間と、イメージに必要な対応する処理時間が原因でした。

次のステップでは、機能をロールバックし、機能の実装を改善する方法を特定することで、パフォーマンスへの影響を軽減します。

10.機能をロールバックする

スプラッシュ画面でのユーザーの待機時間を長くすることは望ましくありません。 Remote Config の主な利点の 1 つは、ユーザーに別のバージョンをリリースすることなく、ロールアウトを一時停止して元に戻すことができることです。これにより、問題 (最後のステップで発見したパフォーマンスの問題など) に迅速に対応し、不満を持つユーザーの数を最小限に抑えることができます。

迅速な緩和策として、ロールアウト パーセンタイルを0にリセットして、すべてのユーザーに既定のイメージが再び表示されるようにします。

  1. Firebase コンソールのRemote Configページに戻ります。
  2. ページの上部にある[条件]をクリックします。
  3. 前に追加したSeasonal image rollout条件をクリックします。
  4. パーセンタイルを0% に変更します。
  5. [条件を保存]をクリックします。
  6. [変更を公開]をクリックし、変更を確認します。

18c4f1cbac955a04.png

Android Studio でアプリを再起動すると、元の空の状態のメイン画面が表示されます。

d946cab0df319e50.png

11.パフォーマンスの問題を修正する

Codelab の前半で、スプラッシュ スクリーンの画像をダウンロードすると、アプリの速度が低下することがわかりました。ダウンロードした画像をよく見ると、2MB を超える画像の元の解像度を使用していることがわかります。パフォーマンスの問題の簡単な修正方法の 1 つは、画像のダウンロードにかかる時間を短縮するために、品質をより適切な解像度に下げることです。

Remote Config 値を再度ロールアウトする

  1. Firebase コンソールのRemote Configページに戻ります。
  2. seasonal_image_urlパラメータの編集アイコンをクリックします。
  3. 季節限定イメージ ロールアウトの値をhttps://images.unsplash.com/photo-1552691021-7043334e0b51?w=640に更新し、 [保存]をクリックします。

828dd1951a2ec4a4.png

  1. ページの上部にある[条件]タブをクリックします。
  2. [Seasonal image rollout]をクリックし、パーセンタイルを 100% に戻します。
  3. [条件を保存]をクリックします。

1974fa3bb789f36c.png

  1. [変更を公開]ボタンをクリックします。

12.修正をテストしてアラートを設定する

アプリをローカルで実行する

別のダウンロード イメージ URL を使用するように新しい構成値を設定して、アプリを再度実行します。今回は、スプラッシュ画面に費やされる時間が以前よりも短くなっていることに気付くはずです。

b0cc91b6e48fb842.png

変更のパフォーマンスを表示する

Firebase コンソールのパフォーマンスダッシュボードに戻り、指標がどのように表示されるかを確認します。

  1. 今回は、トレース テーブルを使用して詳細ページに移動します。トレース テーブルの下にある[カスタム トレース]タブで、カスタム トレースのsplash_seasonal_image_processingをクリックして、その期間メトリックの詳細ビューを再度表示します。

2d7aaca03112c062.png

  1. カスタム属性seasonal_image_url_attributeをクリックして、カスタム属性の内訳をもう一度確認します。 URL にカーソルを合わせると、縮小サイズの画像の新しい URL と一致する値が表示されます: https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640 ( ?w=640最後に）。この画像に関連付けられている継続時間の値は、前の画像の値よりもかなり短く、ユーザーにとってより受け入れやすいものになっています!

10e30c037a4237a2.png

  1. スプラッシュ スクリーンのパフォーマンスを改善したので、設定したしきい値をトレースが超えたときに通知するアラートを設定できます。パフォーマンスダッシュボードを開き、 splash_screen_traceのオーバーフロー メニュー (3 つのドット) アイコンをクリックし、 [アラート設定]をクリックします。

4bd0a2a1faa14479.png

  1. トグルをクリックして、期間アラートを有効にします。しきい値を、表示されていた値より少し上に設定して、 splash_screen_traceがしきい値を超えた場合に電子メールを受信できるようにします。
  1. [保存]をクリックしてアラートを作成します。トレース テーブルまで下にスクロールし、 [カスタム トレース]タブをクリックして、アラートが有効になっていることを確認します。

2bb93639e2218d1.png

13.おめでとう！

おめでとう！ Firebase Performance Monitoring SDK を有効にしてトレースを収集し、新機能のパフォーマンスを測定しました。新機能のロールアウトの主要なパフォーマンス メトリックを監視し、パフォーマンスの問題が発見されたときに迅速に対応しました。これはすべて、Remote Config を使用して構成を変更し、パフォーマンスの問題をリアルタイムで監視する機能によって可能になりました。

カバーした内容

  • Firebase Performance Monitoring SDK をアプリに追加する
  • カスタム コード トレースをコードに追加して、特定の機能を測定する
  • 新しい機能を制御/ロールアウトするための Remote Config パラメータと条件値の設定
  • パフォーマンス監視ダッシュボードを使用してロールアウト中に問題を特定する方法を理解する
  • アプリのパフォーマンスが設定したしきい値を超えたときに通知するようにパフォーマンス アラートを設定する

もっと詳しく知る