【完成イメージ】ログイン・トーク一覧・タスク画面・メンバー管理の全体像をつかむ
このページで学ぶこと
このページでは、これから作るLINE風チームタスク管理アプリの完成イメージを確認します。
いきなりコードを書く前に、まずは「どんな画面があり、どんな順番で使うのか」を見ておきます。
アプリ開発では、最初に完成形のイメージを持つことがとても大切です。
完成形が見えていると、コードを読んだときに、
このコードはログイン画面のためにあるんだ
この部分はトーク一覧を表示しているんだ
この処理はFirestoreに保存しているんだ
と理解しやすくなります。
この教材の進め方をもう一度確認する
この章では、次の流れで進めます。
完成コードを使う
↓
一部分だけ変更する
↓
保存する・実行する
↓
画面の変化を見る
↓
次のステップへ進む
今回のページでは、まず「完成コードを使ったときに、最終的にどんな画面になるのか」を確認します。
細かいコードの意味は、あとから順番に見ていきます。
まずは、アプリの全体像をつかみましょう。
完成するアプリの全体像
今回作るアプリは、LINEのような見た目を参考にした、チーム型タスク管理アプリです。
画面の流れは、次のようになります。
アプリ起動
↓
ログイン画面
↓
新規登録またはログイン
↓
トーク一覧画面
↓
チームを選択
↓
タスク一覧画面
↓
タスク作成・編集・削除
↓
メンバー管理画面
↓
メンバー追加・権限変更
見た目はシンプルですが、中身はかなり本格的です。
ログインしたユーザーごとにデータを分け、チームごとにタスクを保存し、さらに権限によって操作できる内容を変えます。
画面1：ログイン画面
最初に表示されるのは、ログイン画面です。
この画面では、メールアドレスとパスワードを入力してログインします。
WorkBoard
チームの会話のように、タスクを共有する
メールアドレス
パスワード
[ログイン]
新規登録はこちら
この画面で学ぶことは、Firebase Authenticationです。
Firebase Authenticationは、ユーザー登録やログインを担当するFirebaseの機能です。
このアプリでは、メールアドレスとパスワードを使ってログインします。
| 項目 | 役割 |
|---|---|
| メールアドレス | ユーザーを識別する |
| パスワード | 本人確認に使う |
| ログインボタン | Firebase Authenticationにログインを依頼する |
| 新規登録はこちら | アカウント作成画面へ移動する |
ログインに成功すると、トーク一覧画面へ進みます。
画面2：新規登録画面
まだアカウントがない場合は、新規登録画面を使います。
この画面では、名前、所属、メールアドレス、パスワードを入力します。
新規登録
プロフィール作成
名前
所属
メールアドレス
パスワード
[新規登録]
新規登録では、2つの処理を行います。
Firebase Authenticationにユーザーを作成する
↓
Cloud Firestoreにプロフィールを保存する
つまり、ログイン用のアカウントはFirebase Authenticationに作り、名前や所属などのプロフィール情報はFirestoreに保存します。
| 保存先 | 保存する内容 |
|---|---|
| Firebase Authentication | メールアドレス、パスワード、uid |
| Cloud Firestore | 名前、所属、メールアドレス、作成日時 |
ここで大切なのが uid です。
uid はFirebase Authenticationがユーザーごとに発行するIDです。
この uid を使って、Firestoreの users/{uid} にプロフィールを保存します。
画面3：トーク一覧画面
ログインすると、トーク一覧画面が表示されます。
LINEのトーク一覧のように、自分が参加しているチームが並びます。
トーク
[＋] [ログアウト]
● 開発チーム
タスクとメンバーを確認できます 今
● 学校イベント準備チーム
タスクとメンバーを確認できます 今
● 営業チーム
タスクとメンバーを確認できます 今
この画面では、自分が参加しているチームだけを表示します。
Firestoreでは、チーム情報を teams コレクションに保存します。
teams/{teamId}
そして、自分が参加しているチームを見つけるために、チームドキュメントには memberIds という配列を持たせます。
memberIds: [ログインユーザーのuid]
アプリ側では、次のような考え方でチームを取得します。
ログイン中のuidを取得する
↓
memberIdsに自分のuidが含まれるチームだけ取得する
↓
トーク一覧として表示する
この仕組みによって、ユーザーごとに表示されるチームが変わります。
画面4：チーム作成UI
トーク一覧画面の右下にあるボタンを押すと、チーム作成UIが表示されます。
普通のダイアログではなく、下から出るボトムシートにしています。
新しいトークを作成
チーム名を入力して、タスク共有を始めます
トーク名
例：開発チーム
[作成する]
キャンセル
このUIでは、チーム名を入力して「作成する」を押します。
すると、Firestoreに次のデータを作ります。
teams/{teamId}
teams/{teamId}/members/{uid}
チームを作った人は、自動的に owner になります。
チームを作成する
↓
teamsにチーム情報を保存する
↓
membersに自分をownerとして保存する
ここで、「データを1つ保存して終わり」ではなく、チーム情報とメンバー情報を同時に作るのがポイントです。
画面5：タスク一覧画面
トーク一覧からチームを選ぶと、タスク一覧画面に移動します。
この画面は、LINEのトーク画面のような雰囲気にしています。
開発チーム
あなたの権限: owner
未対応 2
● 提案資料を作成する
6月打ち合わせ用の資料を作る
未対応 重要 sample@example.com
進行中 1
● Flutter画面を作成する
ログイン後のタスク一覧UIを作る
進行中 通常 sample@example.com
完了 0
タスクは、次の3つのステータスで分けて表示します。
| ステータス | 表示名 |
|---|---|
todo | 未対応 |
doing | 進行中 |
done | 完了 |
Firestoreでは、タスクをチームの中に保存します。
teams/{teamId}/tasks/{taskId}
チームごとにタスクが分かれているので、開発チームのタスクと営業チームのタスクが混ざりません。
画面6：タスク作成・編集画面
タスク一覧画面の右下ボタンを押すと、タスクを作成できます。
タスクには、次の情報を保存します。
タイトル
説明
担当者メールアドレス
ステータス
優先度
作成者
作成日時
更新日時
画面イメージは次のようになります。
タスク作成
タイトル
説明
担当者メールアドレス
ステータス
優先度
[保存]
キャンセル
既存のタスクをタップすると、同じ画面で編集できます。
つまり、同じUIを「作成」と「編集」の両方に使います。
新しいタスクなら作成
既存タスクなら編集
この考え方は、実務アプリでもよく使います。
画面7：メンバー管理画面
タスク画面の右上にあるメンバーアイコンを押すと、メンバー管理画面に移動します。
メンバー管理
● 山田太郎
yamada@example.com owner
● 佐藤花子
sato@example.com admin
● 鈴木一郎
suzuki@example.com member
● 高橋次郎
takahashi@example.com viewer
この画面では、チームに参加しているメンバーと、その権限を確認できます。
権限は次の4種類です。
| 権限 | できること |
|---|---|
| owner | すべての操作、権限変更、チーム削除 |
| admin | メンバー追加、タスク編集、タスク削除 |
| member | タスク作成、タスク編集 |
| viewer | 閲覧のみ |
権限によって、画面に表示するボタンや実行できる操作が変わります。
画面8：メンバー追加UI
メンバー管理画面のボタンを押すと、メンバー追加UIが表示されます。
これも、LINE風のボトムシートUIにしています。
メンバーを追加
登録済みユーザーのメールアドレスを入力します
メールアドレス
example@example.com
権限
[admin] [member] [viewer]
memberはタスクの作成・編集ができます。
削除や権限変更はできません。
[追加する]
キャンセル
この画面では、登録済みユーザーのメールアドレスを入力します。
アプリはFirestoreの users から、そのメールアドレスのユーザーを探します。
見つかったら、チームの members に追加します。
メールアドレスを入力
↓
usersから該当ユーザーを検索
↓
uidを取得
↓
teams/{teamId}/members/{uid} に追加
↓
teams/{teamId}.memberIds にuidを追加
この処理によって、追加されたユーザーのトーク一覧にも、そのチームが表示されるようになります。
画面9：スワイプ削除
トーク一覧では、チームを左にスワイプすると削除できます。
チームを左にスワイプ
↓
赤い削除エリアが表示される
↓
削除確認
↓
削除
この機能には、Flutterの Dismissible を使います。
LINEなどのスマホアプリでは、リスト項目をスワイプして操作するUIがよく使われます。
今回の教材では、そうしたスマホアプリらしい操作も取り入れます。
Firebaseで見る完成イメージ
アプリの画面だけでなく、Firebase Console側にもデータが保存されます。
Firestoreでは、最終的に次のような構造になります。
users
└ uid
teams
└ teamId
├ members
│ └ uid
└ tasks
└ taskId
もう少し具体的に見ると、次のようなイメージです。
users/{uid}
displayName
email
department
createdAt
updatedAt
teams/{teamId}
name
ownerId
memberIds
createdAt
updatedAt
teams/{teamId}/members/{uid}
uid
email
displayName
role
joinedAt
teams/{teamId}/tasks/{taskId}
title
description
status
priority
assigneeEmail
assigneeId
createdBy
createdAt
updatedAt
画面で入力した内容がFirestoreに保存され、Firestoreに保存された内容が画面に表示されます。
このつながりを理解することが、Flutter × Firebase学習の大きな目的です。
このアプリで身につく考え方
この完成イメージを通して、次の考え方を身につけます。
| 考え方 | 内容 |
|---|---|
| 認証 | 誰がログインしているのかを判断する |
| データ保存 | 入力内容をFirestoreに保存する |
| リアルタイム表示 | Firestoreの変更を画面に反映する |
| チーム管理 | ユーザーごとに参加チームを分ける |
| 権限管理 | できる操作をroleによって変える |
| UI設計 | LINE風に見えるように画面を整える |
| 実務設計 | 画面・データ・権限をセットで考える |
ただの画面作成ではなく、誰が、どのデータを、どこまで操作できるのかを考えるのが重要です。
このページで覚えてほしいこと
このページでは、細かいコードを覚える必要はありません。
まずは、次の流れだけつかめればOKです。
ログインする
↓
トーク一覧を見る
↓
チームを作る
↓
チームを開く
↓
タスクを作る
↓
メンバーを追加する
↓
権限によってできることが変わる
この流れが分かっていると、次からコードを読んだときに迷いにくくなります。
コードは長く見えますが、画面ごとに分けて考えれば大丈夫です。
ミニ確認問題
Q1. ログイン画面で使うFirebaseの機能は何ですか？
回答
Firebase Authenticationです。
メールアドレスとパスワードを使って、ユーザー登録やログインを行います。
Q2. チーム情報はFirestoreのどこに保存しますか？
回答
teams/{teamId} に保存します。
また、チームのメンバー情報は teams/{teamId}/members/{uid} に保存します。
Q3. タスク情報はFirestoreのどこに保存しますか？
回答
teams/{teamId}/tasks/{taskId} に保存します。
チームごとにタスクを分けて保存することで、別チームのタスクと混ざらないようにします。
Q4. viewer権限の人は何ができますか？
回答
viewerは閲覧のみできます。
タスクの作成、編集、削除はできません。
このページのまとめ
このページでは、完成するLINE風チームタスク管理アプリの全体像を確認しました。
大切なポイントは次の通りです。
- 最初に完成イメージを持つと、コードの理解がしやすくなる。
- アプリは、ログイン画面、新規登録画面、トーク一覧画面、タスク一覧画面、メンバー管理画面で構成される。
- ログインにはFirebase Authenticationを使う。
- データ保存にはCloud Firestoreを使う。
- チーム情報は
teams/{teamId}に保存する。 - メンバー情報は
teams/{teamId}/members/{uid}に保存する。 - タスク情報は
teams/{teamId}/tasks/{taskId}に保存する。 - トーク一覧には、自分が参加しているチームだけを表示する。
- タスクは、未対応、進行中、完了に分けて表示する。
- メンバーには、owner、admin、member、viewerの権限を設定する。
- このアプリでは、画面、データ、権限をセットで考えることが大切。
次のページでやること
次のページでは、アプリ全体の設計を整理します。
単なるTodoアプリではなく、なぜチーム型アプリとして作るのか。
そして、users、teams、members、tasks がどのようにつながるのかを確認していきます。