FlutterFlowで作成！テンプレートでタスク登録アプリ ー 第1回 はじめてみよう。
こんにちは！ 今回はBubbleではなく、ネイティブアプリが作成できる、ローコードビルダーのFlutterFlowを用いて、タスク登録アプリを作ってみようと思います！
今回はFlutterFlow初心者向けシリーズ「FlutterFlowで作成！ テンプレートでタスク登録アプリ」の第１回「はじめてみよう」です。
1. FlutterFlowとは？
FlutterFlow は、ネイティブモバイルアプリケーションを開発するためのローコードビルダーです。
当ブログでも既に紹介していますので、初めての方はこちらを先に読むことをおススメします。
2. 前準備をしよう。
まずはアプリを作成する前にFirebaseとFlutterFlowのアカウントをお持ちでない方はアカウントを作成しましょう。
今回作るアプリでは、Firebaseも必要です。
作成したら、さらに、Firebaseでは、FlutterFlowと連携できるように設定が必要ですので、 Firebaseの設定を行いましょう。
詳しくは、こちらのブログの、
- 2.実装手順
- 3.Firebaseの設定
の部分を参考に設定してください。
そして、Firebaseの設定の最後にある「プロジェクトID」は、FlutterFlowの設定で必要になりますので、メモしておいてください。
3. アプリを作成しよう！
まずはFlutterFlowにログインします。
FlutterFlowはデフォルトでは黒背景のイメージになっていますが、ログイン後のヘッダー部分の太陽のアイコンをクリックします。
すると白背景に変更されます。どちらかお好みの方を選択してくださいね。 今回は、白背景の方が見やすいので画像はすべて白背景にします。
それでは早速アプリを作成してみましょう。 「Create New」ボタンから作成します。
以下のウィンドウが開かれるので、Project Nameにお好きな名前を書きましょう。
ここでは「FlutterFlow-test-01」とします。
※ちなみに、Bubbleとは異なり、全体で一意になるように名前を付ける必要はありません。既に使用されている名前をつけてもアプリのIDは別に用意されますので、問題ありません。
FlutterFlowには予め準備されているテンプレートがいくつかあり、
このウィンドウの下にはテンプレートが用意されています。
まっさらな状態で始めたいときは「Blank App」を選択します。
今回は「RobinDo」というタスク管理アプリのテンプレートがあるので、そちらを使用してみようと思います。
ウィンドウを一番下にスクロールすると、「RobinDo」がありますので、「Use Sample」ボタンを押下して使用してみましょう！
※ちなみに、テンプレートには有料／無料とあります。「★」のアイコンがついているものが有料になります。（RobinDoは無料です）
そうすると、以下のウインドウが表示されますので、「Next Step」ボタンを押下します。
次にFirebaseの設定を行います。ここで行わなくても、アプリ側の設定でもできるので、もしFirebase未設定の場合は飛ばしましょう。
Firebaseの設定を終えている方は、前準備でメモをしておきましょうと書いていた、Firebaseの「プロジェクトID」を以下に入力します。
入力すると「Connect」ボタンが赤くなるので、「Connect」ボタンを押下します。
成功すると以下のような画面になります。 もし失敗する場合、Firebaseの設定でどこか間違っていたり漏れいていたりする可能性がありますので、再度ご確認ください。
次に「Auto Generate Config Files」ボタンを押下します。
アプリの名前等を確認し、そのまま「Generate Files」ボタンを押下します。
生成中は以下の画面が出ます。
生成が終わると、以下のような画面になりますので、「Next Step」ボタンを押下します。
次にFirestore Indexesのデプロイになります。こちらもいつでもアプリの設定画面からデプロイ可能になります。 が、ここでデプロイしてみましょう。
デプロイすると、以下のようになり、「Start Building」ボタンを押下します。
これでアプリの作成およびFirebaseの設定まで終わりました。 以下の画面が見えますね。いよいよ実際にアプリを作成していきましょう！
3.1.RobinDoについて
RobinDoでは以下の機能が既に組み込まれています。
- アカウント作成
- ログイン／ログアウト
- パスワード変更
- タスク登録／編集
- ユーザーデータ編集
そして、RobinDoには画面が9ページと、Componentが3つ、コレクションが2つ既に用意されています。
それぞれ確認してみましょう。
画面は、一番左のメニューの「Page Selector」の「Pages」を選択すると、ページの一覧が表示されます。
SplashScreen～ChangePasswordまで全部で９ページあることがわかりますね。
Componentは「Page Selector」の「Component」を選択します。 Componentは、Bubbleでいうところの「Reuseable Element」のことです。 共通化したい場合は、Componentを作成しましょう。
emptyList_tasks～CreateTask_editまで全部3つのComponentがありますね。
コレクションは、左のメニューの「Firestore」の「Collections」を選択します。 「User」と「toDoTask」コレクションがあるのがわかりますね。
「User」はアカウント登録を行うときにデータが追加されるコレクションになっています。
コレクション一覧の右ウィンドウには、コレクションに定義しているフィールドが確認できます。
3.2.デプロイしてみよう
一つのアプリとしては若干不十分な動きにはなりますが、テンプレートだけでもデプロイでき、動かすことができます。なので、一度デプロイしてみましょう。
ただ、ヘッダーの「Project issues」に以下のように赤い背景の数字があると、エラーがあることになるので、デプロイできませんので、ご注意ください。
エラーがある場合は、メッセージに沿って対応する必要があります。 ※Firebaseの設定（Firebase Indexesの設定も含む）をされていない場合、エラーになります。
エラーがない場合は、ヘッダーの右端の雷のアイコンをクリックしてみましょう。
別タブが開かれ、以下の画面が表示されます。２～３分待ってみましょう。
待っていると、以下の画面が表示されます。例えば「Register」ボタンを押下すると、アカウント登録画面が表示されますので、試してみてください。
ちなみに、このテストモードは時間制になっています。 ヘッダーに表示されていますが、以下の場合だと、10分後には期限切れでテストモードが切れてしまいます。
しかし、期限時間内に、この部分をクリックすると、期限が伸びますので、試してみてください。
次回
今回は、FlutterFlowの触りのみで終わりです。 次回はもう少しテンプレートの中身を見ながらFlutterFlowについて詳しくみてみましょう！
ここまで読んでいただきありがとうございました。
コンテンツ
第１回 はじめてみよう。（今回です）
第６回 タスク一覧を修正してみよう。
第７回 エラーメッセージを出してみよう（１）
第８回 エラーメッセージを出してみよう（２）
第９回 アカウント作成しよう（２）
※ コンテンツが追加されるとリンクされるようになります。今しばらくお待ちください😌
※全9回の予定ですが、内容やボリュームによって前後する可能性もあることをご了承ください。
