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

Slide 1

Slide 1 text

#4 Androidエンジニア必⾒︕ タクシーアプリGOのUXを⾼める⼯夫

Slide 2

Slide 2 text

Mobility Technologies Co., ● もし質問があれば、YouTubeのコメント欄にコメントお願いします。適宜、お答えしていきます。 ● Twitterへの投稿は #mot_tech_talk でツイートをお願いします。 ● 視聴の最後に、アンケートの⼊⼒をお願いします。 MoT Online Tech Talk #4を聞くにあたってのお知らせ

Slide 3

Slide 3 text

Mobility Technologies Co., ● 地図UIの⼯夫 ● 流しのタクシーでのアプリ決済にまつわる技術（CameraX/⾳声トリガー） ● 機能開発の速度を落とさずにいかにして並⾏してマルチモジュール化を進めたか本⽇の内容

Slide 4

Slide 4 text

Mobility Technologies Co., 登壇者の紹介

Slide 5

Slide 5 text

Mobility Technologies Co., ⾼柳翔（@sobachanko）主な呼ばれ⽅︓そばちゃん ● チームハッスルリーダー ● 趣味・特技︓飲酒 ● 元ホテルマン諏訪村夏彦（@napplecomputer）主な呼ばれ⽅︓なっぴー ● ⼆輪の免許を最近取りました ● 次は第⼆種電気⼯事⼠を取るために勉強中 ● 今⽇⼟地を買ってきました

Slide 6

Slide 6 text

Mobility Technologies Co., Son Semyeong （@Hand-Tomi）主な呼ばれ⽅︓そんくん ● 556のAndroid開発者 ● ⼈⽣⽬標︓家買 ● ラーメン屋さん、「バリ男」 VIPだった松延萌菜（@nb_matsu）主な呼ばれ⽅︓まつのぶさん ● エンジニア採⽤のリーダー ● 最近すこしだけウイスキーブーム ● 視聴者を代弁する質問役

Slide 7

Slide 7 text

Mobility Technologies Co., GO の紹介

Slide 8

Slide 8 text

Mobility Technologies Co., GO の紹介

Slide 9

Slide 9 text

Mobility Technologies Co., 地図UIの⼯夫

Slide 10

Slide 10 text

Mobility Technologies Co., ● タクシーアイコンの描画の⼯夫とアニメーション ● 道路への引き込みについて ● Google Maps の padding を正しく扱うための⼯夫 (画⾯の⼤きさに関わらず、Google ロゴを表⽰する) ● Google Maps に描画するものと、独⾃ View に描画するものの切り分け⽅地図UIの⼯夫

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Mobility Technologies Co., ■ Google Maps 上に Marker として描画している ■ タクシーの位置情報は API をポーリングして定期的に取得 ■ 前回と今回の位置情報を⽐較してアニメーションさせている ■ 向いている⽅⾓を計算して、アイコンが正しく進⾏⽅向に向くようにしているタクシーアイコン

Slide 13

Slide 13 text

Mobility Technologies Co., ■ 通信環境が悪くなければ、右左折もキレイ動きます ■ 余談ですが、乗⾞後は地図がタクシーアイコンを⾃動追尾しないようになっている ■ これは別の⼈が乗ってしまったりした場合に[個⼈情報（別の⼈の位置情報）がユーザーに分からないようにするためタクシーアイコン

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Mobility Technologies Co., ● 現在地から⼀番近い「乗⾞地として設定できる場所」にピンを移動させる処理のことを指す引き込みとは︖

Slide 16

Slide 16 text

Mobility Technologies Co., 引き込みとは︖

Slide 17

Slide 17 text

Mobility Technologies Co., ● ⾼速道路や⾞が⽴ち⼊れない道などを除外 ● ⼤きい道路の場合、どちら側なのかの判定もしている ● 細かい点で⾔うと、交差点の 5m 以内なども除外しているなぜ引き込みを⾏うのか

Slide 18

Slide 18 text

Mobility Technologies Co., ● ⾼速道路や⾞が⽴ち⼊れない道などを除外 ● ⼤きい道路の場合、どちら側なのかの判定もしている ● 細かい点で⾔うと、交差点の 5m 以内なども除外しているなぜ引き込みを⾏うのか最初にピンが置かれた位置からすぐに配⾞依頼がかけられるようにするための⼯夫

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Mobility Technologies Co., ■ 上の図のように上部と右側に padding を設定すると地図の緑で囲われた位置を制御できる範囲として指定できる ■ GO では上下に padding を設定している ■ 地図の上にコンテンツを配置する場合によく利⽤される ■ Google Maps のロゴの位置は左下に固定で表⽰され、カスタマイズができない Google Maps の padding とは

Slide 21

Slide 21 text

Mobility Technologies Co., Google Maps を利⽤する場合、Google ロゴを隠してはいけないと明確に規定されている https://developers.google.com/maps/documentat ion/android-sdk/map?hl=ja#map_padding 下部のUIパーツ（コントロールパネルと呼んでいる）は画⾯毎に⾼さが違うため、画⾯毎に適切に padding を設定する必要がある Google ロゴの調整が⼤変

Slide 22

Slide 22 text

Mobility Technologies Co., Google ロゴの調整が⼤変 override fun onViewCreated(view: View, savedInstanceState: Bundle?) { binding.mapPadding.doOnLayout { view -> googleMap.setPadding(0, 0, 0, view.height) } }

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Mobility Technologies Co., ■ Google Maps 上に描画する場合のメリット ■ 扱いが簡単（緯度経度を渡すだけで画⾯上の正しい座標に描画してくれる） ■ Google Maps 上に描画する場合のデメリット ■ 描画速度が遅いので素早い動きに弱い Google Maps 上で描画するもの/しないもの

Slide 25

Slide 25 text

Mobility Technologies Co., ■ するもの ■ タクシーアイコン（Marker として描画） ■ 乗⾞地/降⾞地決定後のピン ■ しないもの ■ 乗⾞地決定前のピン ■ フキダシ ※点線に関しては画⾯によって描画⽅法が違う（後述） Google Maps 上で描画するもの/しないもの

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Mobility Technologies Co., ■ 素早く動かされても追従できるように独⾃の View を地図の上に置いて描画している ■ 計算には三⾓関数を⽤いて現在地と地図の中⼼座標間に点線を描画 ■ 余談︓乗⾞地ピンも Lottie のアニメーションを利⽤するために独⾃ View 上で描画している点線の描画について（乗⾞地決定前）

Slide 28

Slide 28 text

Mobility Technologies Co., ■ 現在地と乗⾞地を結ぶ点線と乗⾞地のピンは動かす必要がないので Google Maps 上に直接描画している点線の描画について（乗⾞地決定後）

Slide 29

Slide 29 text

Mobility Technologies Co., 流しのタクシーでのアプリ決済にまつわる技術（CameraX/⾳声トリガー）

Slide 30

Slide 30 text

Mobility Technologies Co., 流しのタクシーでのアプリ決済

Slide 31

Slide 31 text

Mobility Technologies Co., ● アプリ配⾞以外で乗った時でも、⾳声トリガーを使って乗⾞しているタクシーとアプリを紐づけてアプリ内で決済できる ● タブレットの「GO Pay」ボタンをタップ⾳声トリガーを使ったGO Pay

Slide 32

Slide 32 text

Mobility Technologies Co., ● ⾳声トリガーを利⽤するにはマイクのパーミッションが必要 ● マイクのパーミッションが取れなかったときのために、2次元バーコードでも紐付けられる機能を補助的に提供 2次元バーコードを使った GO Pay

Slide 33

Slide 33 text

Mobility Technologies Co., ● Androidのカメラ実装は⻤⾨中の⻤⾨ ○ 機種依存がつらい ○ メモリ管理がつらい ○ 単純に実装がつらい ■ 学習コスト⾼め ■ コールバック地獄 ■ 設定値が⾮常に多い ● できれば実装したくない ○ 撮影するだけならカメラアプリにお願いする⼿もある ● そこでCameraX Androidのカメラやばい話

Slide 34

Slide 34 text

Mobility Technologies Co., ● Google I/O 2019にて発表された、カメラアプリを簡単に実装するためのライブラリ ● 通常のカメラAPIをラッピングしている ● 実装が超簡単 ○ 通常のカメラAPIはハードウェアを最⼤限に活⽤することを⽬指しているのに対し、CameraXはシンプルなAPIを提供することを⽬指している ● 機種依存を吸収してくれる ○ CameraX Test Labで継続的に⾃動テストしている ● ただし当時のバージョンはalpha06 CameraX

Slide 35

Slide 35 text

Mobility Technologies Co., ● 安定版になる前だと不具合のある可能性や、今後のバージョンアップで破壊的変更が⼊る可能性が⾼い ● 素のカメラAPIのつらさとalpha版のつらさを天秤にかける ● この時は利⽤箇所が局所的だったためCameraXの採⽤を決めたが… CameraXを⼊れた話

Slide 36

Slide 36 text

Mobility Technologies Co., ● 明確な基準はない ● 以下の内容から判断する ○ 安定版かどうか ○ ライブラリの影響範囲 ■ 影響範囲が広い場合、ライブラリの不具合・破壊的変更の影響が⾮常に⼤きく、ライブラリの更新のリスクとコストが⼤きくなりがち。 ■ 影響範囲によってはQAコストを確保できずなかなか更新できなくなる開発上のリスクも有る ○ Google関連かサードパーティー製か ■ サードパーティー製の場合、メンテナンスがされているか GO Android ユーザーアプリのライブラリ選定基準

Slide 37

Slide 37 text

Mobility Technologies Co., 機能開発の速度を落とさずにいかに並⾏してマルチモジュール化を進めたか

Slide 38

Slide 38 text

Mobility Technologies Co., ● マルチモジュールを導⼊することになったきっかけ ● マルチモジュールとは ● MoTではこういうマルチモジュールを⽬指した ● 実際の開発 ● 今後 Agenda

Slide 39

Slide 39 text

Mobility Technologies Co., 配⾞アプリサービス統合 2 4 6

Slide 40

Slide 40 text

Mobility Technologies Co., 開発者が増えたら起きること ● コンフリクトが起きやすい ● 予期せぬバグが発⽣する可能性が上がる。 :app

Slide 41

Slide 41 text

Mobility Technologies Co., ⼤きいアプリケーションになる予定

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Mobility Technologies Co., モジュールとは ● appモジュールを除外して内部ライブラリと理解しても⼤丈夫です。 ● モジュールはコンテナとして機能し、その中にアプリのソースコード、リソースファイルが含まれるほか、モジュールレベルのビルドファイルや Android マニフェストファイルなどのアプリレベルの設定も含まれます。

Slide 44

Slide 44 text

Mobility Technologies Co., マルチモジュールとは単⼀モジュールからある主題の単位ライブラリを分離して相互作⽤するのがマルチモジュール

Slide 45

Slide 45 text

Mobility Technologies Co., マルチモジュールとは :feature:login :data:repositor y :model :app login repository model

Slide 46

Slide 46 text

Mobility Technologies Co., マルチモジュールとは :app :feature:login :model :data:repositor y :feature:login :data:repositor y :model :app

Slide 47

Slide 47 text

Mobility Technologies Co., マルチモジュールのメリットそれで何がいい︖

Slide 48

Slide 48 text

Mobility Technologies Co., マルチモジュールのメリット依存関係を欲しい構造で強制できる :app :feature:login :model :data:repositor y マルチモジュールを構築して依存関係の流れを強制する

Slide 49

Slide 49 text

Mobility Technologies Co., マルチモジュール化の⽅法 - レイヤーごとにプレゼンテーション層ビジネスロジック層データ層 ● 上位モジュールが下位モジュールに依存しないことを保証できる ● 独⽴性を保つモジュール構造を作ることが可能

Slide 50

Slide 50 text

Mobility Technologies Co., マルチモジュール化の⽅法 - 機能ごと :app ログイン機能配⾞機能履歴機能 ● 機能別にコードがまとまっているので理解しやすい ● 修正の影響範囲を最低限にまとめることができる

Slide 51

Slide 51 text

Mobility Technologies Co., マルチモジュール化の⽅法 - 規模ごと⼩規模中規模⼤規模

Slide 52

Slide 52 text

Mobility Technologies Co., https://droidkaigi.jp/2019/timetable/ 70971/ マルチモジュール化の⽅法 - 参考資料 DroidKaigi : 2019 multi-module Androidアプリケーション

Slide 53

Slide 53 text

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

Slide 56

Slide 56 text

Mobility Technologies Co., 🤔 どのように機能開発の速度を落とさずにマルチモジュールを導⼊するか

Slide 57

Slide 57 text

Mobility Technologies Co., 🤩 新機能からマルチモジュールを導⼊すれば︕︖

Slide 58

Slide 58 text

Mobility Technologies Co., 新機能モジュールを⼊れられように環境を構築した

Slide 59

Slide 59 text

Mobility Technologies Co., 新機能モジュールを⼊れられように環境を構築した :app :login :legacy :legacy-core :history ● legacy : 未整理のモジュールをまとめたモジュール ● legacy-core : 未整理のmodelモジュール、repositoryモジュールをまとめたモジュール

Slide 60

Slide 60 text

Mobility Technologies Co., Tips1 : 新機能間の依存性の作り⽅ :ride- setting :dispatc h

Slide 61

Slide 61 text

Mobility Technologies Co., Tips1 : 新機能間の依存性の作り⽅ :app :ride-setting :legacy :legacy-core :dispatch

Slide 62

Slide 62 text

Mobility Technologies Co., Tips1 : 新機能間の依存性の作り⽅ :app :ride-setting :dispatch inject inteface implement 間接的に依存させる

Slide 63

Slide 63 text

Mobility Technologies Co., Tips2 : 新モジュールで警告があればビルドが通らないようにした :login :legacy :legacy-core :history ✨ :app ✨

Slide 64

Slide 64 text

Slide 65

Slide 65 text

Mobility Technologies Co., 現在のレガシーの状況は・・・

Slide 66

Slide 66 text

今後のMoTイベント案内は Twitter @mot_techtalk のフォローをお願いします︕ アンケート回答にご協⼒お願いいたします→ ※回答頂いた⽅の中から、抽選でGOクーポン¥2,000プレゼント︕ ご視聴ありがとうございました次回予告︓ Vol.5 鋭意調整中︕そろそろGO以外のサービスも紹介できれば︕