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 - 統合と改善の⼀年間
の記録