Flutterでゼロからアプリ開発する際の工程についてまとめました。
私が開発した際の進め方で、ほかにもさまざまな方法があるかもしれません。あくまで一例として見て頂ければと思います。また、ほかのかたの進め方があればコメント頂けたら嬉しいです。
アプリ開発の工程
Flutterアプリ開発のおおまかな流れは下記の通りです。この工程は開発言語にかかわらず、ほかの言語でも汎用性があります。
- アプリの企画
- 環境構築
- アプリのデザイン
- プログラミング
- テスト実行
- 本番ストアに公開
アプリの企画
まずはじめにアプリの企画をします。企画とはどのようなアプリを作るかを決めることです。具体的には、
- ターゲットユーザー
- アプリで解決する課題
- 課題の解決方法（実装するおおまかな機能）
- 有料/無料
- 収益化の方法
- アーキテクチャ（開発ライブラリ・言語、認証の有無、データベースなど）
- 配信先のストア
- 規約、著作権表記、プライバシーポリシー、特定商取引法にもとづく表記
- メンテ（保守）のこと
をおおまかに決めます。
詳細に決めるというよりはおおまかに決める程度でよいです。作りながら詳細を考えていくアプローチのほうが実効性が高いためです。
ただし製作を進めるにあたり随時考えていく必要がある論点ですので、事前に頭に入れて進めましょう。
環境構築
製作するアプリの骨格が決まったら、Flutterアプリを開発する環境を準備します。
アプリ開発に必要なもの（ハードウェア、ソフトウェア）は下記記事を参考にしてください。
Flutter開発の環境構築については公式ドキュメント(英語)を参考にしてすすめましょう。
Windows
Mac OS
Linux
アプリのデザイン
アプリの企画で決めたおおまかな機能を実現するための画面デザインを検討します。
画面デザインがなくても作り始めることは可能ですが、事前に考えておいたほうが作りやすいです。
アプリの画面デザインを描くためのツールは複数の選択肢があります。
- デザイン専用ツール（AdobeXD、InVisionほか）
- illustrator
- Google SlideやPowerPointなどのプレゼンテーションツール
- iPadとApple Pencilで手書き
高機能順に並べています。
デザイン専用ツールを使うことで、チームでデザインを共同編集したり、UIのパーツを活用したり、画面遷移を表現したり、などできます。アプリ開発チームを組み、デザイナも入れて開発をすすめるような場合にはデザイン専用ツールを採用することが多いです。
一方で個人や２，３人で開発をおこなう場合には、大まかなデザインをillustratorで描き、詳細は機能を作り込みながら考えるというケースもあります。
なお、画面デザインのテンプレートはGoogleの公式ドキュメントであるMaterial Designが参考になります。
私の場合は、AdobeXDとillustratorを組み合わせで描き、書いたデザインをKibelaで共有してコメントのやりとりをしました。
プログラミング
アプリの大まかな機能やデザインが構想できたら、プログラミングに取り掛かります。
Flutterアプリでよくある機能やウィジェット（UIパーツ）の実装方法はGoogleの公式ドキュメントFlutter.devが参考になります。
テスト実行
実現したいプログラムの機能がかけたら、つぎはテスト実行です。
テスト実行には二段階あります。
スマホのエミュレータor実機でテスト
手元のパソコンもしくはパソコンに接続したiPhone/Androidの実機でテストします。
手元のパソコンでは、スマホのエミュレータを実行して仮想的なスマートフォンで動きを確かめます。
いずれにしてもアプリの実行にパソコンが必要となるため、開発者自身でアプリのデザインや動きを確認することが目的です。
テスト実行の環境構築方法はFlutter公式ドキュメントに記述があります。
ストア経由でアプリをテスト配布
アプリ開発者以外にもアプリのデザインや動きをレビューしてもらうためには、ストアを経由してテストアプリを配布します。
- iOSの場合はApp Store Connectを利用したTestFlightのテスト機能
- Androidの場合はFirebaseのApp DistributionかGoogle Play Consoleを利用したテスト機能
App Store Connectを利用するためにはApple Developer Programへの登録が必要になり、年間299米ドル（本記事執筆時点2022/2/22の価格）を支払います。
Google Play Consoleを利用するためには、Google Play デベロッパー アカウントへの登録が必要になり、初回のみ登録料（US$25）（本記事執筆時点2022/2/22の価格）を支払います。
私はiOSもAndroidも両方配信するため、両方のストアでテスターに向けてテスト配布しました。
本番サイトに公開
初期リリースで実装する機能がすべて書けたら、本番ストアにアプリを公開します。
iOSはApp Store Connectを利用して本番ストアに公開します。
AndroidはGoogle Play Consoleを利用して本番ストアに公開します。
なお、各ストアで公開するにあたり、アプリアイコンの設定、プライバシーポリシーの公開、そしてアプリ情報の入力など複数の作業が必要になります。
以上、ゼロから本番ストアに公開するまでの、Flutterアプリ開発の流れについて書きました。本記事ではおおまかなアプリ開発の工程を把握していただくことを目的にしていますので、詳細な手順は割愛しましたことをご了承くださいませ。
皆様のアプリ開発の一助になったら幸いです。ではでは。
