こんにちは。FlutterFlowではPush通知（プッシュ通知）も簡単に実装することができます。アプリといえばまず求められるのがプッシュ通知機能ですよね。

今日はFlutterFlowでのPush通知（プッシュ通知）の実装方法について見ていきたいと思います。

FlutterFlowでPush通知は実装できるか？

結論、できます。準備は大変ですが、準備ができてしまえば一つ一つのPush通知の実装は大したことないです。

ただ、Firebaseの設定、Apple側の設定、FlutterFlow側の設定と、それぞれやるのが結構手間で、ブラウザやiOSのシミュレーターでは確認できないのでtestflightで実機でテストしたり・・・となるので準備が大変ですね。

元々アプリをリリースするつもりでApple/Googleのデベロッパーアカウントを用意しててbundle idも取得してて・・・とかであればついでにもう少しやるくらいですが、それがない状態で「ちょっと試したい」という感じではかなりしんどいと思います。

ではざっと解説していきましょう！

Push通知実装：Firebaseの事前準備

それでは早速FlutterFlowでのプッシュ通知の実装の準備をしていきましょう。

Firebaseのセットアップ

まずはFirebase側の設定ですね。Firebaseのプロジェクトを作ってFlutterFlowと繋げる。いつものFlutterFlowの設定と同じですね。これはやっておきます。

https://docs.flutterflow.io/data-and-backend/firebase/firebase-setup

FirebaseはBlaze Planに

FirebaseのプランをBlaze Planにあげる必要があります。

https://firebase.google.com/pricing?hl=ja

Push通知実装：Apple側の事前準備

Apple IDの取得

Apple IDがない場合は以下より取得しましょう。

https://appleid.apple.com/account?appId=632&returnUrl=https%3A%2F%2Fdeveloper.apple.com%2Faccount%2F

Apple Developer Programの取得

以下よりApple Developer Programに登録します。個人と法人で分かれています。法人の場合はその前にDUNS Numberも取得しないとですね。大変... でもどうせストア申請に必要な処理なのでやりましょう。

https://developer.apple.com/programs/enroll/

Apple Developer AccountでBubbleIDやAppID Distribution Provisioning Profileを作成

この辺を一通り作成します。こちらもストア申請にも必要な処理ですね。

https://blog.codemagic.io/distributing-native-ios-sdk-with-flutter-module-using-codemagic/

FlutterFlow側の設定

FlutterFlowのpush notificationをEnableに

以下のようにFlutterFlowのpush notificationをEnableにしてデプロイします。

Keyの取得・登録

Keyの取得とFirebaseへの登録

Apple developer accountのCertificates, Identifiers & Profilesからkeysを選択し＋ボタンを押します。

KeyNameにいい感じの名前を入れて、APNsにチェックを入れてContinue。キーをダウンロードします。

APNsキーをFirebaseのProject SettingsのCloud Messagingの下の方のApple app configurationから先ほどダウンロードしたキーファイルをアップロードします。

Key IDは先ほどキーを取得したページから、TeamIDはApple Member Centerのmembershipタブの下にあります。

identifierの追加

Certificates, Identifiers & ProfilesからIdentifiersを選択。App IDsを選択。Type Apを選択します。

Descriptionには「ImageNotification」と入れましょう。

次に、Bundle IDを「あなたのpackage名 ＋ .ImageNotification」とします。

これで登録すれば完了です。

テストフライト

testflightでアプリをインストール

ここは細かい説明は端折りますが、FlutterFlowからアプリをAppleへデプロイし、testflightでインストールしておきます。

Send the Push Notificationから動作確認

あとはApp SettingのPush N otificationsから、タイトルやテキストを入れてSend Notificationボタンを押せばテスト可能です。

FlutterFlow：プッシュ通知まとめ

いかがでしたでしょうか。本日はFlutterFlowのプッシュ通知について書いてきました。

ちょっと準備が、、、大変ですよね。

ですが準備さえできてれば実装自体は簡単ですしちゃんと動くのでぜひ試してみてくださいね。

※ノーコードの開発事例については以下もご覧ください。
【ノーコード事例】アプリ開発の成功事例16選！ツールの選び方も説明！

アプリ・Webサービスの開発の無料相談はこちら

Adalo、bubble、FlutterFlow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。

この機会に、温めていたビジネスアイデアを今すぐ形にしてみませんか？

弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。

また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。

アプリ／Webサービスの開発、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。