コンソールへ移動

Firebase のアプリ内メッセージングのメッセージをカスタマイズする

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

変更後の InAppMessagingDisplay を使用するようにプロファイルを更新する

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

# 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 InAppMessagingDisplay pod:
# pod 'Firebase/InAppMessagingDisplay'

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

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

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

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

FIRInAppMessagingRendering インターフェースを実装するクラスをビルドする

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

プロトコルの定義とそれに準拠する方法が InAppMessaging ライブラリの FIRInAppMessagingRendering.h ファイルに記述されています。Firebase アプリ内メッセージングをすでに設定している場合、このファイルは Xcode プロジェクト ディレクトリにあります。

FirebaseInAppMessaging > Frameworks > FirebaseInAppMessaging.framework > Headers > FIRInAppMessagingRendering.h の順に移動します。

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

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

[FIRInAppMessaging inAppMessaging].messageDisplayComponent = yourFIRInAppMessagingRenderingInstance;

Firebase アプリ内メッセージングのヘッドレス バージョンを使用するようにプロファイルを変更する

Firebase アプリ内メッセージングのデフォルトのポッド Firebase/InAppMessagingDisplay は、自身をユーザーアプリの messageDisplayComponent として自動的に割り当てます。それを回避するには、ヘッドレスの 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 InAppMessagingDisplay pod:
# pod 'Firebase/InAppMessagingDisplay'

# Include the headless pod instead:
pod `Firebase/InAppMessaging'

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