ソリューションナレッジ

初めてのモバイルアプリ開発（Flutter × Firebase）

公開日：2023年03月03日

三井情報株式会社

はじめに

今回のコラムはFlutterとFirebaseを使ったクロスプラットフォームでのモバイルアプリ開発について扱います。
総務省はモバイルアプリ開発市場が今後も大きく拡大し、ゲーム、学習、翻訳、健康管理などのアプリケーションが飛躍的に成長するというデータを出しています（※）。
本コラムでは、初めにFlutterとFirebaseについて説明し、私たちが社内向けにサンプルで作成したモバイルアプリについて解説した上で、作成を通じて実感したことを紹介していきます。今後モバイルアプリ開発が増えていく中で、どのようなプラットフォーム、バックエンドを使用するのがよいのか、その悩みに対して少しでも助けになることができればと思っております。

※参考：総務省令和3年版情報通信白書レイヤー別にみる市場動向（https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/r03/html/nd105210.html）

Flutterとは

FlutterとはGoogleが提供している、クロスプラットフォームアプリケーションの開発のためのオープンソースフレームワークです。
クロスプラットフォームアプリケーションとは、1つのコードでiOS、Android、ウェブ等の複数の環境で動作することのできるアプリケーションです。従来、環境ごとにコードを作成していたものが1つのコードで済むことで、コーディングやテストの時間削減ができます。現在、FlutterはiOS、Android、ウェブ、Windows、MacOS、Linuxの6つのプラットフォームでのアプリケーション開発をサポートしています。

Flutterのメリットとして、プラットフォーム依存ではない共通UIデザインを簡単に作成できUIの自由度が高いことが挙げられます。Flutterはプログラミング言語としてGoogleが2011年に開発したDartという言語を採用しています。歴史の浅い言語のため、デメリットとしてDart言語の開発者が少ないことが挙げられますが、Dart言語はJavaScriptの問題点を改善する目的で開発されたこともありJavaScriptやC#に近い文法のため、比較的習得しやすい言語です。

Firebaseとは

Firebaseとは、Googleが提供するmBaaSと呼ばれるサービスの1つです。
mBaaSとはモバイル（mobile）向けのBaaS（Backend as a Service）のことであり、モバイル向けのアプリケーションが必要とするサーバー側の様々な機能を一括して提供するサービスのことです。mBaaSを利用することでサーバー側の設計や開発、運用が不要となり、開発者がアプリケーション側の開発に集中できるなどといったメリットがあります。そんなmBaaSの1つであるFirebaseでは、アプリ構築からリリースとモニタリング、エンゲージメントまでをサポートするモバイルアプリ開発のバックエンド環境をクラウド上で提供しています。

Firebaseを利用するメリットとしては、サーバーレスのNoSQLドキュメントデータベース「Cloud Firestore」、ユーザの初期登録や認証をアプリに簡単に実装できる「Authentication」、アプリのアクセス解析ツール「Google Analytics for Firebase」など、アプリ開発に役立つ豊富な機能を利用できる点が挙げられます。これらの機能を利用することで、サーバー管理や保守が不要になるだけでなく、リソースの節約とエンジニアの負担軽減にも繋がります。その他にも、Java、JavaScript、Swift、C++、Dartなど複数の言語で利用できる、豊富な機能を組み合わせて柔軟なアプリ開発ができる、などといったメリットも享受することができます。

Flutter × Firebaseクロスプラットフォームモバイルアプリケーションの構築

今回は、アプリ開発経験のほとんどない私たち3名が、実際に、Flutter × Firebaseの構成でモバイルアプリを作成してみました。
作成したのは社内の品質管理意識向上をサポートするアプリケーションです。プロジェクトを進める上で必要な品質管理に関する知識をクイズ形式で学ぶもので、メンバーの知識の定着を図るだけでなく、管理者が解答履歴データを見ることでメンバーの理解度を定期的に効率よく計測することができます。

アプリの構成図

アプリの動作について

認証画面
アプリを起動すると認証画面が表示されます。メールアドレスとパスワードを入力し「Sign In」ボタンをタップすると、開始画面に遷移します。
クイズ開始画面
「クイズ開始」ボタンをタップすると、回答画面に遷移してクイズが始まります。ヘッダーの右にあるアイコンをタップでログアウトでき、フッターの「履歴」ボタンをタップすると履歴画面に遷移します。
クイズ回答画面
何問目の問題かを示す番号と、問題形式、問題文、選択肢が表示されます。画面下部の「前へ」ボタンと「次へ」ボタンで、前画面と次画面に遷移します。最終問題の画面では「提出」ボタンをタップすると提出確認のポップアップが表示されるので、「YES」を選択して回答を提出します。回答提出後はクイズ開始画面に遷移します。
履歴画面
ユーザの過去の回答日時と得点のデータを一覧で見ることができます。詳細を見たい回をタップすると、履歴詳細画面に遷移します。フッターの「クイズ」ボタンをタップするとクイズ開始画面に遷移します。
履歴詳細画面
選択した回の問題やユーザの回答、正答、正否などといった詳細を見ることができます。ヘッダーの左にある「←」アイコンをタップすると履歴画面に戻ります。

作ってみた感想

今回、Flutter × Firebaseを用いたアプリの開発を通して以下の2点を実感することができました。

初心者でも開発に取り組みやすい

これまでFlutterもFirebaseも扱ったことがなく、アプリ開発自体もほとんど経験がない中での開発となりましたが、以下の様に学習コストが低く参考にできる情報が豊富にあるという点で、初心者でも開発に取り組みやすいと感じることができました。

開発に使用したDartは、JavaScriptやC#に近い文法が採用されたシンプルな言語と言われており、初心者でも比較的理解しやすく、ある程度の学習でコードを書くことが可能。
充実した公式ドキュメントに加え、ツールの扱い方やDartの書き方を解説してくれている日本語のサイトも多く、環境設定やコーディングなど一見難しそうなことも調べながら進めることが可能。
ライブラリが豊富。

開発時間を短縮できる

Flutter、Firebaseの以下の特長から、開発を効率的に行うことができ、開発時間の短縮につながったと感じています。

Firebaseを用いることでバックエンド側の開発が不要。
Firebaseの各機能を使用する際にFlutterで用意されたライブラリを用いることで、より効率的な開発が可能。
特に今回使用する機会が多かった「Cloud Firestore」というドキュメント志向のNoSQLデータベースは、はじめは扱いが難しく感じましたが、ライブラリの使用によってデータの取得や加工が容易となり、結果として開発時間の短縮につながったと思います。
Flutterは、作成したアプリをiOSやAndroidなど複数のプラットフォームで動かす場合もコードの書き換えが不要。
1つのコードで各環境での動作確認を行えるため、コードの記述量も少なくて済み、開発の負担も軽くなったと思います。

上記のようにFlutter × Firebaseを活用することで、開発開始時にはFlutterについてもFirebaseについても知識がない、アプリ開発の経験がないメンバーでも、およそ１～２か月でこのアプリの開発を行うことができました。初心者でも取り組みやすく効率的な開発ができる便利な環境であるということを、今回のアプリ開発を通して実感しています。

まとめ

今回はFlutter × Firebaseでのモバイルアプリ構築について、社内向けアプリの開発事例を踏まえてご紹介しました。
1つのコードで複数環境対応が可能なFlutterと、モバイルのバックエンドに必要な機能が揃ったFirebaseの構成はモバイルアプリ開発においておすすめできる構築環境です。
もはや生活の必需品ともいえるスマートフォンですが、コロナ禍において利用する頻度・時間が増加し、モバイル向けのコンテンツやサービス提供がより重要な時代となっていると言えます。

三井情報では今後もモバイルを活用した新たなビジネスの創出、お客様への価値提供へ取り組んでいきます。