Compose for Deskopで始めるAndroid開発効率化ツールの作成

Compose for Deskopで始める
Android開発効率化ツールの作成
DroidKaigi 2022 Day01
Yusuke Katsuragawa / YUMEMI Inc.
1

View Slide

自己紹介
2

View Slide

自己紹介
- 桂川祐介
- 株式会社ゆめみ
- Androidエンジニア
- Twitter : @kaleidot725
- GitHub : kaleidot725
3

View Slide

アジェンダ
4

View Slide

アジェンダ
● Compose for Desktopとは
● Compose for Desktopでなぜツールを作るのか
● Compose for Desktopでどのようにツールを作るか
a. 作成したツール
b. 開発環境
c. プロジェクトのセットアップ
d. 依存関係のセットアップ
e. 機能実装
● Compose for Desktopでツールを使ってみて
5

View Slide

Compose for Desktopとは
6

View Slide

Compose for Desktopとは？
● Compose MultiplatformはJetBrainsが開発しているデスクトップ＆Web向
けUIフレームワーク
● Compose MultiplatformはJetpack Composeをベースにして作られている
ため、Jetpack Composeと同じ宣言型でUIを構築できる
● Compose Multiplatformのデスクトップ向けをCompose for Desktop、Web
向けをCompose for Webと呼ぶ
● Compose for DesktopはJetpack Composeと同じ書き方でデスクトップア
プリを作れるUIフレームワークということ
7

View Slide

Compose for Desktopの特徴
8

View Slide

複数のデスクトッププラットフォームに対応
Windows macOS Linux
9

View Slide

Jetpack Composeと互換性のあるUIコンポーネントの提供
Row Column OutlineButton Button
10

View Slide

デスクトップアプリ向けの機能の提供
メニューバー
メニュー
トレイ
コンテキスト
メニュー
通知
11

View Slide

Kotlin Multiplatformを利用して、Jetpack Composeとコード共有可能
Android デスクトップ
※ Jetpack Composeとコード共有したサンプルアプリ例 : https://bit.ly/3BgSV7g 12

View Slide

Compose for Desktopで
なぜツールを作ろうと思ったのか
13

View Slide

Compose for Desktopでなぜツールを作ろうと思ったのか
Androidエンジニアが日々の開発で繰り返しやる作業の手間を減らしたい
● 開発者オプションの設定変更
● ネットワークエラー時の動作確認
● ダークテーマ・ライトテーマでの動作確認
● テキスト入力での動作確認
これらを補助するためのツールを作りたいが
どのような言語・フレームワークで作るのがよいか？
14

View Slide

Compose for Desktopでなぜツールを作ろうと思ったのか
Compose for DesktopとAndroidエンジニアの相性は良さそう
● Jetpack Composeと同じ書き方でデスクトップアプリを開発できる
- Jetpack Composeが扱える人の学習コストが低い
● Compose for Desktopを学ぶことが、Jetpack Composeで活かせる
- Compose for Desktopで学んだことが無駄になりにくい
● Compose for Desktopでのツール開発が属人化しにくそう
- Jetpack Composeを書ける人であればメンテできるため
Compose for Desktopでツールを作ってみることに
15

View Slide

Compose for Desktopでどのようにツールを作るか
16

View Slide

作成したツール
17

View Slide

端末選択
メニューリスト
メニュー画面
※ 作成したツールのリポジトリ : https://github.com/kaleidot725/AdbPad/tree/release/droidkaigi2022 18

View Slide

メニュー画面コマンド
● 開発者オプション設定
● ダークテーマON / OFF
● Wi-Fi ON / OFF
● データ通信 ON / OFF
19

View Slide

メニュー画面テキスト入力
● 入力テキストの保存/削除
● 入力テキストの送信
20

View Slide

メニュー画面スクリーンショット
● 現在の画面の撮影
● テーマ毎に現在の画面の撮影
21

View Slide

今回は作成したツールの実装を解説するのは難しいので
どのように開発したかサンプルを用いて解説します
22

View Slide

開発環境
23

View Slide

開発環境
IntelliJ IDEA Community 2022.2
● インストールするだけでCompose for Desktopで開発できる
● JetBrainsが開発しているのでAndroid Studioと操作感に違いはない
24

View Slide

開発環境
Compose Multiplatform IDE Support
● Compose for Desktopでプレビューを可能にするIDEAプラグイン
● Stable版は1.1.1ですがIDEA 2022.2と互換性が無いのでAlpha版の1.2.0を利用
25

View Slide

プロジェクトのセットアップ
26

View Slide

「New Project」からプロジェクトを新規作成を開始する
27

View Slide

「Compose Multiplatform」を選択し「Create」でプロジェクトを作成する
デスクトップ向けなのでConfigurationをSingle
platform, PlatformをDesktopにする
Compose for DesktopはJDK11以上をサポートし
ているのでJDK11以上を設定する必要がある
28

View Slide

Gradleプロジェクト作成され、Gradleタスクからアプリが起動する
Compose for Desktopのタスク一覧が表
示される。runを実行するとアプリケーション
のビルド＆実行ができる
29

View Slide

依存関係のセットアップ
30

View Slide

プロジェクトで利用する以下の依存関係を追加する
依存関係バージョン備考
Compose for Desktop v1.1.1 ● Compose for Desktopのv1.2.0はアルファ版なのでv1.1.1を利用す
る
Kotlin v1.6.10 ● Compose for Desktopに合わせv1.6.10を利用する
Kotlin Coroutines v1.6.0
Kotlin Serialization v1.3.1 ● アプリの設定ファイル(json)の書き込みに利用する
Adam v0.4.5 ● ADBのヘルパーライブラリ
31

View Slide

今回のプロジェクトでは以下の方針で依存関係を整理＆管理する
● GradleプロジェクトのVersion Catalogを利用する
● Gradleファイルに依存関係の情報を記載し整理する
Gradleファイル記載内容
gradle.properties 依存関係のバージョン情報
setting.gradle.kts 依存関係のアーティファクト情報
build.gradle.kts アプリのモジュールで扱うアーティファクト情報
32

View Slide

kotlin.code.style
=official
kotlin.version
=1.6.10
kotlin.coroutines
=1.6.0
kotlin.serialization
=1.3.1
agp.version=4.2.2
compose.version
=1.1.1
library.ktlint.plugin
=10.3.0
library.adam=0.4.5
library.junit=5.9.0
アーティファクトのバージョンを定義する
gradle.properties
33

View Slide

dependencyResolutionManagement {
versionCatalogs {
create("libs") {
val adamVer = extra["library.adam"
] as String
library(
"adam", "com.malinskiy.adam:adam:
$adamVer")
val coroutinesVer = extra["kotlin.coroutines"
] as String
library(
"kotlin-coroutines"
, "org.jetbrains.kotlinx:kotlinx-coroutines-core:
$coroutinesVer")
val serializationVer = extra["kotlin.serialization"
] as String
library(
"kotlin-serialization"
, "org.jetbrains.kotlinx:kotlinx-serialization-json:
$serializationVer
")
val junitVer = extra["library.junit"
] as String
library(
"junit5", "org.junit.jupiter:junit-jupiter:
$junitVer")
}
}
}
pluginManagement {
repositories { … }
plugins {
kotlin("multiplatform"
).version(extra["kotlin.version"
] as String)
id("org.jetbrains.compose"
).version(extra["compose.version"
] as String)
kotlin("plugin.serialization"
] as String)
id("org.jlleitschuh.gradle.ktlint"
).version(extra["library.ktlint.plugin"
] as String)
}
}
利用するプラグインを宣言する
setting.gradle.kts
34

View Slide

dependencyResolutionManagement {
versionCatalogs {
create("libs") {
val adamVer = extra["library.adam"
] as String
library(
"adam", "com.malinskiy.adam:adam:
$adamVer")
val coroutinesVer = extra["kotlin.coroutines"
] as String
library(
"kotlin-coroutines"
, "org.jetbrains.kotlinx:kotlinx-coroutines-core:
$coroutinesVer")
val serializationVer = extra["kotlin.serialization"
] as String
library(
"kotlin-serialization"
, "org.jetbrains.kotlinx:kotlinx-serialization-json:
$serializationVer
")
val junitVer = extra["library.junit"
] as String
library(
"junit5", "org.junit.jupiter:junit-jupiter:
$junitVer")
}
}
}
pluginManagement {
repositories { … }
plugins {
] as String)
).version(extra["compose.version"
] as String)
] as String)
).version(extra["library.ktlint.plugin"
] as String)
}
}
setting.gradle.kts
Versioni Catalogを使ってライブラリのアーティファクトを宣言する 35

View Slide

kotlin {
sourceSets {
val jvmMain by getting {
dependencies {
implementation(
compose.desktop.currentOs)
implementation(
compose.material)
implementation(
compose.materialIconsExtended
)
implementation(
libs.adam)
implementation(
libs.kotlin.coroutines)
implementation(
libs.kotlin.serialization)
}
}
}
}
plugins {
)
)
)
)
}
setting.gradle.ktsに定義したアーティファクトを参照する
build.gradle.kts
36

View Slide

kotlin {
sourceSets {
dependencies {
implementation(
implementation(
compose.material)
implementation(
)
implementation(
libs.adam)
implementation(
implementation(
}
}
}
}
plugins {
)
)
)
)
}
setting.gradle.ktsに定義したアーティファクトを参照する
build.gradle.kts
37

View Slide

kotlin {
sourceSets {
dependencies {
implementation(
implementation(
compose.material)
implementation(
)
implementation(
libs.adam)
implementation(
implementation(
}
}
}
}
plugins {
)
)
)
)
}
build.gradle.kts
あらかじめCompose Pluginが予め依存関係の定義
を用意してくれています。このように記述すると
local.propertiesに定義したバージョンで依存関係を
セットアップされる。
※ Compose for Desktopの依存関係の定義 : https://bit.ly/3L2wnKN 38

View Slide

機能実装 - ADBと連携する
39

View Slide

ADBとは
● Android Debug Bridge（adb）は、デバイスと通信するための多用途のコマンドライ
ンツール
● ADBのshellコマンドを利用することでAndroid OSのシェルを通して端末を操作でき
る
● その他にもアプリのインストールやスクリーンキャプチャなどの操作が実行できる
40

View Slide

Adamとは
● AdamはKotlinで作られたADBのヘルパーライブラリ
● AdamからADBを操作し、端末一覧取得・シェル実行・スクリーンショット取得などが
できる
● Kotlin Coroutinesにも対応しているので簡単に非同期処理を実行できる
● 今回はこのAdamというライブラリを利用しADBを実行します
41

View Slide

Adamの使い方
StartAdbInteractor().execute()
val adb = AndroidDebugBridgeClientFactory().build()
val output = adb.execute(
request = ShellCommandRequest(
"echo hello"),
serial = "emulator-5554"
)
①ADBサーバーを開始する
42

View Slide

Adamの使い方
"echo hello"),
)
②ADBクライアントを作成する
43

View Slide

Adamの使い方
"echo hello"),
)
③ADBクライアントからリクエストを送信する
44

View Slide

機能実装 - 端末一覧をADBから取得し表示する
端末リスト表示
※ 端末リスト表示のサンプルコード : https://github.com/kaleidot725/AdbPad/tree/release/droidkaigi2022-sample1 45

View Slide

レイヤ役割説明
Model Data ● 機能を実現するデータ
UseCase ● 機能を実現するための処理
View UI Component ● UIコンポーネントの定義
State ● UIコンポーネントの状態
StateHolder ● UI ComponentとStateをつなぎ合わせる
● UI ComponentにStateを通知する
● UI ComponentのEventに反応して処理する
ViewとModelの2つのレイヤに大きく分けて実装を進める
46

View Slide

data class Device(val serial: String, val state: DeviceState)
端末情報についてはAdamで定義されているデータクラスをそのまま使う
Data
47

View Slide

class GetDevicesFlowUseCase {
operator fun invoke(coroutineScope: CoroutineScope): Flow> {
val adbClient = AndroidDebugBridgeClientFactory().build()
val receiveChannel = adbClient.execute(
request = AsyncDeviceMonitorRequest()
,
scope = coroutineScope
)
return receiveChannel.
receiveAsFlow()
}
}
UseCase
48
端末一覧を購読するためのFlowを作成する

View Slide

,
)
receiveAsFlow()
}
}
UseCase
AdbClientを生成する
49

View Slide

,
)
receiveAsFlow()
}
}
UseCase
AsyncDeviceMonitorRequestで端末一覧を通知してくれるChannelを作成する
50

View Slide

,
)
receiveAsFlow()
}
}
UseCase
ChannelよりもFlowのほうが扱いやすいのでreceiveAsFlowで変換する
51

View Slide

@Composable
fun DropDownDeviceMenu
(
selectedDevice: Device?
,
devices: List
,
onSelectDevice: (Device) -> Unit
,
modifier: Modifier = Modifier
) {
var expanded by remember { mutableStateOf(false) }
Box(modifier) {
// 選択中のデバイス表示
Box(...) { ... }
// デバイス一覧表示
DropdownMenu(...) { ... }
}
}
UI Component
選択している端末、接続している端末一覧を表示できるようにする
52

View Slide

@Composable
(
,
devices: List
,
,
) {
Box(modifier) {
Box(
modifier = Modifier.clickable {
if (!expanded && devices.
isNotEmpty()) expanded = true
}
) {
Text(...)
Icon(...)
}
}
}
UI Component
53
選択された端末をクリックで
DropdownMenuを表示できるようにする

View Slide

@Composable
(
,
devices: List
,
,
) {
Box(modifier) {
Box(...) {
Text(
text = selectedDevice?.
serial ?: StringRes.NOT_FOUND_DEVICE
,
modifier = Modifier.fillMaxWidth()
)
Icon(...)
}
}
}
UI Component
54
選択された端末名を表示する

View Slide

@Composable
(
,
devices: List
,
,
) {
Box(modifier) {
Box(...) {
Text(...)
Icon(
imageVector = Icons.Filled.ArrowDropDown,
contentDescription = "Device DropDown Icon"
,
modifier = Modifier.align(Alignment.CenterEnd)
)
}
}
}
UI Component
55
選択できることがわかるようにアイコンを表示する

View Slide

@Composable
(
,
devices: List
,
,
) {
Box(modifier) {
Box(...)
DropdownMenu(
expanded = expanded,
onDismissRequest = { expanded = false },
modifier = Modifier.fillMaxWidth()
) { ... }
}
}
UI Component
56
接続している端末リストを表示するためにDropdownMenuを定義する。
expandedを渡して開閉状態を同期してやる。

View Slide

@Composable
(
,
devices: List
,
,
) {
Box(modifier) {
Box(...)
DropdownMenu(...) {
devices.forEach { device ->
DropdownMenuItem(...) {
Text(text = device.serial)
}
}
}
}
}
UI Component
57
接続している端末の名称を表示する

View Slide

@Composable
(
,
devices: List
,
,
) {
Box(modifier) {
Box(...)
DropdownMenu(...) {
devices.forEach { device ->
DropdownMenuItem(
onClick = {
onSelectDevice(device)
expanded = false
}
) {...}
}
}
}
}
UI Component
58
接続している端末リストを選択する処理を実装する

View Slide

data class MainState(
val devices: List = emptyList(),
val selectedDevice
: Device? = null,
)
リストに渡すための情報をまとめる
State
59

View Slide

StateHolder
class MainStateHolder(
val getDevicesFlow
: GetDevicesFlowUseCase = GetDevicesFlowUseCase()
) {
︙
val state: StateFlow
= combine(devices, selectedDevice
) { devices, selected ->
MainState(devices = devices, selectedDevice = selected)
}.stateIn(coroutineScope
, SharingStarted.WhileSubscribed()
, MainState())
︙
fun setup() {...}
fun selectDevice(device: Device) { ... }
fun dispose() { ... }
}
Stateの変化をUI Componentに通知する、また画面表示時、コマンド実行時、画面非表示時
に処理を実行する、というのをできるようにするためのStateHolderを作成する
60

View Slide

StateHolder
val getDevicesFlow
) {
private val coroutineContext get()
= SupervisorJob() + Dispatchers.
Main + Dispatchers.
IO
private val coroutineScope
: CoroutineScope
= CoroutineScope(coroutineContext
)
private val devices: MutableStateFlow>
= MutableStateFlow(emptyList())
private val selectedDevice
: MutableStateFlow
= MutableStateFlow(null)
val state: StateFlow
= combine(devices, selectedDevice
) { devices, selected ->
MainState(devices = devices, selectedDevice = selected)
, MainState())
fun setup() {...}
}
StateをUI Componentに通知する仕組みを実装する。
端末一覧と選択端末が更新されたらStateを再生成して通知する
61

View Slide

StateHolder
val getDevicesFlow
) {
︙
private val devices: MutableStateFlow>
private val selectedDevice
: MutableStateFlow
︙
fun setup() {
coroutineScope
.launch {
getAndroidDevicesFlowUseCase
(coroutineScope
).collect {
devices.value = it
val hasNotValue = !it.contains(selectedDevice.value)
if (hasNotValue) selectedDevice.value = it.firstOrNull()
}
}
}
}
画面表示時の処理を実装する。
adbサーバーを起動しFlowをcollectして端末一覧を更新する
62

View Slide

StateHolder
val getDevicesFlow
) {
︙
　　private val selectedDevice
: MutableStateFlow
︙
fun setup() { ... }
fun selectDevice(device: Device) {
selectedDevice
.value = device
}
}
選択時にデバイス選択状況を更新する
63

View Slide

StateHolder
val getDevicesFlow
) {
︙
Main + Dispatchers.
IO
: CoroutineScope
)
︙
fun setup() {...}
fun dispose() {
coroutineScope
.cancel()
}
}
画面非表示時に実行されている
コルーチンをキャンセルする
64

View Slide

fun main() = application {
Window(title = StringRes.WINDOW_TITLE, onCloseRequest = ::exitApplication) {
val stateHolder by remember { mutableStateOf(MainStateHolder()) }
DisposableEffect(stateHolder) {
stateHolder.setup()
onDispose { stateHolder.dispose() }
}
val state by stateHolder.state.collectAsState()
DropDownDeviceMenu(
devices = state.devices,
selectedDevice = state.selectedDevice
,
onSelectDevice = { stateHolder.selectDevice(
it) },
modifier = Modifier.wrapContentSize()
)
}
}
main
Compose for Desktopのメイン関数で、今まで作成したクラスを使ってアプリを組み立てる 65

View Slide

stateHolder.setup()
}
DropDownDeviceMenu(
,
it) },
)
}
}
main
画面表示時にsetupを実行する
また画面非表示にdisposeを実行する
66

View Slide

stateHolder.setup()
}
DropDownDeviceMenu(
,
it) },
)
}
}
main
stateをcollectしてDropDownDeviceMenuに渡す、
DropDownDeviceMenuからイベントをstateHolderに伝
える
67

View Slide

ADBと連携する - 端末一覧を取得し表示する
68

View Slide

機能実装 - ADBでコマンドを実行し端末を操作する
69

View Slide

コマンド実行画面
※ コマンド実行画面のサンプルコード : https://github.com/kaleidot725/AdbPad/tree/release/droidkaigi2022-sample2 70

View Slide

分類役割説明
Model Data ● 機能を実現するデータ
UseCase ● 機能を実現するための処理
View UI Component ● UIコンポーネントの定義
State ● UIコンポーネントの状態
StateHolder ● UI ComponentとStateをつなぎ合わせる
同じくこの構造を用いて作成を進める
71

View Slide

sealed class Command(
val title: String,
val details: String,
val requests: List
) {
object DarkThemeOn : Command(
"ダークテーマON",
"端末のダークテーマ設定を
ONにします",
listOf(ShellCommandRequest(
"cmd uimode night yes"
))
)
object WifiAndDataOn : Command(
"Wi-Fi＆データ通信 ON",
"端末のWi-Fi設定とデータ通信設定の両方を
ONにします",
listOf(
ShellCommandRequest(
"svc wifi enable"
),
"svc data enable"
)
)
)
︙
}
Data
コマンドのタイトルと説明を定義しておく。
またこのコマンドで実行したいAdamのリ
クエストにして定義しておく。
72

View Slide

val title: String,
val requests: List
) {
ONにします",
))
)
ONにします",
listOf(
"svc wifi enable"
),
"svc data enable"
)
)
)
︙
}
Data
ダークテーマONにする
ためのコマンド
73

View Slide

val title: String,
val requests: List
) {
ONにします",
))
)
ONにします",
listOf(
"svc wifi enable"
),
"svc data enable"
)
)
)
︙
}
Data
もし複数リクエストがある場合
にこのように2つのリクエスト
を定義する
74

View Slide

class GetCommandListUseCase {
operator fun invoke(): List {
return listOf(Command.DarkThemeOn
,Command.WifiAndDataOn)
}
}
UseCase
定義したコマンド情報をリストで返す
75

View Slide

class ExecuteCommandUseCase {
suspend operator fun invoke(serial: String?
, command: Command): Boolean {
return withContext(Dispatchers.
IO) {
command.
requests.forEach { request ->
val result = adbClient.execute(request
, serial)
if (result.exitCode != 0) return@withContext false
}
return@withContext true
}
}
}
UseCase
定義したコマンドをAdamで実行する
76

View Slide

IO) {
command.
, serial)
}
}
}
}
UseCase
AdbClientを生成する
77

View Slide

IO) {
command.
, serial)
}
}
}
}
UseCase
リクエストを順番に実行し、途中で失敗したらfalse、
そうでなければtrueを返すようにする
78

View Slide

UI Component
@Composable
fun CommandList(
commands: List
,
onExecute: (Command) -> Unit
,
) {
Box(modifier = modifier) {
Column(...) {
commands.forEach { command ->
Card(...) { ... }
}
}
}
}
受け取ったコマンドをリストで表示する、
また選択したコマンドを実行できるようにする
79

View Slide

UI Component
@Composable
fun CommandList(
commands: List
,
,
) {
Column(...) {
Card(...) { ... }
}
}
}
}
ColumnとCardを利用してコマンドリストを作成する
80

View Slide

@Composable
fun CommandList(
commands: List
,
,
) {
Column(...) {
Card(...) {
Row(...) {
Column(modifier = Modifier.weight(0.9f, true)) {
Text(text = command.title)
Text(text = command.details)
}
Button(...) { ... }
}
}
}
}
}
}
UI Component
コマンドのタイトルと説明を並べて表示する
81

View Slide

@Composable
fun CommandList(
commands: List
,
,
) {
Column(...) {
Card(...) {
Row(...) {
Column(...) { ... }
Button(onClick = { onExecute(command) }) {
Text(text = StringRes.EXECUTE)
}
}
}
}
}
}
}
UI Component
StateHolderにコマンド実行を依頼できるようにする
82

View Slide

data class MainState(
val commands: List = emptyList(),
)
State
リストに渡すための情報をまとめる
83

View Slide

StateHolder
val getCommandListUseCase
: GetCommandListUseCase = GetCommandListUseCase()
,
val executeCommandUseCase
: ExecuteCommandUseCase = ExecuteCommandUseCase()
,
) {
︙
val state: StateFlow = commands.map {
MainState(commands = it)
, MainState())
︙
fun setup() {...}
fun executeCommand
(command: Command) { ... }
}
Stateの変化をUI Componentに通知する、また画面表示時、コマンド実行時、画面非表示時
に処理を実行する、というのをできるようにするためのStateHolderを作成する
84

View Slide

StateHolder
,
,
) {
Main + Dispatchers.
IO
: CoroutineScope
)
private val commands: MutableStateFlow>
val state: StateFlow = commands.map {
MainState(commands = it)
, MainState())
fun setup() {...}
fun executeCommand
}
StateをUI Componentに通知する仕組みを実装する。
コマンド一覧が更新されたらStateを再生成して通知する
85

View Slide

StateHolder
,
,
) {
︙
private val commands: MutableStateFlow>
︙
fun setup() {
coroutineScope
.launch { StartAdbInteractor().execute() }
commands.value = getCommandListUseCase
()
}
fun executeCommand
}
画面表示時の処理を実装する。
コマンド実行に備えて、
adbサーバーを起動する。
そのあとコマンドの一覧を更新する。
86

View Slide

StateHolder
,
,
) {
︙
fun setup() { ... }
fun executeCommand
(command: Command) {
coroutineScope
.launch {
executeCommandUseCase
("XXX", command)
}
}
}
選択したコマンドを実行する。今回
はシリアル番号は仮で固定値を入
れている。
87

View Slide

StateHolder
,
,
) {
︙
fun setup() { ... }
fun executeCommand
fun dispose() {
coroutineScope
.cancel()
}
}
画面非表示時に実行されている
コルーチンをキャンセルする
88

View Slide

stateHolder.setup()
}
CommandList(
commands = state.commands,
onExecute = { stateHolder.executeCommand(
it) },
modifier = Modifier.fillMaxSize()
)
}
}
main
89
Compose for Desktopのメイン関数で、今まで作成したクラスを使ってアプリを組み立てる

View Slide

stateHolder.setup()
}
CommandList(
it) },
)
}
}
main
画面表示時にsetupを実行する。
また画面非表示にdisposeを実行
する。
90

View Slide

stateHolder.setup()
}
CommandList(
it) },
)
}
}
main
stateをcollectしてCommandListに渡す、
CommandListからイベントをstateHolderに伝
える
91

View Slide

ADBと連携する - ADBでコマンドを実行し端末を操作する
92

View Slide

Demo
93

View Slide

Compose for Desktopを使ってみて
94

View Slide

● Jetpack Composeと同じ仕組みでUIを作れる
- Jetpack Composeが使えればCompose for Destkopも簡単に使える
● Androidのアプリ開発で得た知識を流用しやすい
- IDE
- IntelliJ IDEAとAndroid Studioは大きな違いはなく使いやすい
- Coroutines・Flow
- CoroutinesとFlowを使えるので非同期処理などの実装がかなり楽
- アーキテクチャ
- Androidアーキテクチャガイドを参考にできる
良かったところ
95

View Slide

● Compose for DesktopのリリースはJetpack Composeの後追い
- Jetpack Composeの最新版で使えるようになってもCompose for Desktopで
使えない
● プレビュー機能が弱い
- プレビューの実行＆更新は手動なので少々手間がかかる
● ドキュメントが少なめ
- 困ったらGitHubのIssueで解決策を調べることが多い
辛かったところ
96

View Slide

まとめ
● Compose for Desktop × Adamで気軽にadbを利用したツールを開発できる
● Androidのアプリ開発で得た知識を流用できるので、学び直しが少なく効率的に開
発ができる
● Jetpack Composeと比べると開発体験は少し悪いところがある
- リリース・ドキュメント・プレビューなど
- Compose for Desktop 1.2.0の開発が続いているので改善に期待
97

View Slide

おわり
98

View Slide

Compose for Deskopで始めるAndroid開発効率化ツールの作成

Compose for Deskopで始めるAndroid開発効率化ツールの作成

Yusuke Katsuragawa

More Decks by Yusuke Katsuragawa

Other Decks in Programming

Featured

Transcript