Tweet
Tweet

Slide 1

Slide 1 text

© 2023 Wantedly, Inc. SwiftUI でリスト要素の インプレッションを計測する Mobile勉強会 Wantedly × チームラボ × Sansan #12 Dec. 19 2023 - 林達也

Slide 2

Slide 2 text

自己紹介 © 2023 Wantedly, Inc.

Slide 3

Slide 3 text

© 2023 Wantedly, Inc. 提供プロダクト

Slide 4

Slide 4 text

Agenda 1. インプレッション計測とは 2. UIKit での方法 3. SwiftUI での方法 4. まとめ © 2023 Wantedly, Inc.

Slide 5

Slide 5 text

インプレッション計測 © 2023 Wantedly, Inc.

Slide 6

Slide 6 text

インプレッション計測 ● Visit では募集一覧を推薦システムで最適化するため ど の募集が見られたかを計測している ○ 画面内に各募集が n% 表示されたら インプレッションされた ○ 同一セッション中は同じ募集は再度 インプレッションしない © 2023 Wantedly, Inc. 募集 募集 募集 募集

Slide 7

Slide 7 text

インプレッション計測 ● Visit では募集一覧を推薦システムで最適化するため ど の募集が見られたかを計測している ○ 画面内に各募集が n% 表示されたら インプレッションされた ○ 同一セッション中は同じ募集は再度 インプレッションしない ● 募集一覧を SwiftUI でリニューアルしたので 引き継ぐ必要があった © 2023 Wantedly, Inc. 募集 募集 募集 募集

Slide 8

Slide 8 text

UIKit では © 2023 Wantedly, Inc.

Slide 9

Slide 9 text

UIKit ● UICollectionView でリスト表示を行っていた ● willDisplayCell 等のタイミングでセルの交差判定を行う © 2023 Wantedly, Inc.

Slide 10

Slide 10 text

SwiftUI では © 2023 Wantedly, Inc.

Slide 11

Slide 11 text

SwiftUI ● GeometryReader を用いて実現 → リストとセルに GeometryReader が分散 ● © 2023 Wantedly, Inc.

Slide 12

Slide 12 text

SwiftUI ● GeometryReader を用いて実現 → リストとセルに GeometryReader が分散 → anchorPreference を使ってみる © 2023 Wantedly, Inc.

Slide 13

Slide 13 text

anchorPreference © 2023 Wantedly, Inc.

Slide 14

Slide 14 text

anchorPreference ● ジオメトリに特化した preference モディファイア ● Anchor.Source で対象ビューのジオメトリアンカーを取 得して親要素へ値を伝えることができる ○ .center, .bounds, … ● 通常の preference と同様に PreferenceKey を利用 © 2023 Wantedly, Inc.

Slide 15

Slide 15 text

SwiftUI ● © 2023 Wantedly, Inc.

Slide 16

Slide 16 text

anchorPreference ● frame を知りたい対象に anchorPreference を利用 ● ImpressionKey.Value に合わせて配列にして返す ● インプレッションしたかどうかを ObservableObject で管理 ※ © 2023 Wantedly, Inc. ※パフォーマンスの章で補足

Slide 17

Slide 17 text

SwiftUI ● © 2023 Wantedly, Inc.

Slide 18

Slide 18 text

backgroundPreferenceValue © 2023 Wantedly, Inc.

Slide 19

Slide 19 text

backgroundPreferenceValue ● anchorPreference で親要素に送られた値を受け取るモ ディファイア ● リストのサイズを知る必要があるので background に GeometryReader を設置し UIKit と同様にリストとセルの 交差判定を行う © 2023 Wantedly, Inc.

Slide 20

Slide 20 text

インプレッション計測 ● © 2023 Wantedly, Inc.

Slide 21

Slide 21 text

インプレッション計測 ● © 2023 Wantedly, Inc. Anchor から CGRect を取り出している

Slide 22

Slide 22 text

パフォーマンス © 2023 Wantedly, Inc.

Slide 23

Slide 23 text

パフォーマンス ● 計測関連処理のコメントアウトで Instruments を比較 ● → 大きな差は見られなかった ○ @State, @Published で保持すると再レンダリング要求が行われてしまう ○ 今回の計測ではインプレッションしたかの状態によるビューの変化がないため それに よる管理は不要 © 2023 Wantedly, Inc.

Slide 24

Slide 24 text

まとめ ● 🎉 SwiftUI でインプレッション計測を実現できた ● 📦 anchorPreference でコンパクト？にもできた ○ → ViewModifier でコンポーネント化を視野 ● 😻 パフォーマンスも問題なさそう © 2023 Wantedly, Inc.

Slide 25

Slide 25 text

© 2023 Wantedly, Inc. ご清聴ありがとうございました！