日本版とグローバル版のモバイルアプリ統合の開発の裏側と今後の展望

本スライドはTech Kitchen #29 Mobile App One Experienceで使用したスライドになります。
https://cookpad.connpass.com/event/337770/

Transcript

1. © 2024 Cookpad Inc. 2024/12/18 Tech Kitchen #29 Mobile App One Experience 日本版とグローバル版のモバイルアプリ統合 の開発の裏側と今後の展望 Yuki Miida (@miichan_ocha)
2. © 2024 Cookpad Inc. 2 • Yuki Miida ◦ 2018/06 クックパッド入社 ◦ X: @miichan_ocha • レシピ事業部 プロダクト開発グループ ◦ モバイルアプリ領域のテックリード ◦ iOSエンジニア 自己紹介
3. © 2024 Cookpad Inc. 3 • 日本版とグローバル版のモバイルアプリ統合 • モバイルアプリ統合の開発の裏側 • 現在の開発体制とこれからやっていきたいこと アジェンダ
4. 日本版とグローバル版のモバイルアプリ統合 © 2024 Cookpad Inc. 4
5. © 2024 Cookpad Inc. 5 統合前（図はiOSアプリ） Developer Account1: 日本 日本用のリポジトリ Developer Account2: Global Global用のリポジトリ (GHE) (GitHub)
6. © 2024 Cookpad Inc. 6 統合後（図はiOSアプリ） Developer Account1: 日本 Developer Account2: Global Global用のリポジトリ (GitHub)
7. © 2024 Cookpad Inc. 7 アプリの見た目・機能 統合前（iOSアプリ） 左: 旧日本アプリ 右: 旧Globalアプリ
8. © 2024 Cookpad Inc. 8 アプリの見た目・機能 統合後（iOSアプリ） 左: 日本リージョン 右: UKリージョン
9. © 2024 Cookpad Inc. 9 • グローバル版のiOS/Androidアプリを開発していたリポジトリから、 日本向けとGlobal向け両方のアプリを配信するようになった • 見た目・機能が大きく異なる2つのアプリのユーザー体験が統一され た → One Experience 日本版とグローバル版のモバイルアプリ統合
10. • 「日本とグローバルのクックパッドを統合しました」 ◦ https://techlife.cookpad.com/entry/2024/10/10/105832 © 2024 Cookpad Inc. 10 参考: 統合に関するより詳しい説明
11. モバイルアプリ統合の開発の裏側 © 2024 Cookpad Inc. 11
12. © 2024 Cookpad Inc. 12 • 選抜メンバーが Globalのリポジトリでオンボーディングを開始 • Global版アプリに「日本リージョン」を追加 ◦ 開発版だけで利用できる • 統合後に残る機能、残らない機能の棚卸し • Global版アプリ内の残らない機能の削除 プロジェクト序盤（2023/10〜）
13. © 2024 Cookpad Inc. 13 Global版アプリに「日本リージョン」を追加
14. © 2024 Cookpad Inc. 14 • Globalの開発リポジトリで日本向けのアプリ配信の準備 • 統合後に残る機能をGlobal版のアプリに実装 • Global版のアプリのパフォーマンス改善 • アルファテストを少数のユーザーさんに向けて開始 ◦ アルファ版のiOS アプリをTestFlightで配信 プロジェクト中盤（2024/01〜）
15. © 2024 Cookpad Inc. 15 • iOS ◦ Xcodeプロジェクト生成時に参照先の環境変数ファイルを切り替える • Android ◦ ビルドするアプリのApplicationIdやversionNameなどをFlavorベースで切り替 える Globalの開発リポジトリで日本向けのアプリ配信の準備
16. © 2024 Cookpad Inc. 16 • 日本の機能をそのまま移植するのではなく、体験をブラッシュアップし たものを実装した • 統合後の機能は原則Feature Togglesで制御され、Globalのユーザー には非公開な状態で開発を進めた ◦ Feature Togglesについてはこの後の発表で詳しく話します！ 統合後に残る機能をGlobal版のアプリに実装
17. © 2024 Cookpad Inc. 17 機能例: きろくタブ 統合後（現在のUI） 統合前（Global） 統合前（日本）
18. © 2024 Cookpad Inc. 18 アプリ側でページングのタイミングを 早めたり、体感速度を向上させたり した。 例: レシピ詳細画面のデータ取得時 の表示速度改善（旧日本アプリの仕 組みの導入） 左: 改善前 右: 改善後 Global版のアプリのパフォーマンス改善
19. © 2024 Cookpad Inc. 19 遷移元でレシピ詳細のファーストビューの描画に必要なデータをあらかじめ取得し、レシピ 詳細画面でAPIからデータを取得している時にそのデータを表示する レシピ詳細画面のデータ取得時の表示速度改善 t 画面遷移 APIからデータ取得完了 改善前 改善後 ローディングを表示 遷移元から渡されたデータでレシピ詳細を表示 取得したデータでレシピ詳細を表示 取得したデータでレシピ詳細を表示
20. © 2024 Cookpad Inc. 20 • ベータテストをより多くのユーザーさんへ向けて開始 • 残らない機能を残すことに決めた • Globalのデザインシステムからの逸脱が発生 • 一部の機能で日本リージョンの分岐が発生 ◦ 日本リージョンだけ出す/出さない機能 ◦ 例: ヘルプページ、プレミアムサービス機能説明ページ プロジェクト終盤（〜2024/08）
21. 2024/08: 日本のユーザーに新アプリをリリース 2024/10: Globalの全ユーザーに新アプリをリリース © 2024 Cookpad Inc. 21
22. 現在の開発体制と これからやっていきたいこと © 2024 Cookpad Inc. 22
23. © 2024 Cookpad Inc. 23 • iOS: 2人 • Android: 1人 + アルバイト1人 • 1週間スプリントでのスクラム開発 ◦ 次の発表で詳しくお話しします！ 現在のプロダクト開発グループのモバイルチーム体制
24. © 2024 Cookpad Inc. 24 • 統合前の実装の削除、統合によって生まれた負債の解消 • 翻訳周りの仕組み改善 ◦ 例: 日本語が翻訳されていない状態でリリースされないようにする • 統合後の機能に関するUIテストの拡充 ◦ 既存のUIテストがデグレの検知にかなり役に立っている 現在取り組んでいること
25. © 2024 Cookpad Inc. 25 • リファクタリング・リライトが必要な画面の改善 ◦ 改修の度に大きな工数がかかってしまうため、早めに対処したい • 旧日本アプリの開発で導入されていた便利な仕組みの導入 ◦ 例: ログ定義自動生成、ログ送信確認ツール... • SwiftUI/Jetpack Composeの導入・移行をさらに進める これからやっていきたいこと
26. まとめ © 2024 Cookpad Inc. 26
27. © 2024 Cookpad Inc. 27 • 統合によって、クックパッドがサービスを展開しているすべての地域 のユーザー体験が統一された • ユーザーテストを行いながら、開発途中で気付いた問題に対して柔 軟に対応することができた • 統合後もまだまだ改善すべき箇所がたくさんあるので、これからユー ザー体験面も技術面もさらに良くしていきたい まとめ
28. © 2024 Cookpad Inc. 28