目次
はじめに
第1章 FlutterとFirebaseを知ろう
第2章 開発環境を構築しよう
第3章 Flutterをサクッと動かしてみよう
第4章 Flutterの基礎知識を学ぼう
第5章 アプリの仕様を決めよう
第6章 Firebaseの設定をしよう
第7章 一覧画面の実装をしよう
第8章 入力画面の実装をしよう
第9章 登録機能の実装をしよう
第10章 編集機能の実装をしよう
第11章 削除機能の実装をしよう
第12章 ログイン機能の実装をしよう
第13章 共有機能を実装しよう
第14章 多言語化対応しよう
第15章 アプリのアイコンを設定しよう
第16章 スプラッシュ画面を実装しよう
第17章 アプリをリリースしよう（Android版）
第18章 アプリをリリースしよう（iOS版）※参考
おわりに
はじめに
本書をお手に取って頂きありがとうございます。
本書では、GoogleによるオープンソースのモバイルアプリケーションフレームワークであるFlutterと、同じくGoogleが提供するFirebaseを使用し、AndroidとiOS上で動作するアプリを作成します。実際に「貸し借りをメモするアプリ」を作成しながら、Flutterで必要となることを学びます。
この本を通して学べること
・Flutterの環境構築
・Flutterを用いたAndroid、iOSアプリ開発
・FirebaseとFlutterの連携
・画面遷移などのFlutterの基礎的な知識
対象読者
・Flutterが気になる方
・AndroidやiOSアプリを開発してみたい方
・Firebaseを使ったアプリを開発してみたい方
サンプルプログラムについて
本書で記載されているコードはすべて次のGitHubリポジトリからダウンロードすることができます。タグで章ごとに項目を分けてありますので、ぜひ参考にしてください。
免責事項
本書に記載された内容は、情報の提供のみを目的としています。したがって、本書を用いた開発、製作、運用は、必ずご自身の責任と判断によって行ってください。これらの情報による開発、製作、運用の結果について、著者はいかなる責任も負いません。
表記関係について
本書に記載されている会社名、製品名などは、一般に各社の登録商標または商標、商品名です。会社名、製品名については、本文中では©、®、™マークなどは表示していません。
底本について
本書籍は、技術系同人誌即売会「技術書典5」で頒布されたものを底本としています。
第1章 FlutterとFirebaseを知ろう
1.1 Flutterの概要
Flutterは、Googleが開発したオープンソースのモバイルアプリケーションフレームワークです。
モバイルアプリの開発はこれまで、「AndroidであればJavaやKotlin」「iOSであればObjective-CやSwift」で開発する必要がありました。AndroidとiOSのアプリをリリースする場合にはそれぞれ別の言語を学習しないといけないため、開発コストが非常に高くなります。
しかし昨今、クロスプラットフォーム開発フレームワークという、ひとつの言語でAndroidとiOSで動作するアプリケーションを開発できるツールが登場しています。たとえば、Facebookが開発したReactNativeやMicrosoftが開発したXamarinがこれにあたります。
2017年5月にGoogleが発表したクロスプラットフォーム開発フレームワーク、それがFlutterです。
1.2 Flutterの特徴
1.2.1 簡単なUI設計
マテリアルデザインに沿ったUIを簡単に設計できます。「マテリアル＝物質的な」という意味があるように、マテリアルデザインとは「物理的な法則に沿ったデザイン」を指します。現実世界のルールである光や影、奥行き、重なりを取り入れたデザインとなっており、Googleが発表しているWebサイトやアプリに多く用いられています。
これを簡単に設計できるため、UIにあまり工数を掛けずとも、Google製のような美しいアプリケーションを簡単に作成することができます。
1.2.2 開発言語 Dart
Googleによって開発されたプログラミング言語です。これはJavaScriptの替わりとなる言語として作られました。JavaScriptやJavaと記法が似ており、どちらかの言語を使ったことがある方には始めやすい言語でしょう。
1.2.3 ホットリロード対応
Flutterにはホットリロードという、アプリの実行中にコードの変更をすばやく反映させる機能があります。
アプリの実行中にコードを変更した場合、通常は再ビルドする必要があり、それを反映するためには数十秒から数分かかります。しかしホットリロードを使うと、コードを変更してもアプリを停止することなく動作に反映できるため、格段にアプリの開発効率が向上します。
次の画像は、「Hello World!」から「Flutter」と文字をプログラム上で変更する例です。文字を変更してプログラムを保存すると、1秒後には画像にあるようにアプリの表示が更新されました。
通常であれば数十秒から数分かかるプログラムの更新がすぐできるので、非常に効率よくプログラムを作成できるのが伝わると思います。
FuchsiaとFlutter
Googleの開発しているOSにFuchsia（フクシア）というものがあります。2016年8月にGitHub上に公開されその存在が明らかになりました。特徴としては、スマートフォン、タブレット、PCなど幅広いデバイス上で起動させることができ、また、Flutterで作成したアプリを動作させることができます。FuchsiaがAndroidの後続として世界に広まれば、Flutterひとつでモバイルアプリ、PC用アプリが開発できる世の中になるかもしれませんね。
1.2.4 ReactNativeやXamarinとの比較
他のクロスプラットフォーム開発環境とFlutterを比較してみます。
| 対応プラットフォーム | Flutter/Dart | ReactNative/JavaScript | Xamarin/.NET |
| Android | ○ | ○ | ○ |
| iOS | ○ | ○ | ○ |
| デスクトップ（Win） | - | - | ○ |
| デスクトップ（Mac） | - | - | ○ |
| Web（フロントエンド） | - | - | ○ |
| Web（バックエンド） | - | - | - |
デスクトップアプリが作れるXamarinに比べると対応プラットフォーム数は劣りますが、ReactNativeと対応プラットフォーム数は同じです。
1.3 Firebase
FirebaseはGoogleが運営するBaaSです。
BaaS（backend as a service）とは、サーバーサイドのプログラミングが不要で、データーベースや認証機能、プッシュ通知などを行ってくれるサービスです。
本書では「Cloud Firestore」（※2018年11月現在、β版のみ提供）という、クエリと自動スケーリング機能を兼ね備えたリアルタイムデーターベースを使用します。
第2章 開発環境を構築しよう
それでは、Flutterで開発するための環境を構築します。
インストールするものは次のとおりです。
・Flutter SDK
・Android Studio
・Xcode（（Macのみ）iOSの開発を行う場合）
基本的に開発環境および開発はWindows 10をベースに行います。
ここでは執筆現在（2018/12/05）のインストール方法について紹介します。本書の手順でうまくいかない場合など最新のインストール方法については公式サイトをご覧ください。
公式サイト： https://flutter.io/get-started/install/
2.1 Flutter SDKのインストール
Flutter SDKのインストールを行います。WindowsとMacのインストールが手順が異なるので、順に説明します。
2.1.1 Windows版
１．公式のFlutterのサイト（https://flutter.io/docs/get-started/install/windows）にアクセスします。
Flutter SDKのダウンロードリンクをクリックし、ダウンロードします。※執筆時点ではフォルダー名が「flutter_windows_v1.0.0-stable.zip」となっています。
２．ダウンロードしたZipファイルを展開し、中身のFlutterフォルダーを「C:\Users\ユーザーフォルダー」の下などに配置します。
