今回は、FlutterFlowでアプリを作ってみます！
FlutterFlowとは、かなり複雑なネイティブアプリを作れるノーコード（ローコード）ツールです。
FlutterFlowについて詳しくはこちら↓
ネイティブアプリを10倍速で作れるノーコードツールFlutterFlowとは？Adaloとの違いも合わせて解説
最初は特にfirebaseとかの設定が難しかったりするので、ハマる方も多いと思いますが（僕は結構ハマりました汗）、挫けず頑張っていきましょう！
FlutterFlowはその努力に見合ったリターンがあります。このノーコードとは思えないレベルの高さは魅力的です。
では初めていきましょう。
今日は「FlutterFlowの開発準備編」です。主にFlutterFlowのアカウント・プロジェクトの作成からFirebase側の設定と接続について書いていきたいと思います。
FlutterFlowアカウントの作成
まずは https://flutterflow.io/ からアカウントを作成しましょう。
Projectの作成
「Create New」ボタンからアプリを作成します。
Project Nameをテキトーにつけて、Create Blackを選択します。
Next Stepを押します。
以下のような画面が表示され、Firebase Project IDを求められます。
ですので、今度はfirebaseのページにいきましょう。
Firebaseの設定
まずはfirebaseにログインし、「Add Project」でプロジェクトを作成します。
すると以下のような画面が表示されるのでプロジェクト名をテキトーにつけましょう。
次のページはGoogleアナリティクスの設定です。とりあえずアプリを試したいだけなら設定しなくてよいので、トグルボタンをOFFにして次に進みましょう。
↑こんな画面になったらプロジェクトが作成できました。Contineをおして次へ進みましょう。
Project OverviewのUsers and permissionsを選択します。
Add memberから「firebase@flutterflow.io」を選択し、Editor（編集者）とします。
↑上記画面の右下の青いリンク「Advanced permission setting」をクリックします。
遷移先の画面のリストから「firebase@flutterflow.io」の右側の鉛筆マークから編集画面に行きます。
以下の画面の「＋ADD ANOTHER ROLE」から「Service Account User」と「Cloud Functions Admin」を追加します。
※私の場合、Cloud Function Adminが選択肢に出てこない場合がありました。その場合、Cloud Function APIをenableにするという設定が必要かもしれません。
次に、BuildのAuthenticationを選択します。
すると以下のような画面が表示されるので、Get Statedをクリックします。
Email/Passwordを選択し、
Email/PasswordをEnableにしてSaveします。
同様に、「Firebase Database」と「Storage」もGet Startedしましょう。
Project OverviewのProject settingsからProject IDをコピーします。
以下FlutterFlowの画面に戻り、Project IDをペーストし、Connectします。
次は、Auto Generate Config Filesをクリックし、Generate Filesをします。
次に、Enable Authentication をONにします。これはユーザー認証機能を使うよーという意味ですね。
さらにCreate user CollectionもONにします。これはユーザーテーブルを自動生成してくれる機能です。
次は、Select Initial Pagesからページを作成・選択します。
Entry Pageとは、未ログインのユーザーが最初に来るページです。通常SignUp画面ですね。
Logged in Pageとは、ログイン済みのユーザーが最初にくるページです。通常HOME画面のようなページですね。
Entry Pageの「Unset」と書いてるところをクリックすると、ページテンプレートの選択画面へ遷移します。
Authタグを選択すると、認証系のページがたくさん出てくるので、この中からEntry Pageを選びます。好きなSignupページのテンプレートを選びUse My Themeをクリックしましょう。（ゼロから作りたい人はテンプレートではなくBlank PageでOKです。）
私はSimple 3 -Create Accountというテンプレートを選んでみました。名前は「SignUp」というページ名にしました。
同様に、Logged in Pageも選択します。
私はHOME画面はインスタのような写真のリストがあるページにしようと思うので、
ListsにあるHomeSocial_2のテンプレートを選択してみました。名前は「Home」としました。
最後に、「Start Building」のオレンジのボタンを押して、いよいよ開発開始です。
続きはこちら
今回の記事ではここまでです。続きは以下に書いてますのでご覧ください。
【初心者向け】FlutterFlowで簡単なアプリを作ってみよう（ビルド〜SignUpまで編）
また、動画で見た方がわかりやすい方は↓Youtube動画もあります。
Youtube動画での解説はこちら
動画で見た方がわかりやすいと思う方はこちらをどうぞ。
FlutterFlowのプロジェクトの作成・Firebase側の設定・構築からリストにデータを表示させるところまでをゼロから説明しています。
【初心者向け】FlutterFlowで簡単なアプリを作ってみよう（開発準備編）：まとめ
今日はFlutterFlowでの開発準備、アカウント作成からFirebase側の設定、FlutterFlowとFirebaseの接続を書いてきました。
FlutterFlowはある程度学習期間が必要
やってみていかがでしょう？...結構大変ですよね！
最初が特にわかりにくいですし英語のドキュメントばかりなので挫折する人も多いかと思いますが、楽しいアプリ作りのための最初のハードル・準備だと思って、ここは乗り越えましょう！
挫折した人はAdaloもオススメ
逆に「もうダメ！（涙）」と挫けてしまった方は、Adaloの方がいいかもしれません。
Adaloであれば、FlutterFlowほどたくさんできるわけではないですが、学習期間が圧倒的に短くてすみ、開発も圧倒いう間にできてしまいます。機能の充実性・柔軟性より学習の簡単さ・開発のスピードを優先するならAdaloもおすすめです。
目的に合わせて最適なノーコードツールを選択してみてください。
次回以降は、FlutterFlowでのfirebaseでのデータベースの構築やデータの持ってき方を書いていきたいと思います。
アプリ・Webサービスの開発の無料相談はこちら
Adalo、bubble、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。
アプリ、Webサービス、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。