Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SwiftUI移行のためのインプレッショントラッキング基盤の構築
Search
Koki Hirokawa
March 03, 2025
Programming
0
150
SwiftUI移行のためのインプレッショントラッキング基盤の構築
CA.swift #22 〜Swiftの進化を活かした技術基盤への挑戦〜 にて登壇。
https://cyberagent.connpass.com/event/342952/
Koki Hirokawa
March 03, 2025
Tweet
Share
More Decks by Koki Hirokawa
See All by Koki Hirokawa
App内課金におけるトラブルを劇的に減らすための取り組み
kokihirokawa
2
970
ABEMAのリアーキテクチャ
kokihirokawa
5
4.8k
Detect Body and Hand Pose with Vision
kokihirokawa
0
890
Other Decks in Programming
See All in Programming
LINE messaging APIを使ってGoogleカレンダーと連携した予約ツールを作ってみた
takumakoike
0
120
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
330
PEPCは何を変えようとしていたのか
ken7253
3
270
もう僕は OpenAPI を書きたくない
sgash708
6
1.9k
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
290
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
330
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
270
Learning Kotlin with detekt
inouehi
1
140
kintone開発を効率化するためにチームで試した施策とその結果を大放出!
oguemon
0
170
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
930
CI改善もDatadogとともに
taumu
0
200
読まないコードリーディング術
hisaju
0
100
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Embracing the Ebb and Flow
colly
84
4.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
430
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Site-Speed That Sticks
csswizardry
4
410
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
For a Future-Friendly Web
brad_frost
176
9.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Transcript
AbemaTV, Inc. All Rights Reserved AbemaTV, Inc. All Rights Reserved
1 SwiftUI 移行のための インプレッション トラッキング基盤の構築 2025 March 3rd Koki Hirokawa
AbemaTV, Inc. All Rights Reserved 現状 2 • UIKit が支配的
UIKit SwiftUI
AbemaTV, Inc. All Rights Reserved SwiftUI への移行 3 SwiftUI •
新規実装は SwiftUI 主体 • UIKit はスポット利用 UIKit
AbemaTV, Inc. All Rights Reserved 移行における課題 4 • キャッチアップ •
iOS 15.0 までのサポート • インプレッショントラッキングの仕組み
AbemaTV, Inc. All Rights Reserved 移行における課題 5 • キャッチアップ •
iOS 15.0 までのサポート • インプレッショントラッキング の仕組み ✔ ✔ ✔ ✔
AbemaTV, Inc. All Rights Reserved 目次 6 • 自己紹介 •
インプレッショントラッキングとは • SwiftUI での基盤構築 • 工夫した点 • まとめ
AbemaTV, Inc. All Rights Reserved Koki Hirokawa • 2020年 AbemaTV新卒入社
7 Profile @pihero13 KokiHirokawa
AbemaTV, Inc. All Rights Reserved インプレッショントラッキングとは 8
AbemaTV, Inc. All Rights Reserved 行動ログ 9 • ユーザの行動を分析し、ビジネス戦略の意思決定を行うためのログ ◦
どの画面に遷移した ◦ 何を視聴した ◦ 何を見た ◦ 何をクリックした
AbemaTV, Inc. All Rights Reserved インプレッションログ 10 • 画面上に表示されるどの要素がユーザに見られたか ✔
✔ ✔ ✔
AbemaTV, Inc. All Rights Reserved インプレッションログ 11 ✔ ✔ ✔
✔ .onAppear { sendImpressionLog(id: “mylist-\(id)”) } • シンプルな実装
AbemaTV, Inc. All Rights Reserved インプレッションログ 12 ✔ ✔ ✔
✔ .onAppear { sendImpressionLog(id: “mylist-\(id)”) } • 「見た」の定義はもう少し複雑 ❌
AbemaTV, Inc. All Rights Reserved インプレッションログ 13 ✔ ✔ ✔
• 例) 要素の80%以上の領域が画面内に2秒以上 表示されたことを、ユーザが「見た」と定義する ✔
AbemaTV, Inc. All Rights Reserved SwiftUI での基盤構築 14
AbemaTV, Inc. All Rights Reserved 前提 15 • ABEMA では多くの画面がスクロール可能
• UIKit では TableView や CollectionView で表示するコンテンツのインプレッション をトラッキングするための基盤を用意
AbemaTV, Inc. All Rights Reserved 構成 16 ImpressionTrackingController Trackable ScrollView
Trackable View
AbemaTV, Inc. All Rights Reserved 利用イメージ 17 @StateObject var controller
= ImpressionTrackingController( configuration: .init( minimumAreaRatio: 0.8, minimumDuration: 2 ) )
AbemaTV, Inc. All Rights Reserved 利用イメージ 18 TrackableScrollView(showsIndicator: false) {
LazyVStack { ForEach(fruits) { fruit in FruitView(fruit) .trackable(id: fruit.id) { sendImpressionLog() } } } } .environment(\.trackingController, controller)
AbemaTV, Inc. All Rights Reserved Trackable ScrollView - RootViewFrame のキャッシュ
19 ImpressionTrackingController Trackable ScrollView .onChange( geometry.frame(in: .global) ) { frame in controller.setRootViewFrame(frame) }
AbemaTV, Inc. All Rights Reserved Trackable ScrollView - スクロールの検知 20
ImpressionTrackingController Trackable ScrollView .onChange( geometry.frame(in: .named(space)).origin ) { origin in if origin != prevOrigin { controller.sendScrollEvent() } }
AbemaTV, Inc. All Rights Reserved 21 Trackable View - インプレッションのロジック
Trackable View .onReceive(controller.didScroll) { let visibility = … if 0.8 <= visibility { // タイマーを設定 () } else { // タイマーを停止 () } } ImpressionTrackingController
AbemaTV, Inc. All Rights Reserved 22 Trackable View - 条件を満たした場合
Trackable View .onReceive(controller.didTrack) { // ログ送信 } ImpressionTrackingController
AbemaTV, Inc. All Rights Reserved 利用イメージ 23 FruitView(fruit) .trackable(id: fruit.id)
{ sendImpressionLog() }
AbemaTV, Inc. All Rights Reserved 工夫した点 24
AbemaTV, Inc. All Rights Reserved デバッグ画面 25 • 参考実装も兼ねたデモ画面
AbemaTV, Inc. All Rights Reserved デバッグ画面 26 • 必ず実機でも確認する ◦
シミュレータと実機で挙動が変わることがあるため注意 • OS Major Version も網羅しておくと安心
AbemaTV, Inc. All Rights Reserved UI Test 27 • 想像以上に実行時間が長い
AbemaTV, Inc. All Rights Reserved UI Test 28 • 想像以上に実行時間が長い
◦ 表示内容の検証をしている間に指定した インプレッションの秒数を超える
AbemaTV, Inc. All Rights Reserved UI Test 29 • 想像以上に実行時間が長い
◦ 表示内容の検証をしている間に指定した インプレッションの秒数を超える ▪ 1秒から3秒に変更
AbemaTV, Inc. All Rights Reserved UI Test 30 • ボタンをタップできずテストが失敗
AbemaTV, Inc. All Rights Reserved UI Test 31 • ボタンをタップできずテストが失敗
◦ タップ可能になるまで待機 try await app.buttons[“Scroll to Bottom”] .abema.tapOnHittable()
AbemaTV, Inc. All Rights Reserved UI Test 32 • 固定量のスクロールができない
AbemaTV, Inc. All Rights Reserved UI Test 33 • 固定量のスクロールができない
◦ 慣性スクロールが働く ◦ デバッグ画面では最下部までスクロールするためのボタンを追加
AbemaTV, Inc. All Rights Reserved デバッグ機能 34 • Environment Variables
• トラッキング対象にオーバーレイ を配置し、視覚的にデバッグ
AbemaTV, Inc. All Rights Reserved まとめ 35
AbemaTV, Inc. All Rights Reserved まとめ 36 • SwiftUI 主体の実装へ移行するにあたって、インプレッションログを送信するための基
盤を構築 • TrackableScrollView や trackable modifier を用意することで、実装コストを抑えてイ ンプレッションログの送信ができるように • UI Test のメリットは大きいものの、実装・運用コストは少し高め
AbemaTV, Inc. All Rights Reserved ご清聴ありがとうございました 37