Share
Embed
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
Mobility Technologies Co.,
● タクシーアイコンの描画の⼯夫とアニメーション
● 道路への引き込みについて
● Google Maps の padding を正しく扱うための⼯夫
(画⾯の⼤きさに関わらず、Google ロゴを表⽰する)
● Google Maps に描画するものと、独⾃ View に描画するものの切
り分け⽅
地図UIの⼯夫
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
Mobility Technologies Co.,
● タクシーアイコンの描画の⼯夫とアニメーション
● 道路への引き込みについて
● Google Maps の padding を正しく扱うための⼯夫
(画⾯の⼤きさに関わらず、Google ロゴを表⽰する)
● Google Maps に描画するものと、独⾃ View に描画するものの切
り分け⽅
地図UIの⼯夫
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
Mobility Technologies Co.,
● タクシーアイコンの描画の⼯夫とアニメーション
● 道路への引き込みについて
● Google Maps の padding を正しく扱うための⼯夫
(画⾯の⼤きさに関わらず、Google ロゴを表⽰する)
● Google Maps に描画するものと、独⾃ View に描画するものの切
り分け⽅
地図UIの⼯夫
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
Mobility Technologies Co.,
● タクシーアイコンの描画の⼯夫とアニメーション
● 道路への引き込みについて
● Google Maps の padding を正しく扱うための⼯夫
(画⾯の⼤きさに関わらず、Google ロゴを表⽰する)
● Google Maps に描画するものと、独⾃ View に描画するものの切
り分け⽅
地図UIの⼯夫
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
Mobility Technologies Co.,
■ するもの
■ タクシーアイコン（Marker として描画）
■ 乗⾞地/降⾞地決定後のピン
■ しないもの
■ 乗⾞地決定前のピン
■ フキダシ
※点線に関しては画⾯によって描画⽅法が違う（後述）
Google Maps 上で描画するもの/しないもの
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
Mobility Technologies Co.,
● マルチモジュールを導⼊することになったきっかけ
● マルチモジュールとは
● MoTではこういうマルチモジュールを⽬指した
● 実際の開発
● 今後
Agenda
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
Mobility Technologies Co.,
● マルチモジュールを導⼊することになったきっかけ
● マルチモジュールとは
● MoTではこういうマルチモジュールを⽬指した
● 実際の開発
● 今後
Agenda
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
Mobility Technologies Co.,
● マルチモジュールを導⼊することになったきっかけ
● マルチモジュールとは
● MoTではこういうマルチモジュールを⽬指した
● 実際の開発
● 今後
Agenda
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
Mobility Technologies Co.,
● マルチモジュールを導⼊することになったきっかけ
● マルチモジュールとは
● MoTではこういうマルチモジュールを⽬指した
● 実際の開発
● 今後
Agenda
Slide 65
Slide 65 text
Mobility Technologies Co.,
現在のレガシーの状況は・・・
Slide 66
Slide 66 text
今後のMoTイベント案内は Twitter
@mot_techtalk のフォローをお願いしま
す︕
アンケート回答にご協⼒お願いいたします→
※回答頂いた⽅の中から、抽選でGOクーポン¥2,000プレゼント︕
ご視聴ありがとうございました
次回予告︓
Vol.5 鋭意調整中︕そろそろGO以外のサービスも紹介できれば︕