Jetpack Composeで自作vimp実装してみた

2023/12/12 Re: 2023 モバイルアプリ開発 LT大会 #AppBrewで発表した内容です

Transcript

1. Jetpack Composeで⾃作 vimp実装してみた asmz
2. 清⽔⿇美 LIPSでAndroidエンジニアをやっていま す。なんだかんだでpresentation層を苦 しみながら作るのがわりと好きです。 Asami Shimizu 今⽇はよろしくおねがいします！
3. 01. 02. 03. 04. foreground 何を作るか vimp まとめ
4. 何を作るか 01.
5. vimp計測！
6. vimpって何？？
7. vimpの定義 viewable impression。 広告⾯積の50％が1秒以上表⽰されたと きに1vimp。 https://digitor.jp/dictionary/viewable-impression/
8. 仕様の整理 - Viewの50％表⽰されてから1秒経っ たらログ送信 - 1秒経つ前に50％切ったらキャンセル - ⼀度スクロールして再表⽰でも送信 する
9. 仕様の整理（独⾃機能） - vimpを計測したアイテムのタップログ もほしい - debug時には途中/完了で⾊分けしたい - JetpackComposeで！ - 汎⽤的に使えるようにModifierにしたい！
10. 最終成果物
11. れっつ作成！
12. foreground 02.
13. Modifierを作ろう！ https://developer.android.com/jetpack/compose/custom-modi fiers?hl=ja ⾃作Modifier作ろうぜ！の公式Doc
14. foreground - backgroundはあるのにforeground はない！！ - が、background真似すればできるん では？
15. 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のソース
17. 背景描いてそう コンテンツ描画
18. 逆にしてみればいいんじゃね？
19. drawContent()→drawRect()の順 他は⼤体 backgroundのコピペ （名前変えたりshapeは不要だっ たので削ったり）
21. できたー
22. vimp 03.
23. 参考 https://github.com/abema/compose-impression-tracker/blob/ main/compose-impression/src/main/java/tv/abema/compose/i mpression/impression.kt takahiromさんのやつ（ちょっと最終更 新は古めだがすごい参考にしました）
24. 仕様の整理 - Viewの50％表⽰されてから1秒経っ たらログ送信 - 1秒経つ前に50％切ったらキャンセル - ⼀度スクロールして再表⽰でも送信 する
25. status整理 - NOT_IMPRESSION - view表⽰が50％未満 - IN_PROGRESS - 50％以上表⽰が1秒未満 - COMPLETE - 50％以上表⽰が1秒以上 NOT_IMPRESSION IN_PROGRESS COMPLETE
26. 分解 - Viewが50％表⽰しているかどうか - 1秒経ったかどうか
27. viewの50％表⽰判定 https://developer.android.com/reference/kotlin/androidx/com pose/ui/Modifier#(androidx.compose.ui.Modifier).onGloballyPo sitioned(kotlin.Function1) Modifier.onGroballyPosition
28. Modifier.onGroballyPosition - GlobalPosition変更ごとに呼び出さ れる＝Scrollタイミングで呼び出し - LayoutCoordinatesが便利
29. positionInWindowで取得できるRect →今表⽰できているサイズが取れる！
30. index=6,7ここ
31. viewの50％表⽰判定
32. 1秒経ったかどうか IN_PROGRESSになったら1秒測る & NOT_IMPRESSIONでキャンセル →LaunchedEffect便利そう
33. LaunchedEffect https://developer.android.com/jetpack/compose/side-effe cts?hl=ja#launchedeffect - コンポーザブルのスコープ内で suspend 関数を実⾏ - 別キーでrecomposeされた場合は前の キーはキャンセル＆新キーで実⾏
34. LaunchedEffect - stateをmutableStateで監視 - LaunchedEffectのキーをstateに - stateがIN_PROGRESSのときに1秒 待って、キャンセルされなければ COMPLETEにする
36. あとはこまごま独⾃仕様 - stateごとに⾊を設定して02.で作った foregroundをつける - clickable処理をつける
37. 最終成果物
38. できたー
39. まとめ 04.
40. まとめ - 共通処理だとModifierで作ると便利 - 独⾃Modifierは既存Modifierを参考に すると意外と作れる - いろいろつくってみよう！ https://github.com/starmaine777/ViewImpressionSample