Slide 1

Slide 1 text

© 2024 Cookpad Inc. 2024/12/18 Tech Kitchen #29 Mobile App One Experience 日本版とグローバル版のモバイルアプリ統合 の開発の裏側と今後の展望 Yuki Miida (@miichan_ocha)

Slide 2

Slide 2 text

© 2024 Cookpad Inc. 2 ● Yuki Miida ○ 2018/06 クックパッド入社 ○ X: @miichan_ocha ● レシピ事業部 プロダクト開発グループ ○ モバイルアプリ領域のテックリード ○ iOSエンジニア 自己紹介

Slide 3

Slide 3 text

© 2024 Cookpad Inc. 3 ● 日本版とグローバル版のモバイルアプリ統合 ● モバイルアプリ統合の開発の裏側 ● 現在の開発体制とこれからやっていきたいこと アジェンダ

Slide 4

Slide 4 text

日本版とグローバル版のモバイルアプリ統合 © 2024 Cookpad Inc. 4

Slide 5

Slide 5 text

© 2024 Cookpad Inc. 5 統合前(図はiOSアプリ) Developer Account1: 日本 日本用のリポジトリ Developer Account2: Global Global用のリポジトリ (GHE) (GitHub)

Slide 6

Slide 6 text

© 2024 Cookpad Inc. 6 統合後(図はiOSアプリ) Developer Account1: 日本 Developer Account2: Global Global用のリポジトリ (GitHub)

Slide 7

Slide 7 text

© 2024 Cookpad Inc. 7 アプリの見た目・機能 統合前(iOSアプリ) 左: 旧日本アプリ 右: 旧Globalアプリ

Slide 8

Slide 8 text

© 2024 Cookpad Inc. 8 アプリの見た目・機能 統合後(iOSアプリ) 左: 日本リージョン 右: UKリージョン

Slide 9

Slide 9 text

© 2024 Cookpad Inc. 9 ● グローバル版のiOS/Androidアプリを開発していたリポジトリから、 日本向けとGlobal向け両方のアプリを配信するようになった ● 見た目・機能が大きく異なる2つのアプリのユーザー体験が統一され た → One Experience 日本版とグローバル版のモバイルアプリ統合

Slide 10

Slide 10 text

● 「日本とグローバルのクックパッドを統合しました」 ○ https://techlife.cookpad.com/entry/2024/10/10/105832 © 2024 Cookpad Inc. 10 参考: 統合に関するより詳しい説明

Slide 11

Slide 11 text

モバイルアプリ統合の開発の裏側 © 2024 Cookpad Inc. 11

Slide 12

Slide 12 text

© 2024 Cookpad Inc. 12 ● 選抜メンバーが Globalのリポジトリでオンボーディングを開始 ● Global版アプリに「日本リージョン」を追加 ○ 開発版だけで利用できる ● 統合後に残る機能、残らない機能の棚卸し ● Global版アプリ内の残らない機能の削除 プロジェクト序盤(2023/10〜)

Slide 13

Slide 13 text

© 2024 Cookpad Inc. 13 Global版アプリに「日本リージョン」を追加

Slide 14

Slide 14 text

© 2024 Cookpad Inc. 14 ● Globalの開発リポジトリで日本向けのアプリ配信の準備 ● 統合後に残る機能をGlobal版のアプリに実装 ● Global版のアプリのパフォーマンス改善 ● アルファテストを少数のユーザーさんに向けて開始 ○ アルファ版のiOS アプリをTestFlightで配信 プロジェクト中盤(2024/01〜)

Slide 15

Slide 15 text

© 2024 Cookpad Inc. 15 ● iOS ○ Xcodeプロジェクト生成時に参照先の環境変数ファイルを切り替える ● Android ○ ビルドするアプリのApplicationIdやversionNameなどをFlavorベースで切り替 える Globalの開発リポジトリで日本向けのアプリ配信の準備

Slide 16

Slide 16 text

© 2024 Cookpad Inc. 16 ● 日本の機能をそのまま移植するのではなく、体験をブラッシュアップし たものを実装した ● 統合後の機能は原則Feature Togglesで制御され、Globalのユーザー には非公開な状態で開発を進めた ○ Feature Togglesについてはこの後の発表で詳しく話します! 統合後に残る機能をGlobal版のアプリに実装

Slide 17

Slide 17 text

© 2024 Cookpad Inc. 17 機能例: きろくタブ 統合後(現在のUI) 統合前(Global) 統合前(日本)

Slide 18

Slide 18 text

© 2024 Cookpad Inc. 18 アプリ側でページングのタイミングを 早めたり、体感速度を向上させたり した。 例: レシピ詳細画面のデータ取得時 の表示速度改善(旧日本アプリの仕 組みの導入) 左: 改善前 右: 改善後 Global版のアプリのパフォーマンス改善

Slide 19

Slide 19 text

© 2024 Cookpad Inc. 19 遷移元でレシピ詳細のファーストビューの描画に必要なデータをあらかじめ取得し、レシピ 詳細画面でAPIからデータを取得している時にそのデータを表示する レシピ詳細画面のデータ取得時の表示速度改善 t 画面遷移 APIからデータ取得完了 改善前 改善後 ローディングを表示 遷移元から渡されたデータでレシピ詳細を表示 取得したデータでレシピ詳細を表示 取得したデータでレシピ詳細を表示

Slide 20

Slide 20 text

© 2024 Cookpad Inc. 20 ● ベータテストをより多くのユーザーさんへ向けて開始 ● 残らない機能を残すことに決めた ● Globalのデザインシステムからの逸脱が発生 ● 一部の機能で日本リージョンの分岐が発生 ○ 日本リージョンだけ出す/出さない機能 ○ 例: ヘルプページ、プレミアムサービス機能説明ページ プロジェクト終盤(〜2024/08)

Slide 21

Slide 21 text

2024/08: 日本のユーザーに新アプリをリリース 2024/10: Globalの全ユーザーに新アプリをリリース © 2024 Cookpad Inc. 21

Slide 22

Slide 22 text

現在の開発体制と これからやっていきたいこと © 2024 Cookpad Inc. 22

Slide 23

Slide 23 text

© 2024 Cookpad Inc. 23 ● iOS: 2人 ● Android: 1人 + アルバイト1人 ● 1週間スプリントでのスクラム開発 ○ 次の発表で詳しくお話しします! 現在のプロダクト開発グループのモバイルチーム体制

Slide 24

Slide 24 text

© 2024 Cookpad Inc. 24 ● 統合前の実装の削除、統合によって生まれた負債の解消 ● 翻訳周りの仕組み改善 ○ 例: 日本語が翻訳されていない状態でリリースされないようにする ● 統合後の機能に関するUIテストの拡充 ○ 既存のUIテストがデグレの検知にかなり役に立っている 現在取り組んでいること

Slide 25

Slide 25 text

© 2024 Cookpad Inc. 25 ● リファクタリング・リライトが必要な画面の改善 ○ 改修の度に大きな工数がかかってしまうため、早めに対処したい ● 旧日本アプリの開発で導入されていた便利な仕組みの導入 ○ 例: ログ定義自動生成、ログ送信確認ツール... ● SwiftUI/Jetpack Composeの導入・移行をさらに進める これからやっていきたいこと

Slide 26

Slide 26 text

まとめ © 2024 Cookpad Inc. 26

Slide 27

Slide 27 text

© 2024 Cookpad Inc. 27 ● 統合によって、クックパッドがサービスを展開しているすべての地域 のユーザー体験が統一された ● ユーザーテストを行いながら、開発途中で気付いた問題に対して柔 軟に対応することができた ● 統合後もまだまだ改善すべき箇所がたくさんあるので、これからユー ザー体験面も技術面もさらに良くしていきたい まとめ

Slide 28

Slide 28 text

© 2024 Cookpad Inc. 28