Firebase Remote Config を使ってみる


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

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

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

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

Web 

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 

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

remoteConfig.settings.minimumFetchIntervalMillis = 3600000;
rc_set_minimum_fetch_time.js

Web

remoteConfig.settings.minimumFetchIntervalMillis = 3600000;
index.js

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

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

Web

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

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

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 時間）。

次のステップ

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