Flutterでアプリ開発してみた

はじめに

この記事は，ドコモアドベントカレンダー22日目の記事になります。

こんにちは，ドコモの角野といいます。サービスデザイン部でahamo のモバイルアプリの開発を担当しています。

モバイルアプリをiOS向けとAndroid向けでそれぞれに開発するのは手間がかかるので，効率化のためにクロスプラットフォームに対応したフレームワークを使って同時に開発しちゃおうということで，ahamoアプリはFlutterを使って開発しています。本記事ではFlutterを使ってみてよかったこと，苦労したことについて紹介します。

モバイルアプリ開発に興味ある方や，Flutterを利用してみようと思っている方の参考になったらうれしいです。

フレームワークの選定は？

ahamoアプリの開発は2020年から開始しました。当時はFlutterとReactNativeが2強でしたが，以下の理由からFlutterを使うことにしました。

• 当時としてはReactNativeがメジャーバージョンになっていない状況だった

• FlutterはGoogle社がサポートしており，OSVへの対応やバグにおけるリリース頻度が高く，世の中の恩恵が受けやすい状況であった

• ahamoアプリの開発プロジェクトではFlutterを開発経験のある人材の方が集めやすかった

• Flutterの言語であるDartはJavaユーザからすると学習コストが低めであった

（ReactNativeはJavaScriptであり，アプリエンジニアよりはWebエンジニア調達が必要）

Flutterとは？

Googleが提供するモバイルアプリ用のフレームワーク（2018年公開）で，androidとiOSを同じソースを共有して，同時に作成することができます。 「ポータブル・UI・ツールキット」と呼ばれていて，独自のデザインUIを使用できることから，デザインの自由度が高いところが評価されています。

開発言語にはDartというプログラミング言語を使用します。Dartは「C#」や「Java」に近い構文と言われていて，左記のプログラミング言語を習得していれば，比較的習得難易度が低めです。 コードの実行パフォーマンスが優れている，大規模開発に向いているといった特徴があります。

Flutterを利用したahamoアプリの開発

今回，Flutterを利用した開発として，ahamoのアプリ開発について紹介します。

ahamoアプリとは？

ahamoのアプリはahamoの契約を申し込まれた方向けのアプリで，スマホのお届けまでの状況を簡単に確認したり，利用料金やデータ使用量を一目でチェックできたり，大盛りなどのオプション契約をすぐに申し込めたりといったことができるアプリです。

最近（2022年7月～）クエストをクリアするとdポイントや特定商品の引換券がもらえる「ahaクエスト」という新機能も提供しましたので，ahamoを契約されている方は（ahamoを契約されてない方はahamoに契約していただき），ぜひahaクエストに挑戦してみてください。

Flutterの利用方針

ahamoアプリの開発においては，開発効率を重視し，Presentation層からInfrastructure層までFlutterを採用し，可能な限りFlutterで開発する方針としました。

参考までに，以下のアーキテクチャを採用しています。

• ChangeNotifier+Provider

　(開発当時、Flutter公式が推奨していたアーキテクチャパターン)

• MVVM+Service層

（MVVM：Providerと親和性が高い。開発者人口が多い。Service層：大人数向け）スマホ機種変更時のデータ移行をサポートするアプリです。

Flutterで開発してみてよかったこと

Flutterで開発してみて，よかったことは以下です。

• ahamoの世界観を表現したレイアウト・インタラクションをワンコードで開発できた

• 設計・製造までは概ね生産性2倍で開発を進められた

• 片方のOSにて試験で担保された場合の安心感は大きかった

• 故障解析・横展開も対応が効率的であった

例：不具合があった際に1つのソースを修正すれば改修可能なため，改修コスト半分

苦労したこと

Flutterを利用してみて苦労したことについて紹介します。

アプリサイズ

FlutterはNativeアプリより，アプリサイズが大きくなる傾向があります。Flutter側にフレームワーク部分のコードが含まれるためですが，特に，CPUアーキテクチャのモジュールはデータ量が増える要因になります。

ahamoアプリの開発では，アプリサイズを小さくするために，対象としているアーキテクチャの資材（iOSとandroid）しか入らないようにビルドスクリプトを作成してサイズを縮小しました。 図の出展元（Flutter SDKの仕組み - Qiita)

Flutterのバージョンアップ

アップデートの早いFlutterのバージョンアップに追随する必要があったため，何度かFlutterのバージョンアップ対応を実施しましたが，その都度稼働がかかりました。

Flutterのバージョンアップ

必要な機能の追加

webviewパッケージは複数ありますが，ahamoの機能を満たせるものがなかったのでパッケージを選定して自分たちでパッケージを改修・保守する必要がありました。

プラグインのwebview機能は，主にNative層で実装されているため，Flutter層よりはNative層を中心に拡張しています。 FlutterとNative間は，methodchannelを介して連携しており，実装難易度が高いです。

おわりに

Flutterを使ってモバイルアプリの開発をしてみて，よかったこと，苦労したことについて紹介しました。

ここまで読んでいただいた方ありがとうございました。

モバイルアプリ開発に興味がある方にとって，少しでも参考になれば幸いです。