XI本部 プロダクトイノベーションセンター アジャイル開発グループの徳山です。
前回の記事「FlutterFlowに制約はある？できることとできないこと」では、FlutterFlowを使った開発における制約や注意すべきポイントをお伝えしました。今回は、FlutterFlowと相性の良いバックエンドサービスであるFirebaseとの連携について詳しく説明いたします。
- はじめに
- Firebaseとは何か
- FlutterFlowの接続先について
- Firebaseとの接続方法（環境構築手順）
- Firebase サービスとの連携
- Supabaseとの違い
- まとめ
- 参考資料
はじめに
本記事の目的は、Firebaseの基礎やFlutterFlowと連携する際の基本的な手順を紹介し、初めてノーコード開発やローコード開発に取り組む方やビジネスマンの方に役立つ情報を提供することです。Firebaseを使うことでモバイルアプリ開発のバックエンド部分を簡略化し、効率的にプロトタイプから本格的なサービス開発へと進むことができます。
FlutterFlowの基本的な知識については、記事「FlutterFlowとは？ノーコードでスマホアプリ開発を始める方法」や「FlutterFlowに制約はある？できることとできないこと」をご参照ください。
また、本記事は2024年10月時点の情報に基づいたものとなります。
Firebaseとは何か
Firebaseは、Googleが提供するBaaS（Backend as a Service）であり、バックエンドの機能開発を簡素化するための多くの機能を提供しています。主な機能には次のものがあります。
- Firebase Authentication: パスワード認証や多要素認証といったユーザー認証を簡単に実装できます。例えば、アプリに「Googleでサインイン」ボタンを設置するだけで、ユーザーはGoogleアカウントで簡単にログインできるようになります。
- Firestore Database: 高速で拡張性のあるNoSQLデータベースです。データをリアルタイムで同期できます。例えば、「チャットアプリ」のように、複数のユーザー間でリアルタイムにメッセージを送受信する場合などにも利用できます。
- Cloud Storage: 画像や動画などのファイルの保存に適したクラウドストレージです。たとえば、プロフィール画像のアップロード機能などに利用できます。
FlutterFlowはこれらのFirebaseサービスを簡単に活用できるように設計されています。バックエンドの実装が簡素化できるのでFlutterFlowでの機能開発に集中できます。
FlutterFlowの接続先について
先述の通り、FlutterFlowでデータを管理するためにはバックエンドとの接続が非常に重要です。FlutterFlowが提供するバックエンドの接続先としては、主に以下の2つがあります。
1. 標準でサポートされているバックエンド（FirebaseやSupabase）
FlutterFlowは、デフォルトでFirebaseやSupabaseとシームレスに連携できます。Supabaseは比較的新しいサービスで内容も魅力的なのですが、FlutterFlowではFirebase連携の方がより早く機能追加される傾向にあるため、ここではFirebaseを用います。
2. API Connector
[初心者の方にも分かりやすいようにAPIでデータを取得する簡略図を作成してここに貼る]
標準のFirebase/Supabaseバックエンド以外のサービスを使いたい場合、FlutterFlowのAPI Connector機能を使用することで、REST APIを介して他のバックエンドサービスと連携できます。これにより、Firebase以外の独自バックエンドや他のパブリックAPI（分かりやすいものだと住所や天気、株価などを取得できるAPI）と連携が可能になります。
Firebaseとの接続方法（環境構築手順）
FlutterFlowでFirebaseと連携するためには、いくつかの設定を行う必要があります。英語の見慣れない画面に難しく感じる方もいるかもしれませんが公式のドキュメントにもしっかり記載されているのでそちらも合わせてご参照ください。
事前準備
Firebaseを利用するにあたり、Google アカウントが必要となります。アカウントを作成していない場合は、事前に作成しておいてください。
1. FlutterFlowのプロジェクト作成画面を立ち上げる
まずは、FlutterFlowにログイン後に「Create Project」よりプロジェクトを作成します。
するとステップ1の画面が表示されるのでSetup Firebaseのトグルがオンになっていることを確認します。確認後、「Next Step」で次の画面に進みます。
2. Firebaseのプロジェクトを作成
ステップ2の画面では、実際にFirebaseのセットアップを行います。
ここでは、FlutterFlowからFirebaseプロジェクトを新規作成する場合と、FlutterFlowを既存のFirebaseと連携する場合に分けて解説します。
FlutterFlowからFirebaseのプロジェクトを作成する場合
「Create Project」ボタンからFirebaseのプロジェクト設定モーダルを開き、Firebaseで作成するプロジェクト名やリージョンを選択します。指定がなければプロジェクト名はそのまま、リージョンはasia-northeast1（Tokyo）を選択します。
Google アカウントにサインインすることで、FlutterFlowにFirebaseプロジェクトへアクセスや操作する権限が付与され、自動的にFirebaseのプロジェクト作成が開始されます。
作成が完了すると、下図の表示となります。
FlutterFlowを既存のFirebaseと連携する場合
既存のFirebaseプロジェクトのプロジェクトIDを入力する必要があるため、まずは連携したいFirebaseプロジェクトの管理コンソールからプロジェクトIDを取得します。FlutterFlowに戻り、取得したIDを入力して「Connect」をクリックします。すると、下記のようなエラーが表示されます。
これはFlutterFlowにFirebaseプロジェクトへのアクセスや操作の権限が与えられていないためです。そのため、既存のプロジェクトと連携する場合はFirebase管理コンソールからFlutterFlowに必要なアクセス権限を追加する必要があります。
下図のようにFirebase管理コンソールから「ユーザーと権限」タブに移動し、「メンバーの追加」ボタンをクリックします。
メールアドレスにfirebase@flutterflow.ioを入力し、役割は「編集者」を選択します。
設定後、「メンバーを追加」をクリックするとFirebaseのアカウントが追加されたことを確認できます。
FlutterFlowのセットアップ画面に戻り、再度「Connect」をクリックします。すると連携が成功します。
連携は成功しましたが、FirebaseのCloud Functionsという機能を使う場合はfirebase@flutterflow.ioに以下の2つのロールを追加します。
- サービス アカウント ユーザー
- Cloud Functions 管理者
Cloud Functionsはイベントに対して特定の処理を実行できる機能です。例えば、「ユーザーがログインした際に自動で通知を送る機能を実装したい」場合はCloud Functionsを使用するために設定が必要になります。
追加するには、先ほどのFirebase管理コンソールの「ユーザーと権限」の右下にある「権限に関する詳細設定」のリンクをクリックしてGoogle Cloud の管理画面に移動します。
firebase@flutterflow.ioの右に表示されている鉛筆アイコンをクリックし、「別のロールの追加」からサービス アカウント ユーザーとCloud Functions 管理者を追加して保存します。
下図のようにロールが変更されていれば完了です。
3. FlutterFlowのプロジェクトの作成
最後に「Start Building」ボタンをクリックして完了です。これでFlutterFlowとFirebaseのプロジェクトの作成と連携が完了です。
実際にはFirebaseの各種サービス（認証やストレージ、データベースなど）を利用するにはFlutterFlowとFirebaseでさらに追加の設定が必要となります。詳細なステップについては、FlutterFlowの公式ドキュメントやFlutterFlow公式 YouTube動画をご確認ください。
Firebase サービスとの連携
続いて、Firebaseの認証やデータベース、ストレージとの連携についても解説します。すでにFlutterFlowとFirebaseの接続と権限設定が済んでいるため簡単に連携が可能です。
事前準備
Firebaseのサービス（Firebase Authentication, Firestore Database , Cloud Storage）を使うための設定を行います。
FlutterFlowのFirebaseの設定画面を開き、プロジェクトIDの入力欄下にある「Generate Config Files」をクリックします。
これでFlutterFlowからFirebaseのサービスと連携するための準備が完了しました。
認証（Firebase Authentication）について
下図のAuthenticationのページから「Enable Authentication」トグルをオンにして認証を有効にします。
続いてFirebaseの設定画面を開き、「Enable Auth On Firebase」をクリックします。
すると、Firebase Authenticationの管理コンソール画面が開くので「始める」をクリックします。
「ログイン方法」タブ →「ネイティブのプロバイダ」→「メール/パスワード」を選択します。
続いて、メール/パスワードの「有効にする」トグルをオンにして保存します。
これで、FlutterFlowのプロジェクト内でメール/パスワードによる認証が使えるようになりました。
データベース（Firestore Database）について
FlutterFlowのサイドメニューからFirestoreを選択肢、「＋」ボタンをクリックします。
コレクションの入力モーダルが表示されるので、ユーザー情報用のコレクションを作成するためusersと入力し、「Create」をクリックします。
FlutterFlowで用意しているユーザー用の設定を使うか確認されますが、設定の流れを確認するために「No, Thanks」を選択します。
usersコレクションが正常に作成されました。
次に、どのようなデータ（ユーザーの名前やメールアドレスなど）を扱うかを設定できるフィールドを設定します。
FlutterFlowでは自分で必要なフィールドを1つずつ設定することはもちろん、AIの力を借りることやFlutterFlowで用意しているデフォルトの定義を利用することもできます。
今回はFlutterFlowの用意しているユーザー用の定義を利用します。
選択後、用意されていたフィールドが反映されたusersコレクションを確認できます。
次に、誰がどのような権限でusersコレクションにアクセスできるのかを設定しましょう。
下図の設定ページへのリンクをクリックし、Firestoreの設定画面に移動します。
ここでは作成したコレクションへのアクセス権限の設定を行うことができます。作成するアプリの要件に応じて適切に設定してください。操作ごとにアクセス対象範囲は下記の4つが選択できます。
- No One：誰もその操作を行うことができません。
- Tagged Users: 指定したフィールド（nameやemailなど）にデータが登録されているユーザーだけ操作を行うことができます。
- Authenticated Users: ログインしているユーザーのみ操作を行うことができます。
- Everyone: 誰でも操作を行うことができます。
設定ができたら「Deploy」をクリックします。
設定するアクセス権限のルールが表示されますので、問題なければ「Deploy Now」をクリックします。
これでFirestore Databaseを利用できるようになりました。
ストレージ（Cloud Storage）について
ストレージはファイルアップロード機能などを利用する場合のみ設定を行います。
まず、認証と同様にFlutterFlowのFirebaseの設定画面を開いて「Enable Storage On Firebase」をクリックします。
Cloud Storageの管理コンソール画面が開くので「始める」をクリックします。
「テストモードで開始する」を選択して「次へ」をクリックします。
リージョンの選択画面に移りますが、Firebaseのプロジェクトのリージョンが選択されているので「完了」をクリックします。
これでCloud Storageも利用できるようになりました。
使用例
ここではFirebase AuthenticationとFirestore Databaseの実際の使用例について解説します。
以下のページを作成して、簡易的なユーザーの新規登録機能とタスクの登録機能を実装します。
- 認証用ページ：新規登録、ログイン用のページ
- タスク一覧ページ：ログイン後に表示されるページ。登録したタスクの一覧を表示します。
- タスク登録ページ：タスクを新規登録するためのページです。
コレクションの準備
ユーザー（users）とタスク（todos）のデータを管理するために2つのコレクションを作成します。
usersはFlutterFlowで用意されているユーザー登録用のコレクションを利用します。
todosは「タスク名、ログインしているユーザーの情報、作成日時」を取得できるように設定します。
認証用ページ
FlutterFlowでは便利なページテンプレートが用意されているためそちらを利用します。
認証用ページ
「Auth」の中から任意のものを選択して認証用のページを追加します。
テンプレート内ですでにログイン用のアクションが設定されているので、簡単に認証機能を実装できます。
テンプレートを利用すると、すでに認証に必要なアクションが設定されているため認証ページを簡単に作成できます。
タスク一覧ページ
タスク一覧ページは空のページを作成します。ログインしたユーザーのメールアドレスを確認するためのTextウィジェットと登録したタスクの一覧を表示するためのListViewウィジェットを配置します。右上には、タスク登録ページへ遷移するための「＋」アイコンをIconButtonウィジェットで配置します。
Textウィジェットには、ログインしたユーザーのメールアドレス情報がテキストに反映されるように設定します。
ここに表示されるオプションは、先ほど作成したusersコレクションに基づいています。
ListViewウィジェットには、todosコレクションの情報が反映されるように設定します。
タスク登録ページ
タスクを登録するためのページを作成します。タスクを入力するためのInputFieldウィジェット、入力内容をチェックするためのFormウィジェット、入力されたタスクをtodosコレクションに登録するためのButtonウィジェットを配置しているだけのシンプルなページです。
最後に、初期表示されるページとログイン後のページを設定しておきます。
動作確認
では、テストモードでアプリを起動して動作確認をしてみましょう。
テストモードは右上のアイコンから起動できます。
新規登録のフォームに必要事項を入力します。
「登録する」をクリックすると、タスク一覧ページに遷移します。登録したメールアドレスも反映されています。
右上の「＋」アイコンよりタスク一覧ページへ遷移し、タスクを入力します。
「登録する」ボタンをクリックすると、タスク一覧ページへ遷移し、入力したタスクが表示されていることを確認できます。
Firestoreにデータが登録されているか確認してみましょう。
「Manage Content」よりFirestoreに登録されているデータを確認できます。
ユーザーのデータは下図のように表示されています。
タスクのデータは下図のように表示されています。
以上でFirebase AuthenticationとFirestore Databaseを利用できていることが確認できました。
Supabaseとの違い
Firebaseの他に、SupabaseというBaaSサービスとFlutterFlowは連携が可能です。どちらも優れたバックエンド機能を有するサービスですが、FlutterFlow上では扱いが少し異なります。
Firebaseに関しては、画像やデータの追加、データへのアクセス設定などFirebaseの各種サービスをFlutterFlowのメニューから直接操作できます。
一方、Supabaseの場合はテーブル定義のみFlutterFlowで閲覧できるなど参照できる情報が限定的です。FlutterFlowと連携して扱うことができる機能に両者で大きく差はないものの、開発経験があまりない方はFirebaseで開発を始めることをおすすめします。
まとめ
今回は、FlutterFlowとFirebaseを連携する方法について、Firebaseの特徴から連携方法、Supabaseとの違いを解説しました。Firebaseを活用することでFlutterFlowでの開発を効率化し、認証やデータ管理の手間を省くことが可能です
次回は、FlutterFlowとFirebaseを利用した簡単な社内業務アプリを作成します。ここまで解説した内容を踏まえた記事となりますので、まだ読まれていない方はぜひ下記の記事も閲覧していただければ幸いです。
- FlutterFlowとは？ノーコードでスマホアプリ開発を始める方法
- FlutterFlow vs Adalo：ノーコードモバイルアプリ開発ツールの比較
- FlutterFlowに制約はある？できることとできないこと
参考資料
執筆：@tokuyama.raido、レビュー：@nagamatsu.yuji
（Shodoで執筆されました）
