【iOS】Firebase In-App Messaging を使ってアプリ内メッセージを送ってみた

【iOS】Firebase In-App Messaging を使ってアプリ内メッセージを送ってみた

Clock Icon2022.06.15

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Firebase In-App Messagingについて調べる機会があったので、実際にテストデバイスにIn-App Messagingを使用してメッセージを送ってみることにしました。

Firebase In-App Messaging を使ってみるを参考にし実際に進めていきました。

環境

  • Xcode 13.3.1
  • Firebase Apple SDK 9.1.0

はじめに

Firebase In-App Messagingは2022年6月14日現在はベータ版となっております。実際にご利用の際は、ベータ版ということを考慮した上で利用の検討をしていただければと思います。

準備

  1. Xcodeで新規プロジェクトを作成する
  2. Firebase を Apple プロジェクトに追加するのステップ3まで実施する

上記2でGoogleService-Info.plistをプロジェクトに追加したら、次はSDKを追加します。

アプリにFirebase SDKを追加

Xcodeで File > Add Packages... をクリックし開かれた画面の検索フォームにhttps://github.com/firebase/firebase-ios-sdkを入力します。

入力すると、firebase-ios-sdkというパッケージが出てくるので、Dependency RuleをUp to Next Major Versionを指定します。

Add Packageボタンを押すとパッケージの追加処理が開始します。少し追加の処理に時間がかかるイメージがありますが気長に待ちください。

しばらくすると、 Firebase SDKのどのプロダクトを選択するかを決める画面が出てきます。

今回使用するFirebaseInAppMessaging-Betaを選択して、Add Packageボタンを押します。これでSDK追加は完了です。

アプリ内でSDKを初期化する

AppDelegatedidFinishLaunchingWithOptions内でFirebaseApp.confgure()を行います。

UIKit

import UIKit
import FirebaseCore


@main
class AppDelegate: UIResponder, UIApplicationDelegate {

  var window: UIWindow?

  func application(_ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions:
      [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    FirebaseApp.configure()

    return true
  }
}

SwiftUI

import SwiftUI
import FirebaseCore


class AppDelegate: NSObject, UIApplicationDelegate {
  func application(_ application: UIApplication,
                   didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
    FirebaseApp.configure()

    return true
  }
}

@main
struct YourApp: App {
  // AppDelegate
  @UIApplicationDelegateAdaptor(AppDelegate.self) var delegate

  var body: some Scene {
    WindowGroup {
      NavigationView {
        ContentView()
      }
    }
  }
}

今回使用するコードは以上になります。

テストメッセージを送信する

電力を節約するため、Firebase In-App Messagingはサーバーからのメッセージの取得を1日に1回だけ行います。この設定では1日1回の配信テストしか出来ない為、とてもテストが困難になります。

テスト用にテストデバイスを指定することで、1日1回という制限無しに要求に応じてメッセージを送信することが出来ます。

アプリのインストールIDを取得

テストデバイスは、Firebaseによって提供される インストール ID よって決まります。テスト用アプリのインストール IDを確認するには、ランタイムコマンドの引数 -FIRDebugEnabledを指定してアプリを実行する必要があります。

FIRDebugEnabledを指定

Xcode > Product > Scheme > Edit scheme の順に選択します。

  1. 表示されたダイアログでArgumentsタブを開きます。
  2. Arguments Passed On Launchの+ボタンをクリックします。
  3. 新しく作成されたフィールドに-FIRDebugEnabledと入力します。
  4. Closeをクリックし、ダイアログを閉じます。

アプリのインストールIDを取得

プロジェクトのAppDelegateFirebaseApp.configure()を追加したら、一度アプリを起動します。

すると、デバッグエリアに下記のようにインストールIDが表示されるのでインストールIDをコピーします。

[Firebase/InAppMessaging][I-IAM180017] Starting InAppMessaging runtime with Firebase Installation ID YOUR_INSTALLATION_ID

関連する文字列で絞り込むと容易に見つけられます。

Firebaseコンソールからテストメッセージを送信する

FirebaseコンソールのエンゲージメントにあるMessagingを選択し、表示された画面の新しいキャンペーンを作成を押します。

通知とアプリ内メッセージングが選択できるのでアプリ内メッセージングを選択します。

メッセージのレイアウトを選択

アプリ内メッセージングで表示できるレイアウトは現在4つあります。

  • カード
  • モーダル
  • 画像のみ
  • トップバナー

見た目はこのような違いになります。

カード モーダル 画像のみ トップバナー

メッセージにデザイン変更

In-App Messagingで変更できるデザインは、

  • 背景色
  • 文字色
  • ボタン色
  • ボタンの文字色

デザイン変更できる箇所は少なく、とてもシンプルなものになっております。フォントや改行等の変更は出来ません。デザインに凝りたい場合は、テキスト等を含んだ画像を作成し、画像のみのレイアウトのメッセージを使用する必要がありそうです。

デバイスでテスト

メッセージの内容を入力し、デバイスでテストボタンを押します。

表示されたダイアログのインストールIDを追加に先ほどコピーしたインストールIDを入力して追加します。その後、テストボタンを押すとテストの準備が整いました。

あとは、インストールIDを入力したデバイスでアプリを立ち上げてみましょう。

無事に表示されました!

設定できる内容

今回はメッセージの内容とスタイルを変更しましたが、その他にも設定できる項目があります。

  • メッセージの内容とスタイル
  • 宛先
    • 対象ユーザーを絞ることが出来ます。
  • スケジュール
    • 開始
    • 終了
    • トリガー条件
    • 表示頻度
  • コンバージョンイベント(任意)
  • 送信するキー(任意)

おわりに

1つのキャンペーンの表示は、最大1日1回という条件や、メッセージのフォントや改行を指定出来ないという点はあるものの、本当に少ないコードで簡単にアプリ内メッセージが送ることが出来ました!

まだベータ版なので今度の改善に期待していきたいですね。

モバイルアプリ開発のチームメンバー絶賛募集中!

モバイル事業部では事業会社様と一緒に、数年間にわたり長期でモバイルアプリをグロースさせています。

そんなモバイルアプリ開発のチームメンバーを絶賛募集中です!

もちろんモバイルアプリ開発以外のエンジニアも募集中です!

クラスメソッド採用サイト

参考

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.