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
120
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
820
運用中アプリに ダークテーマを適用してみる
starmaine777
0
390
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
524
40k
KATA
mclloyd
30
14k
A better future with KSS
kneath
239
17k
Building Applications with DynamoDB
mza
95
6.5k
Producing Creativity
orderedlist
PRO
346
40k
How GitHub (no longer) Works
holman
314
140k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Building an army of robots
kneath
306
45k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Building Adaptive Systems
keathley
43
2.6k
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