Re:VIEWで書いた「Compose で Android の edge-to-edge に対応する」をRoo Codeで発表資料にしてもらった

Transcript

1. Re:VIEW で書いた「Compose で Android の edge-to- edge に対応する」を Roo Code で発表資料にしても らった 2025/04/04 tomoya0x00 shibuya.apk#52 1
2. shibuya.apk の発表内容、何にしようかな？ 2
3. Edge to edge opt-out going away 3
4. Edge to edge opt-out going away Android 15 enforced edge-to-edge for apps targeting Android 15 (API level 35), but your app could opt-out by setting R.attr#windowOptOutEdgeToEdgeEnforcement to true. For apps targeting Android 16 (API level 36), R.attr#windowOptOutEdgeToEdgeEnforcement is deprecated and disabled, and your app can't opt-out of going edge-to-edge. https://developer.android.com/about/versions/16/behavior-changes-16 4
5. ちょうど、技術同人誌「U-NEXT TECH STREAM 02」 で「第 3 章 : Compose で Android の edge-to-edge に 対応する」を執筆済みだった 5
6. CM:技術同人誌「U-NEXT TECH STREAM 02」のご紹 介 6
7. CM:技術同人誌「U-NEXT TECH STREAM 02」のご紹 介 「U-NEXT TECH STREAM 02」は技術書典マー ケットにて 無料 で頒布中！ 7
8. どのようにして執筆した内容を発表資料にするか 8
9. どのようにして執筆した内容を発表資料にするか 技術同人誌は Re:VIEW 形式で執筆した 発表資料作成は Markdown で記載できる Marp が手軽でお気に入り 9
10. AI で Re:VIEW 形式から Markdown に変換すれば良い のでは？ 10
11. ちょうど社内で「Roo Code いいよ」とオススメして いる人がいた 11
12. Roo Code って何？ https://github.com/RooVetGit/Roo-Code Roo Code is an AI-powered autonomous coding agent that lives in your editor VS Code の拡張機能で、以前は Roo Cline という名前だった 以前の名前から分かるように、Cline の fork 版 OpenRouter などで API Key を生成して使うか、VS Code LM API 経由で GitHub Copilot 拡張機能が提供するモデルも使える（こちらは experimental） 今回使用したモデルは copilot - claude-3.5-sonnet コード生成だけではなく、コマンド実行してその結果を元に更にコード編集など もしてくれる 12
13. Roo Code で Re:VIEW 形式から Marp 用の Markdown に変換してみる 13
14. 最初のプロンプト "Re:VIEW 記法で記述した android_edge_to_edge.re ファイルを元に 15 分間 LT の資料 を作成して下さい。資料の形式は Marp でお願いします。" ↓ これだけで、本当に Marp が解釈できる Markdown に変換してくれた！（少し間違って いるが画像も参照してくれている） ただし、15 分の LT にしては内容は少ない。 14
15. 発表内容を増やして貰う "15 分 LT にしては短すぎるので、スライドの数を増やして下さい。" ↓ 倍ぐらいの分量になったが、まだ少なめ。 15
16. 具体的に増やして欲しい箇所を指定する "一時的な回避方法について、Android 16 をターゲットにするアプリでは利用できなく なったことについて触れて下さい。参考 URL は下記です。 https://developer.android.com/about/versions/16/behavior-changes-16#edge-to-edge" "edge-to-edge 対応のハマりどころ をすべてスライドに反映してください" などなど 16
17. ！ここから先のスライドは、ほとんど Roo Code が生 成した Markdown そのままです！ 17
18. 自己紹介 U-NEXT Android Engineer X: @tomoya0x00 2024 年は Android mobile/tablet アプリをフル Compose な新アプリに置き換え edge-to-edge 対応で得た知見を共有します 18
19. edge-to-edge とは？ システム UI（ステータスバー、ナビゲーシ ョンバー）の裏にもコンテンツを描画する こと メリット： 画面の有効活用 没入感の向上 ジェスチャーナビゲーションの導入でさら に重要に 19
20. なぜ今対応すべきか？ Android 15 で edge-to-edge が強制される targetSdkVersion = 35 以上で必須に スマートフォンの前面がほぼ画面に より没入感の高いアプリ体験の提供が可能に Android 16 では一時的な回避も不可能に 20
21. Android OS の進化 Android 10: ジェスチャーナビゲーション導入 Android 12: Material You、Dynamic Color Android 13: Predictive Back Gesture Android 14: より洗練されたシステム UI Android 15: edge-to-edge 強制化 Android 16: 回避オプション完全廃止 21
22. 一時的な回避方法 Activity に適用する style に追記： <item name="android:windowOptOutEdgeToEdgeEnforcement">true</item> 注意点： Android 15（targetSdkVersion = 35）でのみ有効 Android 16（targetSdkVersion = 36）では使用不可 edge-to-edge 対応を先送りにするべきではない 早期の正式対応を強く推奨 22
23. 基本的な対応の流れ ① 1. Activity#onCreate で enableEdgeToEdge()を呼ぶ override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) enableEdgeToEdge() setContent { // ... } } 23
24. enableEdgeToEdge()の利点 WindowCompat#setDecorFitsSystemWindows()の簡易化 ステータスバー/ナビゲーションバーの色を自動設定 API Level ごとの考慮を自動化 スムーズなエッジ効果の実現 ワンストップでの基本設定が可能 24
25. enableEdgeToEdge()の注意点 ナビゲーションバーのスタイル指定に注意 auto 以外を指定すると色が固定 3 ボタンナビゲーションでコントラスト低下 回避策： if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) { window.navigationBarColor = android.graphics.Color.TRANSPARENT window.isNavigationBarContrastEnforced = true } 25
26. 基本的な対応の流れ ② 2. AndroidManifest.xml で Activity に設定追加 android:windowSoftInputMode="adjustResize" 3. 各 Composable に対して適切な WindowInsets を指定 Modifier.windowInsetsPadding(WindowInsets.safeDrawing) 26
27. WindowInsets とは？ システム UI の情報をアプリに伝えるためのメカニズム： ステータスバーの高さ ナビゲーションバーの位置と大きさ ディスプレイカットアウトの範囲 IME（ソフトキーボード）の表示状態 ジェスチャーエリアの範囲 27
28. WindowInsets の基礎知識 システム UI に関する情報をアプリに伝え る UI コンポーネントの配置を適切に調整 コンテンツとシステム UI の重なりを防ぐ 28
29. WindowInsets の種類 よく使用する 3 種類： WindowInsets.safeDrawing システム UI でアプリの UI が隠れるのを防ぐ ボタンなどの操作可能な要素に使用 WindowInsets.safeGestures システムジェスチャとの衝突を防ぐ WindowInsets.safeContent 上記 2 つの組み合わせ 29
30. その他の WindowInsets 特定の用途に応じて使い分け： WindowInsets.statusBars WindowInsets.navigationBars WindowInsets.systemBars WindowInsets.ime WindowInsets.displayCutout WindowInsets.mandatorySystemGestures WindowInsets.tappableElement 30
31. WindowInsets の部分適用 ① 指定可能な方向： WindowInsetsSides.Start/End WindowInsetsSides.Top/Bottom WindowInsetsSides.Left/Right WindowInsetsSides.Horizontal/Vertical WindowInsets.safeDrawing.only( WindowInsetsSides.Top + WindowInsetsSides.Horizontal ) 31
32. WindowInsets の部分適用 ② 便利な Modifier： Modifier.windowInsetsStartWidth() Modifier.windowInsetsEndWidth() Modifier.windowInsetsTopHeight() Modifier.windowInsetsBottomHeight() 特定の方向の WindowInsets のみを適用可能 32
33. WindowInsets の自動消費 親コンポーネントで消費された WindowInsets は子には適用されない： Box( modifier = Modifier .background(Color.Black) .fillMaxSize() .windowInsetsPadding(WindowInsets.safeDrawing) ) { Spacer( modifier = Modifier .background(Color.Gray) .fillMaxSize() .windowInsetsPadding(WindowInsets.safeDrawing) ) } 33
34. WindowInsets の自動消費の例 実行結果：子の Spacer には親の Box で消費された WindowInsets が適用されない 34
35. WindowInsets の部分消費 親で一部の WindowInsets を消費した例： Box( modifier = Modifier .windowInsetsPadding(WindowInsets.statusBars) ) { Box( modifier = Modifier .windowInsetsPadding(WindowInsets.systemBars) ) { // statusBarsは適用されない // navigationBarsのみ適用される } } 35
36. WindowInsets の手動消費 consumeWindowInsets を使用して明示的に消 費を指定： Modifier.consumeWindowInsets( WindowInsets.safeDrawing.only(WindowInsetsSides.Top) ) 36
37. Material 3 での対応 ① 以下のコンポーネントは自動で WindowInsets 対応： BottomAppBar TopAppBar（各種バリエーション） NavigationBar NavigationRail ModalBottomSheet など 37
38. Material 3 での対応 ② Scaffold の注意点： デフォルトで WindowInsets.systemBars が指定 全画面表示が必要な場合は明示的に指定が必要 Scaffold( contentWindowInsets = WindowInsets(0.dp) ) { // 全画面表示可能 } 38
39. Material 2 での対応 ① TopAppBar の実装例： TopAppBar( windowInsets = WindowInsets.safeDrawing.only( WindowInsetsSides.Top + WindowInsetsSides.Horizontal ), title = { Text("TopAppBar") } ) 39
40. Material 2 での対応 ② BottomNavigation の実装例： BottomNavigation( modifier = Modifier.fillMaxWidth(), windowInsets = WindowInsets.safeDrawing.only( WindowInsetsSides.Horizontal + WindowInsetsSides.Bottom ) ) { // ナビゲーションアイテム } 40
41. Material 2 での対応 ③ NavigationRail の実装例： NavigationRail( modifier = Modifier.fillMaxHeight(), windowInsets = WindowInsets.safeDrawing.only( WindowInsetsSides.Vertical + WindowInsetsSides.Start ) ) { // ナビゲーションアイテム } 41
42. ハマりどころ ①：ステータスバーの透過 問題： ステータスバーが完全な透明ではなく半透明になる 原因： <item name="android:windowTranslucentStatus">true</item> 解決策： <item name="android:windowTranslucentStatus">false</item> 42
43. ハマりどころ ②：LazyColumn リストの最後のアイテムが操作不能になる問題： LazyColumn { items(items) { item -> ListItem(item) } item { Spacer( modifier = Modifier .fillMaxWidth() .windowInsetsPadding( WindowInsets.safeDrawing.only( WindowInsetsSides.Bottom ) ) .focusable() ) } } 43
44. TextField 付き LazyColumn 推奨実装： LazyColumn { items(items) { item -> TextField( value = item.text, onValueChange = { /* ... */ }, modifier = Modifier.fillMaxWidth() ) } item { Spacer( modifier = Modifier .windowInsetsPadding( WindowInsets.ime.add( WindowInsets.safeDrawing.only( WindowInsetsSides.Bottom ) ) ) .focusable() ) 44
45. ハマりどころ ③：二重適用 同じ階層での重複適用の問題： 45
46. 二重適用の解決策 ① consumeWindowInsets の使用： Column(modifier = Modifier.fillMaxSize()) { TopAppBar( windowInsets = WindowInsets.safeDrawing.only( WindowInsetsSides.Top + WindowInsetsSides.Horizontal ), title = { Text("TopAppBar") } ) Box( modifier = Modifier .consumeWindowInsets( WindowInsets.safeDrawing.only( WindowInsetsSides.Top ) ) .windowInsetsPadding(WindowInsets.safeDrawing) ) { // コンテンツ 46
47. 二重適用の解決策 ② 必要な WindowInsets のみを指定： Column(modifier = Modifier.fillMaxSize()) { TopAppBar( windowInsets = WindowInsets.safeDrawing.only( WindowInsetsSides.Top + WindowInsetsSides.Horizontal ), title = { Text("TopAppBar") } ) Box( modifier = Modifier .windowInsetsPadding( WindowInsets.safeDrawing.only( WindowInsetsSides.Bottom + WindowInsetsSides.Horizontal ) ) ) { // コンテンツ 47
48. ハマりどころ ④：WindowInsets IgnoringVisibility 問題点： API Level 30 未満で正しく動作しない 古い Android ではナビゲーションバーの高さが取得できない // 安全な使用方法 Modifier.windowInsetsPadding( if (VERSION.SDK_INT >= VERSION_CODES.R) { WindowInsets.systemBarsIgnoringVisibility } else { WindowInsets.systemBars } ) 48
49. IgnoringVisibility の問題点 API Level 29 以下では： 正確な値が取得できない 特に IME で問題が顕著 API Level 23 未満では全く動作しない ナビゲーションバーの高さが 0 になる可能性 実装時は必ず API Level 依存を考慮する 49
50. ハマりどころ ⑤：SplashScreen 問題： AndroidX SplashScreen 1.0.1 で setOnExitAnimationListener()を呼ぶと edge-to- edge が壊れる ステータスバーの透過が取り消される 対策： SplashScreen#setOnExitAnimationListener()の使用を避ける 1.2.0-alpha01 以降で修正予定 50
51. ハマりどころ ⑥：IME と WindowInsets 問題： IME に関する WindowInsets が正しく適用されない 原因と解決策： AndroidManifest.xml での設定漏れ android:windowSoftInputMode="adjustResize" 特に古い Android（Android 7 以下）で問題が顕著 51
52. IME 対応のベストプラクティス 1. AndroidManifest.xml の設定 android:windowSoftInputMode="adjustResize" 2. WindowInsets の適切な処理 WindowInsets.ime.add( WindowInsets.safeDrawing ) 3. API Level 依存の考慮 52
53. ハマりどころ ⑦：消費済み WindowInsets 問題： 親 Composable で消費済みの WindowInsets が子 Composable に再度適用される 解決策： 1. asPaddingValues()の使用を避ける 2. Modifer.windowInsetsPadding を使用 3. MutableWindowInsets と Modifier.onConsumedWindowInsetsChanged を組み合わ せる 53
54. Surface での実装例 注：Scaffold 内部ではほぼ同じ事をやっています by tomoya0x00 @Composable fun MySurface( content: @Composable (PaddingValues) -> Unit ) { val consumedWindowInsets = remember { MutableWindowInsets() } Surface( modifier = Modifier.onConsumedWindowInsetsChanged { consumedWindowInsets.insets = it }, content = { paddingValues -> Box( modifier = Modifier.windowInsetsPadding( WindowInsets.safeDrawing .exclude(consumedWindowInsets.insets) ) ) { content(paddingValues) } 54
55. より進んだ対応例 ① スクロールに応じて完全に隠れる TopAppBar NestedScrollConnection を活用 コンテンツの一覧性向上 ユーザーの没入感アップ 55
56. スクロール TopAppBar の実装 val scrollBehavior = remember { TopAppBarDefaults.exitUntilCollapsedScrollBehavior() } Scaffold( modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection), topBar = { TopAppBar( title = { Text("Scroll to Hide") }, scrollBehavior = scrollBehavior ) } ) { padding -> LazyColumn( modifier = Modifier.padding(padding) ) { // リストアイテム } } 56
57. より進んだ対応例 ② Navigation rail の導入： 画面幅に応じた適応的なナビゲーション 縦方向スクロールとの相性が良い edge-to-edge との組み合わせで効果的 57
58. Navigation rail 実装例 @Composable fun AdaptiveNavigation( windowSizeClass: WindowSizeClass, content: @Composable () -> Unit ) { if (windowSizeClass.widthSizeClass >= WindowWidthSizeClass.Medium) { Row { NavigationRail( windowInsets = WindowInsets.safeDrawing.only( WindowInsetsSides.Vertical + WindowInsetsSides.Start ) ) { // ナビゲーションアイテム } content() } } else { // Bottom Navigation使用 } } 58
59. より進んだ対応例 ③ テーブルトップモードの最適化： フォルダブル端末での表示改善 ディスプレイカットアウトの考慮 より大きな表示領域の確保 59
60. テーブルトップモードの実装 ① ディスプレイカットアウト対応： Surface( modifier = Modifier.fillMaxSize(), windowInsets = if (isTableTopMode) { WindowInsets(0.dp) // カットアウトを無視 } else { WindowInsets.safeDrawing.only( WindowInsetsSides.Horizontal ) } ) { // コンテンツ } 60
61. テーブルトップモードの実装 ② 画面分割の考慮： Column(modifier = Modifier.fillMaxSize()) { Box( modifier = Modifier .weight(1f) .fillMaxWidth() ) { // ビデオプレイヤー } Box( modifier = Modifier .height(240.dp) .fillMaxWidth() .windowInsetsPadding( WindowInsets.safeDrawing.only( WindowInsetsSides.Bottom ) ) ) { // コントローラー 61
62. より進んだ対応例 ④ Desktop windowing 対応： Windows/Mac ライクなウィンドウ表示 ヘッダーバーの透明化 システム UI との統合 62
63. Desktop windowing 実装 ヘッダーバーの透明化： if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.VANILLA_ICE_CREAM) { window.insetsController?.setSystemBarsAppearance( APPEARANCE_TRANSPARENT_CAPTION_BAR_BACKGROUND, APPEARANCE_TRANSPARENT_CAPTION_BAR_BACKGROUND ) } 63
64. まとめ Android 15 で edge-to-edge 対応が必須に Android 16 では回避オプションも無効に WindowInsets の適切な管理が重要 Material 3 利用で楽に対応可能 ハマりどころに注意 より進んだ対応で UX を向上 書籍で更に詳しい解説をご覧いただけます！ 64
65. ！ここまで、ほとんど Roo Code が生成したスライ ド！ 65
66. Roo Code で Re:VIEW から発表資料をつくってみて (1/2) Marp 自体については説明してないのに、一発で Markdown 変換してくれてすごい 曖昧な指示（例：15 分 LT の発表資料にして）だと、アウトプットは曖昧になる もっと相談しながらやったり、具体的な指示を出した方が良い コードのスライドが一部見切れていたり、画像のチョイスが微妙だったりした 具体的に指示したり、手作業で調整した Markdown が複雑になってくると、修正に失敗する事もある 66
67. Roo Code で Re:VIEW から発表資料をつくってみて (2/2) 元の Re:VIEW ファイルには存在しない記述もいくつかスライドに追加されている ざっと確認した限りは正しそう 本の執筆時にも相談しながらやってみると、自分の知らない知識を得られる かも ハルシネーションには注意が必要 便利なので、有効活用していきたい 67
68. ご静聴ありがとうございました！ 68