今回は、FlutterFlowで作成した既存プロジェクトにFirebaseを接続する方法を紹介します。
Firebaseプロジェクトの作成
画面左のナビゲーションメニューのSettings > Project Setup > Firebase を選択します。
Create Projectボタンをクリックし、Firebaseプロジェクトの作成を行います。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44a8dd7eedc0318040d_65bc98a142c85abc899c9d6f_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-02%252015.13.14.png)
ProjectNameを入力します。このProject NameがFirebaseのProject Nameとなります。
Firebase Project Regionは、asia-northeast1(Tokyo)を選択します。ご自身に最も適したリージョンを選択してください。
プロジェクト作成ご、Firebase Project Regionの変更はできません。
Sign in with Googleボタンをクリックします。
そうすると、Google連携モーダルが立ち上がるので、自分のGoogleアカウントを選択し、権限を許可してください。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44a8dd7eedc03180431_65bc98ad2835ea18c710c0d1_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-02%252015.13.41.png)
上記の手順を実行すると、プロジェクト作成されます。
以下の画面は、プロジェクト作成中の画面です。
説明文にある通り、Firebaseプロジェクト作成に3-5分かかりますので、待ちましょう。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44a8dd7eedc03180443_65bc9564f8a086e40cfb50ba_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-02%252015.14.00.png)
Firebaseプロジェクトが作成されました。
Firebase Authenticationを有効にする
次にFirebase Authenticationを有効にします。
Firebase Authenticationを有効にしなければ、FirestoreのCollectionにコンテンツ追加編集を行うFirebase Content Managerを使用できません。
Firebase Content Managerを使えるようにするため、Firebase Authentication で メール/パスワード サインインを有効にしましょう。
Enable Auth On Firebaseボタンをクリックし、Firebaseの画面を開きましょう。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44a8dd7eedc03180410_65bc98bf1cadbd89f04de9fe_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-02%252015.16.30.png)
Firebase Authentication の画面が開かれます。
始めるボタンをクリックしてください。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44a8dd7eedc03180422_65bc98c7c9b4680656b6a60e_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-02%252015.16.43.png)
ログイン方法のタイプを選択してください。
ここでは、メール/パスワードを選択してください。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44a8dd7eedc03180428_65bc98d91a30a3b4a2556536_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-02%252015.17.02.png)
メール/パスワードのトグルボタンを有効にし、保存ボタンをクリックしてください。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44a8dd7eedc0318042e_65bc98e273f2d9716d0777e3_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-02%252015.17.13.png)
これでFirebase Authenticationの メール/パスワード 認証 が有効になりました。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44a8dd7eedc0318042b_65bc98eed2ab58d7a591c820_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-02%252015.17.24.png)
設定ファイルの作成
FlutterFlowの画面に戻りましょう。
次に、Auto Generate Config Filesボタンをクリックし、設定ファイルを作成しましょう。
設定ファイルは、Firebaseに接続する際に必要です。
設定ファイルには、FlutterFlowプロジェクトとFirebaseサービスを通信するための様々な設定やキーが含まれています。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44a8dd7eedc03180434_65bc98f85b147be9e98401be_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-02%252015.17.47.png)
Generate Filesボタンをクリックします。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44a8dd7eedc03180437_65bc9902e07c32fd8e2b27ab_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-02%252015.17.56.png)
Firebase Setup Complete! と表示されました。
これで設定ファイルが生成され、FlutterFlowプロジェクトとFIrebaseが接続されました。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44a8dd7eedc03180440_65bc990bbff35ecccd1e7987_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-02%252015.18.29.png)
さいごに
今回は、FlutterFlowで作成した既存プロジェクトにFirebaseを接続する方法を紹介しました。
FlutterFlowのプロジェクト上からFirebaseのプロジェクト作成できたり、設定ファイルなどをデプロイできたり、Firebaseとの連携が非常に簡単にできたかと思います。
煩わしいDBとの接続がわずか数ステップで済み、非常に魅力的に感じました。
またFirebaseの機能を深掘りしたり、Firebaseの他にもSupabaseとも連携ができるのでSupabaseの記事も充実されていけたらと思います。