株式会社ONE COMPATH(ワン・コンパス) 株式会社ONE COMPATH 技術戦略グループ 原 拓⽮ 新規事業のアプリ、Flutterで作ってます 〜U-ROUTEのポイ活対応編〜 1

©ONE COMPATH CO., LTD. All rights reserved. 原 拓⽮ 株式会社ONE COMPATH 技術統括本部 SRE・技術戦略部 技術戦略グループ 2010年 株式会社マピオンに新卒⼊社 現在は社内の各スマホアプリの運⽤・開発・開発者育成などに携わりつつ、 主にU-ROUTEアプリではメインの開発者として実装を⾏っている 実装に携わったスマホアプリ など… 2 ⾃⼰紹介

©ONE COMPATH CO., LTD. All rights reserved. • Googleが開発したオープンソースのアプリ開発フレームワーク • クロスプラットフォーム対応：1つのコードベースでiOS、 Android、Web、Desktopなどのプラットフォームに対応可 • ⾼速なレンダリングエンジンを搭載しており、美しいUIを短時間で作成可能 • Dart⾔語 【Flutterのメリット】 ・複数PF向けアプリを⾼速に効率的に開発可能 ・iOS/Androidで差異のないUI/UXを構築 ・UIもコードで記述。再利⽤性や保守性の⾼さが開発効率を向上 ・⽐較的新しいものだが、アップデートも盛んで将来性も⾒込める 【Flutterのデメリット】 • UIのカスタマイズ性が⾼い分、習得に時間がかかることがある • プラットフォームに依存する機能は別途OS別に実装が必要な場合もある • ⽐較的新しいため、情報が少ないことがある（ただし⼗分に充実してきている） 3 Flutterとは

©ONE COMPATH CO., LTD. All rights reserved. p U-ROUTE p tomo wan (検証版) p 森のバーコードカフェ (検証版) いずれもFlutterで開発 ＜理由＞ ・iOS/Android両対応の⼯数・⼈員がミニマムで済む ・iOS/Androidでの挙動やUIの違いが最⼩限になる ・新規技術への挑戦 4 OCの最近の新規スマホアプリ(検証版含む)

©ONE COMPATH CO., LTD. All rights reserved. シンプルな⾃転⾞⽤コンパスアプリとして誕⽣ →今年3⽉、ポイ活アプリとしてリニューアル 初期の試作版の時点からU-ROUTEアプリは⼀貫して Flutter で開発している 5 U-ROUTEアプリについて

©ONE COMPATH CO., LTD. All rights reserved. ポイ活対応前のU-ROUTE - ⽬的地を地図や検索で指定し、そこへの距離と⾓度を計算して表⽰する - ユーザーのデータは特になし - ルートログを⾃端末内に保存＆iCloudにバックアップ保存するのみ - サーバに保存するユーザーデータは無し → サーバ開発なしでアプリのみの実装、基本的に私1⼈での開発体制 ・地図や検索は既存のマピオン地図などのものを流⽤ ・動的に設定変更したいものはFirebaseの Remote Config 等を利⽤していた - (お知らせ情報・アンケート等のキャンペーン情報・プッシュ通知)

©ONE COMPATH CO., LTD. All rights reserved. ポイ活対応にあたって ・アプリ開発の⼯数も莫⼤にかかる ・Firebaseの利⽤料も⼤きくなりそう ・ログなど使いやすい形で保管・利⽤できるようにしたい ユーザーの保有ポイント ポイント利⽤・獲得ログ 所有ガチャチケット情報 など⼤量 必要になる情報 Flutter開発の多くは、Firebase を駆使したサーバレスの例が多い 当初はCloud Firestore/Realtime Database等駆使して作ることも考えたが・・ サーバ・API開発メンバーを加えての 開発体制に

©ONE COMPATH CO., LTD. All rights reserved. ユーザー認証について 必要以上にユーザーの個⼈情報を保有したくない→メールアドレス等は極⼒ 収集しないようにしたい → ソーシャルログイン機能を使いたい ユーザーがAPIでユーザー情報を保存読み込みするために、 ユーザー認証の仕組みが必要 Flutterの情報調べると、Firebase Authでやっているところが多い 全部Firebaseの機能でいくならばこれを利⽤したいところだったが、 サーバ側はAWSで実装 (社内のサーバ開発メンバーの知⾒上) ということでAWSの Amazon Cognitoを利⽤してソーシャルログインを実装した。 ※Web上にFlutter×Cognito の情報は当初少なくて苦労

©ONE COMPATH CO., LTD. All rights reserved. p Flutterでの実装 p AWS Amplify のライブラリを利⽤ p ただしバックエンドの構築は別途やっているので⼿動で設定ファイルを⽤意 9 Amazon Cognito の Flutterでの利⽤ AWS上で、Web・モバイルアプリを⾼速でリリースす るための開発プラットフォーム FirebaseのAWS版のような感じ (FirebaseはGCP) ・ログイン画⾯(デフォルトで⽤意されたWebView)を呼び出し ・ログイン成功するとCognito ユーザー情報 (user sub・id token・refresh token等)が 取得できるようになるので保持 ・id token、user sub を利⽤してAPIとやりとり

©ONE COMPATH CO., LTD. All rights reserved. 10 Amazon Cognito の Flutterでの利⽤

©ONE COMPATH CO., LTD. All rights reserved. Cognito使った認証の仕組み

©ONE COMPATH CO., LTD. All rights reserved. Firebaseも⼀部併⽤ p ユーザーに絡まない共通データの⼀部は引き続きFirebase Remote Configを利⽤ (アプリ更新なしで更新したいもの) p Firebase Analytics p Firebase Crashlytics p プッシュ通知もFirebaseで管理

©ONE COMPATH CO., LTD. All rights reserved. Android版について U-ROUTEアプリは、現状、iOS版のみリリース済み → Flutterなのにどうして？？クロスプラットフォーム開発でしょ？？ ・実装は同時にほぼできているが、検証がたいへん ・OSバージョンや端末もiOSより多い ・アプリの性質上、移動しながらの検証が多い ・⼀部、ネイティブ実装部分もあり、その部分や申請等は両OS分のコストかかる →最短⼯数で出すためにまずはiOSだけで検証してリリースしよう その後もiOS版の新規機能の追加や改善を優先させてきたため、 現状まだiOSのみ

©ONE COMPATH CO., LTD. All rights reserved. Android版について ⼤変お待たせしました！！ Android版、近⽇中にリリースできるよう検証＆調整中！！ ご期待ください！！ クロスプラットフォーム開発とはいえ、 Android版でのビルド・動作を確認せず機能追加を繰り返してきたので、 Androidでビルドできるまで少し苦労した ・古いライブラリの差し替え ・ネイティブ実装部分の対応 ・Android⽤の設定ファイル等の準備 ただ、ソースコードはほとんどいじらず最低限動くものができた クロスプラットフォームならではの利点

©ONE COMPATH CO., LTD. All rights reserved. ネイティブ実装した箇所 ・近接センサーの制御 (ポケットに⼊れたら⾃動で画⾯OFF) ・アプリが停⽌した時の通知 ・楽天の特典交換 ・ 楽天のライブラリにFlutter版がなかったため ・バックグラウンド制御の⼀部 ・マピオンの地図を表⽰するための地図ライブラリ(maplibre) ・当初は正式なFlutterライブラリが無かった (今はあります) Flutterからネイティブ実装の機能を呼び出すのは 「MethodChannel」という仕組みで⽐較的簡単に可能 ※U-ROUTEでは使ってないが、ネイティブ実装のアプリからFlutterの画⾯を呼び出すことも可能 →既存ネイティブアプリで新規画⾯だけFlutterで、ということもできる

©ONE COMPATH CO., LTD. All rights reserved. Flutter版の外部ライブラリで賄えたもの ・バックグラウンド含む位置情報の制御 (flutter_background_geolocation) ・コンパス(センサー)の制御 ・動画広告(adfurikun) ・アニメーション(lottie) ・流⼊計測(appsflyer) ・課⾦管理(RevenueCat) (※現在停⽌中) など

©ONE COMPATH CO., LTD. All rights reserved. まとめ Flutterを採⽤しての感想 新規アプリ開発には最適！ ・iOS/Androidを同時に開発できるのは⼯数削減に⼤いに貢献。⾒た⽬・機能の差異が無いのも嬉しい ・当初は⼀⽅だけ対応予定でも、その後の両OS対応のためにもFlutterで作っておくとスムーズ ・実例・情報の多いFirebaseを活⽤した⽅法はサーバ開発不要で初期開発にはベスト ・ネイティブ機能を呼び出すのもそこまで⼤変ではない (充実したライブラリ利⽤or⾃前でもいける) ・ネイティブ実装のアプリの⼀部をFlutterにする、 またはその逆も可能→既存アプリの⼀部をFlutter化もOK ・アーキテクチャ決めるにはどうしようか悩む部分はある →今後も模索 サーバ側必要になった際の対応 p OCとしてはGCPよりAWSを得意としていたので、 AWSでサーバサイドを新規に開発し、 CognitoによりFlutterアプリから認証するようにした →ONE COMPATHではこのやり⽅が良さそう

©ONE COMPATH CO., LTD. All rights reserved. 今後の展望 U-ROUTEに関して ・Android版の調整・検証・リリース ・コードが⼤きくなってきたので、パッケージ分割などを試す ・⾃動テストの充実化 全体として ・新規アプリ開発には積極的にFlutterを採⽤していきたい ・新規に始めるタイミングではFirebase等利⽤してミニマム体制でスタート！ ・既存アプリも必要に応じてFlutterに置き換えていきたい ・具体的な実装上のTips等をWeb等で発信

©ONE COMPATH CO., LTD. All rights reserved. 19 おわりに FlutterでONE COMPATHのアプリを開発する仲間を募集中。 Flutterやったことない方でもぜひ！ 興味ある方は、 後ほどの採用担当からのお話をお聞きください。