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
Introduction to kotlinx.rpc
arawn
0
770
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
270
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
490
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.7k
CDKを使ったPagerDuty連携インフラのテンプレート化
shibuya_shogo
0
110
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
890
Formの複雑さに立ち向かう
bmthd
1
940
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
9
2.5k
Swift Testingのモチベを上げたい
stoticdev
2
110
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
910
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.1k
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
41
16k
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
Speed Design
sergeychernyshev
27
810
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Faster Mobile Websites
deanohume
306
31k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Unsuck your backbone
ammeep
669
57k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Writing Fast Ruby
sferik
628
61k
Side Projects
sachag
452
42k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.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