2026年版 FlutterFlow と Firebase 連携完全ガイド：アカウント作成からリリースまで

2026年7月7日

Contents

1 事前準備：FlutterFlow アカウント作成と Firebase プロジェクトのセットアップ
2 プラットフォーム別設定と OAuth 2.0 クライアント作成
3 FlutterFlow 側での Firebase 接続手順
4 2026 年版セキュリティルールと認証機能の有効化
- 4.1 RBAC の概要と導入手順
- 4.2 メールリンク認証と電話認証の有効化
5 実装例：FlutterFlow Action で作るノーコード ToDo アプリ
6 ビルド・デプロイ：コードエクスポートから App Store / Google Play リリースまで
7 まとめと次のステップ

スポンサードリンク

事前準備：FlutterFlow アカウント作成と Firebase プロジェクトのセットアップ

このセクションでは、FlutterFlow と Firebase を連携させるために最初に行う「アカウント取得」と「プロジェクト作成」の流れを解説します。両サービスは Google アカウントベースで動くため、同一のメールアドレスで統一しておくと後続の設定が格段に楽になります。また、2026 年 4 月時点で Firebase コンソールは Google Analytics の自動有効化を行わない 設計となっていることを踏まえて説明します。

FlutterFlow アカウント登録手順

FlutterFlow はブラウザ上のノーコード UI ビルダーです。公式ドキュメント（FlutterFlow – Getting Started）に沿って、以下の手順でアカウントを作成してください。

https://flutterflow.io にアクセスし、右上の Sign Up をクリック。
「Continue with Google」を選び、使用する Google アカウントで認証。
表示名と任意でパスワード（後から変更可能）を入力し Create Account を完了。

ポイント：組織向けに複数人で作業する場合は、FlutterFlow の「Team」機能を有効化しておくと権限管理がシンプルです。

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

Firebase コンソール（https://console.firebase.google.com）からプロジェクトを作ります。2026 年版の仕様では、Google Analytics の有効化はオプション であり、デフォルトで無効になっています（※Firebase Release Notes, 2026‑03）。この点に注意しながら手順を進めます。

コンソールに Google アカウントでログイン。
「Add project」 → 「Create a project」を選択。
プロジェクト名（例：myflutterflow_app）と対象地域を入力し Continue。
「Google Analytics の有効化」は オフのまま で進め、画面指示に従ってプロジェクト作成を完了。

Google アカウント統合の確認

Firebase と FlutterFlow が同一アカウントで紐付いていることを最終的にチェックします。

Firebase コンソール左上の歯車アイコン → Project settings。
「General」タブの「Your apps」から iOS／Android／Web のいずれかを選び、API キーやプロジェクト ID を取得。
同画面下部にある Google Cloud Platform (GCP) 連携 ボタンで GCP コンソールへ遷移し、FlutterFlow が表示されていることを確認。

プラットフォーム別設定と OAuth 2.0 クライアント作成

この章では、Web・iOS・Android 各プラットフォームに必要な認証情報の取得方法と、2026 年版 Firebase に合わせた OAuth 2.0 クライアント の作成手順を示します。リダイレクト URI が正しく設定されていないと、FlutterFlow 側で「認証エラー」が頻発するため必ず確認してください。

Web 用設定情報の取得

Web アプリは apiKey・authDomain・projectId の 3 つが最低限必要です。公式ガイド（Firebase – Add Firebase to your JavaScript project）を参考に、以下の手順で取得します。

Project settings → General タブで「Web app」(</> アイコン) を選択。
表示された SDK スニペットから apiKey, authDomain, projectId をコピー。

ヒント：Firebase の新しい UI では、スニペットが自動的に firebase_options.dart 用のコードへ変換できるため、手作業で貼り付ける必要はありません。

iOS / Android 用設定ファイルの取得

プラットフォーム	ダウンロード対象	配置場所
iOS	`GoogleService‑info.plist`	Xcode の Runner/Runner ディレクトリ
Android	`google-services.json`	`android/app/` フォルダ

手順（共通）

Project settings → General → 「Your apps」から対象プラットフォームを選択。
「Download config file」をクリックしてローカルに保存。
FlutterFlow の Integrations 画面でアップロードするか、手元のプロジェクトに直接配置します。

OAuth 2.0 クライアント ID とリダイレクト URI の設定

2026 年版 Firebase の認証では、Google Cloud Console の OAuth 同意画面 が必須です（※GCP Docs, 2026‑02）。以下の手順でクライアントを作成し、FlutterFlow 用リダイレクト URI を登録します。

GCP コンソール → APIs & Services → OAuth consent screen
ユーザータイプは「External」か「Internal」をプロジェクトの利用者に合わせて選択。
Credentials タブで Create credentials > OAuth client ID をクリック。
アプリケーションの種類を Web application に設定し、名前を入力。
Authorized redirect URIs に次の URL を追加（FlutterFlow 公式ドキュメント参照）：

https://flutterflow.io/auth/callback

作成後に表示される Client ID と Client secret をメモし、FlutterFlow の Authentication > OAuth Settings に貼り付けます。

FlutterFlow 側での Firebase 接続手順

このセクションでは、取得した API キー・設定ファイルを FlutterFlow に登録し、接続が正常に行われたことを確認するまでの流れを解説します。入力ミスやファイル配置の不備は「Firebase が未設定です」エラーの主因になるため、チェックリスト形式で手順を整理しました。

API キー・プロジェクト ID の登録

FlutterFlow ダッシュボード左メニュー → Project Settings → Integrations を開く。
「Firebase」セクションにある Connect Firebase ボタンをクリック。
ポップアップで以下項目を入力し Save：
API Key（Web 用）
Project ID（全プラットフォーム共通）
App ID（iOS/Android 別々に表示される場合はそれぞれ入力）

注意：apiKey は Web 用、appId は iOS と Android で別々に管理されます。間違えるとビルド時に「Invalid API key」エラーが出ます。

設定ファイル（json / plist）のアップロード

同じ Integrations ページの下部に、iOS 用と Android 用のアップロード欄があります。
GoogleService‑info.plist と google-services.json をそれぞれドラッグ＆ドロップまたは「Select file」から選択。
アップロードが完了したら Test Connection ボタンをクリックし、緑のチェックマークが表示されれば接続成功です。

接続テストとトラブルシューティング

症状	主な原因	対処法
`permission‑denied` エラー	Firestore ルール未設定または RBAC のロールが不一致	セキュリティルールを再確認（次章参照）
API キーが無効と表示	`apiKey` が Web 用ではなく iOS/Android 用に入力されている	正しい項目へコピーし直す
設定ファイルが認識されない	ファイル名や配置パスの誤り	プロジェクトルートの `android/app/` と `ios/Runner/` に正しく置く

2026 年版セキュリティルールと認証機能の有効化

Firebase の認可はアプリの安全性を左右します。2025 年に導入された ロールベースアクセス制御（RBAC） が、2026 年初頭から「デフォルト推奨」になったことが公式リリースノートで明示されています（※Firebase Security Rules v2, 2026‑01）。ここでは RBAC の設定手順と、メールリンク・電話認証の有効化方法を具体的に示します。

RBAC の概要と導入手順

RBAC はユーザー属性 role（例：admin, user, moderator）に基づいてアクセス権限を細かく制御できる仕組みです。以下の手順で Firestore と Realtime Database に適用します。

1. カスタムクレームの付与

GCP の Cloud Functions を利用し、サインアップ時に role クレームを追加します（公式サンプル参照：https://firebase.google.com/docs/auth/admin/custom-claims）。

exports.setUserRole = functions.auth.user().onCreate(async (user) =&gt; {
  const admin = require('firebase-admin');
  admin.initializeApp();
  // デフォルトは 'user' ロール
  await admin.auth().setCustomUserClaims(user.uid, { role: 'user' });
});

exports.setUserRole = functions.auth.user().onCreate(async (user) => {

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

admin.initializeApp();

// デフォルトは 'user' ロール

await admin.auth().setCustomUserClaims(user.uid, { role: 'user' });

});

2. Firestore の RBAC ルール例

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {

    // 管理者は全ドキュメントへフルアクセス
    function isAdmin() {
      return request.auth != null &amp;&amp; request.auth.token.role == 'admin';
    }

    // 一般ユーザーは自分の todo のみ操作可能
    match /todos/{todoId} {
      allow read, write: if request.auth != null &amp;&amp;
                         (isAdmin() ||
                          (request.auth.uid == resource.data.ownerUid &amp;&amp;
                           request.auth.token.role == 'user'));
    }
  }
}

rules_version = '2';

service cloud.firestore {

match /databases/{database}/documents {

// 管理者は全ドキュメントへフルアクセス

function isAdmin() {

return request.auth != null && request.auth.token.role == 'admin';

}

// 一般ユーザーは自分の todo のみ操作可能

match /todos/{todoId} {

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

(isAdmin() ||

(request.auth.uid == resource.data.ownerUid &&

request.auth.token.role == 'user'));

}

3. Realtime Database の RBAC ルール例

{
  &quot;rules&quot;: {
    &quot;todos&quot;: {
      &quot;$uid&quot;: {
        &quot;.read&quot;: &quot;auth != null &amp;&amp; (auth.uid === $uid || auth.token.role === 'admin')&quot;,
        &quot;.write&quot;: &quot;auth != null &amp;&amp; (auth.uid === $uid || auth.token.role === 'admin')&quot;
      }
    }
  }
}

{

"rules": {

"todos": {

"$uid": {

".read": "auth != null && (auth.uid === $uid || auth.token.role === 'admin')",

".write": "auth != null && (auth.uid === $uid || auth.token.role === 'admin')"

}

ポイント：request.auth.token.role が未設定の場合は null になるため、必ずカスタムクレームの付与を忘れないこと。

メールリンク認証と電話認証の有効化

パスワードレス体験はセキュリティ向上に寄与します。2026 年版 Firebase コンソールでは Email Link と Phone が標準でサポートされています（公式ドキュメント：https://firebase.google.com/docs/auth/web/email-link-auth、https://firebase.google.com/docs/auth/android/phone-auth）。

コンソール左メニュー → Authentication → Sign‑in method。
Email/Password のスイッチをオフにし、代わりに Email Link (passwordless) をオンにする。
「Continue URL」に FlutterFlow アプリのホスト（例：https://myapp.flutterflow.io）を入力。
同画面で Phone プロバイダーもオンにし、SMS テンプレートと利用可能な電話番号リストを設定。
必要に応じて Authorized domains に自ドメイン（例：myapp.com）を追加。

実装例：FlutterFlow Action で作るノーコード ToDo アプリ

この章では、実際に「ToDo」アプリを構築しながら、認証フローと Firestore の CRUD 操作を FlutterFlow の Action 機能で組み立てる手順を示します。コードを書かずに完結できる点が FlutterFlow の大きな魅力です。

認証フローの構築

LoginPage に「Email」テキストフィールドと「Password」テキストフィールド（メールリンク使用時は非表示）を配置。
「サインイン」ボタンの On Tap アクションで Authentication > Sign in with Email Link を選択し、Redirect URL に https://myapp.flutterflow.io/home を設定。
新規登録用に「アカウント作成」ボタンを追加し、同様に Sign up with Email Link アクションを割り当てる。

ポイント：メールリンクは一度クリックすると自動的に認証状態が保持され、FlutterFlow の変数 auth.uid が利用可能になります。

Firestore に対する CRUD Action の組み立て

操作	使用する Action	主な設定項目
Create（タスク追加）	Firestore > Add Document	コレクション：`todos/{auth.uid}`、フィールド `title`, `completed: false`, `ownerUid: auth.uid`
Read（一覧取得）	Firestore Query	コレクション：`todos/{auth.uid}`、リアルタイム更新オン、`where('ownerUid', isEqualTo: auth.uid)`
Update（完了ステータス切替）	Firestore > Update Document	対象ドキュメント ID → `{{item.id}}`、フィールド `completed` を反転
Delete（削除）	Firestore > Delete Document	ドキュメント ID → `{{item.id}}`

実装手順（例：タスク追加ボタン）

テキスト入力欄の値を変数 newTask に保存。
ボタンの On Tap で「Add Document」Action を選択し、上記設定を行う。
成功時は Show Snackbar → 「タスクが追加されました」と表示。

デバッグ・テスト方法

プレビュー機能：FlutterFlow の左上メニューから Run Mode に切り替え、実際に UI 操作しながら Firestore コンソールでデータ変化を確認。
ログ確認：Firebase コンソール → Authentication / Firestore の Logs タブで permission-denied などのエラーメッセージをチェック。
一般的な対処：RBAC ルールが原因の場合は、request.auth.token.role が期待通りに設定されているか Cloud Functions のログで検証。

ビルド・デプロイ：コードエクスポートから App Store / Google Play リリースまで

完成した FlutterFlow プロジェクトを実際のアプリとして配布する手順です。2026 年版 iOS 審査では プライバシーポリシー URL の必須化 が追加され、Android でも AAB（.aab）形式が唯一の配布形態となっています（公式ガイド：https://developer.apple.com/app-store/review/guidelines/、https://support.google.com/googleplay/android-developer/answer/9842756）。

コードエクスポート手順

プロジェクトダッシュボード右上の Export Code ボタンをクリック。
「Flutter (ZIP)」形式でダウンロードし、任意の作業ディレクトリに解凍。
解凍後に flutterflow ディレクトリが生成され、android/, ios/, lib/ が含まれます。

Android Studio でのビルド

Android Studio → Open an existing project → 解凍した android/ フォルダを選択。
google-services.json が app/ 配下にあることを確認し、File > Sync Project with Gradle Files を実行。
デバッグビルドは Run > app でエミュレータまたは接続デバイスへインストール。
リリース用 AAB ファイルはターミナルから次を実行：

bash ./gradlew bundleRelease

生成物は build/app/outputs/bundle/release/app-release.aab に出力されます。

Xcode でのビルド（iOS）

ios/Runner.xcworkspace を Xcode で開く。
GoogleService‑info.plist がプロジェクトに正しく追加されているか確認し、Signing & Capabilities タブで Apple Developer アカウントを選択。
Product > Archive を実行してビルド完了後、Organizer から Distribute App → App Store Connect にアップロード。

ストア提出時のチェックリスト

項目	Android	iOS
バージョンコード / ビルド番号	`versionCode` が整数でインクリメント	`CFBundleVersion` と `CFBundleShortVersionString` を更新
プライバシーポリシー URL	Google Play Console の App content > Privacy policy に入力	App Store Connect の App Information > Privacy Policy URL 必須
スクリーンショットサイズ	1080×1920（各デバイス別）	6.5インチ iPhone 用 1280×2778 px が必須
テストトラックの実施	Internal testing → 数名でクラッシュ確認	TestFlight でベータテスターへ配布し、レビュー前にフィードバック取得
AAB / IPA の署名	`upload` キーでサイン	Xcode の自動署名または手動プロビジョニング

注意：2026 年 2 月以降、Apple は「App Store Connect UI が統合」されたため、プライバシーポリシー入力画面が新しいデザインに変わっています。最新のスクリーンショットは公式ヘルプ（https://developer.apple.com/help/app-store-connect/）で確認してください。

まとめと次のステップ

アカウント統一：同一 Google アカウントで FlutterFlow と Firebase を作成し、プロジェクト間のリンクを確立。
プラットフォーム別設定：Web の API キー・iOS/Android 用 plist / json を取得し、OAuth 2.0 クライアントに正しいリダイレクト URI を登録。
FlutterFlow 接続：Project Settings → Integrations で情報を入力し、接続テストで成功を確認。
RBAC と認証：カスタムクレームでロール付与し、Firestore/Realtime Database の RBAC ルールを適用。メールリンクと電話認証を有効化してパスワードレス体験を実装。
ノーコード実装例：Authentication と Firestore Action を組み合わせ、ToDo アプリの CRUD を UI ベースで完成。デバッグはプレビューとコンソールログで行う。
ビルド・リリース：コードエクスポート後に Android Studio / Xcode でビルドし、プライバシーポリシー URL やスクリーンショットを整えて各ストアへ提出。

これらの手順を順番に実行すれば、2026 年版の最新要件に準拠した FlutterFlow + Firebase アプリをゼロから構築し、App Store と Google Play の両方でリリースできるようになります。次は実際に自分のプロジェクトでカスタムクレームや RBAC ルールを試し、ユースケースに合わせて権限設計を洗練させてみましょう。