MEet Flutter Add-to-App: Unlocking Our Productivity

イベント名：Money Forward Tech Day 2024
登壇日：2024年9月20日
登壇者：Ichiro Hirata
説明：Flutter Add-to-App（以下A2A）は、既存のネイティブアプリにFlutterを部分的に統合する機能です。2023年2月、マネーフォワード MEは新サービスのリリースに伴い、A2Aを導入しました。1年以上にわたる開発の結果、iOSとAndroidの実装の共通化により開発速度が向上し、アプリの仕様策定やデザインなどの業務が大幅に削減され、全体的な開発生産性が飛躍的に向上しました。また、新しい技術を取り入れることで生じた課題には、GitHub Actionsなどのツールを活用した自動化プロセスの導入により迅速に対応しました。A2Aの導入はさらに、iOSおよびAndroidエンジニア間、他チーム、他部門とのコミュニケーションを促進し、プロジェクトチーム全体の協力体制を強化することにも貢献しました。今回のトークでは、A2A導入による開発環境の改善点や具体的な自動化プロセスについて詳しく説明します。
イベントURL：https://techday.moneyforward-dev.jp/2024/

Transcript

1. MEet Flutter Add-to-app Unlocking Our Productivity
2. • iOS Engineer@Money Forward ME 
 ◦ iOSエンジニア@マネーフォワード ME 
 • Joined Money Forward in 2019
 ◦ 2019年入社
 
 Ichiro Hirata 平田 一郎
4. Flutterとは What is Flutter?
5. Flutterとは？ What is Flutter? Flutter

6. Flutterとは？ What is Flutter? Swift
 Kotlin

7. Flutterとは？ What is Flutter? Swift
 Kotlin
 Flutter
 Module
 Add-to-app
8. 導入の経緯 Background
9. プロジェクトの課題 Project Issues Development Productivity
 
 Issues
10. プロジェクトの課題 Project Issues Development Test Design Planning Productivity,
 Communication,
 Motivation,
 Issues Assignment
 Efficiency,
 Communication
 
 
 Efficiency,
 Communication
 

11. Project A Project B Project C Planning プロジェクトの課題 Project Issues iOS Android
12. Design プロジェクトの課題 Project Issues Android iOS Designer Apple
 HIG Material
 Design Figma
13. iOS Android Design プロジェクトの課題 Project Issues Marketer Firebase
14. Development プロジェクトの課題 Project Issues iOS Android Objective-C
15. Test プロジェクトの課題 Project Issues Project A Project B Project C iOS Android QA
16. 課題解決手段としてのクロスプラットフォーム Cross platform as one of the solutions Development Test Design Planning Issues Productivity,
 Communication,
 Motivation,
 Assignment
 Efficiency,
 Communication
 
 
 Efficiency,
 Communication
 

17. Productivity,
 Communication,
 Motivation,
 課題解決手段としてのクロスプラットフォーム Cross platform as one of the solutions Development Test Design Planning Issues Assignment
 Efficiency,
 Communication
 
 
 Efficiency,
 Communication
 

18. Add-to-appによるスモールスタート Small Start with Add-to-app Project A Project B Project C
19. Add-to-appによるスモールスタート Small Start with Add-to-app Project A Project B Project C Add-to-app
20. 導入 Introduction
21. 技術検証 Technical Verification # Features
 - View
 - Business Logic
 - Storage
 - Native View, etc.
 # Development Tools
 - Hot Reload / Restart, etc.

22. 開発用テンプレート Templates for Development # Informative Templates
 Covers how to implement all classes for a single screen.
 Also helpful when reviewing pull requests.

23. OpenAPIの導入 Introduction of OpenAPI
24. オンボーディング Onboarding # Onboarding
 - Basic knowledge of Flutter / Dart
 - Usage of templates, OpenAPI
 - Small task assignments, etc.

25. Automation Android iOS 自動化 Sub module Sub module Flutter
26. Automation Android iOS 自動化 Sub module Sub module Pull Request GitHub
 Actions Flutter
27. Automation 自動化 Updated
 OpenAPI Client
 Pull Request
 Flutter OpenAPI Updated YAML
 Pull Request
 GitHub
 Actions
28. デバッグツール Debugging Tool # Various Features
 - Direct Screen Transition
 - Multiple Server Environment Connections
 - API Log Viewer, etc.

29. デバッグツール Debugging Tool Android
 Studio
 Independent
 Flutter App
 Build
 for
 Debugging

30. その他工夫した点 Small Tips
31. Add-to-appの使い所 Add-to-app Scope One Screen = One Flutter

32. Flutter Add-to-app iOS Add-to-app用のAPIクライアント API Client for Add-to-app Session Synchronization Native API Client Flutter API Client
33. デザインの統一 Unified Design Android iOS All Flutter Screens Based on Material Design

34. デザインの統一 Unified Design
35. 生成AIの活用 Leveraging Generative AI Pull Request Review Generated Test Code
36. 導入した結果 Results
37. 導入の結果 Results Development Test Design Planning Issues Productivity,
 Communication,
 Motivation,
 Assignment
 Efficiency,
 Communication
 
 
 Efficiency,
 Communication
 

38. 導入の結果 Results Development Test Design Planning Productivity,
 Communication,
 Motivation,
 Efficiency,
 Communication
 
 
 Assignment
 Efficiency,
 Communication
 
 Issues 2x Productivity
39. 導入の結果 Results Development Productivity,
 Communication,
 Motivation,
 2x Productivity 2x(?) Communication
40. 導入の結果 Results Project A Project B Project C Add-to-app Add-to-app Add-to-app
41. 導入の結果 Results
42. 導入の結果 Results Successful Onboarding

43. 今後の展望 Future Prospects
44. いつAdd-to-appをやめるか？ When should we stop using Add-to-app? Now Near Future Something happened… Ideal Future
45. Small Start
 with
 Add-to-app Successful Onboarding Unified
 Design
 One Screen
 One Flutter
 Independent
 Debugging Tool
 Improved Productivity 
 and Communication
 Templates
 Takeaways
 Automation
 * 記載されている会社名および商品・製品・サービス名（ロゴマーク等を含む）は、各社の商標または各権利者の登録商標です。 * Icons by Icons8