---
title: "Kotlin Multiplatform SDKでオンボーディングを表示する"
description: "コンバージョンを高めるためにオンボーディングを効果的に表示する方法を学びましょう。"
---

ビルダーを使ってオンボーディングをカスタマイズした場合、Kotlin Multiplatformアプリのコードでレンダリング処理を記述しなくても、ユーザーに表示できます。このようなオンボーディングには、表示内容と表示方法の両方が含まれています。

始める前に、以下を確認してください：

1. [Adapty Kotlin Multiplatform SDK](sdk-installation-kotlin-multiplatform) 3.16.1以降がインストールされていること。
2. [オンボーディングを作成](create-onboarding)していること。
3. オンボーディングを[プレースメント](placements)に追加していること。

Adapty Kotlin Multiplatform SDKでは、オンボーディングを表示する方法が2つあります：

- **Compose Multiplatformを使用する**
- **Compose Multiplatformを使用しない**

## Compose Multiplatformを使用する \{#with-compose-multiplatform\}

オンボーディングを表示するには、`createOnboardingView`メソッドで作成した`view`に対して`view.present()`メソッドを呼び出します。各`view`は一度しか使用できません。再度オンボーディングを表示する必要がある場合は、`createOnboardingView`をもう一度呼び出して新しい`view`インスタンスを作成してください。

:::warning
`view`を再作成せずに再利用すると、エラーが発生する場合があります。
:::

```kotlin showLineNumbers title="Kotlin Multiplatform"

viewModelScope.launch {
    AdaptyUI.createOnboardingView(onboarding = onboarding).onSuccess { view ->
        view.present()
    }.onError { error ->
        // handle the error
    }
}
```

### iOSの表示スタイルを設定する \{#configure-ios-presentation-style\}

`present()`メソッドに`iosPresentationStyle`パラメータを渡すことで、iOSでのオンボーディングの表示方法を設定できます。パラメータには`AdaptyUIIOSPresentationStyle.FULLSCREEN`（デフォルト）または`AdaptyUIIOSPresentationStyle.PAGESHEET`を指定できます。

```kotlin showLineNumbers

viewModelScope.launch {
    val view = AdaptyUI.createOnboardingView(onboarding = onboarding).getOrNull()
    view?.present(iosPresentationStyle = AdaptyUIIOSPresentationStyle.PAGESHEET)
}
```

### オンボーディング内のリンクの開き方をカスタマイズする \{#customize-how-links-open-in-onboardings\}

デフォルトでは、オンボーディング内のリンクはアプリ内ブラウザで開きます。これにより、アプリを切り替えることなくウェブページをアプリ内で表示でき、シームレスなユーザー体験を提供します。

代わりに外部ブラウザでリンクを開きたい場合は、`externalUrlsPresentation`パラメータを`AdaptyWebPresentation.EXTERNAL_BROWSER`に設定することでこの動作をカスタマイズできます：

```kotlin showLineNumbers

viewModelScope.launch {
    AdaptyUI.createOnboardingView(
        onboarding = onboarding,
        externalUrlsPresentation = AdaptyWebPresentation.EXTERNAL_BROWSER // default – IN_APP_BROWSER
    ).onSuccess { view ->
        view.present()
    }.onError { error ->
        // handle the error
    }
}
```

## Compose Multiplatformを使用しない \{#without-compose-multiplatform\}

:::note
`createNativeOnboardingView`はコアモジュール`io.adapty:adapty-kmp`の一部です。プロジェクトでCompose Multiplatformを使用しない場合、`io.adapty:adapty-kmp-ui`の依存関係は不要です。
:::

Compose Multiplatformを使わずにオンボーディングを埋め込むには、`createNativeOnboardingView`を呼び出します。レイアウトに追加できる`AdaptyNativeOnboardingView`が返されます：

<Tabs>
<TabItem value="android" label="Android">
```kotlin showLineNumbers title="Kotlin Multiplatform (Android)"

val nativeView = AdaptyUI.createNativeOnboardingView(
    context = context,
    viewModelStoreOwner = activity,
    onboarding = onboarding,
    observer = myOnboardingObserver,
)

// Embed in your Compose layout:
AndroidView(
    factory = { nativeView.view },
    modifier = Modifier.fillMaxSize()
)
```
</TabItem>
<TabItem value="ios" label="iOS">
KMPのインターフェースデフォルトメソッドはSwiftでは`@required`になるため、SwiftからSwiftから`AdaptyUIOnboardingsEventsObserver`を直接実装することはできません。まず`iosMain`でオープンな基底クラスを宣言してください：

```kotlin showLineNumbers title="iosMain (Kotlin)"
open class BaseOnboardingObserver : AdaptyUIOnboardingsEventsObserver
```

次にSwiftでサブクラス化し、必要なメソッドのみオーバーライドします：

```swift showLineNumbers title="Swift"
class MyOnboardingObserver: BaseOnboardingObserver {
    override func onboardingViewOnCloseAction(
        view: AdaptyUIOnboardingView,
        meta: AdaptyUIOnboardingMeta,
        actionId: String
    ) {
        // remove nativeView from your view hierarchy
    }
}

let nativeView = AdaptyUI.shared.createNativeOnboardingView(
    onboarding: onboarding,
    observer: MyOnboardingObserver()
)
// nativeView.viewController is a UIViewController.
// Add it to your SwiftUI view or UIKit hierarchy.
```
</TabItem>
</Tabs>

### ビューを破棄する \{#dispose-the-view\}

レイアウトからビューを削除する際は`dispose()`を呼び出してください。これによりイベントリスナーの登録が解除され、内部リソースが解放されます。

```kotlin showLineNumbers title="Kotlin Multiplatform"
nativeView.dispose()
```