こんにちは。サイオステクノロジーの木村です。
今回は、Flutter アプリに Firebaseを導入し、Firebase Cloud Messaging(FCM)を利用してプッシュ通知を導入する方法をご紹介します。
Android と iOS ではPush通知が飛んでくる経路が少し違うため設定内容なども違いますが、今回は iOS に特化した内容で記載します。
目次
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」 をクリックします。
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 で行うと1つのコマンドでアプリの追加と 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 {
・・・(以降省略)・・・
実行(iPhone 実機デバッグ)
通知はシミュレータではテストできません。そのため iPhoneの実機でデバッグを行います。
iPhone の設定とペアリング
1. iPhone にて、 設定 > プライバシーとセキュリティ > デベロッパーモード を ON に設定します。(iPhone のバージョンによって、多少設定方法が異なります。)
2. USBケーブルを使ってiPhoneとPCを繋ぎます。iPhone 側にこのコンピュータを信頼しますか?と表示された場合は「信頼」をクリックしてください。
3. XCodeを開き、Window > Devices and Simulators をクリックします。
4. XCodeが認識しているデバイスとシミュレーターを確認できるウィンドウが表示されます。まiPhoneに再びこのコンピュータを信頼しますか?と表示された場合は「信頼」をクリックしてください。
以上で、デバイスのペアリングができます。Xcodeを閉じます。
デバッグ実行
1. VSCodeにて、画面右下のデバイスが表示される場所をクリックします。
2. 先ほどペアリングした実機が選択肢に表示されるのでクリックします。
3. サイドバーの「実行とデバッグ」のアイコンをクリックし、「実行とデバッグ」ボタンをクリックします。
4. iPhone に以下が表示されますので、両方「許可」をクリックします。
5. アプリが起動されます。
6. VSCode のデバッグコンソールに FCM トークンの値が出力されますのでメモしておきます。
通知の送信
Firebase コンソールより、テストの通知を送信します。
1. Firebase コンソールにてプロジェクトを表示し、サイドメニューの「実行」をクリックして展開します。「Messsaging」をクリックします。
2. 「最初のキャンペーンを作成」をクリックします。
3. 「Firebase Notification メッセージ」を選択し「作成」をクリックします。
4. 通知タイトルと通知テキストに任意の値を入力し、「テストメッセージを送信」をクリックします。
5. デバッグ実行の手順にてメモした FCM トークンの値を入力して「+」をクリックします。「テスト」をクリックします。
6. iPhone 実機に通知が送信されます。