Firebaseで動的UIと計測を実現。バックエンド機能の実装とUX最適化の要諦(Project1-7)

前回の続きでバックエンド(【Remote Config】【Analytics】【App Hosting】)の実装を今回は行っていきます。

この機能の説明については以下の記事をご覧ください。

始めに：

記事のメインとなるのは、【Remote Config】と【Analytics】です。

【App Hosting】は必要なファイルの作成のみです。セクション６の公開(デプロイ)にて実装の記事を発信していきます。

今回のやりたいこと：

今回の記事では、以下を行っていきたいと思っています。

ではご覧ください。

【準備編】バックエンド実装前の前準備

① Analytics の有効化

---

② Remote Config のパラメータ値の作成

今回のメインとなる【Remote Config】のパラメータ値（キーとバリュー）を準備していきます。

今回使用した画像は、「Beautiful Free Images & Pictures | Unsplash」です。このサイトは、世界で最も寛大な貢献者コミュニティが提供する600万枚以上の無料高解像度写真とイラストを自由に使うことができます。

とても綺麗な写真が多くあるので画像に困った際は、私が自信を持っておススメします！

特にBeautiful Free Images & Pictures | Unsplash　は【English】利用を推奨します。【日本語】では、スラッグがURLパラメータのエンコード・デコード関係で文字化けするので、見た目が悪くなります。また、管理や技術的配慮の観点からもネガティブに捉えられてしまいます。

---

Remote Configで【クライアント】 と 【サーバー】どっちを構築する？

今回は【クライアント】で作成します。

理由: 今回やりたいのは「アプリの背景画像（UI）」を変えることだからです。

サーバーが必要な時: 「AIのAPIキーを隠したい」とか「決済のロジックを変えたい」といった、裏側の処理を変える時だけです。

コンソールでの操作: 「構成を作成」する際、特に指定しなければ標準（クライアント向け）になります。「サーバー」タブなどは触らなくて大丈夫です。

---

【実装フェーズ】バックエンドの実装をAIエージェントに依頼する

---

【作成後の重要な項目】実際に動作するのか確認する。

② Analyticsの確認：シークレットタブを活用してテスト

開発中の画面でアプリを利用してもAnalyticsに反映されないので一度、外部のアクセス者として利用します。

始めの準備：開発中のアプリに外部アクセスできるようにする。

• Firebase Studioの開発中プロジェクトから有効化します。
  • 【Prototypeモード】のブラウザの右上「リンクアイコン」をクリックする。
  • メニューが開くので「Make Preview Public」をクリックして「有効化」。
  • アイコンが変わったのを確認する。「リンク」→「ネットワーク」
• シークレットタブを作成する：検証ツール：Google Chrome
  • Google Chromeから「新しいタブ」を開く。
  • タブ右端にある「…」をクリック。
  • メニューが開くので「新しいシークレット ウィンドウ」をクリック
  • 「シークレット ウィンドウ」タブが開きます。（これによって外部のアクセス者として検索が可能になります。）
• 検索してアプリを実行する
  • 先程「有効化」したアイコンをもう一度クリックしてメニューを開く。
  • 「Copy URL」をクリックしてリンクをコピーする。
  • 「シークレット ウィンドウ」タブのアドレスバーにコピーしたURLをペースト（貼り付け）して検索。
  • 開発中アプリにアクセスできれば成功。確認したら実行する。
  • 自身のFirebaseプロジェクトに戻って「Realtime Analytics」を見る。（左メニューの「分析」項目から選択可）
  • 実際に「１」がカウントされたら成功。

---

Remote Configの確認：利用して画像が切り替われば成功！

Remote Configでの確認項目は、実際に利用した時に準備で設定したパラメータ値に変われば成功です。（今回は、背景画像のため背景画像が変わればOK！）

問題と原因：実際に利用した時に起こった事。

検証結果での問題と最終的にわかった原因をここで発表します。

問題：背景画像が表示されていない。

原因：パラメータ値設定でのバリュー(Value)：画像のURLとサイトのURLの違い。たったこれだけ。

一見同じURLのように見えますがここが違うだけで思うような画像を表示できなくなります。

これからその原因を特定に至った方法と確実に画像URLを取得する方法をお伝えしていきます。

行ったテスト方法：３段階(A→B→A+B)で地道に調査

テストを行う前に確認したこと

• Remote Config のフェッチキャッシュは、デフォルトでは「12時間」変更を読みに行きません。（通信節約のため）
• ファイル先頭に "use client"; があるか見る。
  • Next.js App Router では、Remote Config はブラウザ（クライアント）でしか動きません。
• Firebase Console の Remote Config 画面右上を見る「変更を公開 (Publish changes)」したか？
• 取得したURLの画像サイズやサイトの仕様によって、正しく表示されない事も。CSSは設定されているか？

テストの手順

1. /publicの画像のみで背景を表示させる。（そもそも背景画像が表示できていたのか？）
2. RemoteConfigのみで背景を管理する。(/publicの画像は使わない）
3. 統合テスト：両方を実装する。
   • Remote Configを第一優先：まず、Firebase Remote Configから値を取得しにいきます。
   • 確実なフォールバック：値の取得に失敗した場合（キーが存在しない、値が空、通信エラー）は/public画像を表示させる。

これらの内容を基に画像URLとサイトURLの値が違うと推測しました。

画像URLの取得を行い、パラメータ値のバリュー(Value)にセットする事で改善されることになりました。

たったこれだけだったのですが、なかなか苦労する問題になりました。

ローカルパス (C:/Users/... や ./assets/...) は機能するか？（パラメータ値設定：バリュー(Value)にて)

結論：機能しません（非推奨です）。

/public フォルダに置けば表示されるか？

はい、表示されます。ただし、「もったいない」使い方です。

---

正しい画像URLの取得手順

Unsplash の画像サイトを例に説明します。

方法 : 右クリックでコピー（一番確実）

これが「Webページ」ではなく「画像データ」の場所を知る基本テクニックです。

1. ブラウザで、使いたい画像が表示されているページを開く。
2. その画像の上で 右クリック する。
3. メニューの中から以下のどれかを選ぶ（ブラウザによって言葉が少し違います）。
   • Chrome: 「画像アドレスをコピー」 (Copy image address)
   • Edge: 「画像リンクをコピー」
   • Safari: 「イメージのアドレスをコピー」
4. このコピーしたURLを Remote Config パラメータ値(Value)に貼り付けてください。

確認: 新しいタブで開いて確認（検証用）

検索で表示した時に、画面に画像だけがポツンと表示され、背景が黒やグレーになっている状態になったら問題なく表示される画像と判定できます。

---

まとめ

今回は、バックエンドの実装を行っていきました。

バックエンドの準備→AIエージェントに依頼→動作の確認→問題と解決の流れで記事にしていきました。

画像URLとサイトURLの違いで戸惑いましたが何とか実装を成功する事が出来ました。

見てくれている方もRemote Configで画像を実装する際は、今回の問題に気を付けて行ってください。

次回は、バックエンドの連携編です。実装した【Analytics】と【Remote Config】を連携させてA/Bテストができるようにしていく気になっています。ぜひお楽しみに！

ここまで読んでいただきありがとうございました。またお会いしましょう！Tomoyaでした。