瀕死のシステムが強くなって復活する話

弊社が展開しているタクシー配車サービスにおける乗務員様向けのシステムは今、大きな転換期を迎えています。
約半年に渡って進めてきた、大規模リファクタと開発対象デバイス刷新のプロジェクトがいよいよ陽の目を見るためです。
そんな新システム開発の裏で最低限のメンテしかされず、死にゆく運命にいる現行のシステムがあります。
とあることがきっかけで、今まで想定されていなかった多種多様なユースケースへの対応が必要となり、
現行のシステムにも新たに生まれ変わるチャンスが巡ってきました。

ただし、現在の実装の成熟具合から、現行のシステムを拡張する形での対応は難しく
また大規模に改築するにしても、
平行開発している新システムとのコード的な共存(マルチモジュール)を意識して対応しなければならない状況です。

本セッションでは、上記対応を行った中で学んだ
・多種多様なタクシー乗務のユースケースへ対応するための状態変化に強いアプリアーキテクチャ
・対象端末が違う別のシステムと共存するためのノウハウ
についてお話させて頂きます。

キーワード
- Flux
- MVVM
- マルチモジュール
- ステートマシン
- システムアーキテクチャ

Transcript

1. Yuri Hondo
   瀕死のシステムが
   強くなって復活する話
   

   View Slide

2. 自己紹介

   Twitter : URI - @yuyuyuyuyuri
   URI
   yurihondo, 本戸 裕理 (ホンド ユウリ)
   Androidアプリ開発@DeNA MOV
   朝早過ぎて息子を保育園へ送る がツライ
   2
   

   View Slide

3. Index

   3
   Background for the REVIVAL
   1
   2
   3
   4
   Current architecture
   Challenges for REVIVAL
   New architecture
   

   View Slide

4. Background for the REVIVAL
   1
   4
   

   View Slide

5. 前に
   前提を共有させてください
   5
   

   View Slide

6. View Slide

7. View Slide

8. View Slide

9. MOV 紹介
   9
   

   View Slide

10. 乗車位置を指定し
    タクシーを呼ぶ
    10
    MOV 紹介
    

    View Slide

11. タクシー 到着を待つ
    11
    MOV 紹介
    

    View Slide

12. タクシーに乗る
    12
    MOV 紹介
    

    View Slide

13. タクシーを降りる
    13
    MOV 紹介
    

    View Slide

14. ● アプリで簡単にタクシーを呼べる
    ● 到着時間がアプリで確認できる
    ● ネット決済利用で車内 支払いが不要
    14
    

    View Slide

15. 乗務員端末
    (Android)
    データ 流れ
    15
    

    View Slide

16. タクシーメーター
    BLEロガー
    乗務員端末
    (Android)
    後席タブレット
    (Android)
    データ 流れ
    BLE
    モバイル
    ネットワーク
    Wi-Fi
    Direct
    MOVサーバー
    16
    

    View Slide

17. タクシーメーター
    BLEロガー
    乗務員端末
    (Android)
    後席タブレット
    データ 流れ
    BLE
    モバイル
    ネットワーク
    Wi-Fi
    Direct
    MOVサーバー
    17
    

    View Slide

18. BLEロガー
    乗務員端末
    (Android)
    後席タブレット
    BLE
    モバイル
    ネットワーク
    Wi-Fi
    Direct
    MOVサーバー
    18
    タクシーメーター
    タクシーメーター
    営業状態 & 運賃
    

    View Slide

19. 19
    空車
    迎車
    実車
    タクシーメーター
    支払
    

    View Slide

20. タクシーメーター
    BLEロガー
    乗務員端末
    (Android)
    後席タブレット
    データ 流れ
    BLE
    モバイル
    ネットワーク
    Wi-Fi
    Direct
    MOVサーバー
    20
    

    View Slide

21. ユーザーと 連携
    タクシー、ユーザーそれぞれ
    位置情報などを仲介
    MOVサーバー
    21
    

    View Slide

22. タクシーメーター
    BLEロガー
    乗務員端末
    (Android)
    後席タブレット
    データ 流れ
    BLE
    モバイル
    ネットワーク
    Wi-Fi
    Direct
    MOVサーバー
    22
    

    View Slide

23. Remember 2019...
    23
    

    View Slide

24. 24
    https://droidkaigi.jp/2019/timetable/70687
    

    View Slide

25. https://dena.com/jp/press/004421 25
    

    View Slide

26. できたこと
    ● Flux導入などアーキテクチャ 刷新
    ● 無線配車対応
    26
    

    View Slide

27. できなかったこと
    ● ステートマシン 分割
    ● スマホ版とタブレット版 完全な統合
    27
    

    View Slide

28. 28
    リプレース
    

    View Slide

29. つまり
    29
    

    View Slide

30. View Slide

31. ...と思っていた ですが
    31
    

    View Slide

32. スマホ版
    乗務員アプリ
    32
    

    View Slide

33. こ タクシー配車アプリ戦国時代...?
    33
    

    View Slide

34. タクシー車内 スペース枯渇問題が発生
    34
    

    View Slide

35. スマホ版 乗務員端末にニーズが！！
    35
    

    View Slide

36. スマホ版
    乗務員アプリ
    36
    

    View Slide

37. がしかし
    延命治療中 スマホ向け乗務員アプリ 機
    能追加がなかなか大変
    37
    

    View Slide

38. さらに
    追い討ちをかけるように
    38
    

    View Slide

39. 39
    初乗り距離短縮運賃
    相乗り運賃
    乗合タクシー
    相互レイティング
    乗り放題タクシー
    ダイナミック
    プライシング
    https://jidounten-lab.com/u_6087
    

    View Slide

40. スマホ版
    乗務員アプリ
    40
    

    View Slide

41. スマホ版
    乗務員アプリ
    41
    

    View Slide

42. スマホ版
    乗務員アプリ
    42
    

    View Slide

43. スマホ版
    乗務員アプリ
    43
    

    View Slide

44. Current architecture
    2
    44
    

    View Slide

45. Tablet
    45
    

    View Slide

46. ざっくりクラス図
    46
    

    View Slide

47. ざっくりクラス図
    47
    

    View Slide

48. Flux
    View
    Action
    Creator
    Dispatcher
    Store
    48
    

    View Slide

49. 外部から イベント
    49
    

    View Slide

50. 外部から イベント
    Action
    Creator
    メーター 料金が
    変わったよ
    50
    

    View Slide

51. 状態 制御
    51
    

    View Slide

52. 状態 制御
    Dispatcher
    App
    State
    Activity
    状態が
    変わったぞぉ
    52
    

    View Slide

53. 状態 制御
    Global Actionで
    ダイアログ出すぞ
    53
    Activity
    Dispatcher
    App
    State
    

    View Slide

54. 通知 制御
    54
    

    View Slide

55. 通知 制御
    Action
    Creator
    55
    

    View Slide

56. アーキテクチャ図
    56
    

    View Slide

57. Modules
    57
    

    View Slide

58. Code sample
    実車 支払
    58
    

    View Slide

59. AppState
    Code sample
    実車を表すState
    59
    

    View Slide

60. AppState
    Code sample
    支払を表すState
    60
    

    View Slide

61. https://github.com/tomoya0x00/statek#statek 61
    

    View Slide

62. MainActivity
    Code sample
    支払画面を表示
    62
    

    View Slide

63. Code sample
    PaymentFragment
    StoreをBind
    ActionCreatorを初期化
    63
    

    View Slide

64. PaymentActionCreator
    Code sample
    ActionCreator
    料金 変更通知 Actionを発行
    64
    

    View Slide

65. PaymentActionCreator
    Code sample
    ActionCreator
    Dispatcherを呼ぶ
    65
    

    View Slide

66. Dispatcher
    Code sample
    66
    

    View Slide

67. Dispatcher
    Code sample
    67
    

    View Slide

68. Dispatcher
    Code sample
    指定 クラス み流す
    68
    

    View Slide

69. PaymentStore
    Code sample
    指定 アクションを受け取る
    69
    

    View Slide

70. PaymentStore
    Code sample
    LiveDataで公開
    70
    

    View Slide

71. Code sample
    支払
    71
    

    View Slide

72. アーキテクチャを刷新してよかったこと
    ● 可読性が向上し、実装で悩むことも減った
    ● マルチモジュールいい感じ
    ● Fluxナウい(ホントか？)
    72
    

    View Slide

73. ちょっときつかったこと
    ● View データ取得タイミング
    ● Flux構造がView毎に別になっている
    ● ActionCreator、Store持たせる情報 精査
    73
    

    View Slide

74. Phone
    74
    

    View Slide

75. ざっくりクラス図
    75
    

    View Slide

76. 神
    76
    

    View Slide

77. 神
    77
    

    View Slide

78. 状態 制御
    78
    

    View Slide

79. 状態 制御
    79
    

    View Slide

80. 状態 制御
    80
    

    View Slide

81. 状態 制御
    81
    

    View Slide

82. 状態 制御
    BusinessState
    Home
    82
    

    View Slide

83. 状態 制御
    83
    

    View Slide

84. 状態 制御
    次 状態を細かい粒度で考慮し処
    理を行う必要がある
    84
    

    View Slide

85. Code sample
    実車 支払
    85
    

    View Slide

86. TaxiBusiness
    Code sample
    86
    

    View Slide

87. BusinessState
    Code sample
    87
    

    View Slide

88. Home
    Code sample
    88
    

    View Slide

89. HomeActivity
    Code sample
    89
    

    View Slide

90. ちょっとした修正でも
    瀕死 状態に
    ムチを打っている感覚になる
    90
    

    View Slide

91. そして
    91
    

    View Slide

92. スマホとタブレットで
    アプリ内部 振る舞いが全然違う
    92
    

    View Slide

93. 実態として、
    １つ 機能が別々に実装される
    93
    

    View Slide

94. Challenges for REVIVAL
    3
    94
    

    View Slide

95. 課題
    1. 同じ機能を別々に実装
    2. 状態間 忖度
    3. 寿命が短いFlux構造
    95
    

    View Slide

96. 1. 同じ機能を別々に実装
    96
    

    View Slide

97. 1. 同じ機能を別々に実装
    ➔ 単純に開発工数2倍、着手時期も違う
    97
    

    View Slide

98. 1. 同じ機能を別々に実装
    ➔ 単純に開発工数2倍、着手時期も違う
    ➔ 属人化が冗長し、メンテが大変になっていく
    98
    

    View Slide

99. 2. 状態間 忖度
    99
    

    View Slide

100. 2. 状態間 忖度
     ➔ 次 状態を予測した処理を持たざる得ない
     100
     

     View Slide

101. 2. 状態間 忖度
     ➔ 次 状態を予測した処理を持たざる得ない
     ➔ １つ 状態が肥大化していく
     101
     

     View Slide

102. 3. 寿命が短いFlux構造
     102
     

     View Slide

103. 3. 寿命が短いFlux構造
     ➔ View毎にActionCreator、Storeが存在
     103
     

     View Slide

104. View Slide

105. 1. 同じ機能を別々に実装
     2. 状態間 忖度
     3. 寿命が短いFlux構造
     課題
     105
     

     View Slide

106. 解決方法
     ● PhoneへFlux適用
     Application層までを統合しUI層をApp毎に実装
     106
     

     View Slide

107. Application
     presentation
     Phone Tablet
     107
     View
     Action
     Creator
     Store
     View
     Action
     Creator
     Domain
     Store
     Dispatcher
     Repository
     StateMachine
     Hoge
     

     View Slide

108. 1. 同じ機能を別々に実装
     2. 状態間 忖度
     3. 寿命が短いFlux構造
     課題
     108
     

     View Slide

109. 1. 同じ機能を別々に実装
     2. 状態間 忖度
     3. 寿命が短いFlux構造
     課題
     StateMachine 切り出し
     109
     

     View Slide

110. 1. 同じ機能を別々に実装
     2. 状態間 忖度
     3. 寿命が短いFlux構造
     課題
     110
     

     View Slide

111. 1. 同じ機能を別々に実装
     2. 状態間 忖度
     3. 寿命が短いFlux構造
     課題
     画面単位から営業単位に伸 す
     111
     

     View Slide

112. 解決方法
     ● 営業状態毎にStateを分離
     タクシー自体 営業サイクルと
     利用者毎に変わる営業サイクルを分離する
     112
     

     View Slide

113. 113
     状態 分離
     

     View Slide

114. 114
     状態 分離
     移譲
     

     View Slide

115. 115
     状態 分離
     AppState BusinessState
     ＞
     

     View Slide

116. Navigation
     116
     ログイン
     画面
     空車
     画面
     Router
     流し乗車
     事前確定
     アプリ配車
     アプリ配車
     hoge配車
     

     View Slide

117. Navigation
     117
     ログイン
     画面
     空車
     画面
     Router
     流し乗車
     事前確定
     アプリ配車
     アプリ配車
     hoge配車
     

     View Slide

118. 解決策まとめ
     ● PhoneへFlux適用
     ● 営業状態毎にStateを分離
     118
     

     View Slide

119. New architecture
     4
     119
     

     View Slide

120. ざっくりクラス図
     120
     

     View Slide

121. ざっくりクラス図
     121
     

     View Slide

122. ざっくりクラス図
     122
     BusinessState
     ActionCreator
     

     View Slide

123. アーキテクチャ図
     123
     

     View Slide

124. アーキテクチャ図
     124
     

     View Slide

125. モジュール構成
     125
     

     View Slide

126. モジュール構成
     126
     

     View Slide

127. Navigation
     127
     

     View Slide

128. Navigation
     128
     

     View Slide

129. Navigation
     129
     

     View Slide

130. Code sample
     130
     

     View Slide

131. Code sample
     配車依頼
     131
     事前確定
     支払
     

     View Slide

132. RouterBusinessFragment
     Code sample
     132
     

     View Slide

133. DeliverMapFragment...etc
     Code sample
     133
     

     View Slide

134. PreReportedFareActionCreator
     Code sample
     134
     

     View Slide

135. PreReportedFareActionCreator
     Code sample
     135
     

     View Slide

136. PreReportedFareBusiness
     Code sample
     136
     

     View Slide

137. // TODO:
     137
     

     View Slide

138. これからやっていきたい事
     ● UI/UX 調整
     ● AppState Scopeを絞りたい
     ●
     138
     

     View Slide

139. 139
     Thanks
     

     View Slide