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
260
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
1k
ABEMAのリアーキテクチャ
kokihirokawa
5
4.9k
Detect Body and Hand Pose with Vision
kokihirokawa
0
910
Other Decks in Programming
See All in Programming
オープンソースコントリビュート入門
_katsuma
0
120
読書シェア会 vol.4 『ダイナミックリチーミング 第2版』
kotaro666
0
110
GitHub Copilot for Azureを使い倒したい
ymd65536
1
300
監視 やばい
syossan27
12
10k
AIコーディングの理想と現実
tomohisa
35
37k
Empowering Developers with HTML-Aware ERB Tooling @ RubyKaigi 2025, Matsuyama, Ehime
marcoroth
2
940
Making TCPSocket.new "Happy"!
coe401_
1
2.9k
Cline with Amazon Bedrockで爆速開発体験ハンズオン/ 株式会社ブリューアス登壇資料
mhan
0
110
Ruby on Railroad: The Power of Visualizing CFG
ydah
0
290
Road to RubyKaigi: Making Tinny Chiptunes with Ruby
makicamel
4
530
파급효과: From AI to Android Development
l2hyunwoo
0
160
The Implementations of Advanced LR Parser Algorithm
junk0612
1
1.3k
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.4k
The Invisible Side of Design
smashingmag
299
50k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Embracing the Ebb and Flow
colly
85
4.7k
A Tale of Four Properties
chriscoyier
158
23k
Docker and Python
trallard
44
3.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
550
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.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