MoT TechTalk #4 Androidエンジニア必見！タクシーアプリGOのUXを高める工夫

・GOアプリの紹介
・地図UIの工夫
　　・タクシーアイコンの描画の工夫とアニメーション
　　・道路への引き込みについて
　　・Google Maps の padding を正しく扱うための工夫（画面の大きさに関わらず、Googleのロゴを出す）
　　・Google Maps に描画するものと、独自 View に描画するものの切り分け方
・どんな(※)タクシーでも便利！アプリならできるスマートな降車（CameraX/超音波ビーコン）
　　(※GO加盟車両に限る)
　　・スマートな降車とは
　　・超音波ビーコンを使った決済機能
　　・超音波ビーコンを使った GO Pay
　　・2次元バーコードを使った GO Pay
　　・Androidのカメラやばい話
　　・CameraXがでたけど当時はalpha6だった話
　　・CameraXを入れた話
　　・GO Android ユーザーアプリのライブラリ選定
・機能開発の速度を落とさずにいかに並行してマルチモジュール化を進めたか
　　・マルチモジュールを導入することになったきっかけ
　　・マルチモジュールとは
　　・どのようにマルチモジュールを導入するか
　　・マルチモジュール化の現状と今後

Transcript

1. #4 Androidエンジニア必⾒︕ タクシーアプリGOのUXを⾼める⼯夫
2. Mobility Technologies Co., • もし質問があれば、YouTubeのコメント欄にコメントお願いしま す。適宜、お答えしていきます。 • Twitterへの投稿は #mot_tech_talk でツイートをお願いします。 • 視聴の最後に、アンケートの⼊⼒をお願いします。 MoT Online Tech Talk #4を聞くにあたってのお知らせ
3. Mobility Technologies Co., • 地図UIの⼯夫 • 流しのタクシーでのアプリ決済にまつわる技術 （CameraX/⾳声トリガー） • 機能開発の速度を落とさずにいかにして並⾏してマルチモジュー ル化を進めたか 本⽇の内容
4. Mobility Technologies Co., 登壇者の紹介
5. Mobility Technologies Co., ⾼柳 翔 （@sobachanko） 主な呼ばれ⽅︓そばちゃん • チームハッスルリーダー • 趣味・特技︓飲酒 • 元ホテルマン 諏訪村 夏彦 （@napplecomputer） 主な呼ばれ⽅︓なっぴー • ⼆輪の免許を最近取りました • 次は第⼆種電気⼯事⼠を取るために勉強中 • 今⽇⼟地を買ってきました
6. Mobility Technologies Co., Son Semyeong （@Hand-Tomi） 主な呼ばれ⽅︓そんくん • 556のAndroid開発者 • ⼈⽣⽬標︓家買 • ラーメン屋さん、「バリ男」 VIPだった 松延 萌菜 （@nb_matsu） 主な呼ばれ⽅︓まつのぶさん • エンジニア採⽤のリーダー • 最近すこしだけウイスキーブーム • 視聴者を代弁する質問役
7. Mobility Technologies Co., GO の紹介
8. Mobility Technologies Co., GO の紹介
9. Mobility Technologies Co., 地図UIの⼯夫
10. Mobility Technologies Co., • タクシーアイコンの描画の⼯夫とアニメーション • 道路への引き込みについて • Google Maps の padding を正しく扱うための⼯夫 (画⾯の⼤きさに関わらず、Google ロゴを表⽰する) • Google Maps に描画するものと、独⾃ View に描画するものの切 り分け⽅ 地図UIの⼯夫
11. Mobility Technologies Co., • タクシーアイコンの描画の⼯夫とアニメーション • 道路への引き込みについて • Google Maps の padding を正しく扱うための⼯夫 (画⾯の⼤きさに関わらず、Google ロゴを表⽰する) • Google Maps に描画するものと、独⾃ View に描画するものの切 り分け⽅ 地図UIの⼯夫
12. Mobility Technologies Co., ▪ Google Maps 上に Marker として描画している ▪ タクシーの位置情報は API をポーリングして定期的 に取得 ▪ 前回と今回の位置情報を⽐較してアニメーションさせ ている ▪ 向いている⽅⾓を計算して、アイコンが正しく進 ⾏⽅向に向くようにしている タクシーアイコン
13. Mobility Technologies Co., ▪ 通信環境が悪くなければ、右左折もキレイ動きます ▪ 余談ですが、乗⾞後は地図がタクシーアイコンを⾃ 動追尾しないようになっている ▪ これは別の⼈が乗ってしまったりした場合に[個 ⼈情報（別の⼈の位置情報）がユーザーに分か らないようにするため タクシーアイコン
14. Mobility Technologies Co., • タクシーアイコンの描画の⼯夫とアニメーション • 道路への引き込みについて • Google Maps の padding を正しく扱うための⼯夫 (画⾯の⼤きさに関わらず、Google ロゴを表⽰する) • Google Maps に描画するものと、独⾃ View に描画するものの切 り分け⽅ 地図UIの⼯夫
15. Mobility Technologies Co., • 現在地から⼀番近い「乗⾞地として設定できる場所」にピンを移動させる処 理のことを指す 引き込みとは︖
16. Mobility Technologies Co., 引き込みとは︖
17. Mobility Technologies Co., • ⾼速道路や⾞が⽴ち⼊れない道などを除外 • ⼤きい道路の場合、どちら側なのかの判定もしている • 細かい点で⾔うと、交差点の 5m 以内なども除外している なぜ引き込みを⾏うのか
18. Mobility Technologies Co., • ⾼速道路や⾞が⽴ち⼊れない道などを除外 • ⼤きい道路の場合、どちら側なのかの判定もしている • 細かい点で⾔うと、交差点の 5m 以内なども除外している なぜ引き込みを⾏うのか 最初にピンが置かれた位置からすぐに 配⾞依頼がかけられるようにするための⼯夫
19. Mobility Technologies Co., • タクシーアイコンの描画の⼯夫とアニメーション • 道路への引き込みについて • Google Maps の padding を正しく扱うための⼯夫 (画⾯の⼤きさに関わらず、Google ロゴを表⽰する) • Google Maps に描画するものと、独⾃ View に描画するものの切 り分け⽅ 地図UIの⼯夫
20. Mobility Technologies Co., ▪ 上の図のように上部と右側に padding を設定する と地図の緑で囲われた位置を制御できる範囲とし て指定できる ▪ GO では上下に padding を設定している ▪ 地図の上にコンテンツを配置する場合によく利⽤ される ▪ Google Maps のロゴの位置は左下に固定で表⽰さ れ、カスタマイズができない Google Maps の padding とは
21. Mobility Technologies Co., Google Maps を利⽤する場合、Google ロゴを隠して はいけないと明確に規定されている https://developers.google.com/maps/documentat ion/android-sdk/map?hl=ja#map_padding 下部のUIパーツ（コントロールパネルと呼んでいる） は画⾯毎に⾼さが違うため、画⾯毎に適切に padding を設定する必要がある Google ロゴの調整が⼤変
22. Mobility Technologies Co., <androidx.constraintlayout.widget.ConstraintLayout ・・・ > <FrameLayout android:id=”@+id/control_panel” ・・・ /> <Space android:id=”@+id/map_padding” app:layout_constraintTop_toTopOf=”@id/fab_menu” app:layout_constraintBottom_toBottomOf=”parent” /> </androidx.constraintlayout.widget.ConstraintLayout> Google ロゴの調整が⼤変 override fun onViewCreated(view: View, savedInstanceState: Bundle?) { binding.mapPadding.doOnLayout { view -> googleMap.setPadding(0, 0, 0, view.height) } }
23. Mobility Technologies Co., • タクシーアイコンの描画の⼯夫とアニメーション • 道路への引き込みについて • Google Maps の padding を正しく扱うための⼯夫 (画⾯の⼤きさに関わらず、Google ロゴを表⽰する) • Google Maps に描画するものと、独⾃ View に描画するものの切 り分け⽅ 地図UIの⼯夫
24. Mobility Technologies Co., ▪ Google Maps 上に描画する場合のメリット ▪ 扱いが簡単（緯度経度を渡すだけで画⾯上の正しい座標に描画してくれ る） ▪ Google Maps 上に描画する場合のデメリット ▪ 描画速度が遅いので素早い動きに弱い Google Maps 上で描画するもの/しないもの
25. Mobility Technologies Co., ▪ するもの ▪ タクシーアイコン（Marker として描画） ▪ 乗⾞地/降⾞地決定後のピン ▪ しないもの ▪ 乗⾞地決定前のピン ▪ フキダシ ※点線に関しては画⾯によって描画⽅法が違う（後述） Google Maps 上で描画するもの/しないもの
26. Mobility Technologies Co., ▪ するもの ▪ タクシーアイコン（Marker として描画） ▪ 乗⾞地/降⾞地決定後のピン ▪ しないもの ▪ 乗⾞地決定前のピン ▪ フキダシ ※点線に関しては画⾯によって描画⽅法が違う（後述） Google Maps 上で描画するもの/しないもの
27. Mobility Technologies Co., ▪ 素早く動かされても追従できるように独⾃の View を 地図の上に置いて描画している ▪ 計算には三⾓関数を⽤いて現在地と地図の中⼼座 標間に点線を描画 ▪ 余談︓乗⾞地ピンも Lottie のアニメーションを利⽤す るために独⾃ View 上で描画している 点線の描画について（乗⾞地決定前）
28. Mobility Technologies Co., ▪ 現在地と乗⾞地を結ぶ点線と乗⾞地のピンは動かす必 要がないので Google Maps 上に直接描画している 点線の描画について（乗⾞地決定後）
29. Mobility Technologies Co., 流しのタクシーでのアプリ決 済にまつわる技術 （CameraX/⾳声トリガー）
30. Mobility Technologies Co., 流しのタクシーでのアプリ決済
31. Mobility Technologies Co., • アプリ配⾞以外で乗った時でも、⾳声トリガーを使って乗⾞しているタクシ ーとアプリを紐づけてアプリ内で決済できる • タブレットの「GO Pay」ボタンをタップ ⾳声トリガーを使ったGO Pay
32. Mobility Technologies Co., • ⾳声トリガーを利⽤するにはマイクのパーミッションが必要 • マイクのパーミッションが取れなかったときのために、2次元バーコードでも 紐付けられる機能を補助的に提供 2次元バーコードを使った GO Pay
33. Mobility Technologies Co., • Androidのカメラ実装は⻤⾨中の⻤⾨ ◦ 機種依存がつらい ◦ メモリ管理がつらい ◦ 単純に実装がつらい ▪ 学習コスト⾼め ▪ コールバック地獄 ▪ 設定値が⾮常に多い • できれば実装したくない ◦ 撮影するだけならカメラアプリにお願いする⼿もある • そこでCameraX Androidのカメラやばい話
34. Mobility Technologies Co., • Google I/O 2019にて発表された、カメラアプリを簡単に実装するためのラ イブラリ • 通常のカメラAPIをラッピングしている • 実装が超簡単 ◦ 通常のカメラAPIはハードウェアを最⼤限に活⽤することを⽬指してい るのに対し、CameraXはシンプルなAPIを提供することを⽬指している • 機種依存を吸収してくれる ◦ CameraX Test Labで継続的に⾃動テストしている • ただし当時のバージョンはalpha06 CameraX
35. Mobility Technologies Co., • 安定版になる前だと不具合のある可能性や、今後のバージョンアップで破壊 的変更が⼊る可能性が⾼い • 素のカメラAPIのつらさとalpha版のつらさを天秤にかける • この時は利⽤箇所が局所的だったためCameraXの採⽤を決めたが… CameraXを⼊れた話
36. Mobility Technologies Co., • 明確な基準はない • 以下の内容から判断する ◦ 安定版かどうか ◦ ライブラリの影響範囲 ▪ 影響範囲が広い場合、ライブラリの不具合・破壊的変更の影響が⾮ 常に⼤きく、ライブラリの更新のリスクとコストが⼤きくなりがち。 ▪ 影響範囲によってはQAコストを確保できずなかなか更新できなくな る開発上のリスクも有る ◦ Google関連かサードパーティー製か ▪ サードパーティー製の場合、メンテナンスがされているか GO Android ユーザーアプリのライブラリ選定基準
37. Mobility Technologies Co., 機能開発の速度を落とさずに いかに並⾏してマルチモジュ ール化を進めたか
38. Mobility Technologies Co., • マルチモジュールを導⼊することになったきっかけ • マルチモジュールとは • MoTではこういうマルチモジュールを⽬指した • 実際の開発 • 今後 Agenda
39. Mobility Technologies Co., 配⾞アプリサービス統合 2 4 6
40. Mobility Technologies Co., 開発者が増えたら起きること • コンフリクトが起きやすい • 予期せぬバグが発⽣する可能性が上がる。 :app
41. Mobility Technologies Co., ⼤きいアプリケーションになる予定
42. Mobility Technologies Co., • マルチモジュールを導⼊することになったきっかけ • マルチモジュールとは • MoTではこういうマルチモジュールを⽬指した • 実際の開発 • 今後 Agenda
43. Mobility Technologies Co., モジュールとは • appモジュールを除外して内部ライブ ラリと理解しても⼤丈夫です。 • モジュールはコンテナとして機能し、その中にア プリのソースコード、リソース ファイルが含まれ るほか、モジュール レベルのビルドファイルや Android マニフェスト ファイルなどのアプリレベ ルの設定も含まれます。
44. Mobility Technologies Co., マルチモジュールとは 単⼀モジュールからある主題の単位ライブラリを分 離して相互作⽤するのがマルチモジュール
45. Mobility Technologies Co., マルチモジュールとは :feature:login :data:repositor y :model :app login repository model
46. Mobility Technologies Co., マルチモジュールとは :app :feature:login :model :data:repositor y :feature:login :data:repositor y :model :app
47. Mobility Technologies Co., マルチモジュールのメリット それで何がいい︖
48. Mobility Technologies Co., マルチモジュールのメリット 依存関係を欲しい構造で強制できる :app :feature:login :model :data:repositor y マルチモジュールを構築して 依存関係の流れを強制する
49. Mobility Technologies Co., マルチモジュール化の⽅法 - レイヤーごとに プレゼンテーション層 ビジネスロジック層 データ層 • 上位モジュールが下位モジュール に依存しないことを保証できる • 独⽴性を保つモジュール構造を作 ることが可能
50. Mobility Technologies Co., マルチモジュール化の⽅法 - 機能ごと :app ログイン機 能 配⾞機能 履歴機能 • 機能別にコードがまとまっている ので理解しやすい • 修正の影響範囲を最低限にまとめ ることができる
51. Mobility Technologies Co., マルチモジュール化の⽅法 - 規模ごと ⼩規模 中規模 ⼤規模
52. Mobility Technologies Co., https://droidkaigi.jp/2019/timetable/ 70971/ マルチモジュール化の⽅法 - 参考資料 DroidKaigi : 2019 multi-module Androidアプリケーション
53. Mobility Technologies Co., • マルチモジュールを導⼊することになったきっかけ • マルチモジュールとは • MoTではこういうマルチモジュールを⽬指した • 実際の開発 • 今後 Agenda
54. Mobility Technologies Co., MoTモジュール構造 :app :login :android-core :repository :model • login : ログイン関連モジュール • favorite : お気に⼊り関連モジュ ール • history : 乗⾞履歴関連モジュール • android-core : リソース、共通ビ ュー, Utilなど共通クラス • repository : データソースアクセ ス • model : 整理したmodelモジュー ル Activity/Fragment ViewModel UseCase :favorite Activity/Fragment ViewModel UseCase :history Activity/Fragment ViewModel UseCase
55. Mobility Technologies Co., • マルチモジュールを導⼊することになったきっかけ • マルチモジュールとは • MoTではこういうマルチモジュールを⽬指した • 実際の開発 • 今後 Agenda
56. Mobility Technologies Co., 🤔 どのように機能開発の速度を 落とさずにマルチモジュール を導⼊するか
57. Mobility Technologies Co., 🤩 新機能から マルチモジュールを 導⼊すれば︕︖
58. Mobility Technologies Co., 新機能モジュールを⼊れられように環境を構築した
59. Mobility Technologies Co., 新機能モジュールを⼊れられように環境を構築した :app :login :legacy :legacy-core :history • legacy : 未整理のモ ジュールをまとめた モジュール • legacy-core : 未整 理のmodelモジュー ル、repositoryモジ ュールをまとめたモ ジュール
60. Mobility Technologies Co., Tips1 : 新機能間の依存性の作り⽅ :ride- setting :dispatc h
61. Mobility Technologies Co., Tips1 : 新機能間の依存性の作り⽅ :app :ride-setting :legacy :legacy-core :dispatch
62. Mobility Technologies Co., Tips1 : 新機能間の依存性の作り⽅ :app :ride-setting :dispatch inject inteface implement 間接的に依存させる
63. Mobility Technologies Co., Tips2 : 新モジュールで警告があればビルドが通らないようにした :login :legacy :legacy-core :history ✨ :app ✨
64. Mobility Technologies Co., • マルチモジュールを導⼊することになったきっかけ • マルチモジュールとは • MoTではこういうマルチモジュールを⽬指した • 実際の開発 • 今後 Agenda
65. Mobility Technologies Co., 現在のレガシーの状況は・・・
66. 今後のMoTイベント案内は Twitter @mot_techtalk のフォローをお願いしま す︕ アンケート回答にご協⼒お願いいたします→ ※回答頂いた⽅の中から、抽選でGOクーポン¥2,000プレゼント︕ ご視聴ありがとうございました 次回予告︓ Vol.5 鋭意調整中︕そろそろGO以外のサービスも紹介できれば︕