Flutter

【Flutter】FirebaseのRemote Configを使って画面設定を変更してみた

こんにちは!
Firebaseを学んでいて、いくつか使ってみたい機能がありました。
今回はFirebaseの「Remote Config」を使って実装してみました!
どんなことができるのか簡単に説明して、実際に実装したアプリをお見せします。

【Google】Firebaseを学ぶ! こんにちは!Flutterエンジニアになりたいと日々奮闘しているバックエンドエンジニアです! 皆さんは知ってますか?私たちバック...

概要

Remote Configとは

リリース済みのアプリに対して、Cloud上の設定値を変更することで、アプリに同期して変更を反映することが可能です。
つまり、アプリのアップデートを必要とせず、修正が可能になります。アップデートプロセスには時間を要するものですがこの方法を活用すれば、変更は容易になります。

また、ユーザーグループを設定することで、特定のユーザーに対してのみのUI変更なども可能です。

Remote Configの活用

Remote Config」を活用すると、アプリアップデートを使用せずに値の変更ができるので、画面に表示している名称(例えば、ページのタイトル)がイケてないので変更したい!と思ったときに即座に反映することが可能です。

変更する範囲はユーザーグループを設定して変更することができますので、試験的な変更も可能です。ユーザーグループには国や地域、端末など、幅広く対応できます。

Remote Configを使用したアプリの実装

前提条件:Firebaseでのアプリ登録が完了していること。

実装手順

「Remote Config」を使用するためには、
ライブラリの追加と「Remote Config」の実装が必要になります。

package.yaml(ライブラリの追加)

Remote Configを使用するため、「firebase_remote_config」を使用します。

dependencies:
  flutter:
    sdk: flutter
  # …
  firebase_core: ^0.4.5
  firebase_remote_config: ^0.3.1

2020/7 現在 最新バージョン確認はpub.devで確認してください。

main.dart(Remote Config設定を追加)

main.dartはdartPadを検証したときのコードを元にしています。ソースコードはgithubに公開する予定です。
もう少し綺麗にしたら(*‘ω‘ *) 
未完成でもよければ、見たい方、コメントください。

        home: FutureBuilder<RemoteConfig>(
            // コンフィグの読み込みができたら
            future: setupRemoteConfig(),
            builder: (BuildContext context, AsyncSnapshot<RemoteConfig> snapshot) {
          // RemoteConfigのデータが取得出来たら、画面表示を行う
          return snapshot.hasData
              ? MyHomePage(
                  title: 'Firebase - ぬるぽ開発',
                  analytics: analytics,
                  observer: observer,
                )
              : Container();
        }));

「Remote Config」はアプリの起動時に読み込み、処理全体を管理するのを目的とするものと認識しています。そのため、アプリの読み込み時点で設定を読み込んでいます。
※今回は検証のため、ボタン押下することで設定値を読み込んで、画面表示が変わるように設定してます。

remote_config.dart(読込処理のみを外だし)

import 'package:firebase_remote_config/firebase_remote_config.dart';

RemoteConfig remoteConfig;
/// Remote Configで取得する設定パラメータ一覧
Future<RemoteConfig> setupRemoteConfig() async {
  remoteConfig = await RemoteConfig.instance;
  remoteConfig.setConfigSettings(RemoteConfigSettings(debugMode: true));
  // Key - Valueで設定値を用意する。ここでは初期値を設定する。
  remoteConfig.setDefaults(<String, dynamic>{
    // ヘッダーのタイトル
    'header_title':'ぬるぽ開発',
    // テーマ(Color)
    'theme' : 'default',
    // 最新NEWS
    'new_massage' : '',
    // テーマ(Color)
    'theme2' : 'default',
    // テーマ(Color)
    'theme3' : 'default',
    // テーマ(Color)
    'theme4' : 'default',
  });
  return remoteConfig;
}

// リモートコンフィグから取得した値を保持
Map<String,dynamic> remoteConfigMap;

/// リモートコンフィグから値を取得する
void readRemoteConfig() async {
  // リモートコンフィグからフェッチ
  await remoteConfig.fetch();
  await remoteConfig.activateFetched();
  // リモートコンフィグから取得した値を保持する先
  remoteConfigMap = remoteConfig.getAll();
  return;
}

String getConfigValue(String key)  {
  if(remoteConfigMap == null) {
    readRemoteConfig();
  }
  return remoteConfigMap[key].asString();
}

「Remote Config」はFirebase上に同じKeyで設定値があれば使うようになります。Firebase上に存在しない場合は、上記で定義しているデフォルト値を使用します。

Remote Configを適用したアプリの実行

Firebase上での設定

Firebase上の「Remote Config」に値を追加します。

Key-Valueの形で追加する形式ですので、比較的簡単に追加できます。グループ管理をしていけば特定のユーザーグループに対して値を変更できます。今回は全体設定として定義します。

アプリの実行結果

実装と、「Remote Config」を設定したら実際にアプリを実行していきます。
アプリでは、検証のためFloatingActionButtonをクリックするとRemoteConfigの値を読み込むように作っています。

このようにアプリを実行すると、「Remote Config」から値を取り出し、画面タイトルと背景色を変更できています。

まとめ

今回は、Firebaseの「Remote Config」を使ったアプリを実践してみました。
使用した所感としては、レイアウトや、アプリのバージョン管理などを「Remote Config」で管理して、ユーザーグループごとにレイアウトを反映するといった使い方をしていくのが良いと感じました。

また、A/Bテストの実施に使えると公式ページにもありましたが、確かに!と納得できました。さすがだなー。

「Remote Config」をうまく使うとユーザービリティの向上や、管理をソースコードの修正なしで実行できるようになりますので、変更してから反映までの時間を短縮できます。

デメリットは特に思い当たらないですが、
強いて言うなら、規模が大きくなっていくにつれて「Remote Config」に持たせるべきでないことも追加されていきそうだなと思ったぐらいです。
まぁ結局この辺りは開発におけるルール付けがちゃんとなされるかどうかですので、きっちり目的に沿って使えば問題ないかな。
なので、あまりデメリットもないし、是非とも使っていただきたい機能です。

それでは、see you again!

ABOUT ME
Ikumasa
3人家族の夫やってます。結婚4年目突入しました。 私はFF7Rにはまってます。 嫁はあつ森です。嫁はカニです。 仕事は設計業務から開発工程を中心に仕事しています。 高専(電子科)→情報系大学編入→2014年情報系大学院卒→IT企業就職~現在に至 主にJavaでの開発に従事、多少VB.NETでの開発も。 Framework:Struts、Seaserなどを経験。 DB:oracle11g,postgreSQL,MySQL,SQLite,SqlServerなど。 JP1を活用したバックエンド側を中心に3年ほど実施。 当時はLinuxOSでのShellScriptなど。携わった言語は広く浅く長くw どちらかというとバックエンドよりのエンジニア。 最近はフロントエンド側もやってます。 独学でFlutterなどの新規案件獲得に向け日々勉強中