[Flutter] Firebase Performance

概要

今回のブログポストでは、Flutterで開発したアプリのパフォーマンスをモニタリングするために、FirebaseのPerformanceを設定する方法について説明します。

firebase_performance

ブログシリーズ

このブログはシリーズで制作されました。次のリンクを通じて他のブログポストもご確認ください。

Firebaseプロジェクトの作成と設定

FlutterでFirebaseを使用するには、Firebaseプロジェクトを作成し、firebase_coreパッケージをインストールする必要があります。以下のリンクを通じて詳細をご確認ください。

[Flutter] Firebase Core

firebase_performanceのインストール

FlutterプロジェクトでFirebase Performanceを使用するには、firebase_performanceパッケージをインストールする必要があります。次のコマンドを実行してfirebase_performanceパッケージをインストールします。

flutter pub add firebase_performance

次に、以下のコマンドを実行してFirebase Performanceの設定を行います。

flutterfire configure

Firebase Performanceはこのようにインストールして設定するだけで、自動的にアプリのパフォーマンスを測定し、Firebase Consoleで確認できます。

自動収集データ

Firebase Performanceは追加のコードなしで、次のようなデータを自動的に収集します。

アプリ起動時間(App start time): アプリが起動してユーザーが操作できるようになるまでの時間
画面レンダリング(Screen rendering): 各画面がレンダリングされるのにかかる時間と、遅いフレーム、フリーズしたフレームの数
HTTP/Sネットワークリクエスト(Network requests): ネットワークリクエストの応答時間、ペイロードサイズ、成功率

カスタムトレース

自動収集データ以外にも、特定の操作のパフォーマンスを測定したい場合は、カスタムトレース(Custom Trace)を使用できます。

import 'package:firebase_performance/firebase_performance.dart';

Future<void> fetchData() async {
  // トレースの作成と開始
  final Trace trace = FirebasePerformance.instance.newTrace('fetch_data_trace');
  await trace.start();

  try {
    // 測定したい操作を実行
    final response = await api.fetchData();

    // 成功時にメトリクスを記録
    trace.setMetric('data_count', response.data.length);
  } catch (e) {
    // エラー発生時に属性を記録
    trace.putAttribute('error', e.toString());
  } finally {
    // トレースを終了
    await trace.stop();
  }
}

カスタム属性の追加

トレースにカスタム属性を追加して、より詳細な情報を記録できます。

final Trace trace = FirebasePerformance.instance.newTrace('user_action_trace');
await trace.start();

// カスタム属性を追加（文字列）
trace.putAttribute('user_type', 'premium');
trace.putAttribute('screen_name', 'home');

// カスタムメトリクスを追加（数値）
trace.setMetric('item_count', 10);
trace.incrementMetric('tap_count', 1);

await trace.stop();

HTTPリクエストモニタリング

HTTPリクエストのパフォーマンスをより詳細にモニタリングしたい場合は、HttpMetricを使用できます。

import 'package:firebase_performance/firebase_performance.dart';

Future<void> fetchUserData() async {
  final HttpMetric metric = FirebasePerformance.instance.newHttpMetric(
    'https://api.example.com/users',
    HttpMethod.Get,
  );

  await metric.start();

  try {
    final response = await http.get(Uri.parse('https://api.example.com/users'));

    // レスポンス情報を設定
    metric.responsePayloadSize = response.contentLength ?? 0;
    metric.responseContentType = response.headers['content-type'];
    metric.httpResponseCode = response.statusCode;
  } finally {
    await metric.stop();
  }
}

Firebase Consoleで確認

パフォーマンスデータはFirebase ConsoleのPerformanceメニューで確認できます。

Firebase Consoleにアクセスします。
プロジェクトを選択し、左メニューからPerformanceを選択します。
ダッシュボードでアプリ起動時間、画面レンダリング、ネットワークリクエストなどのデータを確認できます。
カスタムトレースはCustom tracesタブで確認できます。

データが表示されるまで最大24時間かかる場合があります。

完了

これでFlutterでFirebase Performanceを使用するためにFlutterプロジェクトにfirebase_performanceを設定する方法について説明しました。Firebase Performanceを使用すると、アプリの起動時間、画面レンダリングパフォーマンス、ネットワークリクエストパフォーマンスなどをモニタリングして、ユーザー体験を改善できます。

Github Sponsor

Buy me a coffee

私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！