ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。わからないことがあったら、コメントや Twitter などで聞いてください!

FlutterFlowで作成!テンプレートでタスク登録アプリ ー 第2回 テンプレートを色々みてみよう。

FlutterFlowで作成!テンプレートでタスク登録アプリ ー 第2回 テンプレートを色々みてみよう。

こんにちは!

今回はFlutterFlow初心者向けシリーズ「FlutterFlowで作成! テンプレートでタスク登録アプリ」の第2回「テンプレートを色々みてみよう」です。

今回は、テンプレートの中身を確認しつつ、FlutterFlowではどのように検索、表示等を行うのかまでを確認していきましょう。

前回のコンテンツはこちらです。

blog.nocodelab.jp

1. テンプレートって?

テンプレートとは、大まかなアプリの流れや画面を予め組み込んでくれており、一から作成しなくてもある程度の調整だけでアプリの開発が簡単にできるようになるためのものです。Bubbleにもテンプレートがありますね。
実際はデザインが全く異なる場合は、一から作成することも多いかもしれませんが、チャットアプリや、タスク管理アプリ等アプリの用途によってテンプレートが用意されているので、アプリ作成するときに参考になります。

今回は前回でアプリ作成時に選択した「RobinDo」というタスク登録アプリのテンプレートを使用します。

前回もお伝えしていますが、RobinDoには、9つの画面と3つのコンポーネント、2つのコレクションが予め用意されています。

このRobinDoのままでもある程度はできていますが、一つのアプリとしては不十分です。そのため必要な箇所を修正しながら、アプリを作成しましょう!

2. テンプレートの構成

2.1. 画面構成

まずは、テンプレートの画面構成を見てみましょう。
以下、画面とコンポーネントの一覧になります。

画面/コンポーネント 名称 機能概要
画面 SplashScreen RobinDoのトップページ。
Register画面またはLogin画面への遷移ができます。
ただし、ログイン済みであればmyTasks画面へ遷移されます。
画面 Login ログイン画面
画面 myTasks 未完了のタスク一覧画面
タスクの登録も可能です。
画面 Register アカウント登録画面
画面 CompletedTasks 完了タスク一覧画面
タスクの登録も可能です。
画面 EditProfile プロフィール更新画面
画面 TaskDetails タスク詳細画面
タスクのステータスを完了に更新できます。タスク編集もこの画面からできます。
画面 MyProfile プロフィール画面。
EditProfile画面またはChangePassword画面への遷移ができます。
アプリ全体のレイアウトの切り替えができます。
画面 ChangePassword パスワード変更画面
実際にパスワード変更するためのメールを送信する画面です。
コンポーネント emptyList_tasks myTasks画面、 CompletedTasks画面で表示するタスクが0件の場合に表示するコンポーネント
コンポーネント CreateTask_new タスク登録を行うコンポーネント
コンポーネント CreateTask_edit タスク編集を行うコンポーネント

2.2. Collection構成

次に、コレクションを確認してみましょう。

コレクション名 概要
Users ユーザー情報コレクション
アカウント登録時、このコレクションに登録されます。
ToDoList タスクコレクション
タスク登録すると、このコレクションに登録されます。フィールドにUserのReferenceを持っているので、これにより、どのユーザーが登録したタスクなのか判定可能です。

若干名称は異なりますが、FlutterFlowのドキュメント内に今回のデータベースと同じ構成を表す図がありましたので、こちらもご参考ください。 docs.flutterflow.io

これでテンプレートの構成がわかりましたね。

3. 画面

では、いくつか画面の中身を見て、どのように実装するのか確認してみましょう!

3.1. SplashScreen

まずは、トップページのSplashScreen 画面からです。

一番左の「Page Selector」メニューをクリックし、SplashScreenを選択します。

そして、「Page Slector」の上にある「Widget Tree」メニューを選択します。

選択すると、メニューの右手にWidgetのツリーが表示されます。
WidgetはBubbleでいうところのElementのことです。ここで、なんのWidgetが配置されているか、Widgetの階層等が確認できます。

BubbleのElementTreeより見やすく、便利です。

Container、Column、RowといったWidgetはGroupにあたるものですが、そのWidgetの隣にアイコンがありますね。
そこをクリックすると、Widget一覧が表示されるので、選択すると対象のWidgetの子要素としてWidgetが追加されます。

また、FlutterFlowでは、下図でマーカーを引いているように、Widgetの横にアイコンがついているものがあります。
これは、各WidgetにAction、Backend Query、Animationが設定されていれば表示されるアイコンです。(※実際にはこの3つ以外にも表示されるアイコンはあります)
下図でいうと、「Image」にAnimationが、二つのButtonにはそれぞれActionとAnimationが設定されていることがわかります。

アイコンの凡例は、右手のプロパティパネルにあります。 以下3か所ラインを引いていますが、左から、

  • Actions
  • BackendQuery
  • Animation

になっており、このタブを押下すると、それぞれ設定できるようになっています。
ちなみに、Actionsの左隣は各Widgetのプロパティ(paddingや表示位置等主に表示に関する設定)等表示に関する設定ができます。

それでは、実際に何が設定されているか見てみましょう。

3.1.1. プロパティ

Widgetのpadding、位置、テキスト、フォント等表示に関連する設定ができます。

ちなみに、上部の編集アイコンを押下すると、Widgetの名前を変更できます。 下図の場合は、「Register」と表示されているボタンを表示していますので、 「Button」→「ButtonRegister」と変更してみましょう。

Widgetツリーのほうも名称が変更されました。
WidgetツリーでどのWidgetなのかわかりやすくするためには、個別に名称を変更すると良いですね。

3.1.2. Action

次にActionを見てみましょう。
ActionはBubbleでいうところのワークフローのことです。 FlutterFlowでは、各Widget単位でActionを設定および確認することができます。
SplashScreenにはButtonが二つありますが、どちらにもActionが設定されていますね。
ここでは先ほど名前を変更した「ButtonRegister」のActionをみてみましょう。

「Define Action」に、現在設定されているActionが確認できます。 ただし、条件もないActionが1つ設定されている場合のみ、「Define Action」が表示されます。

実際にActionを設定する場合や複数のActionを確認する場合は、Action Flow Editorの「Open」ボタンを押下してください。

以下のようにアクションを編集できる画面が開かれます。

「On Tap」のタブ内に「Navigate To」というActionが設定されています。
「On Tap」なので、タップされた時に実行するActionで、 「Navigate To」は画面遷移のアクションのため、タップされたら画面遷移されるということがわかります。
遷移先は「Register」画面になります。

3.1.3. Animation

ImageのWidgetにAnimationが設定されていますね。
Widget TreeのImageを選択し、右のパネルからAnimationのタブを選択しましょう。
ここでは、既に「On Page Load」時のAnimationが設定されていることがわかります。
ページロード時に設定したいアニメーションがあれば、ここで設定します。

「On Page Load」の右隣の「On Action Trigger」は、Actionフロー内で実行するアニメーションの場合の時に設定します。
なので、「On Action Trigger」で設定した場合、アクションフローの中で「Animation」を呼ぶように設定する必要があるのでご注意ください。

ちなみに、このImageでは、「Fade」、「Slide」、「Scale」の合わせ技のアニメーションになっています。

Bubbleより、より細かく自分でアニメーションが設定できそうですね。

3.2. myTasks

次に、myTasks画面を見てみましょう。
この画面では、ログインユーザー自身が登録したタスクが一覧で見れます。 ※ただし、未完了のタスクのみ

3.2.1. Backend Query

ListViewというWidgetがありますね。 これは複数のデータをリストで表示するときに使用するWidgetです。BubbleのRepeating Groupと同じですね。

その横にBackendQueryのアイコンがあります。
つまり、Queryが設定されていることがわかります。

BackendQueryのタブを押下し、「Edit Backend Query」ボタンを押下しましょう。

すると、左側に、設定されている内容が確認できます。

項目 設定値 説明
QueryType QueryCollection 検索対象元を選択します。
ここでは、Firebaseのコレクションが検索対象元なので、QueryCollectionを設定します。
Collection ToDoList 検索対象のコレクションを選択します。
Query Type List of Documents 複数検索するか単数検索か選択します。
ここでは複数なので、List ~を設定します。

また、検索条件であるFilterが二つ設定されていますね。 一つずつ見てみましょう。

まずはFilter1の設定です。ログインユーザーが登録したタスクであること、の条件を設定しています。

項目 設定値 説明
Collection Field Name user 条件となる項目を設定します。
toDoListコレクションのuserフィールドが条件です。
Relation Equal To 条件を設定します。ここではイコールが条件になります。
Value Source From Variable 条件の値をどこから取得するか設定します。
ここでは変数から取得するのでFrom Variableを設定します。

Value Sourceの変数の部分については、自分が作成したタスクのみを表示したいので、以下のようにログイン情報を持っている Authenticated UserのUser Referenceを設定しています。

Filter2では、完了していないタスクが条件(toDoState=False)となるように設定されています。

項目 設定値 説明
Collection Field Name toDoState 条件となる項目を設定します。
toDoStateフィールドになります。
Relation Equal To 条件を設定します。ここではイコールが条件になります。
Value Source Specific Value 条件の値が定数の場合は、Specific Valueになります。
ここでは、Falseを設定しています。

これで、ListViewを表示される際に、設定されているQueryが実行されるようになります。

その他にも、表示するときに検索する場合はBackend Queryを設定するようにします。

3.3. TaskDetails

タスクの詳細画面を表示する画面です。
myTasks画面や、CompletedTasks画面に表示されるタスク一覧の各タスクをクリックすると、遷移されます。

3.3.1. Page Pearamenter

この画面では、ページ遷移されるときに必要なパラメータが設定されています。
右のパネルの上部に「Page Parameters」が、それです。 現在は、「toDoNote」という名前のパラメータが設定されています。

各一覧画面からこの画面に遷移するときに、どのタスクの詳細を表示するかが必要ですね。 そのために用意されています。

設定内容を見てみましょう。「Page Parameters」の右にある編集アイコンをクリックします。

項目 設定値 説明
Parameter Name toDoNote パラメータ名です。
わかりやすい名前を付けましょう。
Type DocumentReference パラメータの型を設定します。
ここでは、データベースの参照(Reference)が設定されています。
Collection Type ToDoList どのコレクションかを設定します。
TypeがDocumentReferenceまたはDocumentの場合のみ設定が必要になります。
ここではタスクコレクションを設定します。

3.3.2. ReferenceからDocumentを取得

Page Paramenterでは参照(Reference)データになるので、その中身(Document)を取得する必要があります。

そもそも、ReferenceとDocumentって何でしょう?
ざっくりいうと、Referenceはデータの実体ではなく、あくまで参照先(ポインタ的な?)で、Documentはデータの実体を指すと思っておけば良いかなと思います。

FirestoreはNoSQL データベースですが、もしご存じではない場合少し勉強が必要になるかと思います。
FlutterFlowのドキュメントに詳しくFirestore(NoSQL)について書かれていますので、こちらもご参考ください。 docs.flutterflow.io

そんなわけで、Referenceはデータの参照先になるので、データ自体(Document)を見るにはReferenceからDocumentを取得することが必要です。

TaskDetialsのところにも「Backend Query」が設定されていることがわかります。

Backend Queryのタブから、Edit Backend Queryボタンを押下して確認してみましょう。

項目 設定値 説明
QueryType Document from Reference 検索対象元を選択します。
ReferenceからDocumentを取得するので、「Document from Reference」を設定します。
Collection ToDoList 検索対象のコレクションを選択します。
Variable toDoNote 対象のReferenceを設定します。
ここでは、Page Paramenterの「toDoNote」になります。

このようにBackendQueryで、Reference→Document取得が可能になります。

ページ自体にBackendQueryを設定することで、TaskDetails内ならどこでも、対象タスクのデータを表示することができるようになります。

3.3.3. データベースの値を表示

例えば、[toDoName]と表示されているTextをみてみましょう。

Sourceに「ToDoList Document」(3.3.2.で設定したBackendQueryの結果になります)が選択できるようになるので、そこから「toDoName」を選択すると、ここにToDoList.toDoNameが表示されるようになります。

4. まとめ

今回はざっくりとテンプレートの中身を確認、さらに一部少し踏み込んで説明しましたが、どれも基本的なところばかりです。
他にもたくさんありますが、今回はここまで!
次回以降は確認しつつ、修正も少しずつ行ってみましょう。

ここまで読んでいただき、ありがとうございました!

コンテンツ

第1回 はじめてみよう。

第2回 テンプレートを色々みてみよう。(今回です)

第3回 アカウント作成をしてみよう(1)

第4回 画面遷移をしてみよう。

第5回 ユーザー編集を修正してみよう。

第6回 タスク一覧を修正してみよう。

第7回 エラーメッセージを出してみよう(1)

第8回 エラーメッセージを出してみよう(2)

第9回 アカウント作成しよう(2)

※ コンテンツが追加されるとリンクされるようになります。今しばらくお待ちください😌

※全9回の予定ですが、内容やボリュームによって前後する可能性もあることをご了承ください。