Firebase Cloud Messaging

目次 (2024/1/13 ver.0.01)

1番目のタブが選択された!

1.プッシュ通知とは

もくじ

1.1 プッシュ通知の基礎知識

1.ローカル通知とリモート通知
  • プッシュ通知には大きく分けて以下の2種類があります。
    • ローカル通知
    • リモート通知
  • ローカル通知は、デバイスの内部で完結するプッシュ通知で、インターネット接続を必要としないものになります。
    リマインダーアプリで決まった日時に通知を飛ばす等、外部のサーバ(アプリのバックエンド等)からの通知リクエストを送る必要がない通知に利用されます。
  • リモート通知は、インターネットを通してスマホの端末外から届けられるプッシュ通知で、バックエンド側の何かしらのイベントの発生を受けてデバイスに送信されるプッシュ通知はリモート通知となります。
    LINEでメッセージを受信したときの通知や、SNSのいいね!の通知などはこちらにあたります。
2.プッシュ通知配信サービス
  • リモート通知をAndroid/iOSのデバイスに対して送るためには、プッシュ通知配信サービスを利用します。
  • プッシュ通知配信サービスの代表的なものは、Googleが提供する Firebase Cloud Messaging (FCM) と、Appleが提供する Apple Push Notification Service (APNs) です。
  • 中国ではグレートファイアウォール等の事情でGoogleのサービスが使えないので、Baidu等が提供する同様のプッシュ通知配信サービスを使う必要があるようですが、そういった事情が無い限り、スマホへのリモート通知はFCMかAPNsのどちらかで実現することになるでしょう。
  • FCMはAndroidとiOSのどちらにも通知を送信することができますが、APNsはiOSへの通知送信のみをサポートする仕様となっています。
  • つまり、FlutterでAndroid/iOSの両対応を行う場合、FCMを利用すればプッシュ通知配信サービスも1つに集約できることになります。
3.プッシュ通知運用支援サービス
  • プッシュ通知の運用方法として、FCMやAPNsと直接やりとりしてプッシュ通知を送る方法がひとつの方法です。
  • それ以外の方法として、プッシュ通知の管理・配信に役立つ機能を提供するプッシュ通知運用支援サービスを利用する方法もあります。
  • こういったサービスは、アプリ運用者とプッシュ通知配信サービスの間に立って、ABテストや配信結果の分析、ユーザーの行動に基づいた配信など、自前で整えようと思うと色々とコストがかかる便利機能を提供するサービスです。
  • Amazon Pinpointは、こういったサービスの1つです。
  • プッシュ通知を配信するために必要な基盤を提供するFCM等のサービスと、プッシュ通知の運用支援を行うPinpoint等のサービスが、ネット上だとどちらも「プッシュ通知サービス」と表現されていることが多く、混乱しやすいので注意しましょう。
  • この記事では区別のために、前者をプッシュ通知配信サービス、後者をプッシュ通知運用支援サービスと呼びます。

1.2 リモート通知が届くまでの流れ

  • 次にリモート通知がデバイスに届くまでの一連の流れもおさらいしておきます。
  • ここでは、プッシュ通知運用支援サービスを挟まず、プッシュ通知配信サービス(FCM)と直接やりとりをする構成で説明をします。
1.デバイストークンの発行と保持
  • まず、通知を送る前の準備として必要なのが、デバイストークンの発行と保持です。
  • デバイストークンはプッシュ通知配信サービスが通知を送るデバイスを特定するために利用する端末の識別子です。
  • デバイストークンはプッシュ通知を送るときに絶対に必要になるもので、プッシュ通知配信サービス側で発行されます。
  • デバイストークンの発行と保持の一般的な流れは下図のようになります。
  • 実際のアプリでプッシュ通知を出す場合は、LINEのメッセージ受信のように、アプリの特定のユーザに対してプッシュ通知を送りたいという場合が多いと思います。しかし、プッシュ通知配信サービスが管理してくれるのはデバイストークン(とそれが表す端末)のみです。そのため、アプリ上のユーザと、そのユーザのデバイスに対して払い出されたデバイストークンの対応関係は何らかの形で管理する必要があります。
  • Amazon Pinpoint等のプッシュ通知運用支援サービスには、ここの対応関係の保持をしてくれるものも多く存在します。
2.プッシュ通知の送信
  • デバイストークンの発行と保持ができたら、リモート通知を送る準備はOKです。
  • あとは、アプリのバックエンドで発生したイベントに応じて、通知を送りたいユーザのデバイストークン情報をプッシュ通知サービスに与えて、プッシュ通知を要求すれば、リモート通知がデバイスに送られます。

1.3 Flutter x FCM x Amazon Pinpoint でプッシュ通知

  • 最後に、具体例としてプッシュ通知配信サービスに Firebase Cloud Messaging(FCM)、プッシュ通知運用支援サービスに Amazon Pinpoint を使ってFlutterアプリにプッシュ通知送信をする仕組みを作る場合の構成や、大まかな実装の流れを説明します。
1.構成
  • 全体の構成は以下のようになります。
  • アプリバックエンドとプッシュ通知配信サービス(FCM)の間にAmazon Pinpointが入っています。
  • デバイストークンとユーザIDの対応関係の保持はAmazon Pinpointで行います。
  • 特定ユーザに対するプッシュ通知の送信は以下のような流れとなります。
    • アプリバックエンド→Pinpoint: ユーザIDを指定してプッシュ通知送信要求
    • Pinpoint→FCM: 指定されたユーザIDに紐づくデバイストークンへのプッシュ通知要求を行う
2.実装の流れ
  • 設定・実装の流れは以下のようになります。設定の細かいやり方は1、2年で割と変わってしまうので、この記事では示しません。
  • できるだけ公式ドキュメントを確認しながら進めていくことを推奨します。(参考になりそうなドキュメントを一部貼っておきます)
    1. FlutterとFirebaseプロジェクトを新規作成して接続設定をする(参考1参考2
      ※iOSとAndroidでそれぞれ設定が必要です
    2. Firebase→Flutterで通知送信できるように実装(参考サンプル実装
    3. Pinpointプロジェクトの作成・プッシュ通知設定をしてFCMと接続(参考1参考2参考3
    4. Pinpointとアプリバックエンドでやりとりする以下の処理を実装
      1. エンドポイント(デバイストークン)登録(参考
      2. ユーザID指定でプッシュ通知を送信(参考
  • Flutterは同じソースでAndroidとiOSを一気に対応できるところが魅力ですが、プッシュ通知はそれぞれのOS固有の仕様が深く関わってくる部分となるため、各OSに対して別々の対応が必要となる部分が出てきます。
  • よって、それぞれの設定や実装が、①全体用(両方のOS用)のものか ②Android用のものか ③iOS用のものか、を整理して進めていくと混乱が起きづらいです。
  • 例えば、Firebaseのプロジェクト上ではAndroidアプリとiOSアプリを別々で登録し、それぞれについてFlutterアプリ側から接続する設定を行う必要があります。
  • Firebaseから見ると、iOSとAndroidで別々でアプリがあり、それぞれに対してプッシュ通知を送るような形になっているということです。

以上

2.flutter+FCM

目次

  1. Firebaseの設定
  2. Side Chasse(SQQS)

2.1 Firebaseの設定

1.Firebase、FCM初期化設定(Android用)
  • まずはビルド時に必要な設定を./android/build.gradleに追記します。
  • # ./android/build.gradle
        dependencies {
            classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
            classpath 'com.google.gms:google-services:4.3.10'        
        }
    
  • 次にFlutterのでFirebaseの初期化設定とFCMの設定を追加します。
  • mainメソッドに以下のように追記を行います。
  • # ./main.dart
    void main() async {
      WidgetsFlutterBinding.ensureInitialized();
    
      await Firebase.initializeApp(
        options: DefaultFirebaseOptions.currentPlatform,
      );
    
      final messagingInstance = FirebaseMessaging.instance;
      messagingInstance.requestPermission();
    
      final fcmToken = await messagingInstance.getToken();
      debugPrint('FCM TOKEN: $fcmToken');
    
      runApp(const MyApp());
    }
    
Quarter Turns(女性)
  • 1S: RF back

2.Side Chasse(SQQS)

Side Chasse(男性)
  • 1S: LF fwd
  • 2Q: RF to side
  • 3Q: LF close to RF
  • 4S: RF to side, LF brushes to RF without weight

3.ジルバ

トークA初級(Stage1)

1.Open Hip Twist(2341 2341) O→F ↑LRL RLR/↓RLR LRL
女性は最初の41(R)で右回転(Swivels)を行い、次の23(LR)で左回転(Forward Walk Turn)を行いFanで終わる。
2.Hockey Stick(2341 2341) F→O ↑LRL RLR/↓RLR LRL
女性はFanから2番目の2(L)で1/8左に前進し、2番目の3(R)で左回転(Fwd Walk Turn)して男性に正対する。
3.Open Hip Twist(2341 2341) O→F ↑LRL RLR/↓RLR LRL
女性は最初の41(R)で右回転(Swivels)を行い、次の23(LR)で左回転(Forward Walk Turn)を行いFanで終わる。
4.Alemana(2341 2341) F→RSP ↑LRL RLR/↓RLR LRL
女性はFanから最初の41(R)で右回転(Swivels)を行い、2番目の23(LR)で左足→右足と前進しながら右回転(Swivels)を行う。
2番目の4(L)で男性の右側に左足を前進して、2番目の1(L)で右回転(Fwd Walk Turn(L))を行い男性の右側に並ぶ。

4.マンボ

目次

  1. ルンバの基本(全般)
  2. ルンバの基本(動画先生)
  3. Open Hip Twist
  4. Alemana
  5. Closed Hip Twist
  6. Spiral
  7. Curl
  8. Cucarachas
  9. Aida