デスクトップアプリ
Compose for Desktop では、宣言的でリアクティブな手法で Kotlin によるデスクトップのユーザーインターフェース制作を進めることができます。作成可能な関数を組み合わせてユーザーインターフェースを制作し、IDE やビルドシステムのツールサポートをフル活用できます。XML やテンプレートエンジンは不要です。
Compose for Desktop は JVM をターゲットとしており、強力なネイティブの Skia グラフィックライブラリを活用することで、すべての主要デスクトッププラットフォーム（macOS、Windows、Linux）での高性能なハードウェアアクセラレーターによる UI 描画をサポートしています。ネイティブアプリケーションのディストリビューションはワンクリックで作成できます。
Windows
macOS
Linux
ウェブアプリ
Compose for Web では、Jetpack Compose のコンセプトと API を使用することにより、Kotlin でウェブ用のリアクティブなユーザーインターフェースを構築できるため、アプリケーションの状態や、動作、ロジックを表現できます。
Compose for Web では、様々な方法で Kotlin コードを使ってユーザーインターフェースを宣言できるため、宣言的な DOM の API を使ってウェブサイトのレイアウトを思うように操ることができます。
ウェブ
Compose for Desktop の機能
メニュー、キーボードショートカット、ウィンドウ操作、通知管理などのデスクトップ拡張機能。
Skia を使用したハードウェアアクセラレーターによるレンダリング。
多数の言語に対応したテキストの強力なレンダリングとレイアウト。
AWT と Swing の優れた相互運用性。
Kotlin Multiplatform を介した Jetpack Compose Android アプリケーションとのコード共有。
UI 要素レベルにおける Android Compose の互換性。
スタンドアロンのアプリケーションバンドル作成をサポート。
Compose for Web の機能
Android/Desktop と同じリアクティブエンジンを使用することにより、共通のコードベースの使用を実現。
Kotlin / JS で UI を鮮やかに作成するためのフレームワーク。
フロントエンド開発の一般的なシナリオのすべてをカバーする便利な Kotlin DOM DSL。
包括的な CSS-in-Kotlin/JS API。
Compose for Desktop を使い始めるには
Compose for Desktop が提供する機能については、チュートリアルを通してご確認ください。
チュートリアルはこちらからスタート
このチュートリアルでは、Compose UI フレームワークを使用してシンプルなデスクトップ UI アプリケーションを制作する方法について解説します。
画像ビューアーアプリケーション
Compose for Desktop と Compose for Android を使用してリモートサーバーの画像を表示する画像ギャラリーのサンプルです。
課題ブラウザーの例
Compose for Desktop で書かれた GitHub 課題ビューアー。
Compose for Web を使い始めるには
Compose for Web が提供する機能については、チュートリアルを通してご確認ください。
チュートリアルはこちらからスタート
このチュートリアルでは、Compose for Web を使用して初めてのウェブ UI アプリケーションを制作する方法について解説します。
ランディングページの例
Composable DOM API と Stylesheet DSL を使って構築されたランディングページの例。
Falling Balls アプリの例
この例では、マルチプラットフォームウィジェットを使用することにより、Compose for Desktop と Compose for Web の間でユーザーインターフェースコードを共有する方法をお見せします。
コードサンプル
Pointer Events
fun main() = singleWindowApplication {
var isActivated by remember { mutableStateOf(false) }
var isHovered by remember { mutableStateOf(false) }
val size by animateDpAsState(if (isActivated) 300.dp else 200.dp)
Box(
Modifier
.size(size)
.background(if (isHovered) Color.Red else Color.Blue)
.onPointerEvent(PointerEventType.Enter) { isHovered = true }
.onPointerEvent(PointerEventType.Exit) { isHovered = false }
.onPointerEvent(PointerEventType.Press) {
if (it.buttons.isPrimaryPressed) {
isActivated = true
} else if (it.buttons.isSecondaryPressed) {
isActivated = false
}
}
)
}
Compose Multiplatform のデスクトップに関するディスカッションは Kotlin Slack の #compose-desktop チャンネルへ、ウェブに関するディスカッションは #compose-web チャンネルへ、Compose と Jetpack Compose の全般的なディスカッションは #compose チャンネルへ、お気軽にご参加ください。