FlutterFlow と Firebase の連携手順と設定ガイド (2025年版)

2026年5月30日

Contents

1 FlutterFlow と Firebase の概要と事前準備
- 1.1 必要なアカウントと環境
2 Firebase プロジェクトの作成と設定ファイル取得
3 FlutterFlow 側で Firebase 接続を完了させる
- 3.1 Firebase 設定画面への入力手順
- 3.2 エラーコードと対処法（代表例）
4 認証機能の有効化と Auth Widget の組み込み
- 4.1 Firebase コンソール側の設定
- 4.2 FlutterFlow で Auth Widget を配置する手順
5 Firestore データベース設計とリアルタイム更新
6 オプション機能：Storage・Realtime Database・Cloud Functions
7 最終テスト・デプロイチェックリスト
- 7.1 プレビューでの動作確認手順
8 記事全体のまとめ
9 参考文献

スポンサードリンク

FlutterFlow と Firebase の概要と事前準備

FlutterFlow はビジュアル UI ビルダーとして、コードを書かずに Flutter アプリを作成できるプラットフォームです。一方 Firebase は認証・データベース・ストレージなどのバックエンド機能を提供する BaaS（Backend‑as‑a‑Service）です。両者を組み合わせれば、フロントエンドとバックエンドの構築が大幅に簡略化されます。本セクションでは、作業開始前に必要なアカウントや環境を確認し、スムーズにプロジェクトへ移行できるようにします。

対象読者：FlutterFlow と Firebase を初めて使う初心者〜中級者
ポイント：公式ドキュメントの手順に沿って設定すれば、後々のトラブルを最小限に抑えられます

必要なアカウントと環境

項目	理由
Google アカウント	Firebase と FlutterFlow の両方で認証に使用します
安定したインターネット接続	設定ファイルのダウンロードやプラグインのインストールに必須です
Chrome（最新版）または Edge	現行の FlutterFlow エディタが最も快適に動作するブラウザです

Firebase プロジェクトの作成と設定ファイル取得

Firebase コンソールでプロジェクトを作成し、各プラットフォーム（Web・iOS・Android）向けの設定情報を入手します。以下では公式ガイドに沿った最新の手順をご紹介します。

Firebase プロジェクトの新規作成

まずはコンソールでプロジェクトを立ち上げます。

導入文：ここではプロジェクト名やリージョン設定など、基本的な情報入力の流れを示します。

https://console.firebase.google.com/ にアクセスし、Google アカウントでログイン
「Add project」ボタンをクリック
プロジェクト名（例: my‑flutterflow‑app）を入力し Continue を選択
Google アナリティクスの有無は任意ですが、後からオンにできるので「Skip for now」を推奨【2】
デフォルトリージョン（例: us-central1）を選び Create project

作成が完了するとプロジェクトダッシュボードが表示されます。

各プラットフォーム用設定ファイルの取得手順

以下の表は、公式コンソールで取得できるファイルと FlutterFlow へ配置すべきディレクトリをまとめたものです。

導入文：FlutterFlow が自動的に認識するパスを示すことで、手動アップロード時のミスを防ぎます。

プラットフォーム	ダウンロード場所（Firebase コンソール）	推奨配置パス（FlutterFlow プロジェクト内）
Android	Project Settings → Your apps → Android → 「google-services.json」ダウンロード	`assets/android/app/google-services.json`
iOS	同上 → 「GoogleService-Info.plist」ダウンロード	`assets/ios/Runner/GoogleService-Info.plist`
Web	Project Settings → General → 「Firebase SDK snippet」から `config` オブジェクトをコピー	FlutterFlow の「Firebase 設定」画面に貼り付け

ポイント：FlutterFlow ではファイル配置だけで自動認識されますが、パスの大小文字は正確に合わせてください【3】。

SHA‑1 フィンガープリントと iOS バンドル ID の登録

Android（SHA‑1）

Firebase が Google Play の認証や Dynamic Links を利用できるように、デバッグ／リリース両方の SHA‑1 を登録します。

Android Studio → Gradle パネル → Tasks > android > signingReport を実行
コンソールに表示される SHA1: の文字列をコピー
Firebase コンソールの Project Settings → Your apps → Android に貼り付けて Add fingerprint

※キーストアを自前で管理している場合は、keytool -list -v -keystore <your‑keystore>.jks -alias <alias> でも取得可能です。

iOS（Bundle ID）

Apple Developer ポータルで App ID（例: com.example.myflutterflowapp）を作成
Firebase コンソールの Project Settings → Your apps → iOS に同じ Bundle ID を入力し、GoogleService-Info.plist を再ダウンロード
必要に応じて App Store Connect で App の情報（SKU・価格設定）を登録し、Firebase の iOS app 設定画面から「App Store ID」も入力しておくと、Dynamic Links が正しく機能します【4】。

FlutterFlow 側で Firebase 接続を完了させる

取得した API キーや設定ファイルを FlutterFlow に登録し、接続テストまで行います。公式ドキュメントの手順に沿うことでエラー発生率が低くなります。

Firebase 設定画面への入力手順

導入文：このセクションでは UI 操作の流れと必須項目を詳しく説明します。

FlutterFlow の左サイドバー → Settings > Firebase を開く
「API Key」「Auth Domain」「Project ID」「App ID」など、Firebase コンソールの General タブに表示されている 4 つの文字列をそれぞれ貼り付け【5】
「Upload Config Files」ボタンで google-services.json と GoogleService-Info.plist を選択しアップロード
Save & Test Connection をクリックすると、接続成功かエラーメッセージが表示されます

エラーコードと対処法（代表例）

エラーコード	主な原因	推奨対策
`INVALID_API_KEY`	キーのコピペミス	Firebase コンソールで再取得し、余分な空白が無いか確認
`MISSING_CONFIG_FILE`	ファイル未アップロードまたはパス不一致	正しいディレクトリに配置した上で再度アップロード
`SHA1_MISMATCH` (Android)	SHA‑1 が Firebase に登録されていない	上記「SHA‑1 フィンガープリント」手順を再確認

ポイント：テストは FlutterFlow の Preview モードでも即座に結果が確認でき、画面左下の Log Panel にエラーログがリアルタイムで出力されます【6】。

認証機能の有効化と Auth Widget の組み込み

ユーザー認証はほぼすべてのアプリに必須です。ここではメール/パスワード、Google、Apple の 3 種類を有効化し、FlutterFlow 上でウィジェットとして配置する手順を示します。

Firebase コンソール側の設定

導入文：認証プロバイダーごとに必要な外部設定（OAuth クライアントや Apple のサインイン）があります。

Firebase Console → Authentication → Sign‑in method に移動
Email/Password を「Enable」
Google：Web client ID と Web client secret を取得するため、Google Cloud Console の OAuth 同意画面を設定し、クレデンシャルを作成【7】
Apple：Apple Developer ポータルで「Sign In with Apple」機能を有効化し、Service ID と Key を作成。Firebase コンソールに Bundle ID と Services ID を入力

FlutterFlow で Auth Widget を配置する手順

左サイドバー → Widgets > Auth をドラッグして画面に配置
プロパティパネルで「Authentication Type」を以下から選択可能：
Email & Password
Google（有効化済みの場合のみ表示）
Apple（iOS デバイス限定）
「Redirect After Sign‑In」に遷移先ページ（例: HomeScreen）を設定
必要に応じて「Show Forgot Password」や「Add Provider」ボタンで UI をカスタマイズ

ポイント：Auth Widget はデフォルトで Firebase のエラーメッセージを表示します。独自のバリデーションが必要な場合は、Widget の Custom Action からロジックを追加できます【8】。

Firestore データベース設計とリアルタイム更新

Firestore はスケーラブルな NoSQL DB で、クエリやリアルタイム同期が簡単に実装できます。以下ではシンプルなタスク管理アプリを例に、コレクション構造・セキュリティルール・FlutterFlow の Query ウィジェット活用法を解説します。

コレクション設計例（タスク管理）

導入文：ユーザーごとにプライベートなデータを保持する典型的な構造です。

users (collection)
 └─ {uid} (document)                // Firebase Auth の UID がキー
      └─ tasks (sub‑collection)
            ├─ {taskId}
            │   ├─ title: string
            │   ├─ completed: boolean
            │   └─ createdAt: timestamp

users (collection)

└─ {uid} (document) // Firebase Auth の UID がキー

└─ tasks (sub‑collection)

├─ {taskId}

│ ├─ title: string

│ ├─ completed: boolean

│ └─ createdAt: timestamp

2025 年版推奨セキュリティルール（認証ユーザーのみアクセス）

導入文：公式ガイドラインに基づき、最小権限の原則でルールを記述します。

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // users コレクション全体へのアクセス制御
    match /users/{userId} {
      allow read, write: if request.auth != null &amp;&amp; request.auth.uid == userId;

      // サブコレクション tasks は親ルールを継承
      match /tasks/{taskId} {
        allow read, write: if request.auth != null &amp;&amp; request.auth.uid == userId;
      }
    }
  }
}

rules_version = '2';

service cloud.firestore {

match /databases/{database}/documents {

// users コレクション全体へのアクセス制御

match /users/{userId} {

allow read, write: if request.auth != null && request.auth.uid == userId;

// サブコレクション tasks は親ルールを継承

match /tasks/{taskId} {

allow read, write: if request.auth != null && request.auth.uid == userId;

}

このコードは Firebase Console → Firestore → Rules に貼り付けて Publish ボタンをクリックすれば即座に有効化できます【9】。

FlutterFlow の Query ウィジェットでリアルタイム取得

画面に ListView ウィジェットを配置
プロパティ → Data Source > Firestore Query を選択
Collection Path に users/{{currentUser.uid}}/tasks と入力し、Live Updates（デフォルトでオン）を保持
各 ListItem のテキストは title フィールドにバインド、チェックボックスは completed と双方向バインディング

ポイント：Firestore への書き込みは Add Document アクションで実装し、createdAt は FieldValue.serverTimestamp() を使うとサーバ側時刻が自動設定されます【10】。

オプション機能：Storage・Realtime Database・Cloud Functions

Firebase の他サービスも FlutterFlow から直接呼び出せるため、画像アップロードやリアルタイムチャット、サーバーレスロジックを簡単に実装できます。

1. Firebase Storage による画像アップロード

導入文：ユーザーがプロフィール画像や投稿写真を保存する典型的なシナリオです。

手順	内容
ウィジェット配置	Storage ウィジェット → 「Upload File」アクションを設定
アップロード先パス	`users/{{currentUser.uid}}/images/{{fileName}}` （変数展開）
成功時処理	取得したダウンロード URL を Firestore の `profileImageUrl` フィールドへ Update Document アクションで保存

Storage 用セキュリティルール（例）

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /users/{userId}/{allPaths=**} {
      allow read, write: if request.auth != null &amp;&amp; request.auth.uid == userId;
    }
  }
}

rules_version = '2';

service firebase.storage {

match /b/{bucket}/o {

match /users/{userId}/{allPaths=**} {

allow read, write: if request.auth != null && request.auth.uid == userId;

}

2. Realtime Database の簡易連携

導入文：リアルタイム性が高く、チャットやゲームの状態同期に適しています。

Firebase コンソール → Realtime Database を有効化し「Start in test mode」かつ後でルールを追加
FlutterFlow の Database Action メニューから Set Value または Update Value を選択し、パス例 chat/{{roomId}}/messages に JSON データを書き込む
受信側は Realtime Listener ウィジェットを配置し同じパスのデータ変化をリアルタイムで取得

Realtime Database の基本ルール

{
  &quot;rules&quot;: {
    &quot;chat&quot;: {
      &quot;$roomId&quot;: {
        &quot;.read&quot;: &quot;auth != null &amp;&amp; auth.uid !== null&quot;,
        &quot;.write&quot;: &quot;auth != null &amp;&amp; auth.uid !== null&quot;
      }
    }
  }
}

{

"rules": {

"chat": {

"$roomId": {

".read": "auth != null && auth.uid !== null",

".write": "auth != null && auth.uid !== null"

}

3. Cloud Functions の呼び出し

導入文：サーバー側で重い処理や外部 API 呼び出しを行う際に利用します。

サンプル関数（ユーザー登録時のウェルカムメール）

const functions = require('firebase-functions');
const sgMail = require('@sendgrid/mail');
sgMail.setApiKey(process.env.SENDGRID_API_KEY);

exports.sendWelcomeEmail = functions.auth.user().onCreate((user) =&gt; {
  const msg = {
    to: user.email,
    from: 'welcome@myapp.com',
    subject: 'ようこそ！',
    text: `こんにちは、${user.email} さん。ご登録ありがとうございます。`,
  };
  return sgMail.send(msg);
});

const functions = require('firebase-functions');

const sgMail = require('@sendgrid/mail');

sgMail.setApiKey(process.env.SENDGRID_API_KEY);

exports.sendWelcomeEmail = functions.auth.user().onCreate((user) => {

const msg = {

to: user.email,

from: 'welcome@myapp.com',

subject: 'ようこそ！',

text: `こんにちは、${user.email} さん。ご登録ありがとうございます。`,

};

return sgMail.send(msg);

});

FlutterFlow からの呼び出し手順

Firebase コンソール → Functions タブで上記関数をデプロイ（firebase deploy --only functions）
FlutterFlow の画面に Button ウィジェットを配置し、アクションとして Call Cloud Function を選択
関数名 sendWelcomeEmail と必要パラメータ（例：{email: user.email}）を入力

ポイント：HTTP トリガー関数であれば認証情報が自動付与され、context.auth.uid で呼び出し元ユーザーを判別できます【11】。

最終テスト・デプロイチェックリスト

全機能実装後は必ずプレビューと各プラットフォームへのビルドを行い、設定漏れがないか確認します。以下の表はデプロイ前にチェックすべき項目をまとめたものです。

導入文：本チェックリストは公式ベストプラクティスに基づいて作成しています。

カテゴリ	チェック項目
Android	- `google-services.json` が正しいパスに配置 - デバッグ & リリース SHA‑1 が Firebase に登録済み
iOS	- `GoogleService-Info.plist` の Bundle ID が Apple Developer と一致 - App Store Connect の Bundle ID を Firebase iOS 設定に入力
Web	- `firebaseConfig`（API Key など）が `index.html` または FlutterFlow の Web 設定に貼り付け済み
認証	- Email/Password、Google、Apple がすべて有効化されテストユーザーでサインイン確認
Firestore	- セキュリティルールが `request.auth != null` 条件で正しく適用 - 期待通りのコレクション構造が作成済み
Storage / Realtime DB	- アクセス権限（read/write）が認証ユーザーに限定されているか確認
Cloud Functions	- デプロイ後に HTTP エンドポイントが有効か、ログでエラーが出ていないか検証

プレビューでの動作確認手順

FlutterFlow の上部メニューから Preview をクリックし、Web エミュレータを起動
サインアップ → ログイン → データ追加（タスク）→ 画像アップロードの一連のフローを実行
左下の Log Panel にエラーメッセージが出ていないか確認。特に Permission denied 系は設定ミスのサインです

記事全体のまとめ

FlutterFlow と Firebase の相性：ノーコード UI ビルダーとフルマネージド BaaS が組み合わさることで、フロントエンドとバックエンドをほぼ同時に構築可能です。
公式手順の遵守：本稿で紹介した各ステップはすべて Firebase と FlutterFlow の公式ドキュメントに基づいており、情報の信頼性が高いです【1‑11】。
設定ファイルと認証情報の管理：google-services.json / GoogleService-Info.plist は正しいディレクトリに配置し、SHA‑1 と Bundle ID を忘れずに登録してください。
認証・データベース・ストレージ：Auth Widget の活用で UI が即完成し、Firestore のサブコレクション設計とセキュリティルールで安全性を確保できます。
拡張機能：Storage・Realtime Database・Cloud Functions を組み合わせれば、画像アップロードやリアルタイムチャット、メール送信など多彩なサービスが実装可能です。
最終チェック：デプロイ前に本チェックリストで設定漏れを洗い出し、プレビューで全フローを検証すれば、本番環境でも安定して動作します。

以上の手順とベストプラクティスに沿って開発を進めれば、初心者でも実務レベルの FlutterFlow + Firebase アプリが短期間で完成します。ぜひ実際のプロジェクトで試し、必要に応じて公式ドキュメントを随時参照してください。

参考文献

番号	タイトル・リンク
[1]	FlutterFlow Documentation – Getting Started https://docs.flutterflow.io/getting-started
[2]	Firebase Console – Create a Project https://firebase.google.com/docs/web/setup#create-project
[3]	FlutterFlow – Adding Firebase Config Files https://docs.flutterflow.io/integrations/firebase#add-config-files
[4]	iOS Setup for Firebase https://firebase.google.com/docs/ios/setup
[5]	How to Connect a FlutterFlow Project to Firebase https://docs.flutterflow.io/integrations/firebase#connect-project
[6]	Debugging Firebase Connections in FlutterFlow https://docs.flutterflow.io/debugging
[7]	Google Sign‑In for Web – OAuth 2.0 Setup https://developers.google.com/identity/protocols/oauth2/web-server
[8]	Customizing the Auth Widget in FlutterFlow https://docs.flutterflow.io/widgets/auth-widget#customization
[9]	Firestore Security Rules – Best Practices (2025) https://firebase.google.com/docs/firestore/security/get-started
[10]	Using Cloud Firestore with FlutterFlow Queries https://docs.flutterflow.io/data/firestore-queries
[11]	Calling HTTP‑Triggered Cloud Functions from FlutterFlow https://firebase.google.com/docs/functions/http-events#call-from-client

※上記リンクは執筆時点の公式ページです。将来的な UI 変更等があっても、公式ドキュメントに従うことで最新情報を取得できます。

スポンサードリンク

-FlutterFlow

comment コメントをキャンセル

: FlutterFlow

FlutterFlow アカウント登録と無料プラン概要（2025年版）

FlutterFlow のアカウント登録手順と無料プランで利用できる機能、テンプレート選択から Firebase 連携、API 呼び出しまでの最新ガイドです。

: FlutterFlow

FlutterFlowとFirebase連携の基礎知識 | ノーコード開発ガイド

FlutterFlowとFirebaseの連携により、コード知識がなくても効率的なアプリ開発が可能になります。プロジェクト初期設定から認証機能・リアルタイムデータ同期までの実装方法を解説します。

: FlutterFlow

FlutterFlow のデプロイ方法とプラン別制限 – 無料でも Web 公開可能

FlutterFlow の無料プランでも Web アプリが公開でき、プランに応じて Android/iOS ビルドやコードエクスポート、CI/CD が利用可能です。本記事では設定手順と注意点を紹介します。

: FlutterFlow

FlutterFlow プラン比較と2026年料金ガイド | 無料〜Enterpriseまで徹底解説

FlutterFlow の各プランの特徴・料金・機能制限を比較し、プロトタイプ作成からエンタープライズ導入までの最適な選び方を紹介します。

: FlutterFlow

FlutterFlow 2026料金プランと機能比較 – 完全ガイド

FlutterFlowの2026年版料金表と各プラン機能を比較し、ユースケース別に最適なプラン選びとROIシミュレーションを解説します。

HappyTasu 2026新規登録キャンペーン最大2600円ボーナスポイントGET方法

有料記事が売れる構成バランスと価格設定のノウハウ | Noteで成功するSEO戦略