ユーザ行動分析のためのイベント送信における iOS / Android 間の実装差異を防ぐオーバーレイデバッグ表示機能の紹介

ユーザ行動分析のためのイベント送信に おける iOS / Android 間の実装差異を防ぐ オーバーレイデバッグ表示機能の紹介 potatotips #88 1

自己紹介 ● ● 高田 晴彦 @tfandkusu ○ ● ● ● X / Qiita / Zenn / GitHub / note 株式会社Kyash Androidエンジニア 趣味 ○ ○ スプラトゥーン カメラ 2

前職 株式会社リサーチ・アンド・イノベーション 「CODE」アプリ開発の取り組みを紹介 3

iOS / Android 間の実装差異 ● ● ユーザ向けのヘルプページやユーザサポートの観点から、無い方が望ましい iOS / Android のエンジニアが一緒にテストケースを作り相互に確認 iOS エンジニア Android エンジニア Android アプリをテスト iOS アプリをテスト 4

実装差異は目に見えるものだけで無い ● その代表はユーザ行動をデータ分析するためのイベント送信 ○ ● データ分析の例 ○ ○ ● ● Google Analytics for Firebase 離脱の多いステップを把握するファネル分析 複数の UI でどちらが良いか比較する AB テスト アプリから送信されたイベントはクラウドに蓄積され集計することができる イベントの送り方が iOS / Android で違うと、リリース後にデータ分析する人が困る 5

DroidKaigi 2024 でデータ分析のためのイベント 送信について発表します DroidKaigi で話すこと ● ● イベント送信実装の基礎 適切に実装するチームを作るための各種自 動化 今回話すこと ● ● イベント送信実装の独自のデバッグ機能の 紹介 その実装方法 2024年9月11日 (水) 〜 9月13日 (金) ベルサール渋谷ガーデン https://2024.droidkaigi.jp/ 6

• https://2024.droidkaigi.jp/

Firebase コンソールの DebugView の難しい点 対象端末を選ぶ 送信されたイベントを確認できる 複数あると 特定が手間 表示に遅延 7

送信したイベントをアプリに表示するデバッグ 機能を独自に開発 iOS Android アプリのレイアウトを崩さないように最前 面に半透明で送信したイベントの内容を 表示 ● スマホだけで送信タイミングを適切 に把握 ● モバイルエンジニアだけでなくデー タ分析エンジニアからも好評 ※ 社内向けデバッグ機能なので、ストア配布ア プリでは表示できません 8

実装方法 9

説明方法 ● ● Android アプリの実装を中心に説明 iOS アプリも同様の考え方で実装 ○ ● 違う部分は個別に説明 Android 固有の用語は iOS エンジニアがイメージしやすいように、適時言い換え 10

表示部分の実装 class MainActivity : ComponentActivity() { // 画面クラス override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // アプリ本来の View setContent { MyTheme { MainScreen() } } addContentView( // 上のレイヤーに View を設置できるメソッド /* オーバレイデバッグ表示 View はこちらに構築 */, ViewGroup.LayoutParams(/* 略 */), ) } } 11

表示部分の共通化 class MainActivity : ComponentActivity() { private val analyticsEventOverlayHelper: AnalyticsEventOverlayHelper by inject() override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { MyTheme { MainScreen() } } // すべての画面の構築処理で、デバッグ表示を構築するヘルパクラスのメソッドを呼び出す } } analyticsEventOverlayHelper.onCreate(this) ※ by inject() は DI コンテナ(Koin)からのインスタンス取得 12

iOS アプリの表示部分の実装 アプリの ViewController が乗っているメインの Window とは別に、UIWindow クラス を独自に拡張した Window にオーバレイデバッグ表示を構築 設計、開発した人 iOS エンジニア J_ogawa さん 13

• https://x.com/J_ogawa

イベント送信部分 との連携 画面1 Analytics イベント 送信用ヘルパ Firebase SDK 使用 イベント送信依頼 イベント送信内容報告 表示用ヘルパ Analytics イベントログホルダ（シングルトン） 画面2 表示用ヘルパ 更新監視 送信済み イベントリスト MutableStateFlow （複数箇所から更新監視可能な変数） ※ SDKによる自動収集イベントはイベントリストに追加されません 14

まとめ ● ● モバイルエンジニアにとって iOS / Android 間の実装差異は課題のひとつ 実装差異は目に見えるものだけではない ○ ● ● 代表例： ユーザ行動分析のためのイベント送 信 オーバレイでアプリのレイアウトを崩さず表 示する独自のデバッグ機能を紹介 ユーザからは見えない実装差異への対策を 行いたいモバイルエンジニアに開発体制構 築のヒントを提供できたら幸いです iOS エンジニア Android エンジニア データ分析 エンジニア 15

ありがとうござい ました 次のページは謝辞です 16

この発表へのご承諾・ご協力に感謝致します ● 株式会社リサーチ・アンド・イノベーション ○ ○ ● J_ogawa さん jageishi さん 株式会社Kyash ○ ○ 良い取り組みだと言ってくれて発表を後押し ■ konifar さん ■ tamadon さん ■ _rmakiyama さん スライドや発表録画へのフィードバック ■ Mobile チームの皆様 17

• https://x.com/J_ogawa
• https://x.com/jageishi
• https://x.com/konifar
• https://x.com/tamadon3776
• https://x.com/_rmakiyama