ktorをJetpack Composeで使ってみた
より簡単にHTTP通信をする
AndroidでHTTP通信といえば、Retrofitを使うことがありますが、ktorというKotlinで作られたHTTPライブラリを使用するとより簡単にコードを記述することができます。KMPだとこっちを使うそうで、どんなものか知りたく試してみました。今回使うのは、KMPを使うときに必要な技術であるJetpack Composeで試してみました。
学習には、もけらぼさんの動画が参考なりました。
{JSON} Placeholderという無料のAPIからデータを取得して表示してみました。
このようなデモアプリを作成します
プロジェクトを作成
Jetpack Composeで新規のプロジェクトを作成します。その後に必要なライブラリを追加します。serialization
というライブラリが今回必要だったので追加しました。
build.gradle.kts
plugins {
alias(libs.plugins.android.application)
alias(libs.plugins.kotlin.android)
alias(libs.plugins.kotlin.compose)
kotlin("plugin.serialization") version "1.9.21"
}
android {
namespace = "com.example.ktordemo"
compileSdk = 35
defaultConfig {
applicationId = "com.example.ktordemo"
minSdk = 24
targetSdk = 34
versionCode = 1
versionName = "1.0"
testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
isMinifyEnabled = false
proguardFiles(
getDefaultProguardFile("proguard-android-optimize.txt"),
"proguard-rules.pro"
)
}
}
compileOptions {
sourceCompatibility = JavaVersion.VERSION_11
targetCompatibility = JavaVersion.VERSION_11
}
kotlinOptions {
jvmTarget = "11"
}
buildFeatures {
compose = true
}
}
dependencies {
implementation(libs.androidx.core.ktx)
implementation(libs.androidx.lifecycle.runtime.ktx)
implementation(libs.androidx.activity.compose)
implementation(platform(libs.androidx.compose.bom))
implementation(libs.androidx.ui)
implementation(libs.androidx.ui.graphics)
implementation(libs.androidx.ui.tooling.preview)
implementation(libs.androidx.material3)
// Ktor
implementation(libs.ktor.client.android.v237)
implementation(libs.ktor.client.content.negotiation)
implementation(libs.ktor.serialization.kotlinx.json)
implementation(libs.kotlinx.serialization.json)
testImplementation(libs.junit)
androidTestImplementation(libs.androidx.junit)
androidTestImplementation(libs.androidx.espresso.core)
androidTestImplementation(platform(libs.androidx.compose.bom))
androidTestImplementation(libs.androidx.ui.test.junit4)
debugImplementation(libs.androidx.ui.tooling)
debugImplementation(libs.androidx.ui.test.manifest)
}
libs.versions.toml
にライブラリを移す。もけらぼさんの動画を見ると、追加したライブラリの上にマウスをポインターを合わせて、option
+ Enter
を押すと追加することができます。
libs.versions.toml
[versions]
agp = "8.7.1"
kotlin = "2.0.0"
coreKtx = "1.15.0"
junit = "4.13.2"
junitVersion = "1.2.1"
espressoCore = "3.6.1"
kotlinxSerializationJson = "1.6.2"
ktorClientAndroid = "3.0.2"
ktor = "3.0.2"
ktorClientAndroidVersion = "2.3.7"
ktorClientContentNegotiation = "2.3.7"
ktorSerializationKotlinxJson = "2.3.7"
lifecycleRuntimeKtx = "2.8.7"
activityCompose = "1.10.0"
composeBom = "2024.04.01"
[libraries]
androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
junit = { group = "junit", name = "junit", version.ref = "junit" }
androidx-junit = { group = "androidx.test.ext", name = "junit", version.ref = "junitVersion" }
androidx-espresso-core = { group = "androidx.test.espresso", name = "espresso-core", version.ref = "espressoCore" }
androidx-lifecycle-runtime-ktx = { group = "androidx.lifecycle", name = "lifecycle-runtime-ktx", version.ref = "lifecycleRuntimeKtx" }
androidx-activity-compose = { group = "androidx.activity", name = "activity-compose", version.ref = "activityCompose" }
androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "composeBom" }
androidx-ui = { group = "androidx.compose.ui", name = "ui" }
androidx-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics" }
androidx-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling" }
androidx-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview" }
androidx-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest" }
androidx-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4" }
androidx-material3 = { group = "androidx.compose.material3", name = "material3" }
kotlinx-serialization-json = { module = "org.jetbrains.kotlinx:kotlinx-serialization-json", version.ref = "kotlinxSerializationJson" }
ktor-client-android = { module = "io.ktor:ktor-client-android", version.ref = "ktorClientAndroid" }
ktor-client-android-v237 = { module = "io.ktor:ktor-client-android", version.ref = "ktorClientAndroidVersion" }
ktor-client-cio = { module = "io.ktor:ktor-client-cio", version.ref = "ktor" }
ktor-client-content-negotiation = { module = "io.ktor:ktor-client-content-negotiation", version.ref = "ktorClientContentNegotiation" }
ktor-client-core = { module = "io.ktor:ktor-client-core", version.ref = "ktor" }
ktor-serialization-kotlinx-json = { module = "io.ktor:ktor-serialization-kotlinx-json", version.ref = "ktorSerializationKotlinxJson" }
[plugins]
android-application = { id = "com.android.application", version.ref = "agp" }
kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }
kotlin-compose = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }
レイヤーですがこのようになっております。ニョロニョロ出てますが、ビルドはできます。今回は気にせず使い方を学ぶのが目的なので一旦気にせずやりましょう。
permissionの許可が必要なのでAndroidManifest.xml
に追加する。
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<!-- permission の許可 -->
<uses-permission android:name="android.permission.INTERNET" />
<application
android:allowBackup="true"
android:dataExtractionRules="@xml/data_extraction_rules"
android:fullBackupContent="@xml/backup_rules"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/Theme.KtorDemo"
tools:targetApi="31">
<activity
android:name=".MainActivity"
android:exported="true"
android:label="@string/app_name"
android:theme="@style/Theme.KtorDemo">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
data classを作成する
APIのJSONの構造に合わせてモデルクラスを作成します。Kotlinだとdata class
というものを使います。
Kotlin
内容
package com.example.ktordemo.domain
import kotlinx.serialization.Serializable
@Serializable
data class Post(
val id: Int,
val userId: Int,
val title: String,
val body: String
)
ViewModel
HttpClientは別のクラスに分けた方がいいですが、今回はAPI通信を体験するのが目的なので分けておりません。状態管理は、ViewModelクラスを継承したMainViewModelクラスで行います。データを取得中は、ローディング。エラーが出たらエラーを表示。HTTP GETに成功したらViewにAPIから取得したデータを表示します。
Kotlin
APIと通信するロジック
package com.example.ktordemo.vm
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import com.example.ktordemo.domain.Post
import io.ktor.client.*
import io.ktor.client.call.*
import io.ktor.client.engine.android.*
import io.ktor.client.plugins.contentnegotiation.*
import io.ktor.client.request.*
import io.ktor.serialization.kotlinx.json.*
import kotlinx.coroutines.launch
import kotlinx.serialization.json.Json
class MainViewModel : ViewModel() {
private val client = HttpClient(Android) {
install(ContentNegotiation) {
json(Json {
ignoreUnknownKeys = true
isLenient = true
prettyPrint = true
useArrayPolymorphism = true
})
}
}
var posts by mutableStateOf<List<Post>>(emptyList())
private set
var selectedPost by mutableStateOf<Post?>(null)
private set
var isLoading by mutableStateOf(false)
private set
var error by mutableStateOf<String?>(null)
private set
fun fetchPosts() {
viewModelScope.launch {
try {
isLoading = true
error = null
posts = client.get("https://jsonplaceholder.typicode.com/posts").body()
} catch (e: Exception) {
error = e.message
e.printStackTrace()
} finally {
isLoading = false
}
}
}
override fun onCleared() {
super.onCleared()
client.close()
}
}
Viewを作成
APIのデータを表示するViewですが、わかりやすくするためにMainActivity.kt
にまとめています。慣れるまでは練習ではコードは分けすぎない方が良いかなと思います。Retrofitを使っていたときは分けて書いてましたが、ktorはあまりコードを書かないことから初心者むけのコードにするならまとめたほうがいいかなと思いました。Retrofitはコードが多すぎてわかりずらい💦
Kotlin
API表示する画面
package com.example.ktordemo
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.Card
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import com.example.ktordemo.domain.Post
import com.example.ktordemo.ui.theme.KtorDemoTheme
import com.example.ktordemo.vm.MainViewModel
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
KtorDemoTheme {
PostScreen()
}
}
}
}
@Composable
fun PostScreen(
viewModel: MainViewModel = MainViewModel()
) {
LaunchedEffect(Unit) {
viewModel.fetchPosts()
}
Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
Box(
modifier = Modifier
.fillMaxSize()
.padding(innerPadding)
) {
if (viewModel.isLoading) {
CircularProgressIndicator(
modifier = Modifier.align(Alignment.Center)
)
} else if (viewModel.error != null) {
Text(
text = viewModel.error ?: "Error occurred",
color = MaterialTheme.colorScheme.error,
modifier = Modifier.align(Alignment.Center)
)
} else {
PostList(
posts = viewModel.posts,
modifier = Modifier.fillMaxSize()
)
}
}
}
}
@Composable
fun PostList(
posts: List<Post>,
modifier: Modifier = Modifier
) {
LazyColumn(
modifier = modifier,
) {
items(posts) { post ->
PostItem(post = post)
}
}
}
@Composable
fun PostItem(
post: Post,
modifier: Modifier = Modifier
) {
Card(
modifier = modifier.padding(8.dp)
) {
Text(
text = post.title,
style = MaterialTheme.typography.titleMedium,
fontWeight = FontWeight.Bold,
modifier = Modifier.padding(8.dp)
)
Text(
text = post.body,
style = MaterialTheme.typography.bodyMedium,
modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp)
)
}
}
まとめ
Androidで開発をするときは、Retrofitしか使ったことないのですが、ktorの存在知ってからは、より簡単に書けることを知り今後使っていきたいなと思いました。ケーターって読むらしい。最初は職場の人が使ってるのをみて、「おっ、ケー・ティー・オー・アールだ」と頭の中で言ってましたが、正しくは「ケーター」みたいです笑
Discussion