Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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 ユーザーアプリのライブラリ選定
・機能開発の速度を落とさずにいかに並行してマルチモジュール化を進めたか
  ・マルチモジュールを導入することになったきっかけ
  ・マルチモジュールとは
  ・どのようにマルチモジュールを導入するか
  ・マルチモジュール化の現状と今後

44a210d1299a727e9d601a47dfedeabf?s=128

MoT Tech Talk

May 27, 2021
Tweet

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以外のサービスも紹介できれば︕