Compose Multiplatform

Compose Multiplatform

Google の最新ツールキットを基に JetBrains がお届けする高速かつリアクティブな Kotlin 用のデスクトップ UI および Web UI フレームワークです。

Compose Multiplatform は、デスクトップアプリケーションとウェブアプリケーションの UI 開発を簡略化・加速化します。また、Android、Desktop、ウェブの間で UI のコードを幅広く共有できます。

はじめに

デスクトップアプリ

Compose for Desktop では、宣言的でリアクティブな手法で Kotlin によるデスクトップのユーザーインターフェース制作を進めることができます。作成可能な関数を組み合わせてユーザーインターフェースを制作し、IDE やビルドシステムのツールサポートをフル活用できます。XML やテンプレートエンジンは不要です。

Compose for Desktop は JVM をターゲットとしており、強力なネイティブの Skia グラフィックライブラリを活用することで、すべての主要デスクトッププラットフォーム(macOS、Windows、Linux)での高性能なハードウェアアクセラレーターによる UI 描画をサポートしています。ネイティブアプリケーションのディストリビューションはワンクリックで作成できます。

Windows

Windows

macOS

macOS

Linux

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 課題ビューアー。

アプリを詳しく見る

GitHub でさらに詳しく見る

Compose for Web を使い始めるには

Compose for Web が提供する機能については、チュートリアルを通してご確認ください。

チュートリアルはこちらからスタート

このチュートリアルでは、Compose for Web を使用して初めてのウェブ UI アプリケーションを制作する方法について解説します。

チュートリアルを見る

ランディングページの例

Composable DOM API と Stylesheet DSL を使って構築されたランディングページの例。

ソースコードを詳しく見る

Falling Balls アプリの例

この例では、マルチプラットフォームウィジェットを使用することにより、Compose for Desktop と Compose for Web の間でユーザーインターフェースコードを共有する方法をお見せします。

ソースコードを詳しく見る

Play

GitHub でさらに詳しく見る

コードサンプル

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 チャンネルへ、お気軽にご参加ください。