FlutterにFirebase Cloud Messagingを統合する方法：プッシュ通知実装のステップバイステップガイド

モバイルアプリ市場が競争激化する今日、ユーザーとの効果的なエンゲージメントやタイムリーな情報提供は、アプリの成功を左右する重要な要素となっています。

Firebase Cloud Messaging（FCM）は、Googleが提供するFirebaseプラットフォームに組み込まれた強力なプッシュ通知サービスです。アプリのユーザーとシームレスにつながり、継続的なエンゲージメントを促進するための手軽な手段を提供します。

このチュートリアルでは、FlutterアプリへのFCMの統合方法を詳しく解説します。FCMのメリットや、ユーザーエンゲージメント向上とアプリパフォーマンス改善につながる実際の活用例も紹介していきます。

FCMは、サーバーとデバイス間の信頼性が高くバッテリー消費の少ない接続を提供し、iOS・Android・Web向けにメッセージや通知を無料で配信できます。

本チュートリアルでは、バックエンドサービスとしてFirebaseを使用し、FlutterでFCMをセットアップして利用するまでの一連の流れを学びます。主にAndroidでの実装を中心に説明しますが、iOSでも基本的な流れはほぼ同じです（設定内容に多少の違いがあります）。

この記事で学べること

1. Firebaseコンソールでアプリを作成する方法
2. FlutterプロジェクトにFirebaseをセットアップする方法
3. FCMトークンを使ってプッシュ通知を実装する方法

このチュートリアルを通じて、Firebaseを使ってFlutterで動作するアプリへ簡単な通知を送信できるようになります。それでは始めましょう。

ステップ1：Firebaseでアプリを作成する

まず、Firebaseコンソールで新しいプロジェクトを作成します。プロジェクトのセットアップから、Firebase Cloud Messagingの設定、Flutterアプリに必要な認証情報や構成ファイルの取得まで、必要な手順を順番に見ていきましょう。

アプリを作成する前に、まだアカウントをお持ちでない場合はFirebaseコンソールへのサインアップが必要です。サインアップが完了したら、プロジェクトを作成しましょう。

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

プロジェクトの作成には少し時間がかかります。

Firebaseでプロジェクトを作成中

作成が完了すると、プロジェクトのダッシュボードに自動的に移動します。

Firebaseコンソールのプロジェクト概要画面

Firebaseコンソールでプロジェクトを作成できたら、次はいよいよFlutterアプリ側の準備です。

ステップ2：FlutterにFirebaseをセットアップする

ここでは、Visual Studio Codeで作成したシンプルなFlutterプロジェクトを使用します。Flutterプロジェクトの作成方法に不慣れな方は、まず入門チュートリアルをご確認ください（すでに経験がある方はこのステップをスキップしても構いません）。

Androidデバイスで動作するシンプルなFlutterアプリ

それでは、FlutterプロジェクトにFirebaseを統合していきます。そのために、Firebase CLIというコマンドラインツールが必要です。ここではすでにインストール済みとしますが、未インストールの場合は公式ドキュメントを参照してインストールしてください。

まず、Firebase CLIを使ってFirebaseにログインします。

firebase login

Firebase CLIでFirebaseにログイン

このコマンドを実行するとブラウザが開き、Firebaseへのログインを求められます。認証が正常に完了すると、元の画面に戻ります。

ログイン後、次にFlutterFire CLIをインストールします。FlutterFire CLIを使うことで、FlutterアプリをFirebaseに接続するための設定を簡単に行えます。以下のコマンドでFlutterFire CLIを有効化しましょう。

dart pub global activate flutterfire_cli

FlutterFire CLIは、FirebaseサービスをFlutterアプリケーションに統合作業を簡素化するコマンドラインツールです。FlutterプロジェクトへのFirebaseプラグインの追加、設定、管理を便利に行えます。

FlutterFire CLIのインストール

次のステップでは、firebase_coreライブラリをFlutterプロジェクトに追加します。

以下のコマンドを実行すると、firebase_coreパッケージがプロジェクトのpubspec.yamlファイルに依存関係として自動的に追加され、pub.devから最新バージョンが取得されます。このコマンド実行後、Dartファイル内でfirebase_coreパッケージをインポートし、FlutterアプリでFirebaseサービスを利用できるようになります。

flutter pub add firebase_core

Firebase Coreパッケージのインストール

続いて、flutterfire configureコマンドを使って、FlutterFire CLI経由でFlutterプロジェクトのFirebaseサービスを設定します。このコマンドにより、Firebase Authentication、Firestore、Cloud Messagingなどの各種Firebaseサービスを効率的にセットアップできます。

flutterfire configure

最初に、使用するFirebaseプロジェクトを選択します。

FlutterアプリとFirebaseアプリを接続

次に、対象プラットフォームを選択します。ここではAndroid向けに使用するため、「android」を選択します。

プラットフォームの選択

設定が正常に完了すると、Firebase App IDが表示されます。

最後に、main.dartファイルにいくつかのコード変更を加えます。

まず、以下のパッケージをインポートします。

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

次に、main.dartファイルのmain関数内に、以下の設定を追加してFirebaseを初期化します。

await Firebase.initializeApp(
 options: DefaultFirebaseOptions.currentPlatform,
);

これで、FlutterアプリにおけるFirebaseの設定が完了しました！お疲れさまでした。Firebaseサービスの適切な設定は、高機能でリッチなアプリケーションを構築するうえで非常に重要なステップです。

ステップ3：FCMトークンを使ってプッシュ通知を実装する

ここからは、プッシュ通知を受け取るためのデバイス登録処理と、各デバイスに割り当てられる一意のFCMトークンの取得方法を実装していきます。このステップは、特定のデバイスにターゲットを絞った通知を送信するために非常に重要です。

さらに、Firebase Cloud Messagingを使ってデバイスへプッシュ通知を送信する実装方法についても掘り下げます。Firebaseコンソールから通知メッセージを構築・送信する方法や、Flutterアプリ内でこれらのメッセージをハンドリングする方法を確認していきましょう。

まず、以下のコマンドでfirebase_messagingパッケージを追加します。

flutter pub add firebase_messaging

firebase_messagingパッケージのインストール

次に、setAutoInitEnabled関数を呼び出して、Flutterアプリ内でのFirebase Cloud Messaging（FCM）の自動初期化を有効にします。これにより、アプリ起動時にFCMが自動的に初期化され、デバイストークンが取得されるようになります。

main関数に以下の関数呼び出しを追加してください。

import 'package:firebase_messaging/firebase_messaging.dart';
...
...
await FirebaseMessaging.instance.setAutoInitEnabled(true);

それでは、Flutterアプリを実行して通知が届くかどうか確認してみましょう。

Firebaseのメッセージングコンソールに移動します。初めてメッセージを作成する場合は「最初のキャンペーンを作成」を選択します。「Firebase Notification messages」を選択して「作成」をクリックしてください。

サンプルテストメッセージのテンプレート

ここで、通知のタイトル、本文、メッセージ名を入力します。

テスト用にFCMトークンを手動で取得することもできます。アプリインスタンスの現在の登録トークンを取得するには、main()関数内でgetToken()を呼び出します。このメソッドは、通知権限がまだ許可されていない場合にユーザーへ権限を要求し、許可されていればトークンを返します。エラーが発生した場合は拒否されます。

final fcmToken = await FirebaseMessaging.instance.getToken();
log("FCMToken $fcmToken");

コンソールに出力されたFCMトークンをコピーし、「FCM登録トークンを追加」の入力欄に貼り付けます。

FCMトークンを使ってテストメッセージを送信

「テスト」ボタンをクリックすると、対象のクライアントデバイス（アプリがバックグラウンド状態）に通知が届きます。

Androidデバイスで受信したプッシュ通知

やりました！Androidデバイスで通知を受信できました。通知をタップすると、デフォルトでアプリが起動します。

通知をタップした際のデフォルトの動作は、AndroidでもiOSでもアプリを開くことです。アプリが終了状態の場合は新たに起動され、バックグラウンドにある場合はフォアグラウンドに切り替わります。

参考として、Firebase Messagingを初期化するための基本設定をまとめたコード全体を以下に示します。

main.dart

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'firebase_options.dart';
void main() async {
 runApp(const MyApp());
 await Firebase.initializeApp(
 options: DefaultFirebaseOptions.currentPlatform,
 );
 final fcmToken = await FirebaseMessaging.instance.getToken();
 await FirebaseMessaging.instance.setAutoInitEnabled(true);
 log("FCMToken $fcmToken");
}

まとめ

このチュートリアルでは、Firebase Cloud Messaging（FCM）を使用してFlutterでプッシュ通知を実装するための基本的な手順を解説しました。

紹介した手順に従えば、FirebaseのセットアップからFlutterプロジェクトへの統合、そしてプッシュ通知機能の実装までを行えるようになります。

シームレスに通知を送受信できるようになると、ユーザー体験の向上や効果的なユーザーエンゲージメントが実現できます。今後のチュートリアルでは、より高度なトピックや機能についても取り上げていく予定ですので、お楽しみに。

Flutterについてさらに学びたい方は、筆者のメールニュースレター（https://5minslearn.gogosoon.com/）の購読やSNSフォローもぜひご検討ください。