見出し画像

Firebase Remote Configで実現！アプリの画像を動的に変更する仕組み

Yeoju Seok

はじめに

株式会社プログリットでiOSエンジニアをしてるヨジュです！
本記事では、シャドテンで年初に実施したイベントに関連し、モバイル側で導入したFirebase Remote Configについて共有します。
この記事を通じて、少しでも Remote Config に対するハードルが下がれば嬉しいです。

シャドテンとは？

シャドーイングならシャドテン！

シャドテンは、英語コーチングサービスなどを提供するプログリットのサブスクリプション型サービスの一つで、正しく効果的なシャドーイングを通じてリスニング力の向上をサポートするサービスです。ユーザーが録音した音声に対し、ビジネス英語のプロが毎日フィードバックを提供します。 良かった点や改善点を具体的に指摘し、正しい発音でシャドーイングを行うことで、リスニング力の向上へとつなげます。

背景

年初、シャドテンはユーザーの学習意欲を向上させるためにキャンペーンを実施しました。

今回のイベントでは、Xに提出結果を投稿するだけで、当選確率が2倍になるという条件がありました。
Xに共有する際、ユーザーに少しでもワクワク感を与えるため、イベント期間中、提出画面のイメージを毎日変更する案が採用され、それに伴い対応が求められました。
イベント期間中に提供される画像は、毎日変わる背景画像23枚と、チェック画面に表示される飛行機のロゴ1枚の、合計24枚でした。

イベント期間中毎日変わる背景

毎日変わるデータの取り扱いについて議論する中で、以下の点が考慮されました。

  1. 画像の呼び出し方法（S3などのサーバーから取得するか、モバイルコード内に画像を保存するか）

  2. イベント終了日以降は元の画像に戻す

  3. Xに投稿する際に限定的に追加される 「#いってらっしゃい」タグも、イベント終了後は表示されないようにする

コードで管理する方法もありましたが、このとき採用することになったのが Remote Configでした。

Firebase Remote Configとは?
Remote Config は、アプリの動作をサーバーからリモートで制御できる Firebaseの機能です。新しいバージョンを配信することなくアプリの動作を変更できるのが最大のメリットです。

公式サイト

Remote Configを利用すると設定をアプリの外部で管理できるため、アプリを修正したり再リリースしたりすることなく変更が可能になります。その結果、バナーやポップアップなどの機能追加も容易になり、イベントをより柔軟に展開できます

Firebase Remote Config導入

💡 projectにFirebaseインストール過程は書いてないです
Firebaseのインストールは 公式ドキュメントを参考してください

1. Console設定

Firebase Consoleで Remote Configにアクセスし、パラメーターを追加します

  • Parameter name (key) ：コード内で実際に呼び出される際に識別されるパラメーター

  • Data type：string、number、boolean、json があります。イメージに関連するさまざまな設定値があり、ひとつのデータ型で管理するのが良いと判断し、今回は jsonを使用しました。内部の定義は以下の通りです。

{ 
"front_image_url": "https:imageurl/front00.png", 
"back_image_url": "https:imageurl/bg_%02d.png", 
"back_image_count": "23", 
"start_at": "2025-01-06T03:00:00+09:00", // ロジックで使います
"end_at": "2025-02-01T02:59:59+09:00" 
}

  • 条件・デフォルト値：特定の日付などの条件を追加できます。この期間に含まれない場合は、アプリの内部値を使用するように設定しました。

画像に関する値は x_campaign_params_for_ios に保存し、X のイベントハッシュタグは別途 x_campaign_for_ios に明記しました。

2. コード実装

  • 今回の実装は RemoteConfigManagerというシングルトン形式で行いました

  • その後、Remote Config実装で参考した[ドキュメント]

ステップ 1 : アプリにRemote Configを追加し、初回データ取得のための fetch処理を実装
まず、Setupというメソッドを作成し、その内部でシングルトンのRemote Configオブジェクトを生成しました。

var snsSharedTextFormat: String?
var rawPromotionData: String? { didSet { decodePromotionData() } }
    
func setup() {
    let settings = RemoteConfigSettings()
    settings.minimumFetchInterval = 60 * 60 * 24 // 更新は1日一回
    remoteConfig.configSettings = settings
    remoteConfig.setDefaults(fromPlist: "RemoteConfigDefaults")
    fetchStaticValues()
}
    
private func fetchStaticValues() {
    remoteConfig.fetch { [weak self] status, _ in
        guard let self else { return }
        if status == .success {
            self.remoteConfig.activate { _, _ in
                self.snsSharedTextFormat = self.remoteConfig["x_campaign_for_ios"].stringValue
                self.rawPromotionData = self.remoteConfig["x_campaign_params_for_ios"].stringValue
            }
        }
    }
}

ステップ 2 : Listenerの導入
Listenerはリアルタイムで値を更新する機能です。

例: 先ほど設定したJSONの値のうち、front_image_urlをhttps:imageurl/front00.pngからhttps:imageurl/LGTMに変更する場合

このとき、リアルタイムで更新されなければ、X に投稿したユーザーの画像が過去のものになってしまい、問題が発生します。そのため、リアルタイムで値の更新を検知する機能を追加しました。

備考) この機能はアプリがアクティブな状態でのみ実行されます
→ 実際に導入してみたところ、Firebase SDKで管理されるため、特別な処理を追加する必要はありませんでした。

private func addConfigUpdateListener() {
    remoteConfig.addOnConfigUpdateListener { [weak self] configUpdate, _ in
        guard let self = self else { return }

        if configUpdate != nil {
            self.remoteConfig.activate { _, _ in
                self.snsSharedTextFormat = self.remoteConfig["x_campaign_for_ios"].stringValue
                self.rawPromotionData = self.remoteConfig["x_campaign_params_for_ios"].stringValue
            }
        }
    }
}

ステップ 3 : 保存された rawPromotionDataから現在の日時とキャンペーン期間を比較し、結果に基づいて画像 URLを更新
保存されたrawPromotionDataから現在の日時とキャンペーン期間を比較し、その結果をもとにrawPromotionData内の imageUrl(https:imageurl/bg_%02d.png)の%02d部分を修正し、該当する URL を表示するロジックを追加しました。

注意事項

Remote Configを使用する際に注意すべき重要なポイントがいくつかあります。

  • 過剰な fetchリクエストを避ける

  • リアルタイム更新はRemote Config fetch呼び出しを補完します。アプリの起動時（またはアプリのライフサイクル中）にフェッチを呼び出し、ユーザー セッション中にリアルタイム Remote Config の更新をリッスンして、サーバーに公開後すぐに最新の値を使用できるようにすることをおすすめします。 公式サイト

結果

Remote Configの導入により、複雑なコードを実装することなく、簡単にユーザーへ毎日異なる画像を提供できるようになりました。また、設定をアプリの外部で管理できるため、アプリを修正したり再リリースしたりすることなく変更が可能になりました。

最後に

Remote Configの提案は、一緒に働いている Android開発者からでした。（もし一人で対応していたら、おそらくすべてコードで実装していたと思います。）
プログリットで一緒に働く開発者の皆さんは、いつもより良い提案をしてくださるので、個人的にも視野が広がる経験をしながら仕事ができていると感じています。

プログリットの成長を加速させる開発のお仕事を担う仲間を募集しています！

プログリットでは、プロダクト開発のメンバーを募集しています！
「世界で自由に活躍できる人を増やす」というミッションに共感してくださる方、組織の中でお互いに切磋琢磨しながら成長していきたいという方は、ぜひカジュアル面談でお話しましょう！


いいなと思ったら応援しよう！