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
250
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
900
Other Decks in Programming
See All in Programming
The Evolution of the CRuby Build System
kateinoigakukun
0
720
Lambda(Python)の リファクタリングが好きなんです
komakichi
3
220
Thank you <💅>, What's the Next?
ahoxa
1
550
Qiita Bash
mercury_dev0517
2
210
Youtube Lofier - Chrome拡張開発
ninikoko
0
2.5k
設計の本質:コード、システム、そして組織へ / The Essence of Design: To Code, Systems, and Organizations
nrslib
5
1.3k
ComposeでWebアプリを作る技術
tbsten
0
120
Golangci-lint v2爆誕: 君たちはどうすべきか
logica0419
1
160
サービスクラスのありがたみを発見したときの思い出 #phpcon_odawara
77web
4
690
「”誤った使い方をすることが困難”な設計」で良いコードの基礎を固めよう / phpcon-odawara-2025
taniguhey
0
170
趣味全開のAITuber開発
kokushin
0
200
音声プラットフォームのアーキテクチャ変遷から学ぶ、クラウドネイティブなバッチ処理 (20250422_CNDS2025_Batch_Architecture)
thousanda
0
300
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
23
2.7k
Designing Experiences People Love
moore
141
24k
Faster Mobile Websites
deanohume
306
31k
Building Adaptive Systems
keathley
41
2.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.6k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.2k
RailsConf 2023
tenderlove
30
1.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
178
53k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
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