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

入社から約2年、 Money ForwardのAndroidエンジニアとしての活動を振り返る / Looking back of two years as an Android Engineer of Money Forward

syarihu
August 23, 2019

入社から約2年、 Money ForwardのAndroidエンジニアとしての活動を振り返る / Looking back of two years as an Android Engineer of Money Forward

Money Forward Developers' Stories で発表した資料です。
https://moneyforward.connpass.com/event/140296/

syarihu

August 23, 2019
Tweet

More Decks by syarihu

Other Decks in Technology

Transcript

  1. 入社から約2年、
    Money ForwardのAndroidエンジニア
    としての活動を振り返る
    Money Forward Developers’ Stories 2019
    2019/08/23 (Fri.)
    @syarihu

    View full-size slide

  2. Taichi Sato (@syarihu)
    ● PFM本部 サービス開発部
    ○ Androidエンジニア
    ● 入社歴1年10ヶ月
    ● Androidアプリ開発歴9年目

    View full-size slide

  3. syarihuが普段やっていること

    View full-size slide

  4. Money Forward MEのAndroidアプリ開発
    ● 機能開発
    ● 技術的負債の改善
    ● 開発環境整備
    ○ 開発・運用フロー
    ○ アプリ設計
    ○ CI / CD
    ● 新卒育成
    ○ 困ったときにフォロー
    する
    ○ 厚めのコードレビュー

    View full-size slide

  5. 全社的にやっていること
    ● Androidに関する技術・知
    見の共有
    ○ SlackのAndroidチャン
    ネルへの共有
    ● Android周りの全社の
    方針の整備
    ● Androidエンジニア中途採

    ● 他プロダクトのお手伝い
    ○ コードレビュー
    ○ 困ってそうなときにアド
    バイスしたり

    View full-size slide

  6. 2017年10月 〜 2018年01月

    View full-size slide

  7. 主にやっていたこと
    ● MfCoreさようなら大作戦
    ● ホームリニューアル
    ○ 入出金履歴
    ○ MY通知

    View full-size slide

  8. MfCoreさようなら大作戦

    View full-size slide

  9. ホームリニューアル

    View full-size slide

  10. ホームリニューアル
    ● ホームのレイアウト変更
    ○ MY通知、入出金履歴を全面に
    ● MY通知のデザイン変更
    ● ドロワーのレイアウト変更
    ● その他・お知らせの見直し

    View full-size slide

  11. ホームリニューアル
    ● 入出金履歴
    ● MY通知

    View full-size slide

  12. 入出金履歴
    Before

    View full-size slide

  13. 入出金履歴
    After

    View full-size slide

  14. MY通知
    Before

    View full-size slide

  15. MY通知
    After

    View full-size slide

  16. AndroidのSlackチャンネル

    View full-size slide

  17. AndroidのSlackチャンネル
    ● 以前は座談会というのをやっていたが無く
    なった
    ● 当時はAndroidエンジニア間の横のつながり
    があまり無かった

    View full-size slide

  18. AndroidのSlackチャンネル
    ● ただ復活させても良くないなと思いAndroid
    の技術・知見を共有するSlackチャンネルを
    作った
    ○ リリース情報、開発者ブログなどを自動投
    稿したり

    View full-size slide

  19. 2018年02月 〜 2018年05月

    View full-size slide

  20. 主にやっていたこと
    ● RxJava 2.0へのアップグレード
    ● パスコードロックの指紋認証対応
    ● デバッグメニューの実装

    View full-size slide

  21. 主にやっていたこと
    ● 開発フロー整備
    ● 新卒受け入れ準備

    View full-size slide

  22. パスコードロックの指紋認証

    View full-size slide

  23. パスコードロックの指紋認証
    ● 指紋認証は個人的にどうしても入れた
    かった
    ● レビューなどでも要望があり需要が高そ
    うだった

    View full-size slide

  24. パスコード
    Before

    View full-size slide

  25. パスコード
    After

    View full-size slide

  26. パスコードロックの指紋認証
    ● パスコードロック全体のデザインも刷新
    し、利便性が向上した

    View full-size slide

  27. マネーフォワードAndroid版の指紋認証デザインプロセス|池内健一| note
    https://note.mu/kenichiikeuchi/n/nc64e5c06142c

    View full-size slide

  28. デバッグメニューの実装

    View full-size slide

  29. デバッグメニューの実装
    ● 2017年の年末に開催されたAndroid勉
    強会で紹介されたdebug-alterという
    OSSの発表を見て、とても良さそうだっ

    View full-size slide

  30. デバッグメニューの実装
    ● RxJava 2.x対応が終わって余裕ができ
    てきたので実装してみることにした

    View full-size slide

  31. Androidアプリのデバッグメニューを作ろう | Money Forward Engineers' Blog
    https://moneyforward.com/engineers_blog/2018/04/11/android-debug-menu/

    View full-size slide

  32. デバッグメニューの実装
    ● いまはHyperionAndroidという
    デバッグツールと併用して使っているが
    とてもよい

    View full-size slide

  33. デバッグメニューの実装
    ● ただdebug-alterは、MEに後から入れ
    たライブラリと相性が悪く今は動いてな

    View full-size slide

  34. デバッグメニューの実装
    ● debug-alterの開発者は友人なので
    ときどき相談しつつdebug-alterに
    自分でPR出して直しているところ

    View full-size slide

  35. 新卒受け入れ準備

    View full-size slide

  36. 新卒受け入れ準備
    ● 4月に新卒が入社し、MEにも新卒エン
    ジニアが入ってくることになった
    ● ドキュメントなどがほぼ無かったため、こ
    れを機に整えることにした

    View full-size slide

  37. 新卒受け入れ準備
    ● 開発ツールの導入手順からAndroidア
    プリ開発における基礎、応用、実践の
    資料を作成しつつ、新卒に基礎から教
    えた

    View full-size slide

  38. 新卒受け入れ準備
    ● Androidの基礎を教える前に作った
    Androidの歴史の話はエンジニアとか
    関係なく社内の色々な人に見てもらえ
    たので良かった

    View full-size slide

  39. 新卒受け入れ準備
    ● 開発フローやリリースフローも明文化さ
    れていなかったため、なんとなく運用し
    ていたものを整理して明文化した

    View full-size slide

  40. 2018年06月 〜 2018年12月

    View full-size slide

  41. 主にやっていたこと(環境整備)
    ● アプリ設計見直し
    ● Dagger2導入
    ● テストコードの環境整備
    ● CI環境整備

    View full-size slide

  42. 主にやっていたこと(環境整備)
    ● 各環境のアプリをDeployGateに自動デ
    プロイ
    ● SonarQubeで静的解析

    View full-size slide

  43. 主にやっていたこと(リファクタ)
    ● 手入力改善(UI刷新・リファクタ)
    ● 2つの大きなクラスの削除
    ● 入出金履歴リファクタ
    ● 家計簿詳細リファクタ

    View full-size slide

  44. 主にやっていたこと(リファクタ)
    ● レシート項目編集画面のリファクタ
    ● カテゴリ一括変更

    View full-size slide

  45. アプリ設計見直し

    View full-size slide

  46. アプリ設計見直し
    ● 6月はまだ新卒エンジニアはIssueを少
    しずつやって仕事に慣れてもらっている
    ころだった

    View full-size slide

  47. アプリ設計見直し
    ● 新卒が本格的に開発に参加する前に
    設計を整えておく必要があるだろうと思
    い、設計を整えることにした

    View full-size slide

  48. 手入力改善

    View full-size slide

  49. 手入力改善
    ● 手入力画面のUIを大幅に刷新すること
    になった

    View full-size slide

  50. 手入力改善
    ● 新しい設計を適用する良い機会なの
    で、新しい設計のための準備をしてから
    リファクタを行った

    View full-size slide

  51. 手入力
    Before

    View full-size slide

  52. 手入力
    After

    View full-size slide

  53. 手入力改善
    ● 新しい設計により、表示処理とビジネス
    ロジックが自然にきれいに分かれるよう
    になった

    View full-size slide

  54. 手入力改善
    ● テストコードも書きやすくなったのでこの
    タイミングでやっておいて
    正解だった

    View full-size slide

  55. 2つの大きなクラスの削除

    View full-size slide

  56. 2つの大きなクラスの削除
    ● 手入力画面のUI刷新に伴い、電卓のデ
    ザインが変わった

    View full-size slide

  57. 2つの大きなクラスの削除
    ● 入出金履歴詳細画面にも電卓機能が
    あり、刷新した手入力画面の電卓のデ
    ザインに合わせる必要があった

    View full-size slide

  58. 2つの大きなクラスの削除
    ● 入出金詳細画面では次の2つのクラス
    があった
    ○ TransactionDetailFragment.java
    ○ TransactionEditFragment.java

    View full-size slide

  59. 2つの大きなクラスの削除
    ● この2つのクラスは互いに依存してお
    り、どちらも1,400行もあった
    ● そのため、全体的にリファクタすること
    にした

    View full-size slide

  60. 2つの大きなクラスの削除
    ● コードだけでなく仕様も複雑だったた
    め、コードから仕様を読み取るのが大
    変だった

    View full-size slide

  61. 2つの大きなクラスの削除
    ● この2つのクラスを完全に消し飛ばすた
    めに4ヶ月ほどかかったが、なんとか無
    事に終わった

    View full-size slide

  62. https://speakerdeck.com/syarihu/aactoiuwu-qi-woshou-ni1-400xing-falsefragment2ti-tozhan-tutahua

    View full-size slide

  63. カテゴリ一括変更

    View full-size slide

  64. カテゴリ一括変更
    ● いままでカテゴリを変更したい場合には
    入出金を1件ずつ変更する必要があり
    手間だった

    View full-size slide

  65. カテゴリ一括変更
    ● その課題を解決するため、家計簿詳細
    画面からカテゴリを一括で変更する機
    能を実装することになった

    View full-size slide

  66. カテゴリ
    一括変更

    View full-size slide

  67. カテゴリ一括変更
    ● 家計簿詳細画面はとても古い画面だっ
    たため、ただ一括変更機能を
    付け加えるのは難しい状態だった

    View full-size slide

  68. カテゴリ一括変更
    ● グラフ以外の部分は入出金履歴と同じ
    レイアウトのため共通化したほうが良い
    だろうと判断し、関連画面を順番にリ
    ファクタすることにした

    View full-size slide

  69. カテゴリ一括変更
    ● 入出金履歴のリファクタ
    ● 家計簿詳細画面のリファクタ
    ● 家計簿詳細画面にカテゴリ一括変更機
    能をつける

    View full-size slide

  70. 運用の見直し

    View full-size slide

  71. 運用の見直し(いままで)
    ● milestone
    ● GitHub Projects
    ○ Project1つでIssueを一括管理

    View full-size slide

  72. 運用の見直し(現在)
    ● GitHub Projects
    ○ リリースごとにプロジェクトを作成
    ○ テンプレでカードを自動で移動

    View full-size slide

  73. 運用の見直し(現在)
    ● レビューの状態やIssueの進捗状況が
    わかりやすくなった
    ● iOS側も同じ運用方法に巻き込めたの
    でプラットフォームでも統一された

    View full-size slide

  74. CI環境整備

    View full-size slide

  75. CI環境整備
    ● 新卒が入ってきて徐々に新卒が機能開
    発をするケースが増えてきた
    ○ 明らかにレビューの負担が増えてき

    View full-size slide

  76. CI環境整備
    ● いまでは当たり前の存在になっている
    CIだが、ここまでCIを回していなかった

    View full-size slide

  77. CI環境整備
    ● lintが警告してくれるようなことは自動で
    指摘させたいという思いからCI環境を整
    えることにした

    View full-size slide

  78. CI環境整備
    ● ktlintを新たに導入
    ● Dangerというツールを導入し、ktlintと
    android-lintの警告をGitHubの
    コメントで指摘させるようにした

    View full-size slide

  79. CI環境整備
    ● 人間が何度も指摘すると面倒になった
    りすることでもDangerが容赦なくコメント
    で指摘してくれるため、
    レビュワーの負担が減った

    View full-size slide

  80. DeployGateに自動デプロイ

    View full-size slide

  81. DeployGateに自動デプロイ
    ● Money Forward MEでは、Deploy Gate
    というテスト用のアプリ配布ツールを利
    用している

    View full-size slide

  82. DeployGateに自動デプロイ
    ● Androidエンジニア以外の場合は検証
    用にテスト環境向けのアプリを用意して
    ほしいと言われる場合があり、ビルド待
    ちが発生してしまう

    View full-size slide

  83. DeployGateに自動デプロイ
    ● PRをマージした際にアプリを
    DeployGateに自動でデプロイできるよ
    うにした

    View full-size slide

  84. DeployGateに自動デプロイ
    ● READMEにQRコードを載せておくこと
    で、読み取ってダウンロードすればすぐ
    に使えるようになった

    View full-size slide

  85. SonarQubeで静的解析

    View full-size slide

  86. SonarQubeで静的解析
    ● テストコードが少しずつ増えてきたのと、
    CIを導入したのもあってテストコードの
    カバレッジやコードの品質を見たい気持
    ちになった

    View full-size slide

  87. SonarQubeで静的解析
    ● 社内の別のプロジェクトでSonarQubeを
    使っていたため、それに載せてもらう形
    で導入してみた

    View full-size slide

  88. SonarQubeで静的解析
    ● カバレッジなどが視覚的に見えるように
    なってテストを書くモチベーションが上
    がった

    View full-size slide

  89. 2019年01月 〜 現在

    View full-size slide

  90. 主にやっていたこと
    ● 年額課金
    ● AndroidX対応
    ● PRへのpush時にDeployGateの
    Distribution URLをコメント

    View full-size slide

  91. 主にやっていたこと
    ● 自動リリース
    ● マルチモジュール化の準備
    ○ 未使用コードの一括削除
    ○ 未使用リソースの一括削除

    View full-size slide

  92. 年額課金

    View full-size slide

  93. 年額課金
    ● いままでは月額プランしかなかったが、
    2019年の3月に年額プランを
    リリース

    View full-size slide

  94. 年額課金
    ● 課金の実装はかなり古い実装がされて
    おり、複雑な実装になっていたためまず
    は新しい実装方法に置き換えるための
    リファクタを行った

    View full-size slide

  95. 年額課金
    ● 課金周りの知見はネットにあまり共有さ
    れておらず、Androidも大変だったが
    iOSも相当実装が大変そうだった

    View full-size slide

  96. 年額課金
    ● 年額課金でだいぶ知見も溜まってきた
    ため、課金周りの知見を共有する勉強
    会をしたいと思いSlackにつぶやいてみ

    View full-size slide

  97. 年額課金
    ● 面白そうという話になり、年額課金のリ
    リースが落ち着いてから勉強会を開催
    することになった

    View full-size slide

  98. https://billing-night.connpass.com/event/125510/

    View full-size slide

  99. https://speakerdeck.com/syarihu/androidfalseapurinei-ke-jin-woaacdeshi-zhuang-suru

    View full-size slide

  100. 年額課金
    ● 集まった人数は少なかったものの、コア
    な層が集まって濃い話がたくさんできた
    ので開催してよかった

    View full-size slide

  101. 年額課金
    ● 技術系の勉強会の開催も新オフィスで
    の開催実績が少なかったため知見が少
    なく非常に苦労した

    View full-size slide

  102. 年額課金
    ● 次に開催しようと思った人が同じ苦労を
    しないように、得た知見を社内ドキュメ
    ントにまとめたり、チェックリストを作った

    View full-size slide

  103. AndroidX対応

    View full-size slide

  104. AndroidX対応
    ● Androidでは、Android Frameworkの
    APIに下位互換性を保つために
    Support LibraryというGoogle公式のラ
    イブラリを利用していた

    View full-size slide

  105. AndroidX対応
    ● Support Libraryはv28で終了し、今後
    はAndroidXに移行する必要がある
    ● AndroidXのバージョンはv1.0.0から
    ● パッケージ名もandroidxになる

    View full-size slide

  106. AndroidX対応
    ● 年額課金のリリースが落ち着いてきた
    のでそろそろ対応しないといけないなと
    思い、やることにした

    View full-size slide

  107. AndroidX対応
    ● AndroidXへのマイグレーションツール
    が用意されているが、import文以外も
    パッケージフルでクラス参照されてしま
    う箇所がたくさんあった

    View full-size slide

  108. AndroidX対応
    ● ここでスルーすると見つけたときに都度
    修正する手間が発生してしまうため、手
    作業で全部直すことにした

    View full-size slide

  109. AndroidX対応
    ● 修正はかなり大変だったが、ほぼ
    import文だけの差分になったので
    ここで対応しておいてよかった

    View full-size slide

  110. https://speakerdeck.com/syarihu/androidxniyi-xing-surutameni

    View full-size slide

  111. PRへのpush時にDeployGateの
    DistributionURLをコメントする

    View full-size slide

  112. DistributionURLをコメントする
    ● DroidKaigi 2019の公式アプリでは、push
    時にビルドして生成されたアプリを
    DeployGateにアップロードし、
    Distribution URLをコメントしてくれる

    View full-size slide

  113. https://github.com/DroidKaigi/conference-app-2019/pull/437#issuecomment-453829985

    View full-size slide

  114. DistributionURLをコメントする
    ● 同じ機能が欲しいと思っていたが
    時間が取れずにできなかった
    ● ようやく落ち着いてできる状態になった
    のでやることにした

    View full-size slide

  115. 自動リリース

    View full-size slide

  116. 自動リリース
    ● アプリの署名をGoogle Play App
    Signingに移行したのに伴い、アップ
    ロードキーを使ってGoogle Playに
    自動リリースできるようにした

    View full-size slide

  117. 自動リリース
    1. エンコードしたアップロードキーを
    CircleCIの環境変数に入れておく
    2. releaseブランチのマージ時にrelease
    のワークフローを開始

    View full-size slide

  118. 自動リリース
    3. Google Playにリリースして良いかの確
    認をSlackに通知
    4. CircleCI上で承認

    View full-size slide

  119. 自動リリース
    5. 承認されたらリリースビルドを走らせる
    6. Google Playのベータトラックに自動リ
    リース

    View full-size slide

  120. 自動リリース
    7. 生成されたアプリを元にバージョン情報
    を取得し、GitHubにreleaseタグを打つ

    View full-size slide

  121. 自動リリース
    ● マージ後にそのままGoogle Playにリ
    リースすることも可能だが、意図しない
    リリースを防ぐために念のため承認制

    View full-size slide

  122. 自動リリース
    ● 同じ理由で製品版への直接のリリース
    はせず、必ずリリース権限を持つ人間
    の承認を経て製品版のリリースを行うこ
    ととした

    View full-size slide

  123. 自動リリース
    ● 全社的にGoogle Playのアカウント権限
    の整理を行ったりなどを先に行ってから
    リリースの自動化を行った

    View full-size slide

  124. 自動リリース
    ● リリースノートもgit管理下におき、配信
    時に一緒にリリースノートも
    入れるようにすることで差分がわかりや
    すくなった

    View full-size slide

  125. 自動リリース
    ● リリースタグもいつも手動で行っていた
    ため、リリースフローの手動作業をほぼ
    自動化できた

    View full-size slide

  126. マルチモジュール化の準備

    View full-size slide

  127. マルチモジュール化の準備
    ● 家計簿のマネーフォワードには、
    マネーフォワード ME以外に銀行向けの
    家計簿がある

    View full-size slide

  128. マルチモジュール化の準備
    ● 銀行向けの家計簿は同一リポジトリで
    ブランチ運用がされており、銀行ごとに
    仕様が違うなど非常に大変

    View full-size slide

  129. マルチモジュール化の準備
    ● コアな機能と各銀行向けにカスタマイズ
    された機能をモジュールという単位で分
    けてお互いに影響が無いように修正す
    ることにした

    View full-size slide

  130. マルチモジュール化の準備
    1. コードスタイルの統一・整理
    2. 不要なリソース・クラスを削除
    3. パッケージを整理
    4. 循環参照を無くす

    View full-size slide

  131. マルチモジュール化の準備
    1. コードスタイルの統一・整理
    2. 不要なリソース・クラスを削除
    3. パッケージを整理
    4. 循環参照を無くす
    イマココ

    View full-size slide

  132. マルチモジュール化の準備
    5. コアな機能をモジュールに切り出す
    6. 銀行向けのコアな機能をモジュールに
    切り出す

    View full-size slide

  133. マルチモジュール化の準備
    7. MEのブランチに入っている2つのアプリ
    の機能をモジュールに切り出す
    8. 各銀行向けの機能をモジュールに切り
    出す

    View full-size slide

  134. 未使用コードの削除

    View full-size slide

  135. 未使用コードの削除
    ● Intellijの機能を駆使して未使用
    メソッドやクラスなどを片っ端から削除し

    View full-size slide

  136. 未使用コードの削除
    ● 使っているように見えて実は互いに参
    照していただけなどのファイルがありか
    なり大変だったが、結構消せた

    View full-size slide

  137. 未使用リソースの削除

    View full-size slide

  138. 未使用リソースの削除
    ● gradle-unused-resources-remover-plu
    ginというGradleプラグインを使って未使
    用リソースを削除した

    View full-size slide

  139. https://moneyforward.com/engineers_blog/2019/07/19/unused-resources-remover/

    View full-size slide

  140. マルチモジュール化の今後

    View full-size slide

  141. マルチモジュール化の準備
    1. コードスタイルの統一・整理
    2. 不要なリソース・クラスを削除
    3. パッケージを整理
    4. 循環参照を無くす
    イマココ

    View full-size slide

  142. マルチモジュール化の今後
    ● まだマルチモジュール化をするところま
    で至っていないので、年内くらいには循
    環参照を無くすところくらいまでは進め
    たい…

    View full-size slide

  143. おまけ: Kotlin率

    View full-size slide

  144. まとめ
    ● 入社してからたくさんの機能開発や負
    債改善、開発環境整備などを行ってき

    View full-size slide

  145. まとめ
    ● 新しいメンバーが入ってきてもドキュメン
    トを見ればすぐに開発が始められるよう
    になった

    View full-size slide

  146. まとめ
    ● CIの整備によりアプリの動作がすぐに
    確認できるようになったり、設計・仕様
    のレビューに集中できるようになった

    View full-size slide

  147. まとめ
    ● 課題を1つずつ解決していき、改善を続
    けていけば開発環境は良くなっていく

    View full-size slide

  148. まとめ
    ● これからも良いサービスをスピード感を
    もって提供できるように開発環境改善
    や負債改善、機能開発などを頑張って
    いきたい

    View full-size slide

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

    View full-size slide