MoT TechTalk #3 タクシー配車ならではの技術が盛りだくさん！iOSアプリの開発現場

タクシーの配車アプリは、アプリでタクシーを呼ぶところから降車までのUXが非常に重要になってきます。 そのためアプリでは、ユーザーの体験を良くするために、多彩な機能が実装されています。

今回はオンラインにて、アプリの特徴的な機能や開発事情の話を、iOSエンジニアチームのメンバーに語っていただきました。

YouTube
https://www.youtube.com/watch?v=KwaMV7-uMdI

Transcript

1. #3 タクシー配⾞ならではの技術が盛りだくさん︕ iOSアプリの開発現場
2. Mobility Technologies Co., • もし質問があれば、YouTubeのコメント欄にコメントお願いしま す。適宜、お答えしていきます。 • Twitterへの投稿は #mot_tech_talk でツイートをお願いします。 • 視聴の最後に、アンケートの⼊⼒をお願いします。 MoT Online Tech Talk #3を聞くにあたってのお知らせ
3. Mobility Technologies Co., • タクシーアプリならではの機能の紹介 • デザイナーと模索しているUIの共通概念の話 • コロナ禍におけるフルリモートでのチームビルディング • タクシーアプリGOに向けたアーキテクチャ変更の話 本⽇の内容
4. Mobility Technologies Co., ⾃⼰紹介
5. Mobility Technologies Co., タクシーアプリ『GO』
6. Mobility Technologies Co., タクシー配⾞アプリ『GO』 乗る位置を指定 到着まで待つ 乗る︕ ⽀払いはキャッシュレスで 素早く降⾞ ※アプリ上での決済の他、 ⾞内での現⾦決済にも対応
7. Mobility Technologies Co., タクシーアプリならではの機 能の紹介
8. Mobility Technologies Co., • 地図操作に応じたピンのアニメーション • 画⾯下部のカードやバルーンへの状態反映 • 現在地とピンを繋ぐ点線 地図操作による地点選択
9. Mobility Technologies Co., • あらかじめ周辺の禁⽌エリア情報を取得 • 様々な形や⽳が空いてるエリアを表⽰ 地図への注⽂禁⽌エリア表⽰ ※注⽂禁⽌エリア:駅、タクシー乗り場、通⾏禁⽌場所などタク シーを呼ぶことができないエリア
10. Mobility Technologies Co., ⾳声トリガーを使った決済機能
11. Mobility Technologies Co., • アプリ配⾞以外で乗った時でも、⾳声トリガーを使って乗⾞しているタクシ ーとアプリを紐づけてアプリ内で決済できる • 後部座席タブの「GO Pay」ボタンをタップ ⾳声トリガーを使ったGO Pay 後部座席タブレット ユーザーアプリ
12. Mobility Technologies Co., • 配⾞確定後に乗務員がユーザーを⾒つけられない時のために、乗務員側から のみ⾳声通話をかけられる • アプリ経由の⾳声通話機能のため利⽤者の電話番号は乗務員に通知されない 乗務員から利⽤者への⾳声通話
13. Mobility Technologies Co., • 希望⽇時配⾞ • 優先パス/無料空⾞待ち • 様々な配⾞オプション（⾞椅⼦対応、スライドドア⾞両など） 『GO』ならではの機能開発
14. Mobility Technologies Co., デザイナーと模索している UIの共通概念
15. Mobility Technologies Co., • 前提 ◦ FigmaはiOSのフォントレンダリングを真似できない。 ◦ ⽇本語だけの場合、16pt以下は1pt⼤きくする必要があり、 17pt以上はそのままである必要がある。 • 課題 ◦ 毎回、気にしながら実装すのが⾟い。 Figmaのフォント表⽰に関して
16. Mobility Technologies Co., デザイナーと共通の定義を作る
17. Mobility Technologies Co., UIコンポーネントを決めるにあたった理由 • Figma上に新しいUIコンポーネントが出て来た際に、毎回議論の コストがかかっている • エンジニアとして、既存のUIコンポーネントで開発できた⽅が実 装コストが少なくて済む • 仕様検討時に既存のUIコンポーネントでプロトタイプを作りたい
18. Mobility Technologies Co., デザイナーと共通の定義を作る
19. Mobility Technologies Co., コロナ禍におけるフルリモー トでのチームビルディング
20. Mobility Technologies Co., • コロナ禍でフルリモートとなった • 会社統合で、それぞれのiOSチームが１つとなった 2020年04⽉の弊社の状況
21. Mobility Technologies Co., • 雑談が少なくなった • 他のエンジニアやPdMとフランクに相談ができにくい ◦ 仕様や実装⽅針の相談 ◦ レビューでの指摘事項の質問 ◦ 実装の共有 コロナ禍の前後で変わったこと
22. Mobility Technologies Co., 雑談ができる機会を増やし、信頼関係を構築する 課題を解決するために①
23. Mobility Technologies Co., • 話す機会を⽤意する ◦ 毎⽇のDaily Stand Up ◦ 週１の振り返り ◦ 週１のWin Session 雑談が⾃然と⽣まれる環境づくり
24. Mobility Technologies Co., 例）振り返り
25. Mobility Technologies Co., ⾃分たちで情報のシェアが適切に⾏え、 課題解決ができるような組織づくり 課題を解決するために②
26. Mobility Technologies Co., • それぞれのチームにミッションを与える ◦ プロジェクトの効率化を考えながら施策を進める ◦ 開発チームの効率化 • チーム名を決めてもらう • 情報の⾒える化 ◦ 全てのグループワークをMiroで⼀元管理 ◦ OKRの⽬標や振り返り内容を⾒える化 課題解決ができるような組織づくり
27. Mobility Technologies Co.,
28. Mobility Technologies Co., • ミッションを達成するためにグループワークが増えた （皆でわちゃわちゃ話をしたい） 予想外によかったこと
29. Mobility Technologies Co., タクシーアプリ『GO』に向 けたアーキテクチャ変更
30. Mobility Technologies Co., - 2020年4⽉に統合し、2020年5⽉から本格的に開発をスタート - iOS エンジニアは 4 ⼈から 8 ⼈に倍増 - どのようにこれから iOS アプリを開発・運⽤していくのか - 今後のチームのあり⽅や進め⽅、⼤切にしていくことなどの 視点を揃えておく - 2ヶ⽉かけて毎週議論を交わした 『GO』iOS アプリをどう開発していくのか
31. Mobility Technologies Co., - GO (当時の MOV )は MVVM + 独⾃ルーティングで作られていた - 既存の仕組みによる実装には様々な課題が潜んでいた - Router の肥⼤化（1000⾏超えもいくつか…） - 責務が明確でない - Router にルーティング以外のロジックがある - ViewModel がいろんなクラスに漏れている - 状態の流れ、依存関係がみえづらい - etc... 『GO』iOS アプリが抱える課題
32. Mobility Technologies Co., アーキテクチャを⾒直そう💡
33. Mobility Technologies Co., - MVVM（既存） - Redux/Flux - VIPER - RIBs アーキテクチャの候補
34. Mobility Technologies Co., ……イメージが湧かない 🤔 RIBs ⾃体よく分からない Redux/Flux ⾃体は分かるけど、 配⾞アプリに適⽤するにはどうすればよいか分からない
35. Mobility Technologies Co., RIBs アーキテクチャの理解を深めるために社内勉強会を開催 RIBs 勉強会の開催 https://speakerdeck.com/imairi/chu-metefalse-ribs
36. Mobility Technologies Co., RIBs, Redux, Flux (Verge) でサンプルを作成してイメージを膨らま す 各アーキテクチャでサンプル配⾞アプリを作成
37. Mobility Technologies Co., なんとなくイメージは湧いた 💡 …が、どうやって決めればいいんだろう 🤔
38. Mobility Technologies Co., - 配⾞アプリの特性に合ったアーキテクチャであること - 状態の数が⾮常に多い - 最新の状態の再現性が求められる - 配⾞中にアプリを再起動した場合など - ユーザの操作なしに UI が更新される - 注⽂後は画⾯を放置していても状態によって変化する - 画⾯遷移（push/pop）が少ない - 注⽂フローは画⾯遷移がないに等しい - 将来的にサービス拡⼤が予想される - 相乗り、フードデリバリー、その他移動に関わるサービス アーキテクチャの選定基準を考える
39. Mobility Technologies Co., - 責任範囲をプロジェクト全体で統⼀できる（責任の明確化） - コードを書く際の迷いをなくすため - レビューでの着眼点を明瞭にするため - 複数⼈での開発に向いているか - 複数のプロジェクトが並⾏稼動しても耐えられるか - スケーラブル - 今後のサービス拡⼤へ柔軟に対応できるか - 開発効率 - ビルド時間、 デバッグのしやすさ - 学習コスト アーキテクチャの選定基準を考える
40. Mobility Technologies Co., 各アーキテクチャについてみんなで議論をする アーキテクチャの選定基準を元に、各候補についての意⾒を共有する 定量的な評価 意⾒や定量的な評価の理 由などを⾃由に語る
41. Mobility Technologies Co., 永遠に議論できそう…なかなか収束しない… 😂
42. Mobility Technologies Co., 技術的負債を⾒返してみる ルーティングまわりを改善できるような仕組み がいま我々には必要なのではないか💡
43. Mobility Technologies Co., 「GO」iOS アプリに RIBs を採⽤する 🤝
44. Mobility Technologies Co., RIBs アーキテクチャ採⽤後どうなったのか - ルーティングまわりの実装を細分化できた - 15 個の Router が 140 個に分割された 🎉 - 画⾯遷移ではなくビジネスロジック起点のルーティン グに変わった - 依存関係が可視化された - 複数⼈開発がしやすくなった - テスタビリティの向上 - 事業的な案件と並⾏したリファクタリングは難しかった 🤒 - QA コストも少し膨らんだ - ビジネスロジック部分の移⾏がまだ間に合っていない - iOS チームメンバ全員で現状の課題について向き合い、これ らかどう開発していくかを議論することができた - 今後も定期的にこういった議論が⾏えるチームでありたい
45. Mobility Technologies Co., 今後のイベント速報
46. Mobility Technologies Co., https://connpass.com/event/20916 7/
47. Mobility Technologies Co., https://jtx.connpass.com/event/20 8455/
48. 今後のMoTイベント案内は Twitter @mot_techtalk のフォローをお願いしま す︕ アンケート回答にご協⼒お願いいたします→ ※回答頂いた⽅の中から、抽選でGOクーポン¥2,000プレゼント︕ ご視聴ありがとうございました 次回予告︓ Vol.4 Android版タクシーアプリGO - 統合と改善の⼀年間 の記録