こんにちは。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-setupFirebaseはBlaze PlanにFirebaseのプランをBlaze Planにあげる必要があります。https://firebase.google.com/pricing?hl=jaPush通知実装:Apple側の事前準備Apple IDの取得Apple IDがない場合は以下より取得しましょう。https://appleid.apple.com/account?appId=632&returnUrl=https%3A%2F%2Fdeveloper.apple.com%2Faccount%2FApple 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などの構築に興味のある方は、こちらからご気軽にご相談ください。