検索
column & blog
DX技術本部

Flutterで始めるモバイル開発

クロスプラットフォームのFlutterを使用したモバイル開発についてご紹介

Flutterで始めるモバイル開発

今回は、Flutterを活用したモバイル開発について事例を交えながらお伝えできればと思います。

プロフィール 高野和樹
プロフィール 市川友也

1.「クロスプラットフォーム」でのモバイル開発とは?
従来のスマートフォン向けのモバイル開発では、各OSに合わせたプログラム言語での開発が必要であり、様々なプラットフォーム向けにアプリを提供する場合は、その種類分の開発コストがかかる、保守性が低下するなど多くの課題がありました。

これらの課題への対応として「クロスプラットフォーム」での開発が有効です。
「クロスプラットフォーム」では、iOS, Android, Windows, macOSなど異なるプラットフォーム上で、同じ仕様のアプリケーションを動かせるプログラムの開発が可能となります。

「クロスプラットフォーム」でのモバイル開発とは?

「クロスプラットフォーム」の主なメリットは以下のとおりです。

  1. 多様化するOSのシェアに対応できる
    ネイティブの場合、同じ仕様のアプリでもOSごとにそれぞれ開発が必要だが、クロスプラットフォームの場合、1コードで複数のOSに対応したアプリが作成可能なため、開発工数が抑えられる。
    ※海外ではAndroid:7割、iOS:3割 日本だと、Android:3割、iOS:7割

  2. 開発言語がOSに依存しない
    開発言語がOSに依存しなくなったことで、柔軟に開発言語が採用できる。
    また、利用される言語が1つとなることで、学習コストが低い。
    クロスプラットフォームのほとんどがOSSであるため、コミュニティも活発。

  3. アプリの保守運用の一元化
    開発言語が1つとなることで、保守性を高められる。

ページトップへ戻る

2.SDGsへの貢献(環境にやさしい技術、生産方法)
近年注目されているSDGsの観点からも、クロスプラットフォーム開発は注目されています。

例えば
 ・1コードで複数プラットフォーム向けの開発(開発コストの低減)
 ・ホットリロードによる開発効率の向上(スピーディーな開発)で、省エネルギー化
 ・ARMアーキテクチャによる低消費電力

など、効率的な開発による省エネルギー効果が挙げられます。

ページトップへ戻る

3.「クロスプラットフォーム」の比較
「クラスプラットフォーム」向けの開発環境は、多くのベンダーから無償で提供されています。

 FlutterReact NativeXamarinUnity
開発会社GoogleMeta(旧Facebook)MicrosoftUnity Technologies
OSS×
開発言語DartJavaScript / TypeScriptC# / F#C#
開発環境
(IDE)
Visual Studio Code / Android Studio / Xcode,IntelliJ IDEAVisual Studio Code / Android Studio / Xcode / NuclideVisual StudioVisual Studio /
Visual Studio Code /
JetBrains Rider
Github
スター数
137k102k5.5k-
対応プラットフォームiOS, Android / Web / Windows / Mac / LinuxiOS / Android / WebiOS / Android / Windows / MaciOS / Android / Web / Windows / Mac / Linux / PlayStation 4 Vita / Nintendo Switch 3DS /
XBox One
ホットリロード
UI独自UIネイティブUIネイティブUI / 独自UI独自UI

最もGitHubスター数が多いのは「Flutter」で、人気のあることが窺えます。
Flutterは他にも多くの特徴があります。

  1. 成長率
    Google PlayストアにおけるFlutterを利用したアプリ数から見る、高い普及率。
    2021年3月時点で15万件以上、2022年2月時点で50万件以上のアプリがリリースされている。

  2. 将来性
    Androidの次期OSと言われるGoogleが開発中のFuchsiaにおいて、主要な開発フレームワークとしてFlutterを利用。
    Googleが提供する30以上のサービスもFlutterを利用して開発されている。

ページトップへ戻る

4.「Flutter」とは?
本章ではよりFlutterを掘り下げたいと思います。
「Flutter」は、2018年にGoogleによって開発されたオープンソースUIのSDKであり、単一のコードベースから、Android、iOS、Web向けのクロスプラットフォームなアプリを開発するためのフレームワークです。
※2022/08/23時点の最新バージョンは3.0.5

高速でオブジェクト指向のプログラミング言語の「Dart」に基づいており、高パフォーマンスとUIデザイン面、高生産性で開発者に人気の技術となります。

Flutterの特徴として、ネイティブアプリのような本格的なUIコンポーネントが利用できることがあります。Google推奨マテリアルデザインを活用してプラットフォームに依存しないUIデザインが可能です。(ただし、OSごとの独自実装が一部必要)
また、開発環境も豊富であり、Android Studio、Visual Studio Code、Xcodeなど開発者ごとに馴染みのある環境で開発ができます。

良い点が多いFlutterですが、Flutter自体が新しいフレームワークのため、OSSライブラリが比較的少なく、日本語の文献が少ない、OSのアップデートに合わせたFlutterのアップデートにはラグがあり、素早いOSバージョンアップ対応には不向きである、などのデメリットもあります。

ページトップへ戻る

5.バックエンドサービスとの連携
モバイル開発では、共通的に利用する認証処理や、DBでのデータ管理や高負荷なサーバー処理のため、バックエンドサービスと連携する場合も多くあります。
FireBaseのようなBaaSとFlutterを連携した構成とすることで、「期間短く」、「様々なプラットフォーム」へのアプリ提供が可能となります。

システム構成イメージ

6.Flutterでの開発
では、実際どのようにFlutterで開発を進めていくのか、Visual Studio Code(以降VSCode)を利用した場合での大まかな流れをご紹介します。

Flutterで開発する場合は、Dart言語で実装したモジュールを各プラットフォーム向けにビルドして各環境向けのアプリをリリースします。

クロスプラットフォームアプリ開発イメージ

開発時は、各プラットフォームのエミュレーション環境と連携して、各プラットフォームでのデザイン面の違いなどを確認しながら実装が可能となります。

本章では、具体的な開発イメージをご紹介します。
ここではFlutter SDKの導入やVSCodeプラグインの導入は割愛し、大まかな開発の流れのみご紹介します。

  1. 新規プロジェクトの作成
    まずアプリケーションのひな型を作成します。
    アプリケーション名 を入力するとFlutter SDKが自動で空のアプリケーションを作成してくれます。
    img_clumnblog_dx_2022_20

  2. ソースの実装
    アプリケーションは「lib/main.dart」から処理を開始します。
    各画面につき原則一つのdartファイルで分割し、画面処理を実装していきます。
    各プラットフォーム別のアイコンなどは個別に対応が必要です。
    img_clumnblog_dx_2022_21

  3. デバッグ
    ある程度実装が進んだら、各エミュレーション環境で画面確認などを行います。
    エミュレーション先を選択し、「lib/main.dart」を起動します。
    img_clumnblog_dx_2022_22
    ここではAndroidをエミュレート先に選択しているので、Androidで起動します。
    img_clumnblog_dx_2022_23

  4. テスト
    Flutterでは工程に合わせて、「Unit Test」、「Widget Test」、「Integration Test」の3つの自動テストを利用します。

    単体テスト工程では各モジュールの自動テストを定義できる「Unit Test」、画面操作の自動テストが定義できる「Widget Test」が有用です。
    特に「Widget Test」は、通常では自動テスト化しにくい画面操作が標準SDKで実施できるため、非常に使い勝手がよいです。

    Widget Testの例)
    img_clumnblog_dx_2022_24
    結合テスト工程以降で各プラットフォームの検証をする場合は、「flutter_driver」を利用して各エミュレーション環境でのテスト実行が可能な「Integration Test」を用いると、環境差異のテストも自動化が可能となっています。

ページトップへ戻る

7.最後に
いかがでしたでしょうか。
Flutterを中心にクロスプラットフォーム開発がしやすくするための環境が整ってきています。
昨今のスマートフォン向けアプリ開発では、Android、iOSのいずれにも対応することが当然になってきており、この風潮からも今後クロスプラットフォームでの開発が多くなってくるのではないかと考えられます。
「より早く」「より色々な環境へ」リリースすることは今後も強まってくるニーズですので、継続的なキャッチアップが必要になると思います。

※ Flutter、Android、Android Studio、Google Cloud、Dart、Google Playストア、Fuchsia、Firebase、Google Cloud Platform、Google Adsのサービス名およびロゴマークは、Google LLCの商標または登録商標です。
※ Microsoft Windows、Visual Studio Code、TypeScript、XBOX One、その他Microsoftのサービス名およびロゴマークは、米国Microsoft Corporationの米国およびその他の国における商標または登録商標です。
※ iOS、macOS、Xcodeは、米国およびその他の国で登録されたApple Inc.の商標です。
※ APACHE CORDOVAのサービス名およびロゴ名は、The Apache Software Foundationの商標または登録商標です。
※ React Native、Nuclide、Facebookのサービス名およびロゴマークは、Meta Platforms, Inc.の商標または登録商標です。
※ IntelliJ IDEA、JetBrains Riderのサービス名およびロゴマークは、JetBrains, s.r.o.の商標または登録商標です。
※ 「Unity」の名称、Unity のロゴ、およびその他の Unity の商標は、米国およびその他の国における Unity Technologies またはその関係会社の商標または登録商標です。
※ PlayStation 4 Vitaは、株式会社ソニー・インタラクティブエンタテイメントの商標または登録商標です。
※ Nintendo Switch3DSは、任天堂株式会社の商標です。
※ Slack is a registered trademark and service mark of Slack Technologies, Inc.
※ Jiraのサービス名およびロゴマークは、Atlassianのオーストラリア、米国およびその他の国における商標または登録商標です。
※ TWITTER, and the Twitter Bird logo are trademarks of Twitter Inc. or its affiliates.
※ 掲載の会社名・製品・サービス名・ロゴマーク等は各社の日本および他国における商標または登録商標です。
※ 掲載の画面は、すべてイメージです。また、掲載している文章、写真、画像、データ、イメージについて弊社の許可なく無断転用・ 転載・変更・改ざんすることを固くお断りします。