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

1。概要

このコードラボでは、機能のロールアウト中にアプリのパフォーマンスを監視する方法を学習します。サンプルアプリには基本的な機能があり、Firebase RemoteConfigフラグに基づいて異なる背景画像を表示するように設定されています。インストルメンテーショントレースを調べて、アプリのパフォーマンスを監視し、アプリの構成変更をロールアウトし、効果を監視して、パフォーマンスを改善する方法を確認します。

あなたが学ぶこと

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

前提条件

  • Android Studio4.0以降
  • APIレベル16以上のAndroidエミュレーター。
  • Javaバージョン8以降
  • Firebase RemoteConfigの基本的な理解

2.サンプルプロジェクトを設定します

コードをダウンロードする

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

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

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

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

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

アプリをFirebaseに接続します

  1. Android Studio /ヘルプ>アップデートを確認して最新バージョンのAndroidStudioとFirebaseAssistantを使用していることを確認します。
  2. [ツール]> [ Firebase]を選択して、[アシスタント]ペインを開きます。

2fe37593d5b76c7.png

  1. [パフォーマンスモニタリング]を選択してアプリに追加し、[パフォーマンスモニタリングの開始]をクリックします。
  2. [ Firebaseに接続]をクリックして、AndroidプロジェクトをFirebaseに接続します(これにより、ブラウザでFirebaseコンソールが開きます)
  3. Firebaseコンソールで、[プロジェクトの追加]をクリックし、Firebaseプロジェクト名を入力します(Firebaseプロジェクトが既にある場合は、代わりにその既存のプロジェクトを選択できます) 。 [続行]をクリックして利用規約に同意し、Firebaseプロジェクトと新しいFirebaseアプリを作成します。
  1. 次に、新しいFirebaseアプリをAndroidStudioプロジェクトに接続するためのダイアログが表示されます。

38e2c00493a8d4d4.png

  1. Android Studioに戻り、アシスタントペインに、アプリがFirebaseに接続されていることの確認が表示されます。

dda8bdd9488167a0.png

アプリにパフォーマンスモニタリングを追加する

Android Studioの[アシスタント]ペインで、[パフォーマンスモニタリングをアプリに追加]をクリックします。

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

9b58145acc4be030.png

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

378356b65be49df8.png

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

3.アプリを実行します

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

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

843a786fe3f42d0f.png

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

e4b8dac61e405c61.png

内部で何が起こっているのですか?

スプラッシュ画面はSplashScreenActivityに実装されており、次のことを行います。

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

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

4.リモート構成を設定します

アプリが実行されたので、新しい機能フラグを設定できます。 Firebaseコンソールの左側のパネルで、[エンゲージ]セクションを見つけて、[リモート設定]をクリックします。

[パラメータカードの追加]で:

  1. パラメータキーとしてseasonal_image_urlを追加します。
  2. [説明を追加]をクリックして、次の説明を入力しShows a seasonal image (replaces default) in the main page when the restaurant list is empty.
  3. [条件の値を追加]-> [新しい条件を定義]をクリックします。
  4. 条件名として、 Seasonal image rolloutと入力します。
  5. Applies if... ]セクションで、[ User in random percentile <= 0%選択します。 (後のステップで展開する準備ができるまで、この機能を無効のままにしておきます。)
  6. [条件の作成]をクリックします。後でこの条件を使用して、ユーザーに新機能を展開します。

11547904ae42262d.png

  1. [パラメータカードの追加]に戻り、[季節の画像の値]ロールアウトフィールドに、季節の画像をダウンロードするURLを入力します: https://images.unsplash.com/photo-1552691021-7043334e0b51 ://images.unsplash.com/photo-1552691021-7043334e0b51
  2. デフォルト値は空の文字列のままにします。これは、URLからダウンロードされた画像ではなく、コードベースのデフォルトの画像が表示されることを意味します。
  3. [パラメータの追加]をクリックします。 45933b3f09e69849.png
  4. 新しい構成がドラフトとして作成されたことがわかります。 [変更を公開]をクリックし、上部にある変更を確認してアプリを更新します。

38aa4cbe87bc58d3.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. SplashScreenActivityonDestroy()メソッドでトレースを終了します。

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. onLoadFailed()のonLoadFailed()メソッドとonResourceReady()メソッドの両方でトレースを終了しRequestListener

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)を追跡するカスタムコードトレースを追加したので、 splash_seasonal_image_processingでアプリを再度実行します。 Logging trace metric: splash_screen_trace 、その後にトレースの期間が続きます。新機能をまだ有効にしていないため、 splash_seasonal_image_processingのログメッセージは表示されません。

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

カスタムコードトレースの場合、パフォーマンスモニタリングはデフォルトの属性(アプリのバージョン、国、デバイスなどの一般的なメタデータ)を自動的にログに記録するため、 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_tracesplash_seasonal_image_processing )にカスタム属性( seasonal_image_url_attribute )を追加したので、AndroidStudioでアプリを再度実行します。 Setting attribute 'seasonal_image_url_attribute' to 'unset' on trace 'splash_screen_trace'. Remote ConfigパラメーターseasonalImageUrlをまだ有効にしていないため、属性値がunsetされていません。

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

7.パフォーマンス監視ダッシュボードを構成します

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

Firebaseコンソールで、FriendlyEatsアプリがあるプロジェクトを選択します。

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

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

16d8b0db35956361.png

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

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

f3735b336c8c4b8.png

  1. [メトリックの選択]をクリックすると、ダッシュボードに追加されたsplash_screen_traceの期間が表示されます。

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

e7ac31d452e95dba.png

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

8.機能を展開します

モニタリングを設定したので、以前に設定したFirebase Remote Configの変更( seasonal_image_url)を展開する準備が整いました。

変更をロールアウトするには、Firebaseコンソールの[リモート設定]ページに戻り、ターゲティング条件のユーザーパーセンタイルを増やします。通常、新しい機能をごく一部のユーザーに公開し、問題がないと確信できる場合にのみ機能を増やします。ただし、このコードラボでは、アプリのユーザーは私たちだけなので、パーセンタイルを100%に変更できます。

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

83b527dd7918d288.png

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

c4ad503bda164ab6.png

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

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

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

ccb4e5762dfc4abb.png

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

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

c0768ce8f147336a.png

  1. 違いをさらに確認するために、 splash_screen_traceのデータを詳しく調べることができます。メトリックボードのsplash_screen_traceカードをクリックしてから、[メトリックの詳細の表示]をクリックします。

637c29b428a4b98c.png

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

f809ac2f7fc095fb.png

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

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

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

d629934fc7ad4903.png

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

Firebase Performance Monitoringを使用すると、新機能を有効にしたエンドユーザーに次のような影響が見られました。

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

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

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

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

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

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

9ed5808f15d2432.png

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

e4b8dac61e405c61.png

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

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

RemoteConfig値を再度ロールアウトします

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

79ff14f179636316.png

  1. ページ上部の[条件]タブをクリックします。
  2. [季節の画像]ロールアウトをクリックして、パーセンタイルを100%に戻します。
  3. [条件を保存]をクリックします。

4578d491f02708a5.png

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

12.モニタリングを使用してアプリをテストします

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

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

c4ad503bda164ab6.png

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

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

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

71f13ad560bbddba.png

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

e522b4f0f315ce3f.png

13.おめでとうございます!

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

何をカバーしましたか?

  • アプリにFirebasePerformance MonitoringSDKを追加する
  • 特定の機能を測定するためにコードにカスタムコードトレースを追加する
  • 新機能を制御/ロールアウトするためのRemoteConfigパラメーターと条件値の設定
  • パフォーマンス監視ダッシュボードを使用してロールアウト中に問題を特定する方法を理解する

もっと詳しく知る