Jetpack Compose Preview実践ガイド

2025年9月24日（木）開催のAfter DroidKaigi 2025 from ピクシブで発表した資料です。

Transcript

1. Jetpack Compose Preview 実践ガイド Comic Division / Engineer kobaken
2. kobaken Androidアプリエンジニア Android歴10+n年 pixivコミック YouTubeが好き
3. 目次 ・Jetpack Composeのプレビューとは ・@Previewの機能紹介 ・@Previewをカスタムする ・インタラクティブモード ・ネットワークが必要なプレビューにどう対応するか ・快適なプレビュー環境のために ・CMP（Compose Multiplatform）でのプレビュー所感 ・まとめ
4. Jetpack Composeのプレビューとは 概要とメリデメ
5. Jetpack Composeのプレビューとは @Previewを付与することで コンポーザブルの表示ができる 編集すると リアルタイムで変更が更新される
6. Pros & Cons Pros👍 ・エミュレータ or 実機いらず ・リアルタイムで更新される Cons👎 ・実際とは異なるpadding、 marginが表示されてしまう ・Coilなどネットワーク経由の画像 表示ができない
7. プレビューの裏側 Android Studio上でプレビューできるのはなぜ？ →Layoutlibのおかげ 💡Layoutlibとは… Androidデバイス以外で実行できるように設計されたAndroidフレーム ワークのカスタムバージョン。デバイスのレンダリングに限りなく近い表 現をプレビューで可能にしてくれる。
8. プレビューの制約 便利な反面、制約もある😓 ・ネットワークにアクセスできない ・ファイルにアクセスできない ・一部のContext APIを利用できない可能性がある
9. @Previewの機能紹介 Previewアノテーションで設定可能なプロパティについて
10. @MustBeDocumented @Retention(AnnotationRetention.BINARY) @Target(AnnotationTarget.ANNOTATION_CLASS, AnnotationTarget.FUNCTION) @Repeatable annotation class Preview( val name: String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, val widthDp: Int = -1, val heightDp: Int = -1, val locale: String = "", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showSystemUi: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT, @Wallpaper val wallpaper: Int = Wallpapers.NONE, ) Preview.android.kt
11. @MustBeDocumented @Retention(AnnotationRetention.BINARY) @Target(AnnotationTarget.ANNOTATION_CLASS, AnnotationTarget.FUNCTION) @Repeatable annotation class Preview( val name: String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, val widthDp: Int = -1, val heightDp: Int = -1, val locale: String = "", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showSystemUi: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT, @Wallpaper val wallpaper: Int = Wallpapers.NONE, ) Preview.android.kt 表示名
12. @MustBeDocumented @Retention(AnnotationRetention.BINARY) @Target(AnnotationTarget.ANNOTATION_CLASS, AnnotationTarget.FUNCTION) @Repeatable annotation class Preview( val name: String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, val widthDp: Int = -1, val heightDp: Int = -1, val locale: String = "", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showSystemUi: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT, @Wallpaper val wallpaper: Int = Wallpapers.NONE, ) Preview.android.kt 同名のプレビューをまとめる
13. @MustBeDocumented @Retention(AnnotationRetention.BINARY) @Target(AnnotationTarget.ANNOTATION_CLASS, AnnotationTarget.FUNCTION) @Repeatable annotation class Preview( val name: String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, val widthDp: Int = -1, val heightDp: Int = -1, val locale: String = "", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showSystemUi: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT, @Wallpaper val wallpaper: Int = Wallpapers.NONE, ) Preview.android.kt 同名のプレビューをまとめる
14. @MustBeDocumented @Retention(AnnotationRetention.BINARY) @Target(AnnotationTarget.ANNOTATION_CLASS, AnnotationTarget.FUNCTION) @Repeatable annotation class Preview( val name: String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, val widthDp: Int = -1, val heightDp: Int = -1, val locale: String = "", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showSystemUi: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT, @Wallpaper val wallpaper: Int = Wallpapers.NONE, ) Preview.android.kt ComposeをレンダリングするAPI レベル
15. @MustBeDocumented @Retention(AnnotationRetention.BINARY) @Target(AnnotationTarget.ANNOTATION_CLASS, AnnotationTarget.FUNCTION) @Repeatable annotation class Preview( val name: String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, val widthDp: Int = -1, val heightDp: Int = -1, val locale: String = "", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showSystemUi: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT, @Wallpaper val wallpaper: Int = Wallpapers.NONE, ) Preview.android.kt 幅と高さ
16. @MustBeDocumented @Retention(AnnotationRetention.BINARY) @Target(AnnotationTarget.ANNOTATION_CLASS, AnnotationTarget.FUNCTION) @Repeatable annotation class Preview( val name: String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, val widthDp: Int = -1, val heightDp: Int = -1, val locale: String = "", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showSystemUi: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT, @Wallpaper val wallpaper: Int = Wallpapers.NONE, ) Preview.android.kt 言語/地域
17. @MustBeDocumented @Retention(AnnotationRetention.BINARY) @Target(AnnotationTarget.ANNOTATION_CLASS, AnnotationTarget.FUNCTION) @Repeatable annotation class Preview( val name: String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, val widthDp: Int = -1, val heightDp: Int = -1, val locale: String = "", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showSystemUi: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT, @Wallpaper val wallpaper: Int = Wallpapers.NONE, ) Preview.android.kt フォントスケール
18. @MustBeDocumented @Retention(AnnotationRetention.BINARY) @Target(AnnotationTarget.ANNOTATION_CLASS, AnnotationTarget.FUNCTION) @Repeatable annotation class Preview( val name: String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, val widthDp: Int = -1, val heightDp: Int = -1, val locale: String = "", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showSystemUi: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT, @Wallpaper val wallpaper: Int = Wallpapers.NONE, ) Preview.android.kt システムUIの有無 背景色
19. @MustBeDocumented @Retention(AnnotationRetention.BINARY) @Target(AnnotationTarget.ANNOTATION_CLASS, AnnotationTarget.FUNCTION) @Repeatable annotation class Preview( val name: String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, val widthDp: Int = -1, val heightDp: Int = -1, val locale: String = "", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showSystemUi: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT, @Wallpaper val wallpaper: Int = Wallpapers.NONE, ) Preview.android.kt uiMode 夜間モードやTV, VR HEADSETなどが存在する
20. @MustBeDocumented @Retention(AnnotationRetention.BINARY) @Target(AnnotationTarget.ANNOTATION_CLASS, AnnotationTarget.FUNCTION) @Repeatable annotation class Preview( val name: String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, val widthDp: Int = -1, val heightDp: Int = -1, val locale: String = "", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showSystemUi: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT, @Wallpaper val wallpaper: Int = Wallpapers.NONE, ) Preview.android.kt デバイス 組込みのデバイス設定や specによる自由な設定まで
21. @MustBeDocumented @Retention(AnnotationRetention.BINARY) @Target(AnnotationTarget.ANNOTATION_CLASS, AnnotationTarget.FUNCTION) @Repeatable annotation class Preview( val name: String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, val widthDp: Int = -1, val heightDp: Int = -1, val locale: String = "", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showSystemUi: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT, @Wallpaper val wallpaper: Int = Wallpapers.NONE, ) Preview.android.kt ダイナミックカラー Compose 1.4.0↑
22. あらゆる状況を想定する @Previewをカスタムする
23. @Previewをカスタムする 前述したパラメータで様々なプレビューを表現できる よく利用するパターンは使いまわせるようにしたい →カスタムアノテーションを定義してみよう
24. @Preview( name = "light", group = "uiMode", showBackground = true, uiMode = UI_MODE_NIGHT_NO, backgroundColor = 0xFFFFFFFF, ) @Preview( name = "night", group = "uiMode", showBackground = true, uiMode = UI_MODE_NIGHT_YES, backgroundColor = 0xFF1F1F1F, ) annotation class DarkLightPreview DarkLightPreview.kt
25. @DarkLightPreview @Composable private fun SampleComposablePreview() { Text("Hello World") } SampleComposable.kt
26. マルチプレビューテンプレート androidx.compose.ui:ui-tooling-preview 1.6.0-alpha01 以降で いくつかのマルチプレビューテンプレートが追加されている @PreviewScreenSizes @PreviewFontScales @PreviewLightDark @PreviewDynamicColors
27. インタラクティブモード UIに触れてみる
29. インタラクティブモード クリックやユーザー入力の挙動がチェックできる✅ 状態や操作、アニメーションを手軽にテストできる プレビュー同様、変更がリアルタイムで反映される 起動が高速
30. インタラクティブモードの制約 便利な反面、制約もある😓 ・ネットワークにアクセスできない ・ファイルにアクセスできない ・一部のContext APIを利用できない可能性がある
31. インタラクティブモードの使いどき Clickableの範囲チェック paddingやclipしている際のRipple Effectの範囲 ステートフルなコンポーザブルの状態チェック チェックボックスやトグルなどの切り替え ジェスチャー カルーセルの挙動
32. ネットワークが必要なプレビューにどう対 応するか パーミッションの壁を超えろ
33. import coil.compose.AsyncImage @Preview @Composable private fun AsyncImagePreview() { AsyncImage( model = "https://github.com/kobaken0029.png", contentDescription = null, ) } AsyncImagePreview.kt
34. 通信が絡むコンポーザブルをどう扱うか 1. R.drawableを使う 2. Run Previewを使う
35. R.drawableを使う sealed interface ImageDataSource { val data: Any data class Url(override val data: String): ImageDataSource data class File(override val data: File): ImageDataSource data class Drawable(@DrawableRes override val data: Int) : ImageDataSource } ImageDataSource.kt
36. R.drawableを使う fun CustomImage( modifier: Modifier = Modifier, dataSource: ImageDataSource, ) { AsyncImage( modifier = modifier, model = ImageRequest.Builder(LocalContext.current) .data(dataSource.data) .build(), … ) } CustomImage.kt
37. import coil.compose.AsyncImage @Preview @Composable private fun CustomImagePreview() { CustomImage( dataSource = ImageDataSource .Drawable(R.drawable.naiyo) ) } CustomImagePreview.kt
38. Run Previewを使う プレビューをエミュレータや実機で動かす 新しいActivityとしてデプロイされる 同じプロジェクトのコンテキストと権限が共有される
39. import coil.compose.AsyncImage @Preview @Composable private fun AsyncImagePreview() { AsyncImage( model = "https://github.com/kobaken0029.png", contentDescription = null, ) } AsyncImagePreview.kt
40. 快適なプレビュー環境のために 開発体験の向上を目指して
41. 快適なプレビュー環境のために UI開発は反復的なもの プレビューの反映や表示が遅いと開発体験が著しく低下する できる限り高速なプレビュー環境を実現するためにやれることはない か？
42. 快適なプレビュー環境のために プレビューが遅い →プレビュー関数に関連するビルドが遅い →プレビュー関数が配置されているモジュール単位のビルドが遅い ビルド速度の向上 →プレビュー関数が配置されているモジュールのビルド速度向上 →適切なモジュール分割を行い、プレビューの高速化を目指す
43. プレビュー高速化のためのモジュール設計 pixivコミックでは以下のようにfeatureを分割している :feature:hoge:compose コンポーザブルやUiState、プレビュー :feature:hoge:presentation Activity, ViewModelなど
46. プレビュー高速化のためのモジュール設計 詳しくは→をチェック https://www.youtube.com/watch?v=_UUif7UnUFA
47. CMPでのプレビュー所感 commonMainでプレビューできるのか？
48. CMPのプレビューどうなの？ Compose Multiplatform 1.6.0からcommonMainでもプレビューできるよう になった🎉 ※ちなみに2025年9月24日現在の最新バージョンは1.9.0
49. CMPのプレビューどうなの？ ただし使用するのは org.jetbrains.compose.ui.tooling.preview.Preview Android-onlyな開発で利用していたのは androidx.compose.ui.tooling.preview.Preview uiModeやdeviceといったパラメータは使えない😢
50. CMPのプレビューどうなの？ とはいえ、それ以外はJetpack Composeの開発とほぼ同じ体験 インタラクティブモードでclickableのEffectが表示されない androidMainでは従来の@Previewが使える pixivQ開発では画面単位のプレビューはandroidMainで実施
51. まとめ ・LayoutlibによってAndroid Studio上でのプレビューを実現している ・@Previewのパラメータを変更して見た目や振る舞いを変更できる ・fontScale, local, uiMode, etc… ・@Previewをカスタムしたり、マルチプレビューテンプレ使用で効率UP ・Run Previewすることでネットワーク経由の画像表示にも対応可能 ・適切にモジュール分割をしてプレビューを快適に ・CMPでもプレビューは動く（機能が少ない、一部表現できない） ・androidMainでandroidx製の@Previewを利用可能
52. 引用・参照元 ・Jetpack Compose UI App Development Toolkit ・Compose Multiplatform 1.6.0 – リソース、UI テスト、iOS アクセシビリ ティ、および Preview アノテーション | The Kotlin Blog ・PreviewActivityをHackする #Android - Qiita ・Compose駆動開発のためのマルチモジュール化 - Speaker Deck