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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Mobility Technologies Co., ● タクシーアプリならではの機能の紹介 ● デザイナーと模索しているUIの共通概念の話 ● コロナ禍におけるフルリモートでのチームビルディング ● タクシーアプリGOに向けたアーキテクチャ変更の話本⽇の内容

Slide 4

Slide 4 text

Mobility Technologies Co., ⾃⼰紹介

Slide 5

Slide 5 text

Mobility Technologies Co., タクシーアプリ『GO』

Slide 6

Slide 6 text

Mobility Technologies Co., タクシー配⾞アプリ『GO』乗る位置を指定到着まで待つ乗る︕ ⽀払いはキャッシュレスで素早く降⾞ ※アプリ上での決済の他、⾞内での現⾦決済にも対応

Slide 7

Slide 7 text

Mobility Technologies Co., タクシーアプリならではの機能の紹介

Slide 8

Slide 8 text

Mobility Technologies Co., ● 地図操作に応じたピンのアニメーション ● 画⾯下部のカードやバルーンへの状態反映 ● 現在地とピンを繋ぐ点線地図操作による地点選択

Slide 9

Slide 9 text

Mobility Technologies Co., ● あらかじめ周辺の禁⽌エリア情報を取得 ● 様々な形や⽳が空いてるエリアを表⽰地図への注⽂禁⽌エリア表⽰ ※注⽂禁⽌エリア:駅、タクシー乗り場、通⾏禁⽌場所などタクシーを呼ぶことができないエリア

Slide 10

Slide 10 text

Mobility Technologies Co., ⾳声トリガーを使った決済機能

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Mobility Technologies Co., ● 配⾞確定後に乗務員がユーザーを⾒つけられない時のために、乗務員側からのみ⾳声通話をかけられる ● アプリ経由の⾳声通話機能のため利⽤者の電話番号は乗務員に通知されない乗務員から利⽤者への⾳声通話

Slide 13

Slide 13 text

Mobility Technologies Co., ● 希望⽇時配⾞ ● 優先パス/無料空⾞待ち ● 様々な配⾞オプション（⾞椅⼦対応、スライドドア⾞両など）『GO』ならではの機能開発

Slide 14

Slide 14 text

Mobility Technologies Co., デザイナーと模索している UIの共通概念

Slide 15

Slide 15 text

Mobility Technologies Co., ● 前提 ○ FigmaはiOSのフォントレンダリングを真似できない。 ○ ⽇本語だけの場合、16pt以下は1pt⼤きくする必要があり、 17pt以上はそのままである必要がある。 ● 課題 ○ 毎回、気にしながら実装すのが⾟い。 Figmaのフォント表⽰に関して

Slide 16

Slide 16 text

Mobility Technologies Co., デザイナーと共通の定義を作る

Slide 17

Slide 17 text

Mobility Technologies Co., UIコンポーネントを決めるにあたった理由 ● Figma上に新しいUIコンポーネントが出て来た際に、毎回議論のコストがかかっている ● エンジニアとして、既存のUIコンポーネントで開発できた⽅が実装コストが少なくて済む ● 仕様検討時に既存のUIコンポーネントでプロトタイプを作りたい

Slide 18

Slide 18 text

Mobility Technologies Co., デザイナーと共通の定義を作る

Slide 19

Slide 19 text

Mobility Technologies Co., コロナ禍におけるフルリモートでのチームビルディング

Slide 20

Slide 20 text

Mobility Technologies Co., ● コロナ禍でフルリモートとなった ● 会社統合で、それぞれのiOSチームが１つとなった 2020年04⽉の弊社の状況

Slide 21

Slide 21 text

Mobility Technologies Co., ● 雑談が少なくなった ● 他のエンジニアやPdMとフランクに相談ができにくい ○ 仕様や実装⽅針の相談 ○ レビューでの指摘事項の質問 ○ 実装の共有コロナ禍の前後で変わったこと

Slide 22

Slide 22 text

Mobility Technologies Co., 雑談ができる機会を増やし、信頼関係を構築する課題を解決するために①

Slide 23

Slide 23 text

Mobility Technologies Co., ● 話す機会を⽤意する ○ 毎⽇のDaily Stand Up ○ 週１の振り返り ○ 週１のWin Session 雑談が⾃然と⽣まれる環境づくり

Slide 24

Slide 24 text

Mobility Technologies Co., 例）振り返り

Slide 25

Slide 25 text

Mobility Technologies Co., ⾃分たちで情報のシェアが適切に⾏え、課題解決ができるような組織づくり課題を解決するために②

Slide 26

Slide 26 text

Mobility Technologies Co., ● それぞれのチームにミッションを与える ○ プロジェクトの効率化を考えながら施策を進める ○ 開発チームの効率化 ● チーム名を決めてもらう ● 情報の⾒える化 ○ 全てのグループワークをMiroで⼀元管理 ○ OKRの⽬標や振り返り内容を⾒える化課題解決ができるような組織づくり

Slide 27

Slide 27 text

Mobility Technologies Co.,

Slide 28

Slide 28 text

Mobility Technologies Co., ● ミッションを達成するためにグループワークが増えた（皆でわちゃわちゃ話をしたい）予想外によかったこと

Slide 29

Slide 29 text

Mobility Technologies Co., タクシーアプリ『GO』に向けたアーキテクチャ変更

Slide 30

Slide 30 text

Mobility Technologies Co., - 2020年4⽉に統合し、2020年5⽉から本格的に開発をスタート - iOS エンジニアは 4 ⼈から 8 ⼈に倍増 - どのようにこれから iOS アプリを開発・運⽤していくのか - 今後のチームのあり⽅や進め⽅、⼤切にしていくことなどの視点を揃えておく - 2ヶ⽉かけて毎週議論を交わした『GO』iOS アプリをどう開発していくのか

Slide 31

Slide 31 text

Mobility Technologies Co., - GO (当時の MOV )は MVVM + 独⾃ルーティングで作られていた - 既存の仕組みによる実装には様々な課題が潜んでいた - Router の肥⼤化（1000⾏超えもいくつか…） - 責務が明確でない - Router にルーティング以外のロジックがある - ViewModel がいろんなクラスに漏れている - 状態の流れ、依存関係がみえづらい - etc... 『GO』iOS アプリが抱える課題

Slide 32

Slide 32 text

Mobility Technologies Co., アーキテクチャを⾒直そう💡

Slide 33

Slide 33 text

Mobility Technologies Co., - MVVM（既存） - Redux/Flux - VIPER - RIBs アーキテクチャの候補

Slide 34

Slide 34 text

Mobility Technologies Co., ……イメージが湧かない 🤔 RIBs ⾃体よく分からない Redux/Flux ⾃体は分かるけど、配⾞アプリに適⽤するにはどうすればよいか分からない

Slide 35

Slide 35 text

Mobility Technologies Co., RIBs アーキテクチャの理解を深めるために社内勉強会を開催 RIBs 勉強会の開催 https://speakerdeck.com/imairi/chu-metefalse-ribs

Slide 36

Slide 36 text

Mobility Technologies Co., RIBs, Redux, Flux (Verge) でサンプルを作成してイメージを膨らます各アーキテクチャでサンプル配⾞アプリを作成

Slide 37

Slide 37 text

Mobility Technologies Co., なんとなくイメージは湧いた 💡 …が、どうやって決めればいいんだろう 🤔

Slide 38

Slide 38 text

Mobility Technologies Co., - 配⾞アプリの特性に合ったアーキテクチャであること - 状態の数が⾮常に多い - 最新の状態の再現性が求められる - 配⾞中にアプリを再起動した場合など - ユーザの操作なしに UI が更新される - 注⽂後は画⾯を放置していても状態によって変化する - 画⾯遷移（push/pop）が少ない - 注⽂フローは画⾯遷移がないに等しい - 将来的にサービス拡⼤が予想される - 相乗り、フードデリバリー、その他移動に関わるサービスアーキテクチャの選定基準を考える

Slide 39

Slide 39 text

Mobility Technologies Co., - 責任範囲をプロジェクト全体で統⼀できる（責任の明確化） - コードを書く際の迷いをなくすため - レビューでの着眼点を明瞭にするため - 複数⼈での開発に向いているか - 複数のプロジェクトが並⾏稼動しても耐えられるか - スケーラブル - 今後のサービス拡⼤へ柔軟に対応できるか - 開発効率 - ビルド時間、デバッグのしやすさ - 学習コストアーキテクチャの選定基準を考える

Slide 40

Slide 40 text

Mobility Technologies Co., 各アーキテクチャについてみんなで議論をするアーキテクチャの選定基準を元に、各候補についての意⾒を共有する定量的な評価意⾒や定量的な評価の理由などを⾃由に語る

Slide 41

Slide 41 text

Mobility Technologies Co., 永遠に議論できそう…なかなか収束しない… 😂

Slide 42

Slide 42 text

Mobility Technologies Co., 技術的負債を⾒返してみるルーティングまわりを改善できるような仕組みがいま我々には必要なのではないか💡

Slide 43

Slide 43 text

Mobility Technologies Co., 「GO」iOS アプリに RIBs を採⽤する 🤝

Slide 44

Slide 44 text

Mobility Technologies Co., RIBs アーキテクチャ採⽤後どうなったのか - ルーティングまわりの実装を細分化できた - 15 個の Router が 140 個に分割された 🎉 - 画⾯遷移ではなくビジネスロジック起点のルーティングに変わった - 依存関係が可視化された - 複数⼈開発がしやすくなった - テスタビリティの向上 - 事業的な案件と並⾏したリファクタリングは難しかった 🤒 - QA コストも少し膨らんだ - ビジネスロジック部分の移⾏がまだ間に合っていない - iOS チームメンバ全員で現状の課題について向き合い、これらかどう開発していくかを議論することができた - 今後も定期的にこういった議論が⾏えるチームでありたい

Slide 45

Slide 45 text

Mobility Technologies Co., 今後のイベント速報

Slide 46

Slide 46 text

Mobility Technologies Co., https://connpass.com/event/20916 7/

Slide 47

Slide 47 text

Mobility Technologies Co., https://jtx.connpass.com/event/20 8455/

Slide 48

Slide 48 text

今後のMoTイベント案内は Twitter @mot_techtalk のフォローをお願いします︕ アンケート回答にご協⼒お願いいたします→ ※回答頂いた⽅の中から、抽選でGOクーポン¥2,000プレゼント︕ ご視聴ありがとうございました次回予告︓ Vol.4 Android版タクシーアプリGO - 統合と改善の⼀年間の記録