マネーフォワードMEにおける Jetpackの活用事例

Da5a59469ce3ebb55619ce34f85f8c4f?s=47 syarihu
August 19, 2019

マネーフォワードMEにおける Jetpackの活用事例

Bonfire Android #5 で発表した資料です。
https://yj-meetup.connpass.com/event/136481/

Da5a59469ce3ebb55619ce34f85f8c4f?s=128

syarihu

August 19, 2019
Tweet

Transcript

  1. マネーフォワードMEにおける Jetpackの活用事例 2019/08/19 (Mon.) Bonfire Android #5 @syarihu

  2. Taichi Sato (@syarihu) • 株式会社マネーフォワード ◦ Androidエンジニア ◦ TechBooster

  3. Android Jetpack

  4. Android Jetpack • 高品質のAndroidアプリを開発者が簡単 に作成するための一連のライブラリ、ツー ルおよびガイダンス

  5. Android Jetpack • Jetpackの各コンポーネントは個別に導 入できる • 生産性を高めるためのKotlin言語機能が 利用されており、うまく組み合わせて使用 する

  6. AndroidX

  7. AndroidX • Jetpack内でのライブラリの開発、テス ト、パッケージ、バージョン管理、リリース に使用されているオープンソースプロジェ クト

  8. AndroidX • v28で終了したSupport Libraryを大幅に 改良している • Support Libraryのパッケージは androidx.* にマッピングされた

  9. https://developer.android.com/jetpack/androidx/migrate/artifact-mappings

  10. AndroidX • AndroidXのパッケージはすべて androidx.* パッケージで構成され、 Support Libraryと同様にPlatform APIか ら独立している

  11. AndroidX • すべてのAndroidバージョンで可能な限り 一貫して動作する機能を提供する • Support Libraryとは異なり、AndroidXの パッケージは個別に管理され、更新され る

  12. https://developer.android.com/jetpack/androidx/versions

  13. AndroidX • Support Libraryの新規の開発はすべて AndroidXライブラリ内で行われる • 元のSupport Libraryアーティファクトのメ ンテナンスや新しいJetpackコンポーネン トの導入も含まれる

  14. AndroidXに移行する

  15. AndroidXに移行する • Android Studioにあるマイグレーション ツールを利用して移行する ◦ Refactor -> Migrate to

    AndroidX
  16. None
  17. AndroidXに移行する • マイグレーションツールは機械的にパッ ケージをすべて置き換えてくれるが、いく つかの問題がある

  18. AndroidXに移行する

  19. AndroidXに移行する

  20. AndroidXに移行する パッケージフルで参照されてしまう

  21. AndroidXに移行する • このまま放置してしまうと、見つけたら都 度修正する手間が発生し、PR毎に関係 の無い差分ができてしまう ➢ すべて手動で修正することで、ほぼ import文の差分だけになった

  22. AndroidXに移行する

  23. AndroidXに移行する

  24. AndroidXに移行する うまく置き換わらない

  25. AndroidXに移行する android.support.design -> com.google.android.material android.support.v7.appcompat -> androidx.appcompat

  26. AndroidXに移行する • AndroidXが登場してから結構経っている ので、OSSも既にAndroidX移行が 完了しているケースが多い

  27. AndroidXに移行する • プロジェクト内で利用しているOSSをすべ てAndroidX対応のバージョンへ 上げたほうがよい

  28. Jetpackを利用した設計に 置き換える

  29. None
  30. None
  31. • 新しい設計を一気にすべて適用するのは難 しい • 必要なライブラリを導入できたら、UI刷新や リファクタ時などに画面単位で新しい設計を 適用していく Jetpackを利用した設計に置き換える

  32. Jetpackを利用した設計に置き換える • 2018年6月ごろに手入力画面のUIを全面的 に刷新することになった • 新しい設計を適用する良い機会だったの で、新しい設計でリファクタすることにした

  33. 1. Dagger2の導入 2. JetpackのViewModel, LiveDataを導入 3. 手入力画面を実装 Jetpackを利用した設計に置き換える

  34. • チームメンバーには新しい設計を適用した 画面のコードを見ながら説明 • 新卒のメンバーには、ある画面をリファクタ する際にペアプロすることで理解を深めても らった Jetpackを利用した設計に置き換える

  35. Jetpackを使った機能の例 手入力画面編

  36. None
  37. None
  38. • 電卓部分を別のFragmentにして、 計算ロジックはViewModelへ • 電卓のViewModelでは計算結果などを LiveDataに流す • ViewModelのスコープはActivityにする Jetpackを使った機能の例

  39. • 手入力画面の各項目の入力画面は別の Fragment ◦ 電卓のViewModelのスコープはActivity ◦ 電卓のViewModelのLiveDataをobserve するだけ Jetpackを使った機能の例

  40. https://sh.syarihu.net/2Z6DdoM

  41. Jetpackを使った機能の例 課金機能編

  42. • マネーフォワードMEでは3月に年額課金を リリースした Jetpackを使った機能の例

  43. • 月額課金はAIDLによって実装されており、 新しく実装するのであればPlay Billing Libraryを使って実装するべきだと判断し、リ ファクタすることにした Jetpackを使った機能の例

  44. • Play Billing LibraryはBillingClientと呼ばれ る抽象クラスを介してPlay Billingと連携し、 課金機能を提供する • Play Billingの接続や接続解除などの処理

    を毎回実装するのは手間がかかる Jetpackを使った機能の例
  45. • JetpackのLifecycle, ViewModel, LiveData を活用してBillingClientの処理を実装するこ とにした Jetpackを使った機能の例

  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. • JetpackのLifecycle, ViewModel, LiveData を活用することで、BillingViewModelを使え ばどの画面でも簡単に課金機能を 実装できるようになった Jetpackを使った機能の例

  59. https://sh.syarihu.net/2TGyGZb

  60. https://sh.syarihu.net/2HdmZUO

  61. Jetpackを使った機能の例 入出金履歴編

  62. • マネーフォワードMEでは2019年8月の リリースで入出金がボトムナビゲーションに 追加された Jetpackを使った機能の例

  63. • 入出金のボトムナビゲーションでは、 新着の入出金があった場合にバッジをつけ る必要がある • 入出金に何か変化が合った場合は履歴 一覧を更新する必要がある Jetpackを使った機能の例

  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. None
  71. ややこしい…

  72. • 入出金履歴画面に戻ってきたときに更新し てくれるように更新リクエストを送りたい… Jetpackを使った機能の例

  73. • RxJavaのBehaviorProcessorとLiveDataを 組み合わせて使うことにした Jetpackを使った機能の例

  74. None
  75. None
  76. None
  77. None
  78. None
  79. None
  80. None
  81. None
  82. None
  83. • これで別の画面にいても更新リクエストを行 うことができ、入出金履歴に戻ってきたタイ ミングでLiveDataをobserve することで履歴が更新される Jetpackを使った機能の例

  84. • ボトムナビゲーションのバッジも似たような 処理でリクエストを送り、LiveDataにリクエ ストが流れてくればバッジが 更新されるようになった Jetpackを使った機能の例

  85. Jetpackを利用して 1年経った今

  86. • マネーフォワードMEではViewModelや LiveData、Lifecycleを設計に適用してから 1年ほど経った Jetpackを利用して1年経った今

  87. • 新しい設計を入れてから、古い機能を刷新 して新しくする機会が多かった • 設計を適用するためにリファクタするといっ たことをしなくても、多くの部分に新しい設計 を適用することができている Jetpackを利用して1年経った今

  88. • Dagger2を使ったDIによりViewModelを injectすることで自然とViewとロジックが分 離し、テストも書きたいときに書けるように なった Jetpackを利用して1年経った今

  89. おまけ: Kotlin率

  90. None
  91. None
  92. 宣伝

  93. https://moneyforward.connpass.com/event/140296/

  94. • 2019/08/23 (金) 13:00 ~ 17:30 • マネーフォワードのサービス開発に関する技術や 手法だけでなく、スタンスや想いを共有する場です •

    私も入社してから今までのマネーフォワードの Androidエンジニアとしての活動をお話します Money Forward Developers’ Stories
  95. ありがとうございました