Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

Firebase の In-App Messaging のメッセージをカスタマイズする

Firebase アプリ内メッセージでは、デフォルトのデザインでメッセージや各種構成を事前に行いますが、動作やメッセージの内容を拡張することもできます。アプリ内メッセージを使用して、メッセージにアクションを追加したり、メッセージのデザインをカスタマイズしたりできます。

メッセージにアクションを追加する

アクションを使用すると、アプリ内メッセージングを使用してユーザーをウェブサイトまたはアプリの特定の画面に誘導できます。

Firebase アプリ内メッセージングは、リンクハンドラを使用してアクションを処理します。SDK では多数のハンドラを使用できるため、アプリケーションにすでにハンドラが 1 つある場合は、Firebase アプリ内メッセージングはそれ以上の設定を行わなくてもそのハンドラを使用できます。まだハンドラを持っていない場合は、Firebase Dynamic Links を使用できます。詳しくは、iOS でダイナミック リンクを作成するをご覧ください。

Firebase コンソールを使用してメッセージにアクションを追加する

アプリにリンクハンドラが追加されたら、アクションを使用してキャンペーンを作成する準備が整いました。Firebase コンソールを開いてアプリ内メッセージングを開き、新しいキャンペーンを開始するか既存のキャンペーンを編集します。そのキャンペーンで、カードボタンテキストボタン アクションイメージ アクション、またはバナー アクションを実装します。アクションは関連するディープリンクとなります。

アクションの形式は、選択したメッセージのレイアウトによって異なります。モーダルによって、カスタムボタンのテキスト コンテンツ、テキストの色、および背景色を持つ操作ボタンが取得されます。一方、画像とトップバナーはインタラクティブとなり、タップすると指定されたアクションが実行されます。

メッセージのデザインを変更する

Firebase アプリ内メッセージングを使用すると、メッセージのレイアウト、フォント スタイル、ボタンの形などを変更して、アプリでのメッセージの表示方法をカスタマイズできます。メッセージの表示方法を変更するには 2 つの方法があります。1 つは、デフォルトの Firebase アプリ内メッセージングの表示を変更する方法、もう 1 つは独自のメッセージ表示ライブラリをゼロから作成する方法です。

デフォルトの表示を変更する

メッセージをカスタマイズする最も簡単な方法は、Firebase アプリ内メッセージングのデフォルトのメッセージ表示コードを利用する方法です。

firebase-ios-sdk リポジトリのクローンを作成する

まず、firebase-ios-sdk リポジトリの最新リリースのクローンを作成して、InAppMessaging ディレクトリを開きます。

変更するメッセージの種類を選択する

リポジトリのクローンが作成されたら、Firebase アプリ内メッセージングのメッセージ タイプ(CardModalBannerImageOnly)を変更します。このタイプは、Firebase アプリ内メッセージングのキャンペーン作成フローで使用されるメッセージ レイアウトに対応しています。

それぞれのタイプがアクセスできるデータセットは、Firebase コンソールのキャンペーン カスタマイズ オプションによって決まります。

タイプ titleText bodyText textColor backgroundColor imageData actionButton secondaryActionButton
Card
Modal
Banner
ImageOnly

メッセージを表示するレンダリング コードを変更する

メッセージ タイプには制限がありますが、その点を除けば、メッセージを自由に変更できます。たとえば、アプリの一番下にバナーを表示したり、モーダル内でアクション ボタンを移動したり、ユーザーのフィードにアプリ内メッセージを埋め込んだりするなど、アプリに合わせてメッセージの外観を変更できます。

メッセージの表示を変更する際には、次の 2 つの点に注意してください。

  • メッセージ タイプのディレクトリ: メッセージ タイプごとに別のディレクトリがあり、そのディレクトにタイプのロジックを決めるファイルが存在します。
  • ストーリーボード: InAppMessaging ライブラリの .storyboard ファイルを使用して、3 つのメッセージ タイプの UI を定義することもできます。

お好みのメッセージ タイプのディレクトリにあるファイルを変更し、.storyboard で対応するセクションを変更して、メッセージの表示をカスタマイズします。

変更後の InAppMessaging コードを使用するようにプロファイルを更新する

Firebase アプリ内メッセージングで、デフォルトではなく変更後の設定でメッセージが表示されるようにするには、カスタマイズした InAppMessaging を使用するようにプロファイルを更新します。

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'YourProject' do
# Comment the next line if you're not using Swift and don't want to use dynamic frameworks
use_frameworks!

# Pods for YourProject
pod 'Firebase'

# Remove the default InAppMessaging pod:
# pod 'Firebase/InAppMessaging'

# Overwrite it with a version that points to your local copy:
pod `FirebaseInAppMessaging', :path => '~/Path/To/The/Cloned/Repo/'

end
これで、Pod を更新してアプリを再度ビルドすると、カスタマイズした新しい設定でメッセージが表示されます。

独自のメッセージ表示ライブラリを作成する

メッセージを表示する UI を作成する場合、InAppMessaging ライブラリを使用せずに、独自のコードをゼロから作成することもできます。

InAppMessagingDisplay プロトコルを実装するクラスをビルドする

Firebase アプリ内メッセージングは、InAppMessaging クラスを使用して Firebase サーバーとアプリ間の通信を処理します。このクラスは、InAppMessagingDisplay プロトコルを使用して、受信したメッセージを表示します。独自の表示ライブラリをビルドするには、このプロトコルを実装するクラスを作成します。

プロトコルの定義とそれを遵守する方法が InAppMessaging ライブラリの FIRInAppMessagingDisplay.h ファイルに記述されています。

メッセージ表示ライブラリを使用するように messageDisplayComponent を設定する

InAppMessagingmessageDisplayComponent プロパティを使用して、メッセージの表示時に使用するオブジェクトを決定します。このプロパティをカスタム メッセージの表示クラスに設定すると、Firebase アプリ内メッセージングはユーザーのライブラリを使用してメッセージを表示します。

InAppMessaging.inAppMessaging().messageDisplayComponent = yourInAppMessagingRenderingInstance