Compose で Android/iOS アプリを作る

DroidKaigi2023 Day.3 15:00-15:40 の発表スライドです。

Transcript

1. Copyright 2023 m.coder All Rights Reserved. 1 Jetpack Compose で Android/iOS アプリを作る m.coder
2. Copyright 2023 m.coder All Rights Reserved. 2 自己紹介 m.coder ( @_m_coder ) フラー株式会社所属 Androidテックリード DroidKaigi 2021, 2022 に続き3回目の登壇ですが、 オフライン登壇は初めてです 今年は DroidKaigi ボランティアスタッフにも 参加しています
3. Copyright 2023 m.coder All Rights Reserved. 3 普段 iPhone 使いの人〜？　
4. Copyright 2023 m.coder All Rights Reserved. 4 普段 iPhone 使いです
5. Copyright 2023 m.coder All Rights Reserved. 5 自分で作ったアプリを 普段の端末で動かせないのが少しさみしい
6. Copyright 2023 m.coder All Rights Reserved. 6 そこで Compose for iOS
7. Copyright 2023 m.coder All Rights Reserved. 7 Compose を使って Android と iOS 両方のアプリを作ってみよう！
8. Copyright 2023 m.coder All Rights Reserved. 8 Compose for iOS とは？ • Compose Multiplatform の中のフレームワークの一つ • Compose を使って iOS の UI を構築できる
9. Copyright 2023 m.coder All Rights Reserved. 9 Compose Multiplatform ?
10. Copyright 2023 m.coder All Rights Reserved. 10 Compose Multiplatform Compose で様々なプラットフォームの UIを構築しようという試み https://www.jetbrains.com/ja-jp/lp/compose-multiplatform/
11. Copyright 2023 m.coder All Rights Reserved. 11 Compose Multiplatform Compose で様々なプラットフォームの UIを構築しようという試み https://www.jetbrains.com/ja-jp/lp/compose-multiplatform/
12. Copyright 2023 m.coder All Rights Reserved. 12 UI構築は Compose →ビジネスロジックは？
13. Copyright 2023 m.coder All Rights Reserved. 13 KMP(Kotlin Multiplatform) を使う
14. Copyright 2023 m.coder All Rights Reserved. 14 KMP とは？ • Kotlin Multiplatform の略称 • Kotlin で様々なプラットフォームのロジックを共通化しよう という取り組み • 【余談】KMM (Kotlin Multiplatform Mobile)という呼び方 もあったが、公式がKMPを推奨し始めた
15. Copyright 2023 m.coder All Rights Reserved. 15 Compose Multiplatform + KMP = ぜんぶ Kotlin で書ける！
16. Copyright 2023 m.coder All Rights Reserved. 16 Jetpack Compose で Android/iOS アプリを作る
17. Copyright 2023 m.coder All Rights Reserved. 17 Compose Multiplatform Compose で様々なプラットフォームの UIを構築しようという試み https://www.jetbrains.com/ja-jp/lp/compose-multiplatform/
18. Copyright 2023 m.coder All Rights Reserved. 18 つまり、こう Jetpack Compose → Android用 Compose for iOS → iOS用
19. Copyright 2023 m.coder All Rights Reserved. 19 Jetpack Compose で Android/iOS アプリを作る
20. 01 | Compose Multiplatform のセットアップ 02 | サンプルアプリをいじってみる 03 | API通信するアプリを構築してみる アジェンダ Copyright 2023 m.coder All Rights Reserved. アジェンダ 20
21. Copyright 2023 m.coder All Rights Reserved. 21 話すこと・話さないこと • 話すこと ◦ Compose を使った Android/iOS のアプリ作成の始め方 ◦ Compose Multiplatform + KMP を使った簡単なアプリ作り ◦ Compose for iOS でハマった部分 • 話さないこと ◦ 細かいアーキテクチャや状態管理の設計などの話 ◦ Compose for Desktop / Compose for Web の話
22. Copyright 2023 m.coder All Rights Reserved. 22 注意事項 Compose for iOS is in Alpha. →破壊的な変更が入る可能性が 大いにあります
23. Copyright 2023 m.coder All Rights Reserved. 23 Compose Multiplatformの セットアップ
24. Copyright 2023 m.coder All Rights Reserved. 24 Compose Multiplatform Wizard というサイトがあります https://terrakok.github.io/Compose-Multiplatform-Wizard/
25. Copyright 2023 m.coder All Rights Reserved. 25
26. Copyright 2023 m.coder All Rights Reserved. 26 今回はテンプレートリポジトリを使います https://github.com/JetBrains/compose-multiplatform-ios-an droid-template
27. Copyright 2023 m.coder All Rights Reserved. 27
28. Copyright 2023 m.coder All Rights Reserved. % brew install kdoctor 28 環境構築 Homebrew を使って kdoctor を入れる
29. Copyright 2023 m.coder All Rights Reserved. % brew install kdoctor % kdoctor 29 環境構築 Homebrew を使って kdoctor を入れる ターミナルで kdoctor を実行する
30. Copyright 2023 m.coder All Rights Reserved. Environment diagnose (to see all details, use -v option): [✓] Operation System [✓] Java [✓] Android Studio [✓] Xcode [✓] Cocoapods Conclusion: ✓ Your system is ready for Kotlin Multiplatform Mobile development! 30 環境構築 環境が整っていれば全てに ✅がつく
31. Copyright 2023 m.coder All Rights Reserved. Environment diagnose (to see all details, use -v option): [✓] Operation System [✓] Java [✓] Android Studio [✓] Xcode [✓] Cocoapods Conclusion: ✓ Your system is ready for Kotlin Multiplatform Mobile development! 31 環境構築 環境が整っていれば全てに ✅がつく • 比較的新しい MacOS マシン ◦ Venturaならいける • JDK ◦ 11以上ならおそらくOK • Android Studio ◦ 最新の安定版 ◦ Kotlin Multiplatform Mobile プラグイ ンのインストール • Xcode ◦ 最新の安定版ならおそらく OK • CocoaPods ◦ 最新ならおそらくOK
32. Copyright 2023 m.coder All Rights Reserved. Environment diagnose (to see all details, use -v option): [✓] Operation System [✓] Java [✓] Android Studio [✓] Xcode [✓] Cocoapods Conclusion: ✓ Your system is ready for Kotlin Multiplatform Mobile development! 32 環境構築 環境が整っていれば全てに ✅がつく • 比較的新しい MacOS マシン ◦ Venturaならいける • JDK ◦ 11以上ならおそらくOK • Android Studio ◦ 最新の安定版 ◦ Kotlin Multiplatform Mobile プラグイ ンのインストール • Xcode ◦ 最新の安定版ならおそらく OK • CocoaPods ◦ 最新ならおそらくOK
33. Copyright 2023 m.coder All Rights Reserved. 33 環境構築 • Kotlin Multiplatform Mobile プラグインのインストール ◦ Android Studio の Settings > Plugins > Marketplace からサーチバーに `Kotlin Multiplatform Mobile` と入力して検索 • Xcodeのインストール ◦ https://developer.apple.com/download/applications/ からダウンロード ◦ 14.3.1が安定版 (2023/08/16時点) • CocoaPodsのインストール ◦ Rubyをインストール ◦ ターミナルで `sudo gem install cocoapods` を入力しセットアップ
34. Copyright 2023 m.coder All Rights Reserved. 34 サンプルアプリをいじってみる
35. Copyright 2023 m.coder All Rights Reserved. 35 ひとまずRunしてみる
36. Copyright 2023 m.coder All Rights Reserved. 36
37. Copyright 2023 m.coder All Rights Reserved. 37 Android iOS
38. Copyright 2023 m.coder All Rights Reserved. 38 サンプルアプリをいじってみる ・shared.commonMain …共通コード ・shared.androidMain …Android用の Kotlin コー ド ・shared.iosMain …iOS用の Kotlin コード
39. Copyright 2023 m.coder All Rights Reserved. @OptIn(ExperimentalResourceApi::class) @Composable fun App() { MaterialTheme { var greetingText by remember { mutableStateOf("Hello, World!") } var showImage by remember { mutableStateOf(false) } Column(...) { Button(onClick = { greetingText = "Hello, ${getPlatformName()}" showImage = !showImage }) { Text(greetingText) } AnimatedVisibility(showImage) { Image( painterResource("compose-multiplatform.xml"), null ) } } } } expect fun getPlatformName(): String 39 サンプルアプリをいじってみる App.kt の実装コード
40. Copyright 2023 m.coder All Rights Reserved. @OptIn(ExperimentalResourceApi::class) @Composable fun App() { MaterialTheme { var greetingText by remember { mutableStateOf("Hello, World!") } var showImage by remember { mutableStateOf(false) } Column(...) { Button(onClick = { greetingText = "Hello, ${getPlatformName()}" showImage = !showImage }) { Text(greetingText) } AnimatedVisibility(showImage) { Image( painterResource("compose-multiplatform.xml"), null ) } } } } expect fun getPlatformName(): String 40 サンプルアプリをいじってみる App.kt の実装コード
41. Copyright 2023 m.coder All Rights Reserved. @OptIn(ExperimentalResourceApi::class) @Composable fun App() { MaterialTheme { var greetingText by remember { mutableStateOf("Hello, World!") } var showImage by remember { mutableStateOf(false) } Column(...) { Button(onClick = { greetingText = "Hello, ${getPlatformName()}" showImage = !showImage }) { Text(greetingText) } AnimatedVisibility(showImage) { Image( painterResource("compose-multiplatform.xml"), null ) } } } } expect fun getPlatformName(): String 41 サンプルアプリをいじってみる App.kt の実装コード
42. Copyright 2023 m.coder All Rights Reserved. ---- App.kt expect fun getPlatformName(): String ---- main.android.kt actual fun getPlatformName(): String = "Android" ---- main.ios.kt actual fun getPlatformName(): String = "iOS" 42 サンプルアプリをいじってみる expect fun…複数プラットフォームで共通で使用す る関数の宣言 actual fun …各プラットフォームでの実際の関数の 動作
43. Copyright 2023 m.coder All Rights Reserved. ---- App.kt expect fun getPlatformName(): String ---- main.android.kt actual fun getPlatformName(): String = "Android" ---- main.ios.kt actual fun getPlatformName(): String = "iOS" 43 サンプルアプリをいじってみる expect fun…複数プラットフォームで共通で使用す る関数の宣言 actual fun …各プラットフォームでの実際の関数の 動作
44. Copyright 2023 m.coder All Rights Reserved. 44 サンプルアプリをいじってみる expect fun と actual fun を使って Android と iOS で 違う画像を表示してみよう！ android.png ios.png
45. Copyright 2023 m.coder All Rights Reserved. ---- App.kt expect fun getImageResource(): String ---- main.android.k t actual fun getImageResource(): String = "android.png" ---- main.ios.kt actual fun getImageResource(): String = "ios.png" 45 サンプルアプリをいじってみる expect fun getImageResource() を宣言し、actual fun に実装を書く
46. Copyright 2023 m.coder All Rights Reserved. @OptIn(ExperimentalResourceApi::class) @Composable fun App() { MaterialTheme { var greetingText by remember { mutableStateOf("Hello, World!") } var showImage by remember { mutableStateOf(false) } Column(...) { Button(onClick = { greetingText = "Hello, ${getPlatformName()}" showImage = !showImage }) { Text(greetingText) } AnimatedVisibility(showImage) { Image( painterResource(getImageResource()), null ) } } } } expect fun getPlatformName(): String expect fun getImageResource(): String 46 サンプルアプリをいじってみる Image に指定しているファイルを getImageResource() に差し替える
47. Copyright 2023 m.coder All Rights Reserved. 47 ビルドしてみる
48. Copyright 2023 m.coder All Rights Reserved. 48 Android iOS
49. Copyright 2023 m.coder All Rights Reserved. 49 Android iOS リソースが見つからない
50. Copyright 2023 m.coder All Rights Reserved. 50 https://github.com/JetBrains/compose-multiplatform ↓のサンプルプロジェクトだと 動いてるのでなにもわからない 誰か教えてください
51. Copyright 2023 m.coder All Rights Reserved. 51 気を取り直して、 リソース管理方法を変えてみる （文字列の直指定やめたい）
52. Copyright 2023 m.coder All Rights Reserved. 52 moko-resources を導入する https://github.com/icerockdev/moko-resources
53. Copyright 2023 m.coder All Rights Reserved. buildscript { repositories { gradlePluginPortal() } dependencies { classpath("dev.icerock.moko:resources-generator:0.23.0") } } 53 moko-resources を導入する プロジェクトルートの build.gradle.kts に moko-resources を追加する
54. Copyright 2023 m.coder All Rights Reserved. plugins { … id("dev.icerock.mobile.multiplatform-resources") } kotlin { … sourceSets { val commonMain by getting { dependencies { api("dev.icerock.moko:resources:0.23.0") api("dev.icerock.moko:resources-compose:0.23.0") } } multiplatformResources { multiplatformResourcesPackage = "com.myapplication.common" } 54 moko-resources を導入する shared 内の build.gradle.kts に moko-resources の依存を追加する
55. Copyright 2023 m.coder All Rights Reserved. plugins { … id("dev.icerock.mobile.multiplatform-resources") } kotlin { … sourceSets { val commonMain by getting { dependencies { api("dev.icerock.moko:resources:0.23.0") api("dev.icerock.moko:resources-compose:0.23.0") } } multiplatformResources { multiplatformResourcesPackage = "com.myapplication.common" } 55 moko-resources を導入する shared 内の build.gradle.kts に moko-resources の依存を追加する multiplatformResourcesPackage にリソース読み 込み時に指定するパッケージ名を入力する
56. Copyright 2023 m.coder All Rights Reserved. 56 moko-resources を導入する commonMain.resources フォルダ内に MR.images フォルダを作成する 画像サイズごとに{ファイル名}@1x.png のように命 名する（iOS方式）
57. Copyright 2023 m.coder All Rights Reserved. 57 moko-resources を導入する Xcodeの Build Phases で New Run Script Phase を選ぶ
58. Copyright 2023 m.coder All Rights Reserved. 58 moko-resources を導入する リソースコピー用の Shell Script を記述する https://github.com/icerockdev/moko-resources #with-orgjetbrainskotlinnativecocoapods
59. Copyright 2023 m.coder All Rights Reserved. import com.myapplication.common.MR import dev.icerock.moko.resources.compose.painterResource Image( painterResource(MR.images.android), null ) 59 moko-resources を導入する ビルドすると MR.images.{ファイル名} でリソース ファイルにアクセス可能になる
60. Copyright 2023 m.coder All Rights Reserved. import com.myapplication.common.MR import dev.icerock.moko.resources.compose.painterResource Image( painterResource(MR.images.android), null ) 60 moko-resources を導入する ビルドすると MR.images.{ファイル名} でリソース ファイルにアクセス可能になる moko-resource-compose プラグインの painterResource を使うと MR.images リソースを 読み込める
61. Copyright 2023 m.coder All Rights Reserved. ---- App.kt expect fun getImageResource(): ImageResource ---- main.android.kt import com.myapplication.common.MR actual fun getImageResource(): ImageResource = MR.images.android ---- main.ios.kt import com.myapplication.common.MR actual fun getImageResource(): ImageResource = MR.images.ios 61 サンプルアプリをいじってみる expect fun getImageResource() を宣言し、actual fun に実装を書く
62. Copyright 2023 m.coder All Rights Reserved. ---- App.kt expect fun getImageResource(): ImageResource ---- main.android.kt import com.myapplication.common.MR actual fun getImageResource(): ImageResource = MR.images.android ---- main.ios.kt import com.myapplication.common.MR actual fun getImageResource(): ImageResource = MR.images.ios 62 サンプルアプリをいじってみる expect fun getImageResource() を宣言し、actual fun に実装を書く ImageResource 型を返す関数に書き換える
63. Copyright 2023 m.coder All Rights Reserved. import dev.icerock.moko.resources.compose.painterResource @OptIn(ExperimentalResourceApi::class) @Composable fun App() { MaterialTheme { var greetingText by remember { mutableStateOf("Hello, World!") } var showImage by remember { mutableStateOf(false) } Column(...) { Button(onClick = { greetingText = "Hello, ${getPlatformName()}" showImage = !showImage }) { Text(greetingText) } AnimatedVisibility(showImage) { Image( painterResource(getImageResource()), null ) } } } } expect fun getPlatformName(): String expect fun getImageResource(): String 63 サンプルアプリをいじってみる painterResource を標準の compose のものから moko-resource のものに差し替える
64. Copyright 2023 m.coder All Rights Reserved. 64 Android iOS
65. Copyright 2023 m.coder All Rights Reserved. 65 Android iOS
66. Copyright 2023 m.coder All Rights Reserved. 66 API通信するアプリを 構築してみる
67. Copyright 2023 m.coder All Rights Reserved. 67 サンプルリポジトリ https://github.com/nanaten/compose-for-ios-sample
68. Copyright 2023 m.coder All Rights Reserved. 68
69. Copyright 2023 m.coder All Rights Reserved. 69 Cat API 🐱 https://thecatapi.com/
70. Copyright 2023 m.coder All Rights Reserved. 70 Dog API 🐶 https://dog.ceo/dog-api/
71. Copyright 2023 m.coder All Rights Reserved. 71 API通信するアプリを構築してみる • 仕組みづくり ◦ ネットワーク上の画像を読み込めるようにする ◦ API通信部分を構築する • UI構築 ◦ UIを作成する ◦ 画面遷移処理を実装する ◦ 状態ごとにUIを切り替える ◦ AppBarを追加する
72. Copyright 2023 m.coder All Rights Reserved. 72 • 仕組みづくり ◦ ネットワーク上の画像を読み込めるようにする ◦ API通信部分を構築する • UI構築 ◦ UIを作成する ◦ 画面遷移処理を実装する ◦ 状態ごとにUIを切り替える ◦ AppBarを追加する
73. Copyright 2023 m.coder All Rights Reserved. 73 Kamelを使う https://github.com/Kamel-Media/Kamel
74. Copyright 2023 m.coder All Rights Reserved. KamelImage( resource = asyncPainterResource("{画像URL}"), contentDescription = null, ) 74 ネットワーク上の画像を読み込めるようにする 使い方例
75. Copyright 2023 m.coder All Rights Reserved. 75 Ktor に依存しているので、 Ktor のセットアップも必要 https://ktor.io/
76. Copyright 2023 m.coder All Rights Reserved. 76 Ktor = ネットワーク通信用のライブラリ 100% Kotlin 製なので KMP で使われる
77. Copyright 2023 m.coder All Rights Reserved. sourceSets { val commonMain by getting { dependencies { implementation("media.kamel:kamel-image:0.7.1") } } } 77 Kamelのセットアップ shared の build.gradle に Kamel の依存関係を追 加
78. Copyright 2023 m.coder All Rights Reserved. sourceSets { val commonMain by getting { dependencies { … implementation("io.ktor:ktor-client-core:$ktorVersion") } } val androidMain by getting { dependencies { … api("io.ktor:ktor-client-okhttp:$ktorVersion") } } val iosX64Main by getting val iosArm64Main by getting val iosSimulatorArm64Main by getting val iosMain by creating { dependencies { … implementation("io.ktor:ktor-client-darwin:$ktorVersion") } } } 78 Ktorのセットアップ core クライアントとプラットフォームごとのエンジン を依存関係に追加する
79. Copyright 2023 m.coder All Rights Reserved. sourceSets { val commonMain by getting { dependencies { … implementation("io.ktor:ktor-client-core:$ktorVersion") } } val androidMain by getting { dependencies { … api("io.ktor:ktor-client-okhttp:$ktorVersion") } } val iosX64Main by getting val iosArm64Main by getting val iosSimulatorArm64Main by getting val iosMain by creating { dependencies { … implementation("io.ktor:ktor-client-darwin:$ktorVersion") } } } 79 Ktorのセットアップ core クライアントとプラットフォームごとのエンジン を依存関係に追加する Android…OkHttp iOS…Darwin
80. Copyright 2023 m.coder All Rights Reserved. // エンジン指定（指定したエンジンを使用） val client = HttpClient(OkHttp) // エンジン指定なし（各プラットフォームに指定したエンジンを使用） val client = HttpClient() 80 Ktorのセットアップ HttpClient 生成時にコンストラクタを指定しない場 合、各プラットフォームに設定したエンジンがデフォ ルトで使われる
81. Copyright 2023 m.coder All Rights Reserved. @OptIn(ExperimentalResourceApi::class) @Composable fun App() { MaterialTheme { var greetingText by remember { mutableStateOf("Hello, World!") } var showImage by remember { mutableStateOf(false) } Column(...) { Button(onClick = { greetingText = "Hello, ${getPlatformName()}" showImage = !showImage }) { Text(greetingText) } AnimatedVisibility(showImage) { KamelImage( asyncPainterResource("https://placehold.jp/150x150.png"), null, ) } } } } 81 ネットワーク上の画像を読み込めるようにする Image を KamelImage に差し替え、読み込みたい 画像のURLを指定する
82. Copyright 2023 m.coder All Rights Reserved. // マニフェストの設定を忘れずに！ <uses-permission android:name="android.permission.INTERNET" /> 82 ネットワーク上の画像を読み込めるようにする Android の方は AndroidManifest の INTERNET パーミッションをちゃんと設定してあげる （KMPでも必要なんだね）
83. Copyright 2023 m.coder All Rights Reserved. 83 Android iOS
84. Copyright 2023 m.coder All Rights Reserved. 84 • 仕組みづくり ◦ ネットワーク上の画像を読み込めるようにする ◦ API通信部分を構築する • UI構築 ◦ UIを作成する ◦ 画面遷移処理を実装する ◦ 状態ごとにUIを切り替える ◦ AppBarを追加する
85. Copyright 2023 m.coder All Rights Reserved. 85 さっきセットアップした Ktor を使えるから楽々！ (フラグ)
86. Copyright 2023 m.coder All Rights Reserved. val client = HttpClient() val response = client.get { url { protocol = URLProtocol.HTTPS host = "api.thecatapi.com" path("v1/images/search") parameters.append("api_key", "{YOUR_API_KEY}") parameters.append("has_breed", "1") parameters.append("limit", "20") } } 86 APIClient の実装 Ktor の API リクエスト方法
87. Copyright 2023 m.coder All Rights Reserved. val client = HttpClient() val response = client.get { url { protocol = URLProtocol.HTTPS host = "api.thecatapi.com" path("v1/images/search") parameters.append("api_key", "{YOUR_API_KEY}") parameters.append("has_breed", "1") parameters.append("limit", "20") } } 87 APIClient の実装 Ktor の API リクエスト方法 1. HttpClient インスタンス生成
88. Copyright 2023 m.coder All Rights Reserved. val client = HttpClient() val response = client.get { url { protocol = URLProtocol.HTTPS host = "api.thecatapi.com" path("v1/images/search") parameters.append("api_key", "{YOUR_API_KEY}") parameters.append("has_breed", "1") parameters.append("limit", "20") } } 88 APIClient の実装 Ktor の API リクエスト方法 1. HttpClient インスタンス生成 2. client.get でリクエスト
89. Copyright 2023 m.coder All Rights Reserved. val client = HttpClient() val response = client.get { url { protocol = URLProtocol.HTTPS host = "api.thecatapi.com" path("v1/images/search") parameters.append("api_key", "{YOUR_API_KEY}") parameters.append("has_breed", "1") parameters.append("limit", "20") } } 89 APIClient の実装 Ktor の API リクエスト方法 1. HttpClient インスタンス生成 2. client.get でリクエスト 3. アクセス先の url 情報を指定
90. Copyright 2023 m.coder All Rights Reserved. 90 API通信するアプリを構築してみる • 問題点がいろいろ ◦ JSONのパースをしてくれない ◦ リクエスト時に毎回ホスト名やパスの文字列を手打ち
91. Copyright 2023 m.coder All Rights Reserved. 91 API通信するアプリを構築してみる • 問題点がいろいろ ◦ JSONのパースをしてくれない ▪ ContentNegotiation プラグインを使う ◦ リクエスト時に毎回ホスト名やパスの文字列を手打ち ▪ Resource プラグインを使う
92. Copyright 2023 m.coder All Rights Reserved. 92 API通信するアプリを構築してみる • 問題点がいろいろ ◦ JSONのパースをしてくれない ▪ ContentNegotiation プラグインを使う ◦ リクエスト時に毎回ホスト名やパスの文字列を手打ち ▪ Resource プラグインを使う
93. Copyright 2023 m.coder All Rights Reserved. ---- projectRoot の build.gradle.kts plugins { kotlin("multiplatform").apply(false) kotlin("plugin.serialization") version "1.8.20" } buildscript { dependencies { classpath(kotlin("serialization", version = kotlinVersion)) } } 93 ContentNegotiation の導入 ContentNegotiation = シリアライズ・デシリアライズ をサポートするプラグイン https://ktor.io/docs/serialization-client.html 今回は kotlinx.serialization と併せて使う
94. Copyright 2023 m.coder All Rights Reserved. ---- shared の build.gradle.kts plugins { id("kotlinx-serialization") } sourceSets { val commonMain by getting { implementation("io.ktor:ktor-client-content-negotiation:$kt orVersion") implementation("io.ktor:ktor-serialization-kotlinx-json:$kt orVersion") implementation("org.jetbrains.kotlinx:kotlinx-serialization -json:1.5.1") // kotlinx.serialization } } 94 ContentNegotiation の導入 ContentNegotiation = シリアライズ・デシリアライズ をサポートするプラグイン https://ktor.io/docs/serialization-client.html 今回は kotlinx.serialization と併せて使う ContentNegotiation と kotlinx.serialization をセッ トアップ
95. Copyright 2023 m.coder All Rights Reserved. val client = HttpClient { install(ContentNegotiation) { json( Json { prettyPrint = true isLenient = true ignoreUnknownKeys = true } ) } } 95 ContentNegotiation の導入 Ktor の Httpクライアントに ContentNegotiation を インストールする
96. Copyright 2023 m.coder All Rights Reserved. val client = HttpClient { install(ContentNegotiation) { json( Json { prettyPrint = true isLenient = true ignoreUnknownKeys = true } ) } } 96 ContentNegotiation の導入 Ktor の Httpクライアントに ContentNegotiation を インストールする kotlinx.serialization の Json クラスを ContentNegotiation に渡す
97. Copyright 2023 m.coder All Rights Reserved. 97 API通信するアプリを構築してみる • 問題点がいろいろ ◦ JSONのパースをしてくれない ▪ ContentNegotiation プラグインを使う ◦ リクエスト時に毎回ホスト名やパスの文字列を手打ち ▪ Resource プラグインを使う
98. Copyright 2023 m.coder All Rights Reserved. interface API { @GET("/endpoint") suspend fun fetch( @Query("query") query: String = QUERY_PARAM, ): SampleResponse } 98 Resource の導入 例：Retrofit の API エンドポイント こんな感じのものを作ります
99. Copyright 2023 m.coder All Rights Reserved. ---- shared の build.gradle.kts sourceSets { val commonMain by getting { implementation("io.ktor:ktor-client-resources:$ktorVersion" ) } } 99 Resource の導入 Resource プラグインの依存関係を追加
100. Copyright 2023 m.coder All Rights Reserved. @Resource("v1/images/search") class Search( val api_key: String? = "{YOUR_API_KEY}", val has_breeds: String?, val limit: String? ) 100 Resource の導入 @Resource アノテーションを付与したクラスを作成 する
101. Copyright 2023 m.coder All Rights Reserved. val client = HttpClient { install(ContentNegotiation) { json( Json { prettyPrint = true isLenient = true ignoreUnknownKeys = true } ) } install(Resources) } 101 Resource の導入 Resource プラグインをインストール
102. Copyright 2023 m.coder All Rights Reserved. val client = HttpClient { install(ContentNegotiation) { json( Json { prettyPrint = true isLenient = true ignoreUnknownKeys = true } ) } install(Resources) defaultRequest { host = "api.thecatapi.com" url { protocol = URLProtocol.HTTPS } } } 102 Resource の導入 Resource プラグインをインストール defaultRequest でホスト名やプロトコルなどを指定 しておくと毎回ホスト名を入力しなくていい
103. Copyright 2023 m.coder All Rights Reserved. val client = HttpClient { install(ContentNegotiation) { json( Json { prettyPrint = true isLenient = true ignoreUnknownKeys = true } ) } install(Resources) defaultRequest { host = "api.thecatapi.com" url { protocol = URLProtocol.HTTPS } } } val response = client.get( Search(has_breeds = "1", limit = "20") ).body<JsonArray>() 103 Resource の導入 Resource プラグインをインストール defaultRequest でホスト名やプロトコルなどを指定 しておくと毎回ホスト名を入力しなくていい client.get(Search(...)) で API アクセスが可能にな る
104. Copyright 2023 m.coder All Rights Reserved. val client = HttpClient { install(ContentNegotiation) { json( Json { prettyPrint = true isLenient = true ignoreUnknownKeys = true } ) } install(Resources) defaultRequest { host = "api.thecatapi.com" url { protocol = URLProtocol.HTTPS } } } val response = client.get( Search(has_breeds = "1", limit = "20") ).body<JsonArray>() 104 Resource の導入 Resource プラグインをインストール defaultRequest でホスト名やプロトコルなどを指定 しておくと毎回ホスト名を入力しなくていい client.get(Search(...)) で API アクセスが可能にな る .body<T> で @Serializable アノテーションをつけた 型を指定するとその型にパースしてくれる
105. Copyright 2023 m.coder All Rights Reserved. class AppRepository { private val client: HttpClient = ApiClient().create() suspend fun fetchCats(): Result<List<Cat>> = runCatching { client.get(Search()).body<JsonArray>().parse() } // ↓このへんでいい感じに Catクラスへパース … } 105 Repository の実装 今までの処理を整理して、 HttpClient 生成処理は ApiClient クラスに切り出し Repository に API リクエスト処理を記述
106. Copyright 2023 m.coder All Rights Reserved. class AppRepository { private val client: HttpClient = ApiClient().create() suspend fun fetchCats(): Result<List<Cat>> = runCatching { client.get(Search()).body<JsonArray>().parse() } // ↓このへんでいい感じに Catクラスへパース … } data class Cat( val name: String, val imageUrl: String, val description: String, ) 106 Repository の実装 今までの処理を整理して、 HttpClient 生成処理は ApiClient クラスに切り出し Repository に API リクエスト処理を記述 Cat クラスはこんな感じ
107. Copyright 2023 m.coder All Rights Reserved. 107 地味な罠
108. Copyright 2023 m.coder All Rights Reserved. defaultRequest { host = "api.thecatapi.com/v1" url { protocol = URLProtocol.HTTPS } } 108 地味な罠 host名指定
109. Copyright 2023 m.coder All Rights Reserved. defaultRequest { host = "api.thecatapi.com/v1" url { protocol = URLProtocol.HTTPS } } 109 地味な罠 host名指定 host以外の部分も指定すると …
110. Copyright 2023 m.coder All Rights Reserved. defaultRequest { host = "api.thecatapi.com/v1" url { protocol = URLProtocol.HTTPS } } 110 地味な罠 host名指定 host以外の部分も指定すると … A server with the specified hostname could not be found., NSErrorFailingURLStringKey=
111. Copyright 2023 m.coder All Rights Reserved. defaultRequest { host = "api.thecatapi.com/v1" url { protocol = URLProtocol.HTTPS } } 111 地味な罠 host名指定 host以外の部分も指定すると … A server with the specified hostname could not be found., NSErrorFailingURLStringKey= ホスト名が見つからなくて通信エラーになる
112. Copyright 2023 m.coder All Rights Reserved. 112 • 仕組みづくり ◦ ネットワーク上の画像を読み込めるようにする ◦ API通信部分を構築する • UI構築 ◦ UIを作成する ◦ 画面遷移処理を実装する ◦ 状態ごとにUIを切り替える ◦ AppBarを追加する
113. Copyright 2023 m.coder All Rights Reserved. @Composable fun CatListScreen() { val items = remember { runBlocking { AppRepository().fetchCats() }.getOrNull() } Scaffold( modifier = Modifier .fillMaxWidth() ) { items?.let { LazyColumn { items(it) { cat -> CatListItem(cat) } } } } } 113
114. Copyright 2023 m.coder All Rights Reserved. @Composable fun CatListScreen() { val items = remember { runBlocking { AppRepository().fetchCats() }.getOrNull() } Scaffold( modifier = Modifier .fillMaxWidth() ) { items?.let { LazyColumn { items(it) { cat -> CatListItem(cat) } } } } } 114
115. Copyright 2023 m.coder All Rights Reserved. @Composable fun CatListItem( item: Cat, ) { Card(...) { Row( verticalAlignment = Alignment.CenterVertically ) { KamelImage( modifier = Modifier.fillMaxHeight() .aspectRatio(1.0f), contentScale = ContentScale.Crop, resource = asyncPainterResource(item.imageUrl), contentDescription = null, ) Text( modifier = Modifier.padding(horizontal = 16.dp), text = item.name ) } } 115
116. Copyright 2023 m.coder All Rights Reserved. @Composable fun CatListItem( item: Cat, ) { Card(...) { Row( verticalAlignment = Alignment.CenterVertically ) { KamelImage( modifier = Modifier.fillMaxHeight() .aspectRatio(1.0f), contentScale = ContentScale.Crop, resource = asyncPainterResource(item.imageUrl), contentDescription = null, ) Text( modifier = Modifier.padding(horizontal = 16.dp), text = item.name ) } } 116
117. Copyright 2023 m.coder All Rights Reserved. @Composable fun CatDetailScreen(cat: Cat) { Scaffold { Column( modifier = Modifier .fillMaxWidth() .padding(32.dp) ) { KamelImage( modifier = Modifier .fillMaxWidth() .aspectRatio(0.9f) .clip(RoundedCornerShape(16.dp)), contentScale = ContentScale.Crop, resource = asyncPainterResource(cat.imageUrl), contentDescription = null, ) Spacer(Modifier.height(16.dp)) Text(text = cat.name) Spacer(Modifier.height(16.dp)) Text(text = cat.description) } } 117
118. Copyright 2023 m.coder All Rights Reserved. 118 • 仕組みづくり ◦ ネットワーク上の画像を読み込めるようにする ◦ API通信部分を構築する • UI構築 ◦ UIを作成する ◦ 画面遷移処理を実装する ◦ 状態ごとにUIを切り替える ◦ AppBarを追加する
119. Copyright 2023 m.coder All Rights Reserved. 119 画面遷移用の 公式ライブラリはまだない
120. Copyright 2023 m.coder All Rights Reserved. 120 API通信するアプリを構築してみる • 画面遷移処理の実装方法 ◦ 各プラットフォームごとにネイティブで画面遷移処理を実装する ◦ 画面遷移用の外部ライブラリを使う
121. Copyright 2023 m.coder All Rights Reserved. 121 API通信するアプリを構築してみる • 画面遷移処理の実装方法 ◦ 各プラットフォームごとにネイティブで画面遷移処理を実装する ◦ 画面遷移用の外部ライブラリを使う ▪ Voyager を利用 https://github.com/adrielcafe/voyager
122. Copyright 2023 m.coder All Rights Reserved. ---- shared の build.gradle.kts sourceSets { val commonMain by getting { implementation("cafe.adriel.voyager:voyager-navigator$voyag erVersion") } } 122 Voyager の導入 Voyager = 画面遷移・状態管理の仕組みを提供し てくれるライブラリ shared の build.gradle に依存関係を追加
123. Copyright 2023 m.coder All Rights Reserved. class CatListScreen : Screen { @Composable override fun Content() { // CatListScreen の実装 ... } } @Composable fun App() { MaterialTheme { Navigator(CatListScreen()) } } 123 Voyager の導入 Screen クラスを継承したクラスを用意する
124. Copyright 2023 m.coder All Rights Reserved. class CatListScreen : Screen { @Composable override fun Content() { // CatListScreen の実装 ... } } @Composable fun App() { MaterialTheme { Navigator(CatListScreen()) } } 124 Voyager の導入 Screen クラスを継承したクラスを用意する override Content() の中に今までどおり画面の UIを 記述する
125. Copyright 2023 m.coder All Rights Reserved. class CatListScreen : Screen { @Composable override fun Content() { // CatListScreen の実装 ... } } @Composable fun App() { MaterialTheme { Navigator(CatListScreen()) } } 125 Voyager の導入 Screen クラスを継承したクラスを用意する override Content() の中に今までどおり画面の UIを 記述する 遷移元から Navigator({Screenクラス}) で画面遷移 させる
126. Copyright 2023 m.coder All Rights Reserved. class CatListScreen : Screen { @Composable override fun Content() { val navigator = LocalNavigator.currentOrThrow Scaffold(...) { items?.let { LazyColumn { items(it) { cat -> CatListItem(cat) { navigator.push(CatDetailScreen(it)) } } } } } } } class CatDetailScreen(private val cat: Cat) : Screen { @Composable override fun Content() { // CatDetailScreenの実装 ... } } 126 Voyager の導入 LocalNavigator.currentOrThrow を使って Navigator のインスタンスを取得する
127. Copyright 2023 m.coder All Rights Reserved. class CatListScreen : Screen { @Composable override fun Content() { val navigator = LocalNavigator.currentOrThrow Scaffold(...) { items?.let { LazyColumn { items(it) { cat -> CatListItem(cat) { navigator.push(CatDetailScreen(it)) } } } } } } } class CatDetailScreen(private val cat: Cat) : Screen { @Composable override fun Content() { // CatDetailScreenの実装 ... } } 127 Voyager の導入 LocalNavigator.currentOrThrow を使って Navigator のインスタンスを取得する CatDetailScreen もクラス化して Screen を継承さ せておく
128. Copyright 2023 m.coder All Rights Reserved. class CatListScreen : Screen { @Composable override fun Content() { val navigator = LocalNavigator.currentOrThrow Scaffold(...) { items?.let { LazyColumn { items(it) { cat -> CatListItem(cat) { navigator.push(CatDetailScreen(it)) } } } } } } } class CatDetailScreen(private val cat: Cat) : Screen { @Composable override fun Content() { // CatDetailScreenの実装 ... } } 128 Voyager の導入 LocalNavigator.currentOrThrow を使って Navigator のインスタンスを取得する CatDetailScreen もクラス化して Screen を継承さ せておく navigator.push({Screenクラス})でバックスタックを 積みつつ次画面へ遷移が可能
129. Copyright 2023 m.coder All Rights Reserved. 129
130. Copyright 2023 m.coder All Rights Reserved. 130 • 仕組みづくり ◦ ネットワーク上の画像を読み込めるようにする ◦ API通信部分を構築する • UI構築 ◦ UIを作成する ◦ 画面遷移処理を実装する ◦ 状態ごとにUIを切り替える ◦ AppBarを追加する
131. Copyright 2023 m.coder All Rights Reserved. 131 先ほどの Voyager を使う　
132. Copyright 2023 m.coder All Rights Reserved. class CatListScreenModel : ScreenModel { } 132 状態ごとにUIを切り替える ScreenModel = Jetpack の ViewModel 的な役割 ライフサイクルに沿った動作や画面回転後のデー タ保持などを提供してくれる
133. Copyright 2023 m.coder All Rights Reserved. class CatListScreenModel : ScreenModel { fun fetch() { coroutineScope.launch { repository.fetchCats() ... } } } 133 状態ごとにUIを切り替える ScreenModel = Jetpack の ViewModel 的な役割 ライフサイクルに沿った動作や画面回転後のデー タ保持などを提供してくれる coroutineScope を使うと viewModelScope のよう にScreenModel のスコープで Coroutines を扱える
134. Copyright 2023 m.coder All Rights Reserved. class CatListScreen : Screen { @Composable override fun Content() { val screenModel = rememberScreenModel { CatListScreenModel() } ... } } 134 状態ごとにUIを切り替える ScreenModel = Jetpack の ViewModel 的な役割 ライフサイクルに沿った動作や画面回転後のデー タ保持などを提供してくれる coroutineScope を使うと viewModelScope のよう にScreenModel のスコープで Coroutines を扱える rememberScreenModel で Composable関数から 呼び出し可能
135. Copyright 2023 m.coder All Rights Reserved. sealed class State { object Initial : State() object Loading : State() data class OnReady(val cats: List<Cat>) : State() data class Error(val reason: Throwable) : State() } 135 状態ごとにUIを切り替える 状態管理用の State を定義する
136. Copyright 2023 m.coder All Rights Reserved. class CatListScreenModel : ScreenModel { private val repository: AppRepository = AppRepository() val state: StateFlow<State> get() = _state private val _state: MutableStateFlow<State> = MutableStateFlow(State.Initial) init { fetch() } fun fetch() { coroutineScope.launch { _ state.update { State.Loading } repository.fetchCats() .fold( onSuccess = { response -> _state.update { State.OnReady(response)} }, onFailure = { throwable -> _state.update { State.Error(throwable) } } ) } } } 136 状態ごとにUIを切り替える 状態管理用の State を定義する ScreenModel に API へのアクセス処理を書く
137. Copyright 2023 m.coder All Rights Reserved. class CatListScreenModel : ScreenModel { private val repository: AppRepository = AppRepository() val state: StateFlow<State> get() = _state private val _state: MutableStateFlow<State> = MutableStateFlow(State.Initial) init { fetch() } fun fetch() { coroutineScope.launch { _ state.update { State.Loading } repository.fetchCats() .fold( onSuccess = { response -> _state.update { State.OnReady(response)} }, onFailure = { throwable -> _state.update { State.Error(throwable) } } ) } } } 137 状態ごとにUIを切り替える 状態管理用の State を定義する ScreenModel に API へのアクセス処理を書く
138. Copyright 2023 m.coder All Rights Reserved. class CatListScreenModel : ScreenModel { private val repository: AppRepository = AppRepository() val state: StateFlow<State> get() = _state private val _state: MutableStateFlow<State> = MutableStateFlow(State.Initial) init { fetch() } fun fetch() { coroutineScope.launch { _ state.update { State.Loading } repository.fetchCats() .fold( onSuccess = { response -> _state.update { State.OnReady(response)} }, onFailure = { throwable -> _state.update { State.Error(throwable) } } ) } } } 138 状態ごとにUIを切り替える 状態管理用の State を定義する ScreenModel に API へのアクセス処理を書く
139. Copyright 2023 m.coder All Rights Reserved. class CatListScreenModel : ScreenModel { private val repository: AppRepository = AppRepository() val state: StateFlow<State> get() = _state private val _state: MutableStateFlow<State> = MutableStateFlow(State.Initial) init { fetch() } fun fetch() { coroutineScope.launch { _ state.update { State.Loading } repository.fetchCats() .fold( onSuccess = { response -> _state.update { State.OnReady(response)} }, onFailure = { throwable -> _state.update { State.Error(throwable) } } ) } } } 139 状態ごとにUIを切り替える 状態管理用の State を定義する ScreenModel に API へのアクセス処理を書く
140. Copyright 2023 m.coder All Rights Reserved. class CatListScreenModel : ScreenModel { private val repository: AppRepository = AppRepository() val state: StateFlow<State> get() = _state private val _state: MutableStateFlow<State> = MutableStateFlow(State.Initial) init { fetch() } fun fetch() { coroutineScope.launch { _ state.update { State.Loading } repository.fetchCats() .fold( onSuccess = { response -> _state.update { State.OnReady(response)} }, onFailure = { throwable -> _state.update { State.Error(throwable) } } ) } } } 140 状態ごとにUIを切り替える 状態管理用の State を定義する ScreenModel に API へのアクセス処理を書く
141. Copyright 2023 m.coder All Rights Reserved. class CatListScreen : Screen { @Composable override fun Content() { val screenModel = rememberScreenModel { CatListScreenModel() } val state by screenModel.state.collectAsState() when (val result = state) { is State.Initial, is State.Loading -> { LoadingScreen() } is State.OnReady -> { ListView( items = result.cats, onItemClicked = { navigator.push(CatDetailScreen(it)) } ) } is State.Error -> { ErrorScreen( onRetryClicked = screenModel::fetch ) } } } } 141 状態ごとにUIを切り替える 状態管理用の State を定義する ScreenModel に API へのアクセス処理を書く Screen クラス側で状態を監視する
142. Copyright 2023 m.coder All Rights Reserved. class CatListScreen : Screen { @Composable override fun Content() { val screenModel = rememberScreenModel { CatListScreenModel() } val state by screenModel.state.collectAsState() when (val result = state) { is State.Initial, is State.Loading -> { LoadingScreen() } is State.OnReady -> { ListView( items = result.cats, onItemClicked = { navigator.push(CatDetailScreen(it)) } ) } is State.Error -> { ErrorScreen( onRetryClicked = screenModel::fetch ) } } } } 142 状態ごとにUIを切り替える 状態管理用の State を定義する ScreenModel に API へのアクセス処理を書く Screen クラス側で状態を監視する
143. Copyright 2023 m.coder All Rights Reserved. class CatListScreen : Screen { @Composable override fun Content() { val screenModel = rememberScreenModel { CatListScreenModel() } val state by screenModel.state.collectAsState() when (val result = state) { is State.Initial, is State.Loading -> { LoadingScreen() } is State.OnReady -> { ListView( items = result.cats, onItemClicked = { navigator.push(CatDetailScreen(it)) } ) } is State.Error -> { ErrorScreen( onRetryClicked = screenModel::fetch ) } } } } 143 状態ごとにUIを切り替える 状態管理用の State を定義する ScreenModel に API へのアクセス処理を書く Screen クラス側で状態を監視する 状態によってScreenを出し分ける
144. Copyright 2023 m.coder All Rights Reserved. class CatListScreen : Screen { @Composable override fun Content() { val screenModel = rememberScreenModel { CatListScreenModel() } val state by screenModel.state.collectAsState() when (val result = state) { is State.Initial, is State.Loading -> { LoadingScreen() } is State.OnReady -> { ListView( items = result.cats, onItemClicked = { navigator.push(CatDetailScreen(it)) } ) } is State.Error -> { ErrorScreen( onRetryClicked = screenModel::fetch ) } } } } 144 状態ごとにUIを切り替える 状態管理用の State を定義する ScreenModel に API へのアクセス処理を書く Screen クラス側で状態を監視する 状態によってScreenを出し分ける
145. Copyright 2023 m.coder All Rights Reserved. class CatListScreen : Screen { @Composable override fun Content() { val screenModel = rememberScreenModel { CatListScreenModel() } val state by screenModel.state.collectAsState() when (val result = state) { is State.Initial, is State.Loading -> { LoadingScreen() } is State.OnReady -> { ListView( items = result.cats, onItemClicked = { navigator.push(CatDetailScreen(it)) } ) } is State.Error -> { ErrorScreen( onRetryClicked = screenModel::fetch ) } } } } 145 状態ごとにUIを切り替える 状態管理用の State を定義する ScreenModel に API へのアクセス処理を書く Screen クラス側で状態を監視する 状態によってScreenを出し分ける
146. Copyright 2023 m.coder All Rights Reserved. 146
147. Copyright 2023 m.coder All Rights Reserved. 147 • 仕組みづくり ◦ ネットワーク上の画像を読み込めるようにする ◦ API通信部分を構築する • UI構築 ◦ UIを作成する ◦ 画面遷移処理を実装する ◦ 状態ごとにUIを切り替える ◦ AppBarを追加する
148. Copyright 2023 m.coder All Rights Reserved. class MainScreen : Screen { @Composable override fun Content() { Navigator(CatListScreen()) { navigator -> val navigationState = remember { NavigationState(navigator)} Scaffold( modifier = Modifier.fillMaxSize(), topBar = { TopAppBar( title = { Text("Cat App") }, navigationIcon = { if (navigationState.shouldShowBack){ IconButton( onClick = navigator::pop, ) { Icon(...) } } }, ) }) { CurrentScreen() } } } } 148 AppBarを追加する AppBar 表示用の親スクリーン (MainScreen)を作る
149. Copyright 2023 m.coder All Rights Reserved. class MainScreen : Screen { @Composable override fun Content() { Navigator(CatListScreen()) { navigator -> val navigationState = remember { NavigationState(navigator)} Scaffold( modifier = Modifier.fillMaxSize(), topBar = { TopAppBar( title = { Text("Cat App") }, navigationIcon = { if (navigationState.shouldShowBack){ IconButton( onClick = navigator::pop, ) { Icon(...) } } }, ) }) { CurrentScreen() } } } } 149 AppBarを追加する AppBar 表示用の親スクリーン (MainScreen)を作る 親スクリーンに初期表示させたいスクリーンを Navigator({Screen}) に指定する
150. Copyright 2023 m.coder All Rights Reserved. class MainScreen : Screen { @Composable override fun Content() { Navigator(CatListScreen()) { navigator -> val navigationState = remember { NavigationState(navigator)} Scaffold( modifier = Modifier.fillMaxSize(), topBar = { TopAppBar( title = { Text("Cat App") }, navigationIcon = { if (navigationState.shouldShowBack){ IconButton( onClick = navigator::pop, ) { Icon(...) } } }, ) }) { CurrentScreen() } } } } 150 AppBarを追加する AppBar 表示用の親スクリーン (MainScreen)を作る 親スクリーンに初期表示させたいスクリーンを Navigator({Screen}) に指定する Navigator({Screen}) 以下のコンテンツスロットにレ イアウトを構築する
151. Copyright 2023 m.coder All Rights Reserved. class MainScreen : Screen { @Composable override fun Content() { Navigator(CatListScreen()) { navigator -> val navigationState = remember { NavigationState(navigator)} Scaffold( modifier = Modifier.fillMaxSize(), topBar = { TopAppBar( title = { Text("Cat App") }, navigationIcon = { if (navigationState.shouldShowBack){ IconButton( onClick = navigator::pop, ) { Icon(...) } } }, ) }) { CurrentScreen() } } } } 151 AppBarを追加する AppBar 表示用の親スクリーン (MainScreen)を作る 親スクリーンに初期表示させたいスクリーンを Navigator({Screen}) に指定する Navigator({Screen}) 以下のコンテンツスロットにレ イアウトを構築する AppBarを構築する
152. Copyright 2023 m.coder All Rights Reserved. class MainScreen : Screen { @Composable override fun Content() { Navigator(CatListScreen()) { navigator -> val navigationState = remember { NavigationState(navigator)} Scaffold( modifier = Modifier.fillMaxSize(), topBar = { TopAppBar( title = { Text("Cat App") }, navigationIcon = { if (navigationState.shouldShowBack){ IconButton( onClick = navigator::pop, ) { Icon(...) } } }, ) }) { CurrentScreen() } } } } 152 AppBarを追加する AppBar 表示用の親スクリーン (MainScreen)を作る 親スクリーンに初期表示させたいスクリーンを Navigator({Screen}) に指定する Navigator({Screen}) 以下のコンテンツスロットにレ イアウトを構築する AppBarを構築する
153. Copyright 2023 m.coder All Rights Reserved. class MainScreen : Screen { @Composable override fun Content() { Navigator(CatListScreen()) { navigator -> val navigationState = remember { NavigationState(navigator)} Scaffold( modifier = Modifier.fillMaxSize(), topBar = { TopAppBar( title = { Text("Cat App") }, navigationIcon = { if (navigationState.shouldShowBack){ IconButton( onClick = navigator::pop, ) { Icon(...) } } }, ) }) { CurrentScreen() } } } } 153 AppBarを追加する AppBar 表示用の親スクリーン (MainScreen)を作る 親スクリーンに初期表示させたいスクリーンを Navigator({Screen}) に指定する Navigator({Screen}) 以下のコンテンツスロットにレ イアウトを構築する AppBarを構築する CurrentScreen() で Navigator に指定した Screen を呼び出せる
154. Copyright 2023 m.coder All Rights Reserved. 154
155. Copyright 2023 m.coder All Rights Reserved. 155
156. Copyright 2023 m.coder All Rights Reserved. 156 まとめ • 嬉しいこと ◦ ほとんどのコードを Kotlin で書ける ◦ UI構築の時間が短縮できる • つらみ ◦ 外部ライブラリに頼らざるをえない ◦ 型安全なアクセスをするのに一工夫いる ◦ commonMain で Preview が使えない ▪ Compose for Desktop 用のプラグインはあるみたいなので 今後に期待
157. Copyright 2023 m.coder All Rights Reserved. 157 Compose で書いたアプリが iOS で動くのは楽しい！
158. Copyright 2023 m.coder All Rights Reserved. 158 おわり