iOS アプリにプッシュ通知を追加する

1. はじめに

最終更新日: 2020 年 1 月 6 日

Firebase Cloud Messaging(FCM)は、メッセージを無料で確実に送信するためのクロスプラットフォーム メッセージング ソリューションです。

FCM を使用すると、同期可能な新しいメールやその他のデータがあることをクライアント アプリに通知できます。通知メッセージを送信することで、ユーザーにアプリを再度アピールし、維持率の向上につなげることができます。インスタント メッセージなどの用途では、メッセージで最大 4 KB のペイロードをクライアント アプリに転送できます。

仕組み

FCM の実装には、送信と受信のために以下の 2 つの主要コンポーネントが含まれています。

  1. メッセージの作成、ターゲティング、送信を行う Cloud Functions for Firebase やアプリサーバーなどの信頼できる環境。
  2. 対応するプラットフォーム固有のトランスポート サービスを介してメッセージを受信する iOS、Android、またはウェブ(JavaScript)クライアント アプリ。

FCM アーキテクチャの概要

dc54f5190ee8926a.png

FCM は、メッセージの作成、転送、受信を行う次のコンポーネント セットに依存します。

  1. メッセージ リクエストを作成または構築するためのツール。Notifications Composer には、通知リクエストを作成するための GUI ベースのオプションが用意されています。すべてのメッセージ タイプを完全に自動化してサポートするには、Firebase Admin SDK または FCM サーバー プロトコルをサポートする、信頼できるサーバー環境でメッセージ リクエストを構築する必要があります。この環境は、Cloud Functions for Firebase、Google App Engine、または独自のアプリサーバーです。
  2. メッセージ リクエストを受け入れる機能などが搭載された FCM バックエンドは、トピックを介してメッセージのファンアウトを実行し、メッセージ メタデータ(メッセージ ID など)を生成します。
  3. メッセージをターゲット デバイスにルーティングするプラットフォーム レベルのトランスポート レイヤがメッセージ配信を処理し、必要に応じてプラットフォーム固有の構成を適用します。このトランスポート レイヤには以下が含まれます。
  • Google Play 開発者サービスを搭載した Android デバイス向けの Android トランスポート レイヤ(ATL)
  • iOS デバイス向けの Apple Push Notification Service(APN)
  • ウェブアプリのウェブ push プロトコル
  1. ユーザーのデバイス上の FCM SDK では、アプリのフォアグラウンドまたはバックグラウンドの状態と、関連するアプリケーション ロジックに従って通知が表示されるか、メッセージが処理されます。

作成するアプリの概要

この Codelab では、FCM を使用してサンプルの iOS アプリにプッシュ通知を追加します。

学習内容

  • プッシュ メッセージのユーザー登録と登録解除の方法
  • 受信したプッシュ メッセージの処理方法
  • 通知を表示する方法
  • 通知のクリックに応答する方法

必要なもの

  • Xcode 11.0 以降
  • CocoaPods 1.9.0 以降
  • Apple デベロッパー アカウント
  • アプリを実行するための物理 iOS デバイス
  • Swift の基本知識

2. 設定方法

サンプルコードをダウンロードする

この Codelab では独自のテストアプリを作成しますが、既存のサンプルアプリを確認して実行する場合は、クイックスタートのサンプルコードをダウンロードできます。

サンプルを取得するには、次の 2 つの方法があります。

  • git リポジトリのクローンを作成します。
$ git clone https://github.com/firebase/quickstart-ios.git
  • ZIP ファイルをダウンロードします。

ソースを ZIP ファイルとしてダウンロードした場合、解凍するとルートフォルダ quickstart-ios が作成されます。

新しいアプリを作成する

次の手順で独自のテストアプリを作成します(以下の手順は XCode 12.3 のものです)。

  1. Xcode を開き、[Create a new Xcode project] を選択します。
  2. [アプリ] を選択し、[次へ] をクリックします。

d6a3fc16ba7d4f72.png

  1. [Product Name](商品名)を入力します(例: MessagingExample)
  2. [Team] を選択します(チームを作成していない場合は、Apple Developer Account で設定します)。
  3. [Organization Identifier](組織 ID)を入力します(例: com.your-name
  4. バンドル ID(例: com.your-name.MessagingExample。すべての iOS アプリで一意である必要があります)。
  5. [Interface] プルダウンで [Storyboard] を選択します。
  6. [Life Cycle] プルダウンで [UIKit App Delegate] を選択します。
  7. [言語] で [Swift] を選択します。
  8. [次へ] をクリックします。

a07d72459f65dcc1.png

APN キーを作成してアプリを Firebase プロジェクトに登録する際に、バンドル ID が必要になります。

3. APNs の構成

認証キーを作成する

このセクションでは、プッシュ通知に使用できるアプリ ID の認証キーを生成する方法について説明します。既存のキーがある場合は、新しいキーを生成する代わりにそのキーを使用できます。

認証キーを作成するには:

  1. デベロッパー アカウントで [Certificates, Identifiers & Profiles] に移動し、[Keys] に移動します。

708ac6e36366b11f.png

  1. 右上隅にある [追加] ボタン(+)をクリックします。

e71849c7e6e4e714.png

  1. APNs Auth Key の説明を入力します
  2. [Key Services] で [APN] チェックボックスをオンにし、[Continue] をクリックします。

65c9930dc2d8bf1c.png

  1. [登録]、[ダウンロード] の順にクリックします。キーを安全な場所に保存します。このダウンロードは 1 回限りであり、後でキーを取得することはできません。

bda45effb420b7c2.png

アプリ ID を作成する

アプリ ID はアプリを一意に特定する識別子です。慣例的に、アプリ ID はドメインを反転させて表記されます。

  1. Apple Developer Member Center に移動してログインします。
  2. [Certificates, Identifiers and Profiles] に移動します。
  3. [Identifiers] に移動します。
  4. [+] ボタンをクリックして新しいアプリ ID を作成します。2a325a323b652124.png
  5. [アプリ ID] ラジオボタンを選択し、[続行] をクリックします。

fb24e3374de047a3.png

  1. [アプリ] を選択し、[続行] をクリックします。

cca5eb32736f947.png

  1. 新しいアプリ ID を作成するには:
  2. アプリ ID の [Name] に名前を入力します。
  3. チーム ID を入力します。[Membership] タブの [Team ID] と同じ値を入力してください。
  4. [App ID Suffix] セクションで [Explicit App ID] を選択してから、[Bundle ID] に独自のバンドル ID を入力します。7363c4d1962b486d.png
  5. [App Services] セクションで [Push Notifications] がオンになっていることを確認します。8e158017bc31fd46.png
  6. [続行] をクリックして、入力内容に間違いがないことを確認します。
  7. [Identifier] の値は、チーム ID の値とバンドル ID の値を結合したものに一致している必要があります。
  8. [Push Notifications] は [Configurable] になっている必要があります。
  9. [Register] をクリックしてアプリ ID を作成します。

プロファイルを作成する

開発中にアプリをテストする場合、App Store にまだ公開されていないアプリをデバイスで実行する権限を与えるため、開発用のプロファイルが必要になります。

  1. Apple Developer Member Center に移動してログインします。
  2. [Certificates, Identifiers and Profiles] に移動します。
  3. 左上のプルダウン メニューで、[iOS, tvOS, watchOS] が選択されていない場合はそれを選択し、次に [Profiles] に移動します。
  4. [+] ボタンをクリックして、新しいプロファイルを作成します。100604ffceac6a1d.png
  5. プロビジョニング プロファイルの種類として [iOS App Development] を選択し、[Continue] をクリックします。

7d4d20883a4c4142.png

  1. プルダウン メニューで、使用するアプリ ID を選択し、[続行] をクリックします。
  2. 前の手順で選択したアプリ ID の iOS 開発用証明書を選択し、[Continue] をクリックします。
  3. プロビジョニング プロファイルに含める iOS デバイスを選択し、[Continue] をクリックします。テストに使用するデバイスをすべて選択するようにしてください。
  4. このプロビジョニング プロファイルの名前(例: MessagingExampleProfileMessagingExampleProfile)を入力して [Generate] をクリックします。

7346087f5a0179f2.png

  1. [Download] をクリックして、プロビジョニング プロファイルを Mac に保存します。

548c8c27f3ce5bca.png

  1. プロビジョニング プロファイルのファイルをダブルクリックしてインストールします。

4. iOS プロジェクトへの Firebase の追加

Firebase プロジェクトを作成する

iOS アプリに Firebase を追加する前に、iOS アプリに接続するための Firebase プロジェクトを作成します。Firebase プロジェクトの詳細については、Firebase プロジェクトについて理解するをご覧ください。

  1. Firebase コンソールで [プロジェクトを追加] をクリックし、[プロジェクト名] を選択するか、新しいプロジェクト名を入力します。caf43df5174a530e.png

既存の Google Cloud Platform(GCP)プロジェクトがある場合は、プルダウン メニューからプロジェクトを選択して、そのプロジェクトに Firebase リソースを追加できます。

  1. (省略可)新しいプロジェクトを作成する場合は、プロジェクト ID を編集できます。

Firebase プロジェクトには一意の ID が自動的に割り当てられます。Firebase がプロジェクト ID を使用する仕組みについては、Firebase プロジェクトについて理解するをご覧ください。

  1. [続行] をクリックします。
  2. プロジェクトの Google アナリティクスを設定します。これにより、次の Firebase プロダクトを使用して最適なエクスペリエンスを実現できます。
  • Firebase Crashlytics
  • Firebase Predictions
  • Firebase Cloud Messaging
  • Firebase In-App Messaging
  • Firebase Remote Config
  • Firebase A/B Testing

アカウントの選択を求められたら、既存の Google アナリティクス アカウントを使用するか、新しいアカウントを作成します。新しいアカウントを作成する場合は、アナリティクス レポートのロケーションを選択し、プロジェクトのデータ共有設定と Google アナリティクスの規約に同意します。

ffbcd801d08078b2.png

473c89d0a404f066.png

  1. [プロジェクトを作成](既存の GCP プロジェクトを使用する場合は [Firebase を追加])をクリックします。

Firebase プロジェクトのリソースが自動的にプロビジョニングされます。処理が完了すると、Firebase コンソールに Firebase プロジェクトの概要ページが表示されます。

アプリを Firebase に登録する

Firebase プロジェクトを作成したら、プロジェクトに iOS アプリを追加できます。

Firebase プロジェクトにアプリを追加するベスト プラクティス、考慮事項(複数のビルド バリアントの扱い方など)の詳細については、Firebase プロジェクトについて理解するをご覧ください。

  1. Firebase コンソールに移動します。
  2. プロジェクトの概要ページの中央にある iOS アイコンをクリックして、設定ワークフローを起動します。

すでに Firebase プロジェクトにアプリを追加している場合は、[アプリを追加] をクリックするとプラットフォームのオプションが表示されます。

549e710c09b601ea.png

  1. アプリのバンドル ID を [iOS バンドル ID] フィールドに入力します。
  2. (省略可)その他のアプリ情報(アプリのニックネームApp Store ID)を入力します。
  3. [アプリの登録] をクリックします。

7a2bd11d13365c.png

Firebase 構成ファイルを追加する

  1. [GoogleService-Info.plist をダウンロード] をクリックして、Firebase iOS 構成ファイル(GoogleService-Info.plist)を取得します。625594126a8943bf.png
  2. 構成ファイルを Xcode プロジェクトのルートに移動します。メッセージが表示されたら、構成ファイルをすべてのターゲットに追加するオプションを選択します。

aa100af06c7a74e5.png

プロジェクトに複数のバンドル ID がある場合は、Firebase コンソールで各バンドル ID を登録済みアプリに関連付けて、各アプリで独自の GoogleService-Info.plist ファイルを設定できるようにする必要があります。

Xcode を閉じます。

アプリに Firebase SDK を追加する

Firebase ライブラリのインストールには CocoaPods を使用することをおすすめします。ただし、CocoaPods を使用せずに、SDK フレームワークを直接統合するか、Swift Package Manager ベータ版を使用する方法もあります。

  1. Podfile がない場合は作成します。クイックスタート サンプルを使用している場合、Xcode プロジェクトと(ポッドが含まれる)Podfile はすでに存在しています。
$ cd MessagingExample
$ pod init
  1. アプリで使用したい Firebase Pod を Podfile に追加します。

サポートされている Firebase プロダクトを iOS アプリに追加できます。

クイック スタート サンプルでは、Google アナリティクスと Firebase Cloud Messaging の SDK が追加されています。

# Add the Firebase pod for Google Analytics
pod 'Firebase/Analytics'

# Add the pod for Firebase Cloud Messaging
pod 'Firebase/Messaging'
  1. Pod をインストールし、.xcworkspace ファイルを開いて Xcode でプロジェクトを確認します。
$ pod install
  1. MessagingExample.xcworkspace を開き、Firebase コンソールで [次へ] をクリックします。1c5adae5b6e81655.png

アプリで Firebase を初期化する

Firebase 初期化コードをアプリケーションに追加する必要があります。

Firebase モジュールをインポートして、共有インスタンスを構成します(クイックスタート サンプルでは、Firebase モジュールはすでにインポートされています)。

  1. Firebase モジュールを UIApplicationDelegate にインポートします。

AppDelegate.swift

import UIKit
import Firebase // Add this line
  1. FirebaseApp 共有インスタンスを構成します。通常はアプリの application:didFinishLaunchingWithOptions: メソッドで行います。

AppDelegate.swift

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
  FirebaseApp.configure() // Add this line
  return true
}
  1. Firebase コンソールで [次へ] をクリックします。df93274c5922fd55.png
  2. Firebase SDK がアプリに追加されます。[コンソールに進む] をクリックします。21b24098a470aa40.png

5. FCM クライアントの構成

APNs 認証キーをアップロードする

APNs 認証キーを Firebase にアップロードします。

  1. Firebase コンソールのプロジェクト内で歯車アイコンを選択し、[プロジェクトの設定]、[Cloud Messaging] タブの順に選択します。

e1fcc1f1ace520e9.png

  1. [Apple アプリの構成] の下の [APNs 認証キー] で [アップロード] ボタンをクリックして、開発用認証キー、本番環境用認証キー、またはその両方をアップロードします。少なくとも 1 つは入力してください。

87ee87266eab43c4.png

  1. キーを保存した場所に移動し、キーを選択して [開く] をクリックします。キーのキー ID(Apple Developer Member Center の [Certificates, Identifiers & Profiles] で確認できます)を追加し、[アップロード] をクリックします。1491c513285d06e0.png

リモート通知に登録する

起動時またはアプリケーション フローの必要な時点で、リモート通知にアプリを登録します。

クイックスタート サンプルでは、registerForRemoteNotifications はすでに追加されています。

AppDelegate.swift

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
  FirebaseApp.configure()
  // [START register for remote notifications]
  if #available(iOS 10.0, *) {
    // For iOS 10 display notification (sent via APNS)
    UNUserNotificationCenter.current().delegate = self
        
    let authOptions: UNAuthorizationOptions = [.alert, .badge, .sound]
    UNUserNotificationCenter.current().requestAuthorization(options: authOptions, completionHandler: {_, _ in })
  } else {
    let settings: UIUserNotificationSettings = UIUserNotificationSettings(types: [.alert, .badge, .sound], categories: nil)
    application.registerUserNotificationSettings(settings)
  }

  application.registerForRemoteNotifications()
  // [END register for remote notifications]
  return true
}

AppDelegate.swift の末尾に次の行を追加して、UNUserNotificationCenter の delegate プロパティを割り当てます。

AppDelegate.swift

@available(iOS 10, *)
extension AppDelegate : UNUserNotificationCenterDelegate {

  // Receive displayed notifications for iOS 10 devices.
  func userNotificationCenter(_ center: UNUserNotificationCenter,
                              willPresent notification: UNNotification,
    withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) -> Void) {
    let userInfo = notification.request.content.userInfo

    // Print full message.
    print(userInfo)

    // Change this to your preferred presentation option
    completionHandler([[.alert, .sound]])
  }

  func userNotificationCenter(_ center: UNUserNotificationCenter,
                              didReceive response: UNNotificationResponse,
                              withCompletionHandler completionHandler: @escaping () -> Void) {
    let userInfo = response.notification.request.content.userInfo

    // Print full message.
    print(userInfo)

    completionHandler()
  }
}

メッセージング デリゲートを設定する

登録トークンを受信するには、メッセージング デリゲート プロトコルを実装し、[FIRApp configure] の呼び出し後に FIRMessagingdelegate プロパティを設定します。たとえば、アプリケーション デリゲートがメッセージング デリゲート プロトコルに準拠している場合は、application:didFinishLaunchingWithOptions: のデリゲートをそれ自体に設定できます(クイックスタート サンプルでは、すでに設定されています)。

AppDelegate.swift

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
  FirebaseApp.configure()
  Messaging.messaging().delegate = self // Add this line
  // [START register for remote notifications]
  if #available(iOS 10.0, *) {
    // For iOS 10 display notification (sent via APNS)
    UNUserNotificationCenter.current().delegate = self
        
    let authOptions: UNAuthorizationOptions = [.alert, .badge, .sound]
    UNUserNotificationCenter.current().requestAuthorization(options: authOptions, completionHandler: {_, _ in })
  } else {
    let settings: UIUserNotificationSettings = UIUserNotificationSettings(types: [.alert, .badge, .sound], categories: nil)
    application.registerUserNotificationSettings(settings)
  }

  application.registerForRemoteNotifications()
  // [END register for remote notifications]
  return true
}

AppDelegate.swift の末尾に次の行を追加して、FIRMessaging の delegate プロパティを割り当てます。

AppDelegate.swift

extension AppDelegate : MessagingDelegate {
  func messaging(_ messaging: Messaging, didReceiveRegistrationToken fcmToken: String?) {
    print("Firebase registration token: \(String(describing: fcmToken))")
    
    let dataDict:[String: String] = ["token": fcmToken ?? ""]
    NotificationCenter.default.post(name: Notification.Name("FCMToken"), object: nil, userInfo: dataDict)
  }
}

機能を追加する

アプリ ID の作成セクションでプッシュ通知機能を追加しましたが、次の手順で XCode にもこの機能を追加する必要があります(以下の手順は XCode 12.3 のものです)。

  1. ナビゲータ領域でプロジェクト名をクリックします。
  2. [署名と機能] をクリックします。
  3. [+ Capability] をクリックします。

7207dce45aaa0fa.png

  1. [バックグラウンド モード] をダブルクリックします。
  2. もう一度 [+ Capability] をクリックします。
  3. [プッシュ通知] をダブルクリックします。
  4. [Background Modes] セクションで [Remote notifications] をオンにします。

11a0a4f8a409fe44.png

6. 通知メッセージを送信する

テスト メッセージを送信する手順は次のとおりです。

  1. 対象デバイスでアプリをインストールして実行します。リモート通知受信権限に対するリクエストを承認する必要があります。
  2. XCode ログで登録トークンを取得します。

b9383e848d00ab04.png

  1. アプリがデバイスのバックグラウンドで動作していることを確認します。
  2. Notifications Composer を開き、[新しい通知] を選択します。
  3. メッセージ テキストを入力します。8f57ae055ce64321.png
  4. [テスト メッセージを送信] を選択します。
  5. [FCM 登録トークンを追加] というラベルの付いたフィールドで、手順 2 で取得した登録トークンを入力します。
  6. [テスト] をクリックします。

[テスト] をクリックすると、アプリをバックグラウンドで実行しているターゲット クライアント デバイスの通知センターに通知が届きます。

アプリへのメッセージ配信については、FCM レポート ダッシュボードをご覧ください。このダッシュボードには、iOS デバイスと Android デバイスで送信および開封されたメッセージの数が記録されています。

b790de9a3e0dc1ef.png

7. 完了

テスト メッセージを送信できました。

FCM には、トピックの登録など、他にも多くの関数と構成があります。

興味のある方は、公式のデベロッパー向けドキュメントをご覧ください。

次のステップ

以下の Codelab をご覧ください。

参考資料