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
Jetpack Composeで自作vimp実装してみた
Search
AsamiShimizu
December 26, 2023
0
130
Jetpack Composeで自作vimp実装してみた
2023/12/12 Re: 2023 モバイルアプリ開発 LT大会 #AppBrewで発表した内容です
AsamiShimizu
December 26, 2023
Tweet
Share
More Decks by AsamiShimizu
See All by AsamiShimizu
モニタリングでパフォーマンス改善入門
starmaine777
0
890
運用中アプリに ダークテーマを適用してみる
starmaine777
0
400
Featured
See All Featured
How GitHub (no longer) Works
holman
315
140k
RailsConf 2023
tenderlove
30
1.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Code Reviewing Like a Champion
maltzj
526
40k
Designing for humans not robots
tammielis
254
26k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
980
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Become a Pro
speakerdeck
PRO
29
5.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
20
1.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Context Engineering - Making Every Token Count
addyosmani
6
250
Transcript
Jetpack Composeで⾃作 vimp実装してみた asmz
清⽔⿇美 LIPSでAndroidエンジニアをやっていま す。なんだかんだでpresentation層を苦 しみながら作るのがわりと好きです。 Asami Shimizu 今⽇はよろしくおねがいします!
01. 02. 03. 04. foreground 何を作るか vimp まとめ
何を作るか 01.
vimp計測!
vimpって何??
vimpの定義 viewable impression。 広告⾯積の50%が1秒以上表⽰されたと きに1vimp。 https://digitor.jp/dictionary/viewable-impression/
仕様の整理 - Viewの50%表⽰されてから1秒経っ たらログ送信 - 1秒経つ前に50%切ったらキャンセル - ⼀度スクロールして再表⽰でも送信 する
仕様の整理(独⾃機能) - vimpを計測したアイテムのタップログ もほしい - debug時には途中/完了で⾊分けしたい - JetpackComposeで! - 汎⽤的に使えるようにModifierにしたい!
最終成果物
れっつ作成!
foreground 02.
Modifierを作ろう! https://developer.android.com/jetpack/compose/custom-modi fiers?hl=ja ⾃作Modifier作ろうぜ!の公式Doc
foreground - backgroundはあるのにforeground はない!! - が、background真似すればできるん では?
foreground https://cs.android.com/androidx/platform/frameworks/support /+/androidx-main:compose/foundation/foundation/src/commo nMain/kotlin/androidx/compose/foundation/Background.kt;l=4 5?q=Modifier.background&ss=androidx&hl=ja Modifier.backgroundのソース
None
背景描いてそう コンテンツ描画
逆にしてみればいいんじゃね?
drawContent()→drawRect()の順 他は⼤体 backgroundのコピペ (名前変えたりshapeは不要だっ たので削ったり)
None
できたー
vimp 03.
参考 https://github.com/abema/compose-impression-tracker/blob/ main/compose-impression/src/main/java/tv/abema/compose/i mpression/impression.kt takahiromさんのやつ(ちょっと最終更 新は古めだがすごい参考にしました)
仕様の整理 - Viewの50%表⽰されてから1秒経っ たらログ送信 - 1秒経つ前に50%切ったらキャンセル - ⼀度スクロールして再表⽰でも送信 する
status整理 - NOT_IMPRESSION - view表⽰が50%未満 - IN_PROGRESS - 50%以上表⽰が1秒未満 -
COMPLETE - 50%以上表⽰が1秒以上 NOT_IMPRESSION IN_PROGRESS COMPLETE
分解 - Viewが50%表⽰しているかどうか - 1秒経ったかどうか
viewの50%表⽰判定 https://developer.android.com/reference/kotlin/androidx/com pose/ui/Modifier#(androidx.compose.ui.Modifier).onGloballyPo sitioned(kotlin.Function1) Modifier.onGroballyPosition
Modifier.onGroballyPosition - GlobalPosition変更ごとに呼び出さ れる=Scrollタイミングで呼び出し - LayoutCoordinatesが便利
positionInWindowで取得できるRect →今表⽰できているサイズが取れる!
index=6,7ここ
viewの50%表⽰判定
1秒経ったかどうか IN_PROGRESSになったら1秒測る & NOT_IMPRESSIONでキャンセル →LaunchedEffect便利そう
LaunchedEffect https://developer.android.com/jetpack/compose/side-effe cts?hl=ja#launchedeffect - コンポーザブルのスコープ内で suspend 関数を実⾏ - 別キーでrecomposeされた場合は前の キーはキャンセル&新キーで実⾏
LaunchedEffect - stateをmutableStateで監視 - LaunchedEffectのキーをstateに - stateがIN_PROGRESSのときに1秒 待って、キャンセルされなければ COMPLETEにする
None
あとはこまごま独⾃仕様 - stateごとに⾊を設定して02.で作った foregroundをつける - clickable処理をつける
最終成果物
できたー
まとめ 04.
まとめ - 共通処理だとModifierで作ると便利 - 独⾃Modifierは既存Modifierを参考に すると意外と作れる - いろいろつくってみよう! https://github.com/starmaine777/ViewImpressionSample