Firebase Remote Config を使ってみる

iOS+ Android ウェブ Flutter Unity C++

重要: このセクションでは、モバイル クライアントとウェブ クライアントで Remote Config を構成する手順について説明します。サーバー環境については、サーバー環境で Remote Config を使用するをご覧ください。

Firebase Remote Config を使用すると、アプリでパラメータを定義し、それらの値をクラウドで更新できます。これにより、アプリのアップデートを配布しなくてもアプリの外観や動作を変更できます。このガイドでは、作業を開始するための手順について説明し、サンプルコードを示します（すべてのサンプルコードは firebase/quickstart-js GitHub リポジトリからクローンを作成またはダウンロードできます）。

ステップ 1: Remote Config SDK を追加して初期化する

注: SDK のインストール時には、Analytics に関する依存関係を追加することもできます。ユーザー プロパティとオーディエンスに対して、Remote Config のアプリ インスタンスの条件付きターゲティングには Analytics が必須です。

1. まだ行っていない場合は、Firebase JS SDK をインストールして Firebase を初期化します。

2. Remote Config JS SDK を追加して Remote Config を初期化します。

Web

ツリー シェイキングが可能なウェブ向けのモジュラー API の詳細と、名前空間対応の API からのアップグレード方法をご覧ください。

import { initializeApp } from "firebase/app";
import { getRemoteConfig } from "firebase/remote-config";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Remote Config and get a reference to the service
const remoteConfig = getRemoteConfig(app);

Web

ツリー シェイキングが可能なウェブ向けのモジュラー API の詳細と、名前空間対応の API からのアップグレード方法をご覧ください。

import firebase from "firebase/compat/app";
import "firebase/compat/remote-config";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Remote Config and get a reference to the service
const remoteConfig = firebase.remoteConfig();

このオブジェクトは、アプリ内デフォルト パラメータ値の保存、更新されたパラメータ値の Remote Config バックエンドからのフェッチ、フェッチされた値がアプリで使用できるようになるタイミングの制御に使用されます。

ステップ 2: 最小フェッチ間隔を設定する

開発時には、比較的短い最小フェッチ間隔を設定することをおすすめします。詳細については、スロットル処理をご覧ください。

Web

ツリー シェイキングが可能なモジュラー ウェブ API の詳細と、名前空間 API からのアップグレード方法をご確認ください。

remoteConfig.settings.minimumFetchIntervalMillis = 3600000;
rc_set_minimum_fetch_time.js

Web

remoteConfig.settings.minimumFetchIntervalMillis = 3600000;
index.js

ステップ 3: アプリ内のデフォルト パラメータ値を設定する

アプリ内デフォルト パラメータ値を Remote Config オブジェクトに設定することにより、Remote Config バックエンドに接続する前にアプリを意図したとおりに動作させることができ、バックエンド側に値が設定されていない場合にデフォルト値を使用できます。

重要: 機密データを Remote Config のパラメータキーまたはパラメータ値に保存しないでください。Remote Config データは転送中に暗号化されますが、エンドユーザーはクライアント アプリ インスタンスで利用可能なデフォルトの、またはフェッチされた Remote Config パラメータにアクセスできます。

Web

ツリー シェイキングが可能なモジュラー ウェブ API の詳細と、名前空間 API からのアップグレード方法をご確認ください。

remoteConfig.defaultConfig = {
  "welcome_message": "Welcome"
};
rc_set_default_values.js

Web

remoteConfig.defaultConfig = {
  "welcome_message": "Welcome"
};
index.js

Remote Config バックエンド パラメータ値をすでに構成している場合は、すべてのデフォルト値を含む生成された JSON ファイルをダウンロードして、App Bundle に含めることができます。

REST

curl --compressed -D headers -H "Authorization: Bearer token" -X GET https://firebaseremoteconfig.googleapis.com/v1/projects/my-project-id/remoteConfig:downloadDefaults?format=JSON -o remote_config_defaults.json

Firebase コンソール

1. [Parameters] タブで メニューを開き、[デフォルト値をダウンロード] を選択します。
2. プロンプトが表示されたら、[.json（ウェブ用）] を有効にして、[ファイルをダウンロード] をクリックします。

以下の例は、アプリ内でデフォルト値をインポートして設定する 2 つの方法を示しています。最初の例では、fetch を使用して、App Bundle に含まれるデフォルト ファイルに対して HTTP リクエストを行います。

  const rcDefaultsFile = await fetch('remote_config_defaults.json');
  const rcDefaultsJson = await rcDefaultsFile.json();
  remoteConfig.defaultConfig = rcDefaultsJson;
  

次の例では、require を使用して、ビルド時にその値をコンパイルしてアプリに追加しています。

  let rcDefaults = require('./remote_config_defaults.json');
  remoteConfig.defaultConfig = rcDefaults;

ステップ 4: アプリ内で使用するパラメータ値を取得する

ここまでの手順で、パラメータ値を Remote Config オブジェクトから取得できるようになりました。後でバックエンドに値を設定し、フェッチして有効化すると、それらの値をアプリで使用できるようになります。アプリ内パラメータ値を取得するには、getValue() メソッドを呼び出します。このとき、引数としてパラメータキーを指定します。

Web

ツリー シェイキングが可能なモジュラー ウェブ API の詳細と、名前空間 API からのアップグレード方法をご確認ください。

import { getValue } from "firebase/remote-config";

const val = getValue(remoteConfig, "welcome_messsage");
rc_get_values.js

Web

const val = remoteConfig.getValue("welcome_messsage");
index.js

ステップ 5: パラメータ値を設定する

Firebase コンソールまたは Remote Config バックエンド API を使用して、サーバーサイドの新しいデフォルト値を作成できます。このデフォルト値は、目的の条件付きロジックまたはユーザー ターゲティングに従って、アプリ内の値をオーバーライドします。このセクションでは、Firebase コンソールでこれらの値を作成するための手順を説明します。

1. Firebase コンソールでプロジェクトを開きます。
2. メニューから [Remote Config] を選択して、Remote Config ダッシュボードを表示します。
3. アプリで定義したパラメータと同じ名前のパラメータを定義します。それぞれのパラメータにデフォルト値を設定できます（最終的にはアプリ内デフォルト値をオーバーライドします）。また、条件値を設定することもできます。詳細については、Remote Config のパラメータと条件をご覧ください。

ステップ 6: 値をフェッチして有効にする

1. Remote Config バックエンドからパラメータ値をフェッチするには、fetchConfig() メソッドを呼び出します。バックエンドに設定したすべての値がフェッチされ、Remote Config オブジェクトにキャッシュ保存されます。
2. フェッチ済みのパラメータ値をアプリで使用できるようにするには、activate() メソッドを呼び出します。

1 回の呼び出しで値をフェッチして有効化する場合は、次の例のように fetchAndActivate() を使用します。

Web

ツリー シェイキングが可能なモジュラー ウェブ API の詳細と、名前空間 API からのアップグレード方法をご確認ください。

import { fetchAndActivate } from "firebase/remote-config";

fetchAndActivate(remoteConfig)
  .then(() => {
    // ...
  })
  .catch((err) => {
    // ...
  });
rc_fetch_config_callback.js

Web

remoteConfig.fetchAndActivate()
  .then(() => {
    // ...
  })
  .catch((err) => {
    // ...
  });
index.js

これらの更新されたパラメータ値はアプリの動作と外観に影響するので、スムーズなユーザー エクスペリエンスを実現するタイミング（次にユーザーがアプリを開いたときなど）でフェッチ済みの値を有効化する必要があります。詳細と例については、Remote Config の読み込み方法をご覧ください。

スロットル処理

アプリが短期間に何度もフェッチすると、フェッチ呼び出しが抑制される可能性があります。このような場合、SDK は FETCH_THROTTLE エラーをスローします。 このエラーをキャッチして、指数バックオフ モード（後続のフェッチ リクエスト間隔をより長くする）で再試行することをおすすめします。

アプリの開発中は、開発とテストを繰り返すためのイテレーションがすばやくできるように、頻繁なキャッシュの更新（1 時間に何度も）が必要となることがあります。多数の開発者がいるプロジェクトで迅速なイテレーションに対応するには、アプリ内で最小フェッチ間隔（Settings.minimumFetchIntervalMillis）を小さく設定したプロパティを一時的に追加します。

Remote Config のデフォルトのフェッチ間隔は 12 時間であり、本番環境で推奨されるフェッチ間隔もこの値です。この場合、実際にフェッチ呼び出しが行われた回数に関係なく、12 時間の期間内で構成がバックエンドから複数回フェッチされることはありません。具体的には、次の順で最小フェッチ間隔が決定されます。

1. Settings.minimumFetchIntervalMillis 内のパラメータ。
2. デフォルト値（12 時間）。

この設定は開発目的でのみ使用し、本番環境で実行されるアプリには使用しないでください。10 人の小さな開発チームでアプリをテストするだけの場合、毎時のサービス側の割り当て上限に達する可能性はほとんどありません。しかし、最小フェッチ間隔に非常に小さい値を設定して何千人ものテストユーザーにアプリを push すると、アプリがこの割り当てに達する可能性が高くなります。

次のステップ

Remote Config のユースケースに関する詳細な情報が必要な方は、主要なコンセプトと高度な戦略に関する以下のドキュメントをご覧ください。

• Remote Config テンプレートのバージョンを管理する
• Config の読み込み方法