【この記事で完結！】FlutterFlowとFirebaseの接続方法：サインアップまでの詳細ガイド
こんにちは。
ノーコードを使用してプロダクト開発をさせていただいている蒼士(@Soushi_nocode)と申します。
さて、ここからが本題です。
☑️はじめに
近年、ノーコードアプリ開発の需要が急速に増加しています。
ノーコードアプリ開発とは、アプリ開発を簡素化し、プログラミングスキルなしでアプリ開発をすることができる新しいアプローチです。
企業や個人が迅速かつ効果的にアプリケーションを開発してビジネスプロセスを最適化する手段としてノーコードプラットフォームは注目を浴びています。
しかし、ノーコードアプリ開発をするためのツールは多くあり、正しいツールとプラットフォームの選択が鍵となります。
様々なノーコードアプリ開発の中でも、FlutterFlowとFirebaseの組み合わせは特に開発の効率性と柔軟性の両方を提供します。
この記事では、そのFlutterFlowとFirebaseを使用してアプリ開発をするにあたって、導入のFlutterFlowとFirebaseの接続方法、また、サインアップまでを詳細に説明します。
☑️FlutterFlowとFirebaseの概要
FlutterFlowとは？
近年、FlutterFlowはノーコードアプリ開発の中でも驚異的な進化を遂げています。
FlutterFlowによって、ユーザーインターフェース（UI）デザインから実装まで、あらゆるステップがシームレスに統合され、迅速なアプリケーション開発が可能になります。
このプラットフォームを使えば、アプリケーションのプロトタイピング、デザイン、コーディング、ソースコード出力など、あらゆる側面を包括的にカバーすることができます。
なので、ノーコードアプリ開発でも、スクラッチで開発するレベルに迫るアプリを開発することができ、また、将来的にはスクラッチ開発（Flutterでの開発）への移行をスムーズに行うこともできます。
このように、FlutterFlowはアプリケーション開発プロセスをシンプルにし、同時に高品質のアプリケーションを構築するためのツールとして、多くの開発者に支持されています。
Firebaseとは？
Firebaseは、Googleによって提供されるクラウドベースのアプリ開発プラットフォームであり、ノーコードアプリ開発においてバックエンドの構築を強化、効率化します。
Firebaseは、リアルタイムデータベースやユーザー認証機能、アプリ利用状況の解析、クラッシュ分析、プッシュ通知などの機能を提供しており、アプリのパフォーマンスとセキュリティを向上させてくれるクラウドプラットフォームです。
このようにFirebaseは、豊富な機能を提供しており、かつ、サーバー管理と保守を容易にしてくれるため、アプリケーション開発において非常に有用なツールです。
☑️FlutterFlowとFirebaseを接続
１. FlutterFlowでの設定①
まずは、FlutterFlowの公式ページの「Start for free」からアカウントを用意し、ログインします。
「＋ Create New」をクリックしてアプリを新規作成します。
プロジェクトの名前を決め、「Create Blank」をクリックします。
「Next Step」をクリックします。
下記の画面になれば、一旦FlutterFlowでの設定は終わりです。
次は、Firebaseでの設定をしていきます。
２. Firebaseでの設定①
まずは、Firebaseの公式ページの「使ってみる」からアカウントを用意し、ログインします。
「プロジェクトを追加」をクリックしてプロジェクトを新規作成します。
プロジェクトの名前を決め、「続行」をクリックします。
次にGoogle アナリティクスを設定するページに遷移しますが、今回はテストで利用しないので、チェックをオフにして「プロジェクトを作成」をクリックします。
ローディングが終わり、下記の画面になればプロジェクトの作成は完了なので、「続行」をクリックします。
サイドバーの設定アイコンをクリック後、「プロジェクトの設定」をクリックします。
「ユーザーと権限」をクリックします。
「メンバーの追加」をクリックし、"firebase@flutterflow.io"を「編集者」に設定をして「メンバーを追加」をクリックします。
「権限に関する詳細設定」をクリックします。
先ほど追加した"firebase@flutterflow.io"の鉛筆アイコンをクリックします。
「別のロールを追加」をクリックして
・Cloud Functions 管理者
・サービス アカウント ユーザー
を追加して「保存」をクリックします。
保存できたら、Firebaseの画面に戻り、サイドバーの「Authentication」をクリックします。
「始める」をクリックします。
「新しいプロバイダを追加」をクリックします。
ログイン方法を選択する必要があるので、「メール / パスワード」をクリックします。
「メール / パスワード」をオンにして、「保存」をクリックします。
サイドバーの「Firestore Database」をクリックします。
「データベースの作成」をクリックします。
今回はテストなので、「テストモードで開始する」を選択して「次へ」をクリックします。
続けてロケーションを選択する画面ですが、日本では
・東京：asia-northeast1 (Tokyo)
・大阪：asia-northeast2 (Osaka)
があります。
当記事では「asia-northeast1 (Tokyo) 」を選択しましたが、近い方を選択して「有効にする」をクリックします。
サイドバーの「Storage」をクリックします。
「始める」をクリックします。
Firestore Databaseでの設定と同様に、「テストモードで開始する」を選択して「次へ」をクリックします。
「完了」をクリックします。
サイドバーの設定アイコンをクリック後、「プロジェクトの設定」をクリックし、「プロジェクト ID」をコピーします。
３. FlutterFlowでの設定②
FlutterFlowの画面に戻り、先ほどコピーしたプロジェクト IDを貼り付け、「Connect」をクリックします。
「Auto Generate Config Files」をクリック後、「Generate Files」をクリックします。
「Enable Authentication」と「Create user Collection」をオンにしておきます。
「Enable Authentication」によって、上記で述べたFirebaseのユーザー認証機能が利用可能になります。
「Create user Collection」によって、ユーザーコレクションが自動で生成されます。
Entry Pageの設定をするために、左側の「Unset」をクリックます。
Entry Pageとは、未ログインのユーザーが訪れる画面であり、つまり、SignUp画面になります。
SignUp画面であればなんでもいいのですが、ここでは「Create Acccount 1」というページを選択し、ページ名を「SignUp」として「Create Page」をクリックしてページを作成しました。
同様に、Logged in Pageの設定もするために、右側の「Unset」をクリックます。
Logged in Pageとは、ログインしているユーザーが訪れる画面であり、つまり、ホーム画面になります。
ホームっぽい画面であればなんでもいいのですが、ここでは「List 13 - Property Listview」というページを選択し、ページ名を「Home」として「Create Page」をクリックしてページを作成しました。
「Start Building」をクリックすると、設定は完了です。
☑️SignUpをやってみる
せっかくなので、SignUpからホーム画面への遷移までを実装してみたいと思います。
「Create Account」のボタンをクリックすることで、SignUpをしてホーム画面に遷移をさせたいので、「Create Account」のボタンを選択してアクション設定の画面を開きます。
SignUpのアクションはデフォルトで設定されているので、SignUp後の画面遷移を実装していきます。
下記画像のように設定をします。
①「＋」をクリック
↓
②「Add Action」をクリック
↓
③「Navigate To」をクリック
↓
④「Home」をクリック
設定できたら、「Close」をクリックしてアクション設定の画面を閉じて、画面右上の雷アイコンをクリックしてデプロイします。
デプロイ完了まで数分かかります。
デプロイ完了後、サインアップをしてみます。
あれ？？
画像の入力内容ではサインアップできないと思ったら、サインアップできないのは、Firebaseのデフォルトのパスワードポリシーにはじかれていたことが原因であるようです。
仕切り直してやってみると、無事SignUp後にホーム画面に遷移をすることができました。
☑️まとめ
今回は、FlutterFlowとFirebaseを接続する方法、また、サインアップまでの実装方法を紹介してみました。
FlutterFlowとFirebaseの組み合わせは、ノーコードアプリ開発者にとって強力なツールであり、アプリケーションの品質向上と効率的な開発プロセスを可能にします。
FlutterFlowは他のノーコードツールと比較して難易度は高いですが、その反面実装の柔軟性が高く、ソースコードの出力も可能でありFlutterでの開発にもスムーズに移行することができます。
今回の記事を参考にぜひ、FlutterFlowを使用したアプリ開発を始めてみてはいかがでしょうか。
また、自分はノーコードを使用したプロダクト開発をご支援させていただいております。
チームには、サイバーエージェント、NTTデータ、NTTドコモ等でPM（PdM）／PjM／UIUXデザインなどを任されたメンバーやノーコードエキスパート等が在籍しており、ご要望次第では、一貫したご対応が可能になります。
無料でのアプリ開発のご相談、無料でのサンプルアプリの作成も可能なので、ご興味がございましたら、お気軽にご連絡をいただければと思います。
BubbleやAdalo、FlutterFlow等を使用したノーコード開発案件にご興味があるエンジニア様も、お気軽にご連絡をいただければと思います。
【こちらの記事もおすすめ】
最後までご覧いただき、ありがとうございました！
この記事が気に入ったらサポートをしてみませんか？