FlutterFlow

FlutterFlow と Firebase の最新連携手順（2025年版）

ⓘ本ページはプロモーションが含まれています

スポンサードリンク

前提条件と用意するもの

必要項目 内容
FlutterFlow アカウント 有料プラン以上で Firebase 連携機能が利用可能です。
Google アカウント Firebase コンソールへのアクセスに使用します。
プロジェクト名・パッケージ名 Android は applicationId、iOS は bundle identifier を決めておきます。
インターネット接続環境 ビルドやプレビューはクラウド上で実行されます。

⚠️ 本手順では FlutterFlow の UI が 2025 年 3 月時点で提供している機能 に基づいています。将来のバージョンで UI が変更された場合は、公式ヘルプページを参照してください。

Firebase プロジェクトの作成 & Project ID の取得

  1. Firebase コンソールにアクセス
    https://console.firebase.google.com/ に Google アカウントでログインします。

  2. 新規プロジェクトを作成

  3. 「プロジェクトを追加」→ プロジェクト名とリージョンを入力 → 「続行」。

  4. Google アナリティクスは任意で有効化（後からでも変更可）。

  5. Project ID を確認

  6. 左サイドメニューの「プロジェクト設定」（歯車アイコン）>「全般」タブに表示される Project ID をコピーします。
  7. UI 右側にある Copy ボタンで一括コピーでき、余計な空白が入りません。

📌 公式情報：Firebase の Project ID はプロジェクト作成時に自動生成され、変更不可です（[Firebase Docs – Project settings]）。

FlutterFlow 側で Firebase 接続を設定

  1. FlutterFlow にログインし、対象プロジェクトのダッシュボードへ移動。
  2. 左メニュー → Project Settings → Firebase を選択。
項目 操作
Firebase Project ID 先ほどコピーした Project ID を貼り付け。
Connect ボタンをクリックして接続開始。

接続が成功すると、FlutterFlow の画面右上に「Connected」ステータスが表示されます。エラーが出た場合は、ID が正確か（大文字小文字・余分なスペース）再確認してください。

主要サービスの有効化とセキュリティルール

1. Authentication

手順 操作
Firebase コンソール 「Authentication」→「開始」
サインイン方法 「メール/パスワード」「Google」を有効化
FlutterFlow 左メニュー → Auth ウィジェットを配置し、プロパティで使用する Sign‑In Method を選択

デフォルトでは「認証済みユーザーのみ」が許可されます。追加のプロバイダー（Apple, Facebook 等）を使う場合は公式ドキュメントに従い OAuth クライアント ID を設定してください。

2. Cloud Firestore

  1. Firebase コンソール → 「Firestore Database」→「データベースを作成」
  2. リージョン選択後、セキュリティルールは 「認証済みユーザーのみ」（request.auth != null）に設定。
  3. FlutterFlow で Firebase Query ウィジェットを配置し、対象コレクション名と必要なフィールドを指定。

カスタムルール例（公式推奨）

注意：大規模アプリではインデックス作成が必要になることがあります。Firestore のコンソールに表示されるエラーメッセージに従い、Index required リンクから自動生成してください。

3. Realtime Database

手順 操作
Firebase コンソール 「Realtime Database」→「データベースを作成」
ルール設定 以下の JSON を貼り付け（認証済みユーザーのみ読み書き可）

FlutterFlow Realtime DB Query ウィジェットで対象パス（例：/messages/{pushId}）を指定

4. Cloud Storage

  1. Firebase コンソール → 「Storage」→「開始」
  2. デフォルトバケット（例：myapp.appspot.com）が作成されたら、Rules タブに以下を設定。

  1. FlutterFlow の File Upload ウィジェットに保存先パス（例：uploads/${auth.uid}/profile.jpg）を設定。

自動生成される設定ファイルについて

  • FlutterFlow の Project Settings > Firebase ページ下部にある 「Auto Generate Config Files」 スイッチは、2025 年 3 月時点で公式にサポートされています（[FlutterFlow Docs – Auto‑generated config files]）。
  • スイッチを ON にすると、以下のファイルが自動的に生成され、ビルドプロセスに組み込まれます。
ファイル プラットフォーム
google-services.json Android
GoogleService-Info.plist iOS

重要：生成されたファイルは FlutterFlow がビルド時に自動配置するため、手作業でプロジェクトに追加する必要はありません。ただし、ローカルでコードをエクスポートして独自の CI/CD パイプラインで利用する場合 は、ダウンロードしたファイルをリポジトリに含めることが推奨されます。

接続確認テストと典型的なエラー対処法

1. プレビューでの動作検証

手順 操作
Preview 起動 右上の Preview アイコンをクリック。
認証 Auth ウィジェットでメール/パスワードまたは Google ログイン → 成功すれば Firebase Auth が有効。
データ取得 Firestore の List ウィジェットがコレクションの内容を表示できるか確認。
ファイルアップロード File Upload で画像選択 → アップロード完了後、Firebase コンソールの Storage にファイルが出ていることをチェック。

2. よくあるエラーと対処

エラーメッセージ 原因例 修正手順
Invalid project ID コピー時に余計な空白・大小文字ミス Firebase コンソールの Project Settings から再コピーし、FlutterFlow の入力欄に貼り付け直す。
Failed to load google-services.json ファイルが古い／未生成 FlutterFlow 設定画面で Auto Generate Config Files を再度 ON → ダウンロードして最新のものを使用。
Permission denied: Missing or insufficient permissions. Firestore/RTDB のルールがデフォルト（テストモード）になっている コンソールの Rules タブで認証済みユーザー向けのルールへ変更し、保存後に再デプロイ。
Storage object not found 指定パスが間違っている、またはアップロード失敗 ウィジェットの Storage Path を確認し、実際にコンソールで同一パスにファイルが存在するか検証。

トラブルシューティングフロー
1. エラーメッセージをコピー → Google 検索または公式ドキュメント検索。
2. 該当設定画面へジャンプ（Firebase コンソール or FlutterFlow Settings）。
3. 設定変更後、Preview で再度確認。

ビルド・デプロイ & Firebase でのモニタリング

ビルド手順

プラットフォーム 操作
Android FlutterFlow 左メニュー → Build → 「Android」タブ → Generate Build → 完了後 Download APK / AAB または Deploy to Google Play を実行。
iOS 同様に「iOS」タブで Generate Build → Deploy to App Store Connect（Apple Developer アカウントが必要）。

ビルド時に自動的に最新の google-services.json / GoogleService-Info.plist が組み込まれます。手動で追加する必要はありません。

Firebase でのモニタリング開始

機能 確認ポイント
Analytics ユーザー数、セッション長、イベント発生回数を Dashboard で把握。
Performance ネットワークレイテンシや CPU 使用率。Firebase Query が遅い場合は Firestore のインデックス追加が必要です。
Crashlytics (任意) クラッシュログが自動送信され、リアルタイムで問題箇所を特定できる。

公式ガイド：Firebase Console の Analytics → Dashboard や Performance の利用方法は公式ドキュメント（[Firebase Analytics]、[Firebase Performance Monitoring]）に詳しく記載されています。

保守・アップデート時のチェックポイント

項目 確認内容
Firebase SDK バージョン FlutterFlow の Project Settings > General > Firebase SDK Version が 10.6.x 以上か確認。バージョンが古いと google-services.json の互換性エラーが起きやすい。
FlutterFlow アップデート通知 UI が変更された場合は「Refresh」ボタンで最新テンプレートを取得し、設定が失われていないか再チェック。
セキュリティルールの定期レビュー 3〜6 ヶ月に一度、認証要件やデータ構造変更に合わせて Firestore / RTDB / Storage のルールを見直す。
依存ライブラリの脆弱性情報 pub.dev の flutterfire パッケージ更新履歴を確認し、重大な脆弱性が報告されたら即時アップデート。

注記：Firebase SDK は年数ごとにマイナーバージョンが上がります。FlutterFlow が自動で最新版に追従する仕組みはありますが、手動でコードをエクスポートして独自 CI に組み込む場合は pubspec.yaml のバージョン管理が必須です。

参考情報（公式リンク）

内容 URL
FlutterFlow – プロジェクト設定・Firebase 接続 https://docs.flutterflow.io/project-settings/firebase
Firebase – プロジェクト設定 (Project ID) https://firebase.google.com/docs/projects/learn-more#project-id
Firebase Authentication 公式ガイド https://firebase.google.com/docs/auth
Cloud Firestore セキュリティルール https://firebase.google.com/docs/firestore/security/get-started
Realtime Database セキュリティルール https://firebase.google.com/docs/database/security
Cloud Storage ルール https://firebase.google.com/docs/storage/security
Firebase Analytics / Performance Monitoring https://firebase.google.com/docs/analytics、https://firebase.google.com/docs/perf-mon

まとめ

  1. Firebase コンソールで Project ID を取得し、正確にコピー。
  2. FlutterFlow の Project Settings > Firebase に貼り付けて Connect → 接続完了。
  3. Authentication / Firestore / Realtime Database / Storage をそれぞれ有効化し、最低限のセキュリティルールを設定。
  4. Auto Generate Config Files 機能で必要な設定ファイルは自動生成・ビルドに組み込み。
  5. Preview で実装確認 → エラーが出たら公式エラーメッセージと本表を参照して対処。
  6. Build & Deploy 後、Firebase の Analytics / Performance / Crashlytics で運用状況をモニタリング。
  7. 定期的に SDK バージョン・ルール・依存パッケージ をチェックし、最新状態を保つ。

この手順通りに進めれば、2025 年版の FlutterFlow と Firebase の連携は数分で完了し、実務レベルのアプリ開発・デプロイがスムーズに行えるようになります。 Happy coding!

スポンサードリンク

-FlutterFlow