# Flutterでfirebase_messagingを使用したプッシュ通知の基本実装

## 目次

1. はじめに

2. 前提条件

3. Firebaseプロジェクトのセットアップ

   3.1 Firebase Consoleでのプロジェクト作成

   3.2 Firebase SDKの導入

4. プッシュ通知の設定

   4.1 Android向けの設定

   4.2 iOS向けの設定

5. Flutterアプリへのfirebase_messagingパッケージの組み込み

6. プッシュ通知の受信処理

   6.1 受信時の動作確認

   6.2 バックグラウンドおよびフォアグラウンド状態での通知処理

7. まとめ

## 1. はじめに

Flutterは、Googleが開発したオープンソースのUIツールキットであり、モバイルアプリケーションの開発をシンプルにします。その中で、プッシュ通知はユーザーエンゲージメントを高める重要な機能です。本記事では、Firebaseの`firebase_messaging`を使用してFlutterアプリにプッシュ通知を実装する方法を詳しく説明します。

## 2. 前提条件

- FlutterおよびDart SDKがインストールされている

- Flutterプロジェクトがすでに作成されている

- 基本的なFlutterの知識がある

## 3. Firebaseプロジェクトのセットアップ

### 3.1 Firebase Consoleでのプロジェクト作成

1. [Firebase Console](https://console.firebase.google.com/)にアクセスし、新しいプロジェクトを作成します。

2. 「プロジェクトを追加」ボタンを押し、プロジェクト名を入力して「続行」をクリックします。

3. 「Googleアナリティクスを有効にする」オプションの選択を求められる場合、必要に応じて設定します。

4. 「プロジェクトを作成」をクリックします。

### 3.2 Firebase SDKの導入

1. Flutterプロジェクトのルートディレクトリに移動し、`firebase_core`と`firebase_messaging`の依存関係を`pubspec.yaml`ファイルに追加します。

```yaml

dependencies:

  flutter:

    sdk: flutter

  firebase_core: latest

  firebase_messaging: latest

```

2. `flutter pub get`コマンドを実行してパッケージをインストールします。

## 4. プッシュ通知の設定

### 4.1 Android向けの設定

1. `android/app/build.gradle`ファイルを開き、`minSdkVersion`を`19`以上に設定します。

```gradle

android {

    defaultConfig {

        ...

        minSdkVersion 19

        ...

    }

}

```

2. FirebaseプロジェクトのFirebaseコンソールに戻り、「プロジェクトの概要」タブの「サンプルコードを設定」をクリックし、「Androidアプリを追加」を選択します。

3. アプリのパッケージ名を入力し、「アプリを登録」をクリックします。

4. `google-services.json`ファイルをダウンロードし、`android/app/`ディレクトリに配置します。

5. `android/build.gradle`ファイルにGoogleサービスプラグインを追加します。

```gradle

buildscript {

  dependencies {

    ...

    classpath 'com.google.gms:google-services:4.3.10'

  }

}

```

6. `android/app/build.gradle`に以下を追加します。

```gradle

apply plugin: 'com.google.gms.google-services'

```

### 4.2 iOS向けの設定

1. Firebaseコンソールで「iOSアプリを追加」を選択し、アプリのバンドルIDを入力します。

2. `Runner/` ディレクトリに`GoogleService-Info.plist`を追加します。`Runner.xcodeproj`のWorkspaceでターゲットを選択後、情報プロパティ修正。

3. `Podfile`を更新し、`use_frameworks!`を追加します。

4. Apple Developerアカウントにアクセスし、APNsの認証キーを作成し、Firebaseコンソールにアップロードします。

5. `info.plist`に次のキーを追加します。

```xml

<key>FirebaseAppDelegateProxyEnabled</key>

<false/>

```

## 5. Flutterアプリへのfirebase_messagingパッケージの組み込み

以下のコードを`main.dart`に追加して初期化します。

```dart

import 'package:flutter/material.dart';

import 'package:firebase_core/firebase_core.dart';

import 'package:firebase_messaging/firebase_messaging.dart';

Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {

  await Firebase.initializeApp();

  print('Handling a background message: ${message.messageId}');

}

void main() async {

  WidgetsFlutterBinding.ensureInitialized();

  await Firebase.initializeApp();

  FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

  runApp(MyApp());

}

class MyApp extends StatelessWidget {

  ...

}

```

## 6. プッシュ通知の受信処理

### 6.1 受信時の動作確認

FirebaseMessagingインスタンスを使用して、通知メッセージを受信する際の動作を登録します。

```dart

FirebaseMessaging messaging = FirebaseMessaging.instance;

// Foreground message handling

FirebaseMessaging.onMessage.listen((RemoteMessage message) {

  print('Message data: ${message.data}');

  if (message.notification != null) {

    print('Message also contained a notification: ${message.notification}');

  }

});

```

### 6.2 バックグラウンドおよびフォアグラウンド状態での通知処理

バックグラウンド状態での受信を確かにするため、`_firebaseMessagingBackgroundHandler`を設定します。

## 7. まとめ

ここまでで、Flutterアプリに対してFirebaseの`firebase_messaging`を使用したプッシュ通知の受信を実装する方法を見てきました。Firebaseの設定からプラットフォーム固有のコンフィギュレーションまで、ステップバイステップのプロセスを通じて、効果的な通知システムを構築します。これにより、ユーザーとの接触を保ち、アプリのエンゲージメントを向上させる重要な手段が得られます。

Flutterでfirebase_messagingを使用したプッシュ通知の基本実装

目次

続きを読むには単価診断を受けてください（30秒）