Flutterアプリでプッシュ通知〜Firebase Cloud Messagingで通知を受信する方法（iOS）〜

こんにちは。サイオステクノロジーの木村です。

今回は、Flutter アプリに Firebaseを導入し、Firebase Cloud Messaging（FCM）を利用してプッシュ通知を導入する方法をご紹介します。
Android と iOS ではPush通知が飛んでくる経路が少し違うため設定内容なども違いますが、今回は iOS に特化した内容で記載します。

1 Flutter プロジェクトの作成
2 Apple Developer での設定
3 Xcode での設定
- 3.1 プロビジョニングプロファイルをアプリに設定
- 3.2 プッシュ通知用の設定
4 APNs認証キー or APNs証明書の作成
5 Firebase プロジェクトの作成
6 Firebase プロジェクトにアプリを追加
7 APNs 認証キー or APNs 証明書のアップロード
8 Flutterの実装
9 実行（iPhone 実機デバッグ）

Flutter プロジェクトの作成

まずは Flutter プロジェクトを作成します。
以下の記事の手順を参照し作成してください。
【Dart】 Flutter × VSCode で、環境構築から HelloWorld まで（Mac）

Apple Developer での設定

iOSのプッシュ通知を行うには、Apple Developer にてさまざまな設定を行う必要があります。
こちらの手順を行うには、Apple Developer Program のアカウントが必要です。

証明書の作成・登録

1. Xcode を起動し、上部のメニューより「Settings」をクリックします。

2. Accounts > Manage Certificates をクリックして開いたウィンドウにて、+ > Apple Development をクリックすると証明書が作成されます。「Done」をクリックします。（App Store や TestFlight で配信する場合は Apple Distribution となりますが、今回は開発用のため Development とします。）

作成された証明書は、Xcode でログインしている Apple Developer のサイトの Certificates に自動的に登録されます。

App ID の登録

Apple Developer のサイトにて、App ID を登録します。

1. Apple Developer にサインインします。

2. プログラムのリソース > 証明書、ID、プロファイル配下の「証明書」をクリックします。

3. サイドメニューの「Identifiers」をクリックして開いた画面にて、「Identifiers」の横の「+」をクリックします。

4. App IDs を選択し「Continue」をクリックします。

5. App を選択し「Continue」をクリックします。

6. 「Description」に任意の名称を入力します。「Bundle ID」はリバースドメインなどを利用したユニークな値を指定します。（後の手順で Xcode 上でもアプリにこの値を指定します。）

7. そのまま下にスクロールし「Push Notifications」にチェックを入れ、「Continue」をクリックします。

8. 登録内容を確認し「Register」をクリックします。

以上で App ID の登録は完了です。

プロビジョニングプロファイルの登録

Apple Developer にて、プロビジョニングプロファイルの登録をします。

1. サイドメニューの「Profiles」をクリックして開いた画面にて、「Profiles」の横の「+」をクリックします。

2. 「iOS App Development」を選択して「Continue」をクリックします。

3. 「App ID」に、先ほどの手順で作成した APP ID を選択して「Continue」をクリックします。

4. 「Select certificates」に、先ほど作成した証明書を選択して「Continue」をクリックします。

5. 「Select devices」でデバッグに利用したいデバイスを選択して「Continue」をクリックします。

※ プッシュ通知はシミュレータで動作確認することができないため、実機にて動作確認します。ここで選択したデバイスがデバックで利用できるデバイスとなります。またデバイスを登録しておらず、ここに表示されない場合は、Devices よりデバイスの登録を行なってください。

6. 「Provisioning Profile Name」に任意の名称を入力し「Generate」をクリックします。

7. 以上でプロビジョニングプロファイルの登録は完了です。（プロビジョニングプロファイルは後ほど Xcode から直接参照するので、ここでダウンロードする必要はありません。）

Xcode での設定

プロビジョニングプロファイルをアプリに設定

Xcodeにて、プロビジョニングプロファイルをアプリに設定します。

1. VScodeにて表示した Flutter プロジェクト配下の「ios」を右クリックして「Open in Xcode」をクリックします。

2. Xcode が起動します。Runner > TARGETS > Runner の「General」タブをクリックします。

3. 「Minimum Deployments」に 12. 0 が表示されている場合、13.0 以上の値を選択します。

4. Signing & Capabilities タブをクリックします。「Automatically manage signing」のチェックを外し、Bundle Identifier で先ほど App ID 登録時に指定した Bundle ID を指定します。「Provisioning Profile」にて「Download Profile」を選択します。

5. 先ほど Apple Developer にて登録したプロビジョニングプロファイルが表示されるので「Select Profile」をクリックします。

プッシュ通知用の設定

Xcodeにて、アプリにプッシュ通知用の設定を行います。

1. Signing & Capabilities タブにて「Capability」をクリックします。

2. “push”と入力して検索し「Push Notifications」をクリックして追加します。

3. 次に”back”と入力して検索し「Background Modes」をクリックして追加します。

4. 「Background Modes」の設定にて「Background fetch」と「Remote Notifications」にチェックを入れます。

以上でXcodeでの設定は完了です。

APNs認証キー or APNs証明書の作成

APNsとは

APNs（Apple Push Notification Service)とは、iOSやtvOS、MacOSアプリに対して開発者側から通知を送るためのAppleが提供するサービスです。Appleデバイスを対象に通知を送信する際は、Firebase Cloud Messaging などの通知を行えるサービスから、この APNs を介して通知が送信されます。
APNs に対する認証手段は2つ（APNs認証キー or APNs証明書）あり、そのどちらかを作成して使用します。

APNs 認証キー

アプリごとに用意する必要がないベンダー共有の認証キーです。開発環境とプロダクション環境の両方で使うことができます。有効期限はありませんが、無効化させることはできます。

APNs 証明書

証明書はアプリごとに作成する必要があり、証明書を使用して認証します。開発環境とプロダクション環境のそれぞれの証明書を作成する必要があります。証明書は有効期限があり、定期的に更新が必要です。

APNs 認証キーの作成

APNs 認証キーの作成手順を記載します。（APNs 証明書を利用する場合はこちらの手順は必要ありません。）

1. Apple Developer にサインインします。

2. プログラムのリソース > 証明書、ID、プロファイル配下の「証明書」をクリックします。

3. サイドメニューの「Keys」をクリックして開いた画面にて、「Keys」の横の「+」をクリックします。

4. 「Key Name」に任意の名称を入力し、「Apple Push Notifications service (APNs)」にチェックを入れて「Continue」をクリックします。（作成できるAPNsキーの数には上限（2つ）があり、上限を超えると作成できません。画像は条件を超えているため作成できない旨のメッセージが表示されています。）

5. 以降、画面表示に従ってキーを作成します。

APNs 証明書の作成

APNs 証明書の作成手順を記載します。（APNs キーを利用する場合はこちらの手順は必要ありません。）

CSR（Certificate Signing Request）の発行

CSRの発行は、Macのキーチェーンアクセスアプリから行います。

1. キーチェーンアクセスを起動し、証明書アシスタント > 認証局に証明書を要求をクリックします。

2. メールアドレスと通称部分に任意の内容を入力します。要求の処理にて、ディスクに保存と鍵ペア情報を指定にチェックを入れ「続ける」をクリックします。

3. CertificateSigningRequest.certSigningRequestの保存先の選択が求められるので、任意のディレクトリに保存します。

4. 「続ける」をクリックします。

5. 「完了」をクリックします。

証明書の作成

1. Apple Developer にサインインします。

2. プログラムのリソース > 証明書、ID、プロファイル配下の「証明書」をクリックします。

3. サイドメニューの「Certificates」をクリックして開いた画面にて、「Certificates」の横の「+」をクリックします。

4. Servicesの項目配下にある「Apple Push Notification service SSL (Sandbox)」にチェックを入れ「Continue」をクリックします。
（証明書には Sandbox 環境だけへの接続を認可するものと Sandbox と Production 環境どちらへの接続を認可するものがありますが、こちらの手順では、Sandbox環境だけのものを作成します。）

5.「App ID」に、前述した「App ID の登録」の手順で登録したものを選択し「Continue」をクリックします。

6. 「Choose File」をクリックして、先ほど発行したCSRファイルを選択し「Continue」をクリックします。

7. 証明書が作成されます。「Download」をクリックしてファイルをダウンロードします。

p12形式に変換

Firebase Cloud Messagingでは、cer形式の証明書のままではアップロードできませんので p12 形式に変換します。

1. 作成してダウンロードしたcerファイルをダブルクリックし、キーチェーンアクセスアプリに証明書を追加します。キーチェーンアクセスアプリにて、追加した証明を右クリックし、「”キー名”を書き出す」をクリックします。

2. 証明書の名称、保存先に任意の内容を入力します。フォーマットは「個人情報交換(.p12)」のままとし「OK」をクリックします。

3. パスワード・確認に任意のパスワードを入力し「OK」をクリックします。

以上で証明書の作成は完了です。

Firebase プロジェクトの作成

Firebase コンソールにて、Firebase プロジェクトを作成します。
以下の手順を行うには、Google アカウントが必要です。

1. Firebase のサイトにて「Go to console」をクリックし、Firebase コンソールにGoogle アカウントでサインインします。

2. 「Firebase プロジェクトを使ってみる」をクリックします。

3. 任意のプロジェクト名を入力し「続行」をクリックします。

4. 「Google アナリティクスを有効にする」は必要に応じて選択してください。

5.「プロジェクトを作成」をクリックすると、プロジェクトが作成されます。

Firebase プロジェクトにアプリを追加

Firebase プロジェクトへのアプリの追加は Firebase コンソールから行うこともできますが、Firebase CLI ・FlutterFire CLI で行うと１つのコマンドでアプリの追加と Flutterの設定が行えて便利です。以下では、Firebase CLI ・FlutterFire CLI を使用した手順を記載します。

Firebase CLI・FlutterFire CLI のインストール

1. Flutter プロジェクトをVSCodeで開きます。
（Flutter プロジェクトは、以下の記事で作成したものを使用します。
【Dart】 Flutter × VSCode で、環境構築から HelloWorld まで（Mac））

2. ターミナル > 新しいターミナルをクリックします。

3. Firebase CLIのインストールを行います。以下のコマンドを実行します。

sudo npm install -g firebase-tools

4. 以下のコマンドでバージョンが表示されたら、正常にインストールされている古語が確認できます。

firebase --version

5. 以下のコマンドを実行し、 Firebase CLI にログインしておきます。

firebase login

ブラウザが起動し、Firebaseアカウントへのサインインを求められますので、サインインします。
これで、Firebase プロジェクトの管理やデプロイをコマンドラインから行う準備が整います。

6. 続いて FlutterFire CLI のインストールを行います。以下のコマンドを実行します。

dart pub global activate flutterfire_cli

アプリの追加

Firebase プロジェクトへアプリの追加を行います。

1. ターミナルにて、Flutter プロジェクトのルートディレクトリで以下のコマンドを実行します。（以下のコマンドでは、iOS と Android のアプリの追加を行います。）


flutterfire configure --platforms=ios,android --project=[プロジェクトID] --android-package-name=[Android アプリのパッケージ名]  --ios-bundle-id=[Apple アプリのバンドルID]

プロジェクトID：「Firebase プロジェクトの作成」の手順で作成したプロジェクトのプロジェクトID（Firebase コンソールのプロジェクト設定より確認できます）
Apple アプリのバンドルID：「App ID の登録」の手順で作成したApp ID の「Bundle ID」

2. 上記コマンドを実行すると、Firebaseプロジェクト上にAndroidとiOSのアプリが作成されます。作成されたアプリは Firebase コンソールから確認することができます。

また、以下のファイルがFlutterプロジェクト内に作成されます。

google-services.json
GoogleService-Info.plist
firebase_app_id_file.json
firebase_options.dart

パッケージのインポート

Firebase Cloud Messagingを利用に必要なパッケージを追加します。

1. ターミナルにて、プロジェクトのルートディレクトリで次のコマンドを実行します。


flutter pub add firebase_core


flutter pub add firebase_messaging

2. プロジェクトのルートディレクトリ/ios 配下に「Podfile」が作成されるので開きます。
“# platform :ios, ‘12.0’”のコメントを外し、”12.0″のところを”13.0″以降の値に変更して保存します。

APNs 認証キー or APNs 証明書のアップロード

Firebase プロジェクトに、APNs 認証キーまたは、 APNs 証明書をアップロードします。

1. Firebase コンソールにサインインし、「自分のプロジェクト」より該当の Firebase プロジェクトをクリックします。

2. 「プロジェクトの設定」をクリックします。

3. 「Cloud Messaging」タブをクリックします。

4. Apple アプリの構成の「APNs 認証キー」または「APNs 証明書」どちらかの「アップロード」ボタンをクリックし、「APNs認証キー or APNs証明書の作成」の手順で作成したファイルをアップロードします。

以上でアップロードは完了です。

Flutterの実装

main.dart の「void main() 」のところの実装を以下のようにします。


import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter/material.dart';
import 'package:sample_push/firebase_options.dart';

Future<void> main() async {
  
  WidgetsFlutterBinding.ensureInitialized();
 
	await Firebase.initializeApp(
		options: DefaultFirebaseOptions.currentPlatform,
	);
 
  final messagingInstance = FirebaseMessaging.instance;

  // FCMトークンの取得
  final fcmToken = await messagingInstance.getToken();
  debugPrint('FCM TOKEN: $fcmToken');
    
  // iOSで通知許可を求める
  NotificationSettings settings = await messagingInstance.requestPermission(
    alert: true,           // 通知表示有無
    announcement: false,   // アナウンスメント通知 有効/無効
    badge: true,           // バッジ（未読件数）が更新されるか否か
    carPlay: false,        // CarPlay通知表示有無
    criticalAlert: false,  // 重要な通知（サイレントではない）有効/無効
    provisional: false,    // 仮の通知（ユーザーによる設定を尊重）有効/無効
    sound: true,           // 通知のサウンド有無
  );
  debugPrint('User granted permission: ${settings.authorizationStatus}'); // authorized: ユーザーが権限の付与を許可、denied: 拒否、notDetermined: 未設定、provisional: 一時的な許可
  
  //フォアグラウンドで通知が表示されるオプションの設定
  await FirebaseMessaging.instance.setForegroundNotificationPresentationOptions(
    alert: true,  // フォアグラウンドの通知表示有無
    badge: false, // バッジ（未読件数）の通知表示有無
    sound: true,  // 通知のサウンド有無
  );
 
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
・・・（以降省略）・・・