CONTENT
ここから
このページで学ぶこと
このページでは、今回のアプリで使うFirebaseの重要な機能を整理します。
Firebaseとは、Googleが提供しているアプリ開発向けのサービス群です。
今回のLINE風チームタスク管理アプリでは、主に次の3つを使います。
| Firebase機能 | 一言説明 |
|---|---|
| Firebase Authentication | ログインや新規登録を担当する機能 |
| Cloud Firestore | アプリのデータを保存するデータベース |
| Firestore Security Rules | Firestoreのデータを誰が読めるか・書けるか決めるルール |
この3つを理解すると、今回のアプリの全体像がかなり見えやすくなります。
まずFirebaseとは何か
Firebaseとは、アプリに必要な機能をまとめて使える開発サービスです。
たとえば、アプリを作るときには、次のような機能が必要になります。
ログイン機能
データ保存
ファイル保存
通知
アクセス解析
セキュリティ設定
これらをすべて自分でサーバーから作るのは大変です。
Firebaseを使うと、ログインやデータ保存などの機能を、Flutterアプリから比較的簡単に使えるようになります。
今回の教材では、最初からすべてのFirebase機能を使うのではなく、まずはアプリ開発でよく使う3つに絞ります。
Authentication
Firestore
Security Rules
今回のアプリでFirebaseが担当する部分
今回のアプリでは、画面はFlutterで作ります。
Flutterとは、1つのコードでiPhone、Android、Webなどのアプリ画面を作れる開発フレームワークです。
一方で、ログインやデータ保存はFirebaseが担当します。
Flutter
↓
画面を作る
Firebase Authentication
↓
ログイン・新規登録を担当する
Cloud Firestore
↓
ユーザー・チーム・タスクを保存する
Firestore Security Rules
↓
誰がどのデータを操作できるか守る
つまり、FlutterとFirebaseは役割が違います。
Flutterは見た目と操作。
Firebaseはログイン、保存、保護。
この分担を最初に理解しておくと、コードが読みやすくなります。
Authenticationとは何か
Authenticationとは、認証という意味です。
認証とは、「この人は誰か」を確認する仕組みです。
今回のアプリでは、メールアドレスとパスワードでログインします。
メールアドレスを入力する
↓
パスワードを入力する
↓
Firebase Authenticationに確認してもらう
↓
正しければログイン成功
Flutterでは、Firebase Authenticationを使うために firebase_auth というパッケージを使います。
パッケージとは、アプリに機能を追加するための部品のことです。
Firebase公式ドキュメントでも、FlutterでAuthenticationを使う場合はFirebase SDKを初期化し、認証状態を確認しながらログイン処理を実装する流れが案内されています。
https://firebase.google.com/docs/auth/flutter/start
Authenticationでできること
Firebase Authenticationでは、次のようなことができます。
| 機能 | 内容 |
|---|---|
| 新規登録 | メールアドレスとパスワードでユーザーを作成する |
| ログイン | 登録済みユーザーとしてアプリに入る |
| ログアウト | ログイン状態を解除する |
| uid取得 | ログイン中ユーザーのIDを取得する |
| 認証状態の監視 | ログイン中かどうかをアプリで確認する |
uid とは、Firebaseがユーザーごとに発行する一意のIDです。
一意とは、他のユーザーと重ならないという意味です。
今回のアプリでは、この uid がとても重要です。
uidがなぜ大切なのか
アプリでは、ログインした人ごとにデータを分ける必要があります。
たとえば、山田さんと佐藤さんがログインしたとします。
山田さんのuid
↓
abc123
佐藤さんのuid
↓
xyz789
この uid を使うことで、Firestoreに次のようにプロフィールを保存できます。
users/abc123
users/xyz789
つまり、uid は「その人専用のデータ置き場を作るための鍵」のようなものです。
今回のアプリでは、チームメンバーを追加するときも、タスクの作成者を保存するときも、uid を使います。
Firestoreとは何か
Cloud Firestoreとは、Firebaseが提供しているデータベースです。
データベースとは、アプリの情報を保存する場所です。
今回のアプリでは、Firestoreに次のようなデータを保存します。
ユーザープロフィール
チーム情報
メンバー情報
タスク情報
Firestoreは、コレクションとドキュメントという単位でデータを保存します。
コレクションとは、同じ種類のデータをまとめる箱です。
ドキュメントとは、1件分のデータです。
Firebase公式のFirestoreクイックスタートでも、Firestoreを使う場合はFirebase AuthenticationとSecurity Rulesを組み合わせてデータを守ることが案内されています。
https://firebase.google.com/docs/firestore/quickstart
Firestoreの基本構造
Firestoreでは、次のようにデータを保存します。
コレクション
└ ドキュメント
└ フィールド
フィールドとは、ドキュメントの中にある具体的な項目です。
たとえば、ユーザー情報なら次のようになります。
users
└ uid
├ displayName
├ email
├ department
├ createdAt
└ updatedAt
この場合、
users
がコレクションです。
uid
がドキュメントIDです。
displayName
email
department
がフィールドです。
今回のFirestore設計
今回のアプリでは、Firestoreを次のように使います。
users
└ uid
teams
└ teamId
├ members
│ └ uid
└ tasks
└ taskId
それぞれの役割は次の通りです。
| 保存場所 | 一言説明 |
|---|---|
users/{uid} | ユーザー1人分のプロフィール |
teams/{teamId} | チーム1つ分の情報 |
teams/{teamId}/members/{uid} | そのチームに参加しているメンバー情報 |
teams/{teamId}/tasks/{taskId} | そのチーム内のタスク情報 |
teamId とは、チームごとに付けられるIDです。
taskId とは、タスクごとに付けられるIDです。
IDとは、データを区別するための名前や番号のことです。
AuthenticationとFirestoreの関係
AuthenticationとFirestoreは、別々の機能です。
ただし、今回のアプリでは強くつながります。
Authentication
↓
ログインしている人のuidを取得する
Firestore
↓
そのuidを使ってデータを保存・取得する
たとえば、新規登録をするときは、まずAuthenticationでユーザーを作ります。
そのあと、Firestoreにプロフィールを保存します。
createUserWithEmailAndPassword
↓
uidを取得
↓
users/{uid} にプロフィール保存
つまり、Authenticationは「誰か」を担当し、Firestoreは「その人のデータ」を担当します。
Security Rulesとは何か
Firestore Security Rulesとは、Firestoreのデータを誰が読めるか、誰が書けるかを決めるルールです。
たとえば、何も守られていないデータベースだと、誰でもデータを読んだり書いたりできてしまいます。
これは危険です。
誰でも読める
↓
個人情報が見られる可能性がある
誰でも書ける
↓
データを書き換えられる可能性がある
そこで、Security Rulesを使います。
Firebase公式でも、ユーザー単位・ロール単位のアクセス制御を作るには、Firebase AuthenticationとCloud Firestore Security Rulesを組み合わせる必要があると説明されています。
https://firebase.google.com/docs/firestore/security/get-started
Security Rulesで守る例
たとえば、次のようなルールを考えます。
ログインしていない人
↓
データを読めない
ログインしている人
↓
自分が参加しているチームだけ読める
viewer
↓
見るだけ
member
↓
タスク作成・編集ができる
admin
↓
タスク削除もできる
owner
↓
権限変更もできる
これをFirestore側で守るのがSecurity Rulesです。
画面側でボタンを隠すだけでは不十分です。
なぜなら、悪意のある操作をされる可能性があるからです。
Firestore側でも拒否できるようにしておく必要があります。
今回は開発用Rulesから始める
ただし、最初から厳しいRulesにすると、学習中にエラーで止まりやすくなります。
そのため、教材の前半では、まず開発用Rulesで動作確認します。
開発用Rulesとは、学習や動作確認のために一時的に緩くしたルールです。
たとえば、次のようなルールです。
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if true;
}
}
}
これは、すべての読み書きを許可するルールです。
ただし、本番公開では絶対に使いません。
本番とは、実際のユーザーに公開する状態のことです。
なぜ開発用Rulesを使うのか
開発中は、まずアプリの動きを確認したい場面があります。
ログインできるか
ユーザー情報を保存できるか
チームを作れるか
タスクを作れるか
メンバーを追加できるか
この段階でRulesが厳しすぎると、コードの問題なのか、Rulesの問題なのか分かりにくくなります。
そのため、最初は開発用Rulesで動かし、そのあと本番用Rulesに近づけていきます。
まず動かす
↓
画面とデータ保存を確認する
↓
あとからRulesで守る
この順番にすると、学習しやすくなります。
本番用Rulesで考えること
本番用Rulesとは、実際に公開するアプリで使う安全なルールのことです。
今回のアプリなら、次のような制限を考えます。
| データ | 誰が操作できるべきか |
|---|---|
users/{uid} | 本人が作成・更新できる |
teams/{teamId} | チームメンバーだけ読める |
members/{uid} | チームメンバーだけ読める |
tasks/{taskId} | チームメンバーだけ読める |
| タスク作成 | member以上 |
| タスク削除 | admin以上 |
| 権限変更 | ownerのみ |
ここで出てくる「member以上」とは、member、admin、owner のことです。
「admin以上」とは、admin と owner のことです。
3つの機能の関係を図で見る
今回のアプリでは、Authentication、Firestore、Security Rulesが次のようにつながります。
ユーザーがログインする
↓
Authenticationがuidを発行する
↓
Flutterがuidを使ってFirestoreへアクセスする
↓
Security Rulesがアクセスしてよいか判定する
↓
許可されればFirestoreのデータを読み書きできる
もう少し短くすると、こうです。
Authentication
↓
誰かを確認する
Firestore
↓
データを保存する
Security Rules
↓
その人が操作してよいか確認する
この3つはセットで考えます。
今回のmain.dartで使うパッケージ
今回の完成コードでは、最初に次の3つを読み込んでいます。
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
それぞれの役割は次の通りです。
| パッケージ | 一言説明 |
|---|---|
firebase_core | FlutterアプリでFirebaseを使うための土台 |
firebase_auth | Firebase Authenticationを使うためのパッケージ |
cloud_firestore | Cloud Firestoreを使うためのパッケージ |
firebase_core は、Firebaseを初期化するために必要です。
初期化とは、アプリがFirebaseを使える状態にする準備のことです。
Firebase.initializeAppとは何か
完成コードでは、アプリ起動時に次の処理をしています。
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
Firebase.initializeApp は、FlutterアプリとFirebaseプロジェクトを接続するための処理です。
DefaultFirebaseOptions.currentPlatform は、iOS、Android、Webなど、実行している環境に合わせたFirebase設定を選んでくれます。
この設定は、後のページで flutterfire configure を実行すると生成される firebase_options.dart に入っています。
firebase_options.dart とは、FirebaseプロジェクトとFlutterアプリをつなぐための設定ファイルです。
FlutterFire CLIというツールを使うと、このファイルを自動生成できます。
https://firebase.google.com/docs/flutter/setup
学習中によくあるつまずき
Firebase準備では、次のようなエラーがよく出ます。
| エラー | 原因の例 |
|---|---|
flutterfire: command not found | FlutterFire CLIが入っていない、PATHが通っていない |
firebase login が失敗する | Firebase CLIやNode.jsのバージョン問題 |
firebase_options.dart がない | flutterfire configure が未実行 |
permission-denied | Security Rulesで拒否されている |
failed-precondition | Firestoreのインデックスが足りない |
PATHとは、ターミナルがコマンドを探す場所の設定です。
Node.jsとは、Firebase CLIなどのツールを動かすために使われるJavaScript実行環境です。
インデックスとは、Firestoreが検索や並び替えを速く行うための仕組みです。
この教材では、こうしたエラーが出たときも、原因を分けて考えていきます。
まずは役割だけ分かればOK
このページでは、細かい設定手順をすべて覚える必要はありません。
まずは次の3つだけ分かれば大丈夫です。
Authentication
↓
ログイン担当
Firestore
↓
データ保存担当
Security Rules
↓
データ保護担当
この3つの役割が分かると、次のページから出てくる設定やコードが理解しやすくなります。
ミニ確認問題
Q1. Firebase Authenticationは何を担当しますか？
回答
ログイン、新規登録、ログアウトなど、ユーザーが誰なのかを確認する処理を担当します。
今回のアプリでは、メールアドレスとパスワードでログインします。
Q2. Cloud Firestoreは何を担当しますか？
回答
アプリのデータ保存を担当します。
今回のアプリでは、ユーザー、チーム、メンバー、タスクの情報を保存します。
Q3. Firestore Security Rulesは何を担当しますか？
回答
Firestoreのデータを誰が読めるか、誰が書けるかを決めます。
たとえば、viewerは閲覧のみ、adminはタスク削除もできる、というような制限を作れます。
Q4. uidとは何ですか？
回答
Firebase Authenticationがユーザーごとに発行する一意のIDです。
Firestoreでは、このuidを使って users/{uid} にプロフィールを保存したり、チームメンバーを識別したりします。
このページのまとめ
このページでは、今回のアプリで使うFirebaseの3つの機能を整理しました。
大切なポイントは次の通りです。
- Firebaseは、アプリ開発に必要な機能をまとめて使えるサービス。
- Flutterは画面や操作を作り、Firebaseはログインやデータ保存を担当する。
- Firebase Authenticationは、ログイン、新規登録、ログアウトを担当する。
- Cloud Firestoreは、ユーザー、チーム、メンバー、タスクなどのデータを保存する。
- Firestore Security Rulesは、誰がどのデータを読めるか・書けるかを決める。
- Authenticationで取得したuidを使って、Firestoreのデータをユーザーごとに分ける。
- 開発中は緩いRulesで動作確認し、本番では安全なRulesに変更する。
firebase_core、firebase_auth、cloud_firestoreが今回の中心パッケージ。firebase_options.dartはFlutterアプリとFirebaseプロジェクトをつなぐ設定ファイル。- まずは「Authentication＝ログイン」「Firestore＝保存」「Security Rules＝保護」と覚える。
次のページでやること
次のページでは、実際にFirebase接続を進めます。
flutterfire configure を使って、FlutterアプリとFirebaseプロジェクトをつなぐための firebase_options.dart を生成します。