目次

はじめに

本書を通して学べること
対象読者
対応環境
お問い合わせ
表記関係について
免責事項

第1章 FlutterとFirebaseを使ったアプリ開発

1.1 Flutterとは?
1.2 Firebaseとは?
1.3 この章で学んだこと

第2章 クラウド画像管理アプリ

2.1 どんなアプリを作るの?
2.2 設計してみる
2.3 開発環境を整えよう
2.4 この章で学んだこと

第3章 UIを作る

3.1 ログイン画面を作る
3.2 画像一覧画面を作る
3.3 画像詳細画面を作る
3.4 この章で学んだこと

第4章 ログインする

4.1 FlutterとFirebaseを連携させる
4.2 Authenticationを準備する
4.3 メールアドレスで新規登録する
4.4 ログアウトする
4.5 ログインする
4.6 起動時の画面を切り替える
4.7 この章で学んだこと

第5章 画像を管理する

5.1 Cloud Storageを準備する
5.2 画像をアップロードする
5.3 Cloud Firestoreを準備する
5.4 アップロードした画像を管理する
5.5 この章で学んだこと

第6章 アーキテクチャを整える

6.1 モデルとリポジトリーを導入する
6.2 Riverpodを使った状態管理
6.3 削除・お気に入り機能を追加実装する
6.4 画像共有機能を追加実装する
6.5 この章で学んだこと

第7章 アクセス制御を入れる

7.1 セキュリティールール
7.2 セキュリティールールを反映する
7.3 この章で学んだこと

おわりに

はじめに

 本書を手にとっていただき、ありがとうございます。

 本書では、クラウド画像管理アプリの開発を通じて、Flutter・Firebaseを使ったアプリ開発に必要な知識・技術を広く獲得することを目指します。プログラミングを学ぶのではなく、アプリ開発を学ぶことをテーマとしています。ですので、プログラミング言語・ライブラリーなどの細かい使い方の説明は行っていません。一方で、仕事や個人でアプリ開発をする際に必要となってくる、設計・アーキテクチャ・状態管理といった内容を盛り込んでいます。

 また、本書ではプログラミング言語の文法や開発環境の構築方法など、基礎知識を習得している方を対象としています。FlutterとFirebaseを使ったアプリ開発に全く触れたことのない方は、著者が運営している「Flutterで始めるアプリ開発」を事前に終了することをおすすめします。


 Flutterで始めるアプリ開発

 https://www.flutter-study.dev/


本書を通して学べること

 ・Authentication を使った認証

 ・Cloud Storage・Cloud Firestoreを使ったファイル・データ管理

 ・セキュリティールールを使ったアクセス制御

 ・アーキテクチャを意識した実装

 ・Riverpodを使った状態管理

対象読者

 ・Flutter・Firebaseを使ったアプリ開発の基礎知識を習得した方

 ・Flutter・Firebaseを使ったアプリ開発を実践できるようになりたい方

対応環境

 ・Flutter 2.2.0 (stable)

 ・Mac OS

お問い合わせ

 本書に関する意見、質問などは下記までお寄せ下さい。

 ・https://twitter.com/_umatoma

表記関係について

 本書に記載されている会社名、製品名などは、一般に各社の登録商標または商標、商品名です。会社名、製品名については、本文中では©、®、™マークなどは表示していません。

免責事項

 本書に記載された内容は、情報の提供のみを目的としています。本書を用いた開発・製作・運用は、必ずご自身の責任と判断によって行って下さい。これらの情報による開発・製作・運用の結果について、著者はいかなる責任も負いません。

第1章 FlutterとFirebaseを使ったアプリ開発

 アプリ開発について話をする前に、FlutterとFirebaseの概要を確認しておきます。

1.1 Flutterとは?

 「Flutter」とは、モバイル・Web・デスクトップ向けのアプリ開発ツールです。開発はGoogleが行っています。


 Flutter

 https://flutter.dev/


 主な特徴としては、以下の3つがあります。

 ・高速に開発できる

 ・優れたUIを簡単に作れる

 ・さくさく動く

 特に、プログラムの変更内容を即座に反映する「ホットリロード」と呼ばれる仕組みがあり、高速に開発を進めやすくなっています。

 従来はiOS・Android両方のアプリを作ろうとしたときは、異なるプログラミング言語を使い、iOS・Androidそれぞれ開発する必要がありました。ですが、FlutterやReact NativeといったiOS・Androidアプリをひとつのソースコードで開発できるツールが誕生し、より少ない学習コスト・時間でアプリ開発を行えるようになりました。

 ただし、メリットばかりではなくiOS・Android・Webと、異なる環境のアプリを開発できるようにするため、Flutterで実装することが難しい場合も、少なからずあります。ですので、必ずしもFlutterを使うことで全てのケースに対応できるとは限りませんが、手軽に短時間でアプリ開発を行いたいときに、Flutterが採用されます。

図1.1:

Tips

 Flutterを使うことでiOS・Android・Webアプリを開発することができますが、場合によってはiOS・Android・Web特有の知識が必要となります。仕事でFlutterを採用する際は、各環境の知識を持っている人に相談できる状態を構築しておくといいでしょう。

1.2 Firebaseとは?

 「Firebase」はユーザー認証・データベース管理といった、従来はバックエンドで実装する必要があった機能を簡単に導入できるサービスです。


 Firebase

 https://firebase.google.com/


 Firebaseを使うことで、バックエンドの開発にかかっていた時間・手間を大幅に減らすことができます。また、アプリからFirebaseの機能を簡単に利用できるライブラリーも提供されています。このライブラリーを使うことで、アプリ側の開発に必要な時間・手間も大幅に減らすことができます。

 Firebaseで提供されている機能は、ユーザー数やリクエスト数が増えても、基本的には対応が不要な仕組みとなっています。ですので、開発自体の時間や手間を減らせるだけでなく、運用に必要な時間・手間も同時に減らすことができます。

図1.2:

 Firebaseには多くの機能がありますが、ここでは本書で使う3つの機能を紹介します。


 Authentication

 新規登録・ログインといったユーザー認証の仕組みを提供します。メールアドレス・電話番号・ソーシャルアカウントなどを使った認証機能が、簡単に作れます。


 Cloud Storage

 画像・動画・ドキュメントなど、ファイルを保存する仕組みを提供します。ファイルのアップロード・ダウンロード機能を簡単に作れます。


 Cloud Firestore

 MySQLのように、色々なデータを保存する仕組みを提供します。アプリで必要となるデータの管理機能を簡単に作れます。


 最後に、Firebaseを使う方法の大まかなイメージを掴んでおきます。使うときに必要となるのは、大きく以下のふたつです。これらを準備するだけで簡単に開発ができる仕組みとなっています。


 構成ファイル

 Firebaseの機能にアクセスするための認証情報


 SDK

 Firebaseの機能を簡単に使うためのライブラリー


図1.3:

Tips

 Cloud Firestoreは、従来のデータベースとは様々な面で大きく異なります。Cloud Firestoreを使い込むと、MySQLやPostgreSQLとは違う考え方をする必要がある場面も出てくるので、スキーマ設計やセキュリティールールなど、改めて基礎知識を学習しておくといいでしょう。

1.3 この章で学んだこと

 お疲れさまでした。以上でFlutterとFirebaseの概要把握は完了です。この章の内容を要約すると、次のようになります。

 ・Flutterはモバイル・Web・デスクトップ向けのアプリを作れるツール

 ・Firebaseはユーザー認証・データベース管理などを簡単に導入できるサービス

Tips

 本書をご覧になっている方は既に、Flutter・Firebaseを知っていると思います。ですが、技術は日々進歩し、Flutter・Firebaseに関しても日々アップデートが行われています。最新の機能を使うことでよりよいアプリを開発できる可能性があるので、ぜひこの機会にFlutter・Firebaseの最新情報を確認してみるといいかもしれません。

第2章 クラウド画像管理アプリ

 それでは、アプリ開発の本編へと進んでいきます。

 ここでは、本書で開発していくアプリの概要を確認し、大まかな設計を行っていきます。多くのプログラミング参考書では、設計に関する話は出てこないと思います。ですが、実際にある程度凝ったアプリを開発しようとすると、適当にコーディングを進めても、形にすることが難しくなってきます。そこで、必要になるのが設計です。

 この、「設計する」ということを難しく考える必要はありません。もちろん、高度な設計スキルを求められる場面もありますが、大切なのは「どのようにアプリを作るとよさそうか?」ということを自身で考え、図とテキストで書き出してみることです。

 それでは、開発していくアプリの概要を確認していきましょう。

Tips

 仕事でシステム開発を行う際には、システム全体や各機能の設計を行うことが必要となる場合があります。特にシステムの規模が大きくなると、事前の設計なしに開発を進めることが困難となる場合が多くなるため、実装スキルだけでなく設計スキルも身に付けておくことで、担当できる分野も広がってくるでしょう。

2.1 どんなアプリを作るの?

 本書では、Googleフォトのように自身の画像を管理する、クラウド画像管理アプリを開発していきます。

 主な機能は以下の3つです。


 ユーザー認証

 メールアドレス・パスワードで新規登録・ログイン


 画像管理

 画像の保存・削除・一覧表示


 お気に入り登録

 保存した画像のお気に入り登録


 また、画面は以下の3つです。

図2.1:

 複雑な機能ではありませんが、多くのアプリで共通して必要となる「ユーザー認証・データ管理・ファイル管理」を含めています。

試し読みはここまでです。
この続きは、製品版でお楽しみください。