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
320
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
1.2k
ABEMAのリアーキテクチャ
kokihirokawa
5
5k
Detect Body and Hand Pose with Vision
kokihirokawa
0
920
Other Decks in Programming
See All in Programming
TDD 実践ミニトーク
contour_gara
1
220
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
1
2.3k
ゲームの物理
fadis
5
1.5k
パッケージ設計の黒魔術/Kyoto.go#63
lufia
1
250
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
280
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
480
兎に角、コードレビュー
mitohato14
0
150
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
220
Nuances on Kubernetes - RubyConf Taiwan 2025
envek
0
200
🔨 小さなビルドシステムを作る
momeemt
2
590
RDoc meets YARD
okuramasafumi
3
140
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
150
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.8k
Typedesign – Prime Four
hannesfritz
42
2.8k
Statistics for Hackers
jakevdp
799
220k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
A designer walks into a library…
pauljervisheath
207
24k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Visualization
eitanlees
147
16k
Writing Fast Ruby
sferik
628
62k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Speed Design
sergeychernyshev
32
1.1k
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