Kyash meetup #1

1. Kyash Androidで
新しい画面を作る時の
コードの書き順
Kyash meetup #1
@konifar

2. 設計自体の話もいいですが
とある設計の中で
他の人がどう書いているのか
気になりませんか？

3. 今日話すこと
• Kyash Androidアプリで新しい画面を開発する
時に、自分がどういう順番で何を考えながら
コードを書いているのか。
※ 現状こうやってるよ、という話で改善点もあります。Kyashでは常に変化を
楽しみながら開発しています。

4. 今日話さないこと
• MVVMの詳細な説明
• DataBindingの基本的な内容
• DI・Daggerの説明
• ユニットテストの書き方
• Jetpackなどを使った今後の展望

5. リアルカードを有効化する時
の画面を例に説明します。
※ 一部コードを変更しています

7. 1. 閉じるボタン
2. スクロールしたら影がつ
くToolbar
3. カード発行済みかどうか
APIで取得して、発行済み
だったら表示を変えるレ
イアウト
4. タップしたら遷移するボ
タンとリンク

8. ViewModel
UseCase
Repository
View
API / Preference

9. ViewModel
UseCase
Repository
View
API / Preference
Activity.kt
Fragment.kt
activity.xml
fragment.xml
databinding
ViewModel.kt
CheckKyashCardExistsUseCase.kt
KyashCardRepository.kt
KyashApi.kt (Retrofit service)

10. ViewModel
UseCase
Repository
View
API / Preference
Activity.kt
Fragment.kt
activity.xml
fragment.xml
databinding
ViewModel.kt
CheckKyashCardExistsUseCase.kt
KyashCardRepository.kt
KyashApi.kt (Retrofit service)
データ取ってきて レイアウトに表示

11. データ取得とレイアウト表示
• どちらを先に実装するかは、APIとデザインの
どちらが先にできているかによる。
• APIが先にできていればデータ取得部分、デザ
インが先にあればレイアウトから作る。
• どちらもできていなかった場合はレイアウトか
ら雑に作っておく（Kyashではあまりない）

12. データ取得部分の実装順
• クラス依存のないところから作る。APIのクラ
スやメソッドがないとRepositoryを実装でき
ない（TDDでやる場合は別ですが）
• API => Repository => UseCase の順番。

13. KyashApi.kt
• Retrofitのインターフェースにリクエスト用のメソッドを追加。
• レスポンスやパラメータで新しいEntityが必要ならこのタイミ
ングで作っておく。

14. KyashCardRepository.kt
• nonceを取得して、それを使って別のAPIを叩く。
RxのflatMapを使ってAPIの直列化。

15. CheckKyashCardExistsUseCase.kt
• UseCaseは、Repositoryのメソッドの結果をビジネスロジックに沿った形
（今回だとBoolean）に加工する。
Rxだと加工しやすいので返り値はSingleやCompletableにしている。

16. ＿人人人人人人人人人＿
＞ ここで初ビルド ＜
￣^Y^Y^Y^Y^Y^Y^￣

17. 初めてのビルド
• ビルドが遅いので、データ取得部分はガッと
一気に書いてしまうことが多い。
• この例だとUseCaseにロジックが入っている
のでユニットテストもこのタイミングで書く。

18. レイアウト表示部分の実装順
• クラス依存のないところから作る。
• ViewModel => xml => Fragment => Activity

19. ViewModelの捉え方
• Viewの表示要素をプロパティに持つ。
• Viewからのアクション（ライフサイクルや
タップなど）をメソッドで実装する。
• どんなプロパティとアクションが必要かを頭
の中で整理しておく。

20. 1. カード発行済みかどうかチェック
中のロード中表示のVisibility
2. 発行済みだった時のViewの
Visibility
3. 未発行だった時のViewのVisibility
表示要素となるプロパティ

21. ViewModel.kt - プロパティ
• コンストラクタには、カード発行済みかどうかをチェックするUseCaseと画面
遷移のためのNavigatorクラスをDaggerでInject。
• Viewの表示に必要なVisibilityのIntのプロパティを書く。この例ではVisibilityだ
けだが、表示するテキストのStringなどもViewModelに書いている。

22. 1. onResumeでカード発行してい
るかどうかのチェック
2. タップしたら画面遷移
アクション

23. ViewModel.kt - onResume()
• ロードした結果によってプロパティを変更する。このプロパティをあとでdatabindingでxmlにバインドするぞーという気持ちで書く。
• ちなみに subscribeOnとobserveOnをここで両方やるのはあまりよくないと思っている。

24. ＿人人人人人人人人人人人＿
＞ ここでテストを書く ＜
￣^Y^Y^Y^Y^Y^Y^Y^￣

25. データ取得と表示のテスト
• UseCaseをモックして、メソッドが呼ばれて
いるかをVerifyする。
• メソッドの返り値の結果（Singleのsuccessや
error）によって、プロパティの値が適切に変
更されているかをテストする。

26. ViewModel.kt - 閉じるボタン
• DataBindingのonClickでバインドするために、引数にはViewを渡す。
• Navigatorは現在のActivityの参照を持っていて、finishActivity() を呼ぶと
Activityが閉じる（Navigatorをひとつ作るやり方がいいかについては検討
の余地ありです）

27. • すでに画面遷移先がある場合にはnavigatorのメソッドを呼ぶようにする。
• まだできていない場合はTODOコメントだけ書いておく。
ViewModel.kt - ボタンとリンク

28. ＿人人人人人人人人人人人＿
＞ ここでテストを書く ＜
￣^Y^Y^Y^Y^Y^Y^Y^￣

29. 画面遷移のテスト
• Navigatorをモックして、適切なメソッドと引
数が呼ばれているかをVerifyすることで画面遷
移のテストを書く。

30. fragment.xml
• dataにViewModelを宣言。
• ここで必要になるので、ViewModelの方を先に書くようにしている。

31. fragment.xml - Toolbar
• Toolbar はstyleをセットするだけで影の有無、戻るボタンのアイコンなどを変
えられるようにしている。
• navigationOnClickListenerにViewModelのクリックイベントをセット。
• shadowAnimationScrollViewIdはお手製のBindingAdapterで、ScrollViewのid
をセットするとスクロールすると影がつく動きをつけられる。

32. ToolbarExt.kt
• 引数で渡されたレイアウトIDをもとにScrollViewを探して、スクロールしたらToolbar
のelevationを変えるようにしている。これに限らず、lottieのアニメーションなど
Viewの役割で共通化できそうなものは結構DataBindingでやるようにしている。

33. fragment.xml - 表示切り替え

34. ＿人人人人人人人人人＿
＞ ここでビルド② ＜
￣^Y^Y^Y^Y^Y^Y^￣

35. ２回目のビルド
• DataBindingはたまにどこが悪いのか全くわか
らないエラーを出してきてつらい。
• xmlにバインドしたあとで一度ビルドが通るよ
うにしておくと安心する。

36. Fragment.kt

37. Activity.kt

38. ＿人人人人人人人人人人人＿
＞ ここで確認のビルド ＜
￣Y^Y^Y^Y^Y^Y^Y^Y￣

39. デバッグメニュー
• 任意の画面をメニューから
開けるようにしている。
• とりあえず作った画面を
すぐに開いて確認したい時に
便利。

40. 俺のコードの書き順まとめ

41. データ取得、レイアウト表示
のどちらから先に実装するか
はAPIとデザインどちらが
先行しているか次第

42. ビルドが遅いので
データ取得部分は一気に書く

43. 表示部分はViewModelの
プロパティとアクション
に整理して書く

44. DataBindingで
つなげてビルドしてみて
エラーが出ないことを祈る

45. コードの書き方は
人それぞれ

46. 設計されたアプリのコードを
実際にどう書いているのか
という紹介でした

47. ありがとうございました