− まずは簡単に自己紹介お願いします
宮木: 宮木修平と申します。スマートドライブでモバイルアプリエンジニアをやっています。受託開発企業、モバイルアプリ開発パッケージの運営企業を経て、スマートドライブには2018年に入社しました。スマートドライブではAndroid、iOS、 Flutterアプリの開発保守業務と、モバイルアプリ関連施策について社内での各種調整業務を行っています。− 今回のプロジェクトが始まったきっかけを教えてください
宮木:プロジェクトのモチベーションとしては大きく3点ほどありました。 1点目はコードの保守効率が低下してきたことです。従来から提供しているSmartDrive Fleetアプリは、2017年5月からサービスが始まり、サービスの発展とともに拡張されながら現在まで運用を続けてきました。その時点その時点での方針や人的リソースの状況、アプリ開発におけるトレンドなどの影響を受けつつ機能が増築されてきたことで、以前からの機能は古いつくり、新機能は新しいつくりになっていたり、iOS版とAndroid版でも微妙に仕様が異なっていたりして複雑さが増していました。 2点目として、モバイルアプリエンジニアのリソースの観点でも、開発効率を改善したい状況がありました。2021年ごろまではiOS版とAndroid版についてそれぞれエンジニア1人ずつで分担し、同様の機能、同様のUIをそれぞれ開発していました。これは個別に開発工数がかかるだけでなく、細かい仕様に関して相互にすり合わせが必要で、コミュニケーションコストもかかります。また、一方のエンジニアがボトムアップで細かい改善を発案しても、他方のエンジニアは別の部分を重視していたりするとチームとしては合意が得られず、改善の腰が重くなりがちです。1人で両OSの同じトピックを担当する形も試しましたが、いずれにしても2度手間ですし、コードベースの違いから同じようには改修できないこともありました。
− その対処法として、今回採用したFlutterを検討したということですか?
宮木:そうですね。コード面、コミュニケーション面、人的リソース面をシンプルにするための解決策としてFlutterを採用することにしました。Swift/Kotlinで最新の動向を踏まえて実装を一新させることも考えましたが、開発体制を根本的に改善し得るという点ではFlutterにより大きな魅力を感じました。FlutterはiOS版とAndroid版を共通のコードベースで実装できるので、基本的には双方同じ挙動になりますし、前述のような実装面での2度手間やiOS版とAndroid版の間での仕様調整が大きく削減できます。ネイティブアプリのエンジニアが2名いるならば、一方は機能開発、他方は保守や突発対応やメンテナンスといったように、それぞれ別の施策を並行して推進でき、効率化が期待できます。 Flutter以外にも、React NativeやXamarinなども選択肢にはあったのですが、メンバーの関心度としてはFlutterが高かったのと、FlutterはGoogleのサポートやドキュメントも充実しているので、良いのではないかと。− それでFlutter を採用するに至ったと
宮木:はい。別の背景として、Flutterの状況と、スマートドライブの状況がマッチするようになってきたこともあります。Flutter自体は以前からありますが、社内でも何度か検討し見送ってきた経緯があります。 2018年に別の新規アプリの構築時に検討してみた時点では、当時まだどの程度普及するかが未知数で、ネイティブアプリエンジニア間でも意見の分かれる状況でした。また、当時のFlutterはGoogle Mapのサポートが未整備で、デバイスの位置情報を扱うSmartDriveのサービス上、構築できるUIに制約がある状況でした。 UIデザインの面では、FlutterはGoogleのマテリアルデザインに対するサポートが充実していることがメリットの1つとして挙げられますが、SmartDrive独自の事情として、弊社のチーフデザイナーが創業当初から独自のスタイリングを持ったUIポリシーを構築してきていたことから、この共存がうまく行えるかどうかについて当時は検証しきれない状況でした。
− チームでFlutterを採用するうえで、どのようにキャッチアップをされていったのでしょうか?
宮木:キャッチアップは基本的にはエンジニア各自に依存していますが、Flutterは各種ドキュメントや動画でのインストラクションが非常に充実しているので、開発に必要な情報はスムーズにキャッチアップすることができると思います。ネイティブアプリの開発経験がある方であれば、つまづくところはあまり多くないのではないでしょうか。実際、直近で1名、面接時点でネイティブアプリのiOSやAndroidの開発経験があり、Flutterの開発は未経験のエンジニアの方が入社されましたが、問題なくキャッチアップいただいて成果を出されています。− Flutterを使用した開発はどのように始まり、進んでいったのでしょうか?
2020年の暮れごろにネイティブアプリチームでFlutterを触ってみる機会ができたので、一旦、原型になるようなアプリを組みました。そこから、少し間が空き、2021年3月ごろから再始動しています。当初は他のメンバーがそれぞれ別の案件を抱えており、まずは私一人で動き始めました。
- タブレット向けアプリをFlutterで新規構築しリリース
- タブレット向けアプリのコードベースを新アプリと共通のものとしてみなし、タブレット向けアプリと新アプリの双方を作成できるように拡張
- コードベースに共通で拡充したい機能と新アプリ特有の機能を順次拡張
− タブレットアプリは初めてでしたよね。何か障壁はありませんでしたか?
宮木:実際、アプリのUIとして組み立てる要素は、スマートフォン向けでもタブレット向けでも基本は変わりません。どちらの端末を主な利用端末として位置付けるかという違いはありますが、タブレット向けとして構築されたアプリがスマートフォンにインストールされることもありますし、その逆もできるので、いずれにせよ双方を考慮する必要があります。 このタブレットアプリの特有の要件としては、各拠点に設置されることです。例えば寿司チェーン店やファミリーレストランなどで見かける注文用端末のような据え置きのタブレットで利用されるアプリは起動と終了を繰り返すのではなく、1度起動されるとそのまま使われ続ける場合がある点が挙げられます。アプリを起動したままでも表示情報が定期的に更新されるようにするなどの配慮を行なっています。− Flutterで開発して Fleet Boardアプリはどれくらいの期間を要しましたか?
宮木:トータル3ヶ月程度で最初のリリースを行なっています。早期にリリースしたい状況であったため、紙ベースでのプロトタイピング後、Flutterの長所を生かして実装ベースのプロトタイピングに移行し、手応えを確認しながら実装していきました。初版の段階ではある程度Flutterでの構築しやすさを優先するため、UIデザインについてはデザイナーと連携しつつ、ブランディングが崩れない範囲で立ち上げやすい内容として一旦着地させています。その後のアップデートを経て、UIはより質の高いものに改善をしています。− そのプロセスの中でのチャレンジは?
バックエンドのAPIはSmartDrive Fleet Boardアプリでも新アプリでも同じものを利用します。そのため、APIのクライアント側の実装や、ログイン/ログアウトに関する部分や、アップデート表示、メンテナンス表示など、どんなアプリでもベースとして必要となる要素はSmartDrive Fleet Boardアプリと新アプリで共通化ができ、これらはそのまま新アプリにも資産として活用できます。これによりSmartDrive Fleet Boardアプリの開発をそのまま新アプリのFlutter化の第1段階としての位置付けることができました。− その後、SmartDrive Fleetアプリのリニューアルに進んでいくわけですね
はい。SmartDrive Fleet Boardアプリは2021年7月にリリースしましたが、新アプリは実際のところリリースまでにさらに1年ほどを要しました。 まず、前述のように、SmartDrive Fleet Boardアプリのコードベースから、SmartDrive Fleet Boardアプリと新アプリの2つのアプリを構築できるような拡張を行いました。このあたりは単にFlutterに置き換えるという点以上に意欲的な部分になっていると思います。
− 開発期間中には、元のアプリの改修や機能追加もありましたか?
宮木:SmartDrive Fleetアプリの方は一旦開発の手を止めさせてもらいましたので、集中して新アプリの開発を進めることができました。元のアプリを並行して機能追加してしまうと、新アプリの仕様も追従する必要がでてしまうため、SmartDrive Fleetアプリの方は不具合対応、かつ顧客影響度の高いもののみに絞って対応しています。組織としてこの方針決定ができたことは、Flutter化を進める上ではとてもありがたかったです。SmartDrive Fleet Boardアプリについては新アプリのコードベースと共通ですので、途中、随時改善のアップデートリリースを挟むことができました。
− 9月についにリリースされましたね
宮木:はい。新アプリについては、別の新規アプリとしてSmartDrive Fleet Driverアプリという名称でリリースしています。当初元のアプリのアップデート版として新アプリをリリースする案もありましたが、機能やUIも大きく変わっており、変更点の規模が大きいためアプリの利用者が混乱するリスクをさけるため、元のアプリは提供し続けたままとし、お客様側で準備ができた段階で順次移行してもらうという形としています。 従来のアプリの改善を一時的にストップしたことで、お客様からの改善要望についてしばらくお待たせしてしまう形にはなりましたが、今回新アプリにそれらのリクエストをある程度盛り込む形で提供することができました。リリース後、お客様からも使いやすくなったというご感想も早速いただいています。− お客様目線での新アプリのメリットとは?
大きく分けると以下の3つになると思います。- アプリの位置付けの見直しに伴ってUIが整理された
- 要望の上がっていた改善やWeb UIのみで提供していた仕様が取り込まれた
- ニーズの大きかった新機能が搭載された
− 具体的にどのような点ですか
宮木:まず、1点目の位置付けについて、SmartDrive Fleet Driverアプリはドライバーの業務上の手間を極力低減させるためのものである点が明確化されました。基本的に、ドライバーは積極的にアプリを使うわけではなく業務上の必要に迫られてアプリを利用します。具体的には各種の報告業務であったり状況の確認であったりするわけですが、これらをできるだけ省力化して行えるような方向性でUIが見直されています。 次に要望の取り込みの一例ですが、元のアプリでは、車両予約機能に関してUI上やれることに制約があったのですが、今回、自由度が向上しました。また、車両のリアルタイム表示画面は、PC Web版のUIで提供している内容に追従し、SmartDrive Fleet Driverアプリでも概ね同様の情報を確認できるようになっています。他にもさまざまな細かい要望についても改善が行われました。 新機能としては、アルコールチェックや車両の日常点検、各種作業の記録をアプリから行えるようになっています。SmartDrive Fleet Driverを使うドライバーにとってそれらの報告業務はなるべく手早く済ませたいものであると考えていますので、極力スムーズに記録が行えるようなUIを目指しています。− Webだと管理者視点になるかと思いますが、スマホアプリの場合、ドライバー同士で位置情報が確認しあえるということですか?
宮木:はい。お客様の中にはドライバー同士で状況を把握しあって連携を取る必要がある方もいらっしゃいます。リアルタイム機能についてはWeb UIと共通性のある仕様に変わったことで、すごく使いやすくなったとのフィードバックをいただいております。新アプリから他の車両の現在地や、あらかじめ登録された地点をGoogleマップのナビに目的地設定して向かうこともできます。− 例えば、弁当配達を提供している会社で、ドライバーAさんがドライバーBさんのところに余ったお弁当を持っていかなければならないとする状況で、Bさんの位置をタップすることでGoogleマップに飛んでルート指定をしてすぐに現地に向かうことができると
宮木:はい。細かいところではありますが、ドライバーさんのスムーズな業務に寄与できていれば幸いです。− Flutterの採用を検討している企業に参考にしていただけそうなことは?
宮木:先ほど申し上げたようなメリットがあるので、新規でアプリを立ち上げる場合は、Flutterは有力な選択肢の1つになると思います。弊社で提供しているような業務用のアプリなどの用途であれば、Flutterで問題なく開発運用できるかと思います。弊社の新Flutterアプリについても、リニューアル前のネイティブアプリと比べて遜色ないものを提供できていると思います。要件によっては一部まだネイティブアプリの方が良い場合もあるかもしれませんが、ゲームアプリ等は別として、多くのアプリはFlutterで充分いけるのではないでしょうか。 また、UIについてはFlutterはUI部分も含めて共通化して構築するので、iOSらしいUI、AndroidらしいUIというOSごとの差異とどうバランスをとっていくかは、各社によって判断が分かれるところかと思います。デザイナーの考え方にもよりますが、各OS向けのアプリらしさを追求すると、Flutterの中でもiOSならこう、Androidならこう、と個別の実装が増えていくので、ここはトレードオフがあると思います。弊社の場合は前述の通り、ブランディング上、比較的独自色の強いポリシーがもともと存在していましたので、ある意味それを逆に活かす形をとって、独自の共通のもので揃える判断をしています。ある程度OSのガイドラインや一般的な操作方法からは外れないような形を維持しつつ、どちらのOSで使っても原則同じUIで表示しています。 FlutterにはMaterial Designに準拠したUIコンポーネントが数多く揃っており、それらを用いて高速にUIを組み立ててしまうことができるメリットがあります。しかし、弊社の場合デザイン上それらは素のままでは使えないことも多く、コンポーネントに細かくスタイルを設定したり、必要に応じて独自のコンポーネントを一通り用意する手間をかけているため、この恩恵は100%享受できてはいない面があります。とはいえ、FlutterはUIコンポーネントの管理が非常にしやすいフレームワークですので、独自のコンポーネントであっても一旦それを揃えてしまった後は、他のコンポーネントと同じように使えるので、以後はFlutterの恩恵を受け続けることができます。
− 最後に、今回の一連の開発経験を通して得られたことについて教えてください
宮木:Flutterの技術的なスキルアップはもちろんできましたし、Flutter化する際に狙ったところについてはしっかり実現できたのかなと思います。
SmartDrive Fleet Boardアプリ、SmartDrive Fleet Driverアプリをリリース後からは、プロダクトチームのアプリの改善速度が一気に向上しています。毎月新機能追加や改善が入っていますし、細かいところも含めてどんどん磨きがかかっている状態になっています。構築済の機能であってもそこに課題があれば見直しをかけて改善するだけのリソースの余力や敷居の低さが生まれていて、これらはFlutterによりコードベースが共通化されたところが大きいです。現在はスマホアプリチームのメンバーが社員で3人、業務委託で2人いますが、以前であれば作業の優先順位的に後回しにせざるを得なかったことにも手が届き、細部の品質も上がっていると実感していますし、OS間や2つのアプリ間での仕様差分なども発生しにくい状態を維持できています。
関連記事
-
【社員インタビュー】既存スマホアプリをFlutterに切り替・・・
− まずは簡単に自己紹介お願いします 宮木: 宮木修平と申します。スマートドライブでモバイルアプリエンジニアをやっています。受託開発企業、モバイルアプリ開発パッケージの運営企業を経て、スマートドライ … 詳しく読む
-
【開発責任者に聞く!】一番の強みは「人」。少数精鋭組織の今後・・・
スマートドライブは、自社サービスだけなくホンダやスズキ、出光興産といった様々なパートナーとの協業を通じたサービス展開をするなど、開発領域は多岐にわたります。開発責任者である雲野に開発領域の今後 … 詳しく読む
-
【社員インタビュー】”間を繋ぐ”ことがモビリティデータコンサ・・・
スマートドライブでモビリティデータコンサルタントとして活躍する山本ですが、意外にもそのキャリアはデータアナリストやサイエンティストからスタートしたものではありません。様々な業界でのマーケティングやDW … 詳しく読む