Kotlin Multiplatform Academy · レッスン

iOSとDesktopで共有UIをホストする

各ターゲットに同じcomposableを組み込みます

「iOSとDesktopで共有UIをホストする」はCoddyKit上の無料Kotlin Multiplatform Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはKotlin Multiplatform Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Kotlin Multiplatform Academyコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Same App, New Hosts

Your shared App composable is ready. Now each platform needs a small entry point that mounts it. The UI code itself never changes.

iOS Wraps Compose in a Controller

On iOS you expose your composable through a UIViewController. The function ComposeUIViewController hands SwiftUI a controller it can present.

fun MainViewController() =
    ComposeUIViewController { App() }

Call It from SwiftUI

From SwiftUI you wrap that controller in a UIViewControllerRepresentable, so your Kotlin screen becomes an ordinary SwiftUI view.

struct ComposeView: UIViewControllerRepresentable {
    func makeUIViewController(context: Context) -> UIViewController {
        MainViewControllerKt.MainViewController()
    }
}

iOS Renders Natively

Under the hood Compose draws using Skia onto an iOS surface, so your shared screen feels native and shares logic with Android seamlessly.

Desktop Uses a Window

On desktop you launch the same App inside an application window. A few lines of Kotlin give you a real desktop program.

fun main() = application {
    Window(onCloseRequest = ::exitApplication) {
        App()
    }
}

Desktop Runs on the JVM

The desktop target compiles to the JVM and renders with Skia too, so the same composables you wrote for phones run on macOS, Windows and Linux.

One Composable, Three Hosts

Android uses setContent, iOS uses a view controller, desktop uses a window. All three call the very same shared App function.

Share Even More by Default

Because hosting is the only platform-specific part, almost everything you build lives in commonMain. The shared surface grows large.

Tweak Per-Platform When Needed

You can still branch on platform inside shared code for things like window size or safe areas, keeping a single codebase that adapts nicely.

Test the UI Once

Shared UI means shared UI tests in commonTest, so you verify behavior a single time and trust it on every host you ship to.

Ship Three Apps from One

With hosts wired up, a single Compose codebase powers your Android, iOS and desktop releases, cutting duplicated UI work dramatically. 🚢

Quick Check

How does iOS host a shared composable?

Recap: Host It Everywhere

You mounted the same shared App on iOS through a view controller and on desktop through a window. One Compose codebase, three platforms shipped. 🎯

よくある質問

「iOSとDesktopで共有UIをホストする」レッスンは無料ですか？

はい。「iOSとDesktopで共有UIをホストする」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Kotlin Multiplatform Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Kotlin Multiplatform Academyコースには全4レッスンが含まれています。

「iOSとDesktopで共有UIをホストする」で何を学びますか？

各ターゲットに同じcomposableを組み込みますブラウザで直接実行するハンズオンコードでKotlin Multiplatform Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Kotlin Multiplatform Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのKotlin Multiplatform Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「iOSとDesktopで共有UIをホストする」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このKotlin Multiplatform Academyレッスンでコードを書いて実行できますか？

はい。すべてのKotlin Multiplatform Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Kotlin Multiplatform Academyに戻る