SwiftUI でリスト要素のインプレッションを計測する

【ハイブリット開催】Mobile勉強会 Wantedly × チームラボ × Sansan #12
https://sansan.connpass.com/event/303229/

で発表した資料です

Transcript

1. © 2023 Wantedly, Inc. SwiftUI でリスト要素の インプレッションを計測する Mobile勉強会 Wantedly × チームラボ × Sansan #12 Dec. 19 2023 - 林達也
2. 自己紹介 © 2023 Wantedly, Inc.
3. © 2023 Wantedly, Inc. 提供プロダクト
4. Agenda 1. インプレッション計測とは 2. UIKit での方法 3. SwiftUI での方法 4. まとめ © 2023 Wantedly, Inc.
5. インプレッション計測 © 2023 Wantedly, Inc.
6. インプレッション計測 • Visit では募集一覧を推薦システムで最適化するため ど の募集が見られたかを計測している ◦ 画面内に各募集が n% 表示されたら インプレッションされた ◦ 同一セッション中は同じ募集は再度 インプレッションしない © 2023 Wantedly, Inc. 募集 募集 募集 募集
7. インプレッション計測 • Visit では募集一覧を推薦システムで最適化するため ど の募集が見られたかを計測している ◦ 画面内に各募集が n% 表示されたら インプレッションされた ◦ 同一セッション中は同じ募集は再度 インプレッションしない • 募集一覧を SwiftUI でリニューアルしたので 引き継ぐ必要があった © 2023 Wantedly, Inc. 募集 募集 募集 募集
8. UIKit では © 2023 Wantedly, Inc.
9. UIKit • UICollectionView でリスト表示を行っていた • willDisplayCell 等のタイミングでセルの交差判定を行う © 2023 Wantedly, Inc.
10. SwiftUI では © 2023 Wantedly, Inc.
11. SwiftUI • GeometryReader を用いて実現 → リストとセルに GeometryReader が分散 • © 2023 Wantedly, Inc.
12. SwiftUI • GeometryReader を用いて実現 → リストとセルに GeometryReader が分散 → anchorPreference を使ってみる © 2023 Wantedly, Inc.
13. anchorPreference © 2023 Wantedly, Inc.
14. anchorPreference • ジオメトリに特化した preference モディファイア • Anchor<A>.Source で対象ビューのジオメトリアンカーを取 得して親要素へ値を伝えることができる ◦ .center, .bounds, … • 通常の preference と同様に PreferenceKey を利用 © 2023 Wantedly, Inc.
15. SwiftUI • © 2023 Wantedly, Inc.
16. anchorPreference • frame を知りたい対象に anchorPreference を利用 • ImpressionKey.Value に合わせて配列にして返す • インプレッションしたかどうかを ObservableObject で管理 ※ © 2023 Wantedly, Inc. ※パフォーマンスの章で補足
17. SwiftUI • © 2023 Wantedly, Inc.
18. backgroundPreferenceValue © 2023 Wantedly, Inc.
19. backgroundPreferenceValue • anchorPreference で親要素に送られた値を受け取るモ ディファイア • リストのサイズを知る必要があるので background に GeometryReader を設置し UIKit と同様にリストとセルの 交差判定を行う © 2023 Wantedly, Inc.
20. インプレッション計測 • © 2023 Wantedly, Inc.
21. インプレッション計測 • © 2023 Wantedly, Inc. Anchor から CGRect を取り出している
22. パフォーマンス © 2023 Wantedly, Inc.
23. パフォーマンス • 計測関連処理のコメントアウトで Instruments を比較 • → 大きな差は見られなかった ◦ @State, @Published で保持すると再レンダリング要求が行われてしまう ◦ 今回の計測ではインプレッションしたかの状態によるビューの変化がないため それに よる管理は不要 © 2023 Wantedly, Inc.
24. まとめ • 🎉 SwiftUI でインプレッション計測を実現できた • 📦 anchorPreference でコンパクト？にもできた ◦ → ViewModifier でコンポーネント化を視野 • 😻 パフォーマンスも問題なさそう © 2023 Wantedly, Inc.
25. © 2023 Wantedly, Inc. ご清聴ありがとうございました！