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

1.

マネーフォワードMEにおける Jetpackの活用事例 2019/08/19 (Mon.) Bonﬁre 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.


19.


20.

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

21.

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

22.


23.


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.

ありがとうございました

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

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

Want more?

Transcript