🤖

ktorをJetpack Composeで使ってみた 

2025/01/21に公開

より簡単にHTTP通信をする

AndroidでHTTP通信といえば、Retrofitを使うことがありますが、ktorというKotlinで作られたHTTPライブラリを使用するとより簡単にコードを記述することができます。KMPだとこっちを使うそうで、どんなものか知りたく試してみました。今回使うのは、KMPを使うときに必要な技術であるJetpack Composeで試してみました。

https://ktor.io/docs/client-create-new-application.html

学習には、もけらぼさんの動画が参考なりました。
https://www.youtube.com/watch?v=zCRa9JRAbh4

こちらが完成品

{JSON} Placeholderという無料のAPIからデータを取得して表示してみました。
https://jsonplaceholder.typicode.com/photos

このようなデモアプリを作成します

プロジェクトを作成

Jetpack Composeで新規のプロジェクトを作成します。その後に必要なライブラリを追加します。serializationというライブラリが今回必要だったので追加しました。

https://kotlinlang.org/docs/serialization.html
https://github.com/Kotlin/kotlinx.serialization

build.gradle.kts

https://github.com/sakurakotubaki/KtorDemo/blob/main/app/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

https://github.com/sakurakotubaki/KtorDemo/blob/main/app/src/main/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