Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

syarihu
August 19, 2019

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

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

syarihu

August 19, 2019
Tweet

More Decks by syarihu

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

  3. Android Jetpack

    View Slide

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

    View Slide

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

    View Slide

  6. AndroidX

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  14. AndroidXに移行する

    View Slide

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

    View Slide

  16. View Slide

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

    View Slide

  18. AndroidXに移行する

    View Slide

  19. AndroidXに移行する

    View Slide

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

    View Slide

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

    View Slide

  22. AndroidXに移行する

    View Slide

  23. AndroidXに移行する

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  29. View Slide

  30. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  36. View Slide

  37. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  44. ● Play Billing LibraryはBillingClientと呼ばれ
    る抽象クラスを介してPlay Billingと連携し、
    課金機能を提供する
    ● Play Billingの接続や接続解除などの処理
    を毎回実装するのは手間がかかる
    Jetpackを使った機能の例

    View Slide

  45. ● JetpackのLifecycle, ViewModel, LiveData
    を活用してBillingClientの処理を実装するこ
    とにした
    Jetpackを使った機能の例

    View Slide

  46. View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. View Slide

  57. View Slide

  58. ● JetpackのLifecycle, ViewModel, LiveData
    を活用することで、BillingViewModelを使え
    ばどの画面でも簡単に課金機能を
    実装できるようになった
    Jetpackを使った機能の例

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  64. View Slide

  65. View Slide

  66. View Slide

  67. View Slide

  68. View Slide

  69. View Slide

  70. View Slide

  71. ややこしい…

    View Slide

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

    View Slide

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

    View Slide

  74. View Slide

  75. View Slide

  76. View Slide

  77. View Slide

  78. View Slide

  79. View Slide

  80. View Slide

  81. View Slide

  82. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  89. おまけ: Kotlin率

    View Slide

  90. View Slide

  91. View Slide

  92. 宣伝

    View Slide

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

    View Slide

  94. ● 2019/08/23 (金) 13:00 ~ 17:30
    ● マネーフォワードのサービス開発に関する技術や
    手法だけでなく、スタンスや想いを共有する場です
    ● 私も入社してから今までのマネーフォワードの
    Androidエンジニアとしての活動をお話します
    Money Forward Developers’ Stories

    View Slide

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

    View Slide