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

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

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

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

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

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

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

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

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

タイプ titleText bodyText textColor backgroundColor imageData actionButton
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 を設定する

FIRInAppMessaging は、messageDisplayComponent プロパティを使用して、メッセージの表示時に使用するオブジェクトを決定します。このプロパティをカスタム メッセージの表示クラスに設定すると、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

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

フィードバックを送信...

ご不明な点がありましたら、Google のサポートページをご覧ください。