Android Reject Conference 2019/2で発表した資料です。 https://connpass.com/event/112296/
AACという武器を手に1,400行のFragment2体と戦った話Android Reject Conference 2019/22019/02/13 (Wed.)@syarihu
View Slide
Taichi Sato (@syarihu)● Money Forward, Inc.○ Android Engineer● TechBooster
戦うことになった経緯
戦うことになった経緯● 手入力画面のデザイン改善をすることになった
Before
After
比較
入出金履歴詳細の電卓デザイン
戦うことになった経緯● 手入力画面のデザイン改善をすることになった○ 電卓のデザインが変わった
戦うことになった経緯● 手入力画面のデザイン改善をすることになった○ 電卓のデザインが変わった● 入出金履歴詳細画面も新しいデザインに合わせる必要があった
戦うことになった経緯● 手入力画面のデザイン改善をすることになった○ 電卓のデザインが変わった● 入出金履歴詳細画面も新しいデザインに合わせる必要があったこれがやばい
戦うことになった経緯※よく見たら片方は1,300行だったのでタイトルと微妙に違うんですがゆるしてくださいTransactionDetailFragment.javaTransactionEditFragment.java
戦うことになった経緯ManualInputFragment.java
戦うことになった経緯● 2つのFragmentが互いに依存してる● どっちのFragmentも色んなところに依存してる● ちょっと修正しようとするとバグる● とにかくやばい
戦いの準備
戦いの準備● 手入力改善をやることになったのが６月ごろ○ この時期は１人で開発していたので全てを把握しやすい状況だった○ 新卒も入ってくるしメンバーが増えると今のままだとやばい
アプリ全体の設計を整えよう！
設計を整える
以前の設計※この時点での設計をざっくりまとめただけで、色々な作り方で作られていたので 全部これ通りに整っていたわけではない
設計を整える● 人によって作りがバラバラで全体的に整ってなかったけどMVVMっぽいのに寄せていくのが良さそうだった● テストコードが書きにくいのでDIは入れたい
設計を整える● あんまり設計を固めすぎても全てを移行できるとは思えない○ 移行を推進できる人がいなくなった途端にそれが負債になる● 既存の作りにできるだけ合う形できれいにしていきたい
新しい設計
設計を整える● MVVM○ AAC■ ViewModel, LiveData○ DataBinding● DI○ Dagger2
設計を整える● 新しい設計をドキュメントにまとめてプロジェクトに関わる人に説明● 後の入出金履歴詳細画面も見据えて手入力画面の改善から新しい設計を適用することにした
入出金履歴詳細画面の仕様を整理する
仕様を整理する - 入出金履歴詳細画面（自動連携 - 出金）
仕様を整理する - 入出金履歴詳細画面（自動連携 - 入金）
仕様を整理する - 入出金履歴詳細画面（手入力）
仕様を整理する - レシート項目編集画面
仕様を整理する - ジョルテ連携
やること1. 入出金履歴詳細画面のリファクタ2. レシート項目編集画面のリファクタ3. ジョルテ対応4. TransactionDetailFragment.javaとTransactionEditFragment.javaを消し飛ばす
入出金履歴詳細画面のリファクタ
やること● レイアウトを作り直す● 表示する項目をLiveDataで宣言● ViewModelにロジックを実装● Viewに反映する○ レイアウトにViewModelをbind○ LiveDataをobserveする
やった結果
やった結果 - 手入力履歴※実際の発表ではGIF動画で再生しました
やった結果 - 自動連携履歴※実際の発表ではGIF動画で再生しました
やった結果● 表示する項目多すぎ○ 出し分けめっちゃ多い○ 振替とかが特にやばい● 色々なところからデータとってきて加工しないといけないからどうしても行数が増える
やった結果● 結果約1,200行のViewModelになってしまった● ただ設計変えたおかげでコードの見通しは良くなった● Viewとロジックが分離できた● 仕様がだいぶ把握できた
やった結果● エラーハンドリングをちゃんと実装したり細かいところも直せた
やった結果● アプリの設計を少し見直そうかとも思ったけどこの画面の仕様が複雑すぎるので一旦このままにすることにした
レシート項目編集画面のリファクタ
やること● レシート項目編集画面を新しく作る○ 振替などの出し分けが無い○ 入金 / 出金先が財布だけ○ 保存を押したらレシート読み取り結果画面に反映
ジョルテ連携対応
やること● レシート項目編集画面に送信機能がついた感じなので送信ボタンを押したときの挙動だけ変えて作る● あとはジョルテ連携用の実装をごにょごにょする
TransactionDetailFragment.javaとTransactionEditFragment.javaを消し飛ばす
やること● ここまでの対応で２つのFragmentへの依存が完全に消えたので関連ファイルをすべて消し飛ばす
戦いの終わり
戦いの終わり● ４ヶ月くらいの長い戦いだった● 当初の目的だった電卓のデザインの統一はもちろんできてよかった● 仕様がだいぶ整理できたのは良かった
戦いの終わり● リファクタしてコードも増えたけど5,337行増えて7,312行減ったので1,975行は減らせた● 設計を変えたおかげでViewとロジックを分離できた
今後の課題● 改めて入出金履歴詳細画面の仕様自体が複雑すぎることが分かったのでこの画面自体の見直しが必要● 設計ももう少し見直したほうが良いかも
ありがとうございました
syarihu
cybozuinsideout
kgsi
upura
tkhresk
masasuzu
nagix
k1low
oldbigbuddha
hokaccha
i35_267
kojira
sat
morganepeng
akosma
carmenintech
notwaldorf
dotmariusz
jennybc
quramy
colly
soudai
chrisshort
tanoku