---
title: "Kotlin Multiplatform SDKでFlow Builderを使ったアプリ内課金の有効化"
description: "AdaptyのFlow Builderでアプリ内課金を有効化するためのクイックスタートガイド。"
---

このガイドでは、Adapty Kotlin Multiplatform SDK v4（ベータ版）の API を使用しています。v3 をお使いの場合は、対応するメソッド名について[移行ガイド](migration-to-kmp-sdk-v4)を参照してください。

アプリ内課金を有効にするには、3 つの重要な概念を理解する必要があります：

- [**プロダクト**](product) – ユーザーが購入できるもの（サブスクリプション、消耗型アイテム、永続アクセス）
- [**フロー**](adapty-flow-builder) – ノーコードのフロービルダーで作成した、プロダクトをユーザーに提示する画面シーケンス。SDKは`getFlow`で取得します。独自のコードでUIを構築したい場合はペイウォールを使用してください（[ペイウォールを手動で実装する](kmp-quickstart-manual)を参照）。
- [**プレースメント**](placements) – アプリのどこでいつフローを表示するかを指定します（`main`、`onboarding`、`settings`など）。ダッシュボードでフローをプレースメントに紐付け、コードからはプレースメントIDで取得します。これにより、A/B テストの実施や異なるユーザーへの異なるフローの表示が簡単にできます。

Adapty では、アプリで購入を有効にする方法を3つ提供しています。アプリの要件に応じて、いずれかを選択してください。

| 実装方法 | 複雑さ | 使用するタイミング |
|---|---|---|
| Adapty フロービルダー | ✅ 簡単 | [ノーコードビルダーで購入対応フローを完全に作成します](quickstart-paywalls)。Adapty が自動的にレンダリングし、購入フロー全体、レシート検証、サブスクリプション管理をすべて裏側で処理します。 |
| 手動作成ペイウォール | 🟡 中程度 | ペイウォールの UI はアプリのコードで実装しますが、プロダクトの柔軟性を維持するためにフローオブジェクトは Adapty から取得します。[ガイド](kmp-quickstart-manual)を参照してください。 |
| オブザーバーモード | 🔴 難しい | すでに独自の購入処理インフラがあり、それを引き続き使用したい場合に選択します。オブザーバーモードには Adapty における制限がある点に注意してください。[記事](observer-vs-full-mode)を参照してください。 |

:::important
**以下の手順は、Adapty フロービルダーで作成したフローを実装する方法を示しています。**

ペイウォールのUIを自分でビルドしたい場合は、[ペイウォールを手動で実装する](kmp-quickstart-manual)を参照してください。
:::

Adapty フロービルダーで作成したフローを表示するには、アプリのコード内で以下の操作だけ行えばOKです。

1. **フローを取得する**: Adaptyからフローを取得します。
2. **表示する（購入処理はAdaptyが担当）**: アプリ内にビューを表示します。
3. **ボタンアクションを処理する**: ユーザーの操作に対するアプリの応答を関連付けます。たとえば、リンクを開いたり、ユーザーがボタンをクリックしたときにフローを閉じたりします。

## はじめる前に \{#before-you-start\}

始める前に、以下の手順を完了してください：

1. Adapty ダッシュボードで、アプリを [App Store](initial_ios) および/または [Google Play](initial-android) に接続する。
2. Adapty で[プロダクトを作成する](create-product)。
3. [フローを作成してプロダクトを追加する](create-paywall)。
4. [プレースメントを作成してフローを追加する](create-placement)。
5. アプリのコードに [Adapty SDK をインストールして有効化する](sdk-installation-kotlin-multiplatform)。

:::tip
これらの手順を最も素早く完了するには、[クイックスタートガイド](quickstart)に従うか、[Developer CLI](developer-cli-quickstart)を使用してフローとプレースメントを作成してください。
:::

## 1. フローを取得する \{#1-get-the-flow\}

フローはダッシュボードで設定したプレースメントに紐付けられています。プレースメントを使うと、オーディエンスごとに異なるフローを表示したり、[A/B テスト](ab-tests)を実施したりできます。

Adapty フロービルダーで作成したフローを取得するには、次の手順を行います。

1. `getFlow` メソッドを使って、[プレースメント](placements) ID から `flow` オブジェクトを取得します。

2. `createFlowView` メソッドを使って、フローのビューを作成します。ビューにはフローを表示するために必要な UI 要素とスタイリングが含まれています。フローにビューが設定されていない場合、`createFlowView` はエラーを返すため、`onError` でハンドリングしてください。

:::important
ビューを取得するには、フロービルダーで **Show on device** トグルをオンにする必要があります。オンにしていない場合、`createFlowView` はエラーを返し、フローは表示されません。
:::

```kotlin showLineNumbers
Adapty.getFlow("YOUR_PLACEMENT_ID")
    .onSuccess { flow ->
        AdaptyUI.createFlowView(flow)
            .onSuccess { view ->
                view.present()
            }
            .onError { error ->
                // the flow has no view configured, or view creation failed
            }
    }
    .onError { error ->
        // handle the error
    }
```

## 2. フローを表示する \{#display-the-flow\}

フローを取得したら、数行のコードを追加するだけで表示できます。

デバイス画面にビジュアルフローを表示するには、まずビューを作成する必要があります。そのために、`AdaptyUI.createFlowView()` メソッドを呼び出します：

```kotlin showLineNumbers
AdaptyUI.createFlowView(flow)
    .onSuccess { view ->
        view.present()
    }
    .onError { error ->
        // handle the error
    }
```

ビューが正常に作成されたら、デバイスの画面に表示できます。各ビューは一度しか使用できません。`dismiss()` を呼び出した後、再度フローを表示するには `createFlowView` を呼び出してください。

:::tip
フローの表示方法の詳細については、[ガイド](kmp-present-paywalls)をご覧ください。
:::

## 3. ボタンアクションを処理する \{#handle-button-actions\}

ユーザーがフロー内のボタンをクリックすると、Kotlin Multiplatform SDK は購入、復元、フローのクローズ、リンクの開封を自動的に処理します。

ただし、カスタムまたは事前定義された ID を持つボタンは、コードでアクションを処理する必要があります。また、デフォルトの動作を上書きしたい場合もあります。

例えば、以下はクローズボタンのデフォルト動作です。コードに追加する必要はありませんが、必要な場合にどのように実装するかを確認できます。

デフォルトでは、購入が完了してもフローは開いたままになります。購入完了後にフローを閉じたい場合は、`flowViewDidFinishPurchase` コールバック内でビューを閉じてください。

:::tip
ボタンの[アクション](kmp-handle-paywall-actions)と[イベント](kmp-handling-events)の処理方法については、ガイドをご覧ください。
:::

```kotlin showLineNumbers
AdaptyUI.setFlowsEventsObserver(object : AdaptyUIFlowsEventsObserver {
    override fun flowViewDidPerformAction(view: AdaptyUIFlowView, action: AdaptyUIAction) {
        when (action) {
            is AdaptyUIAction.CloseAction -> mainUiScope.launch { view.dismiss() }
            else -> Unit
        }
    }

    override fun flowViewDidFinishPurchase(
        view: AdaptyUIFlowView,
        product: AdaptyPaywallProduct,
        purchaseResult: AdaptyPurchaseResult
    ) {
        if (purchaseResult !is AdaptyPurchaseResult.UserCanceled) {
            mainUiScope.launch { view.dismiss() }
        }
    }
})
```

## 次のステップ \{#next-steps\}

ペイウォールをアプリに表示する準備ができました。[App Storeサンドボックス](test-purchases-in-sandbox)または[Google Play Store](testing-on-android)でテスト購入を行い、ペイウォールからテスト購入が完了できることを確認してください。

次に、[ユーザーのアクセスレベルを確認](kmp-check-subscription-status)して、適切なユーザーにペイウォールを表示したり、有料機能へのアクセスを付与したりするようにしてください。

## 完全な例 \{#full-example\}

以下は、これらのステップをアプリにまとめて統合する方法です。

```kotlin showLineNumbers
// Set up the observer for handling flow events
AdaptyUI.setFlowsEventsObserver(object : AdaptyUIFlowsEventsObserver {
    override fun flowViewDidPerformAction(view: AdaptyUIFlowView, action: AdaptyUIAction) {
        when (action) {
            is AdaptyUIAction.CloseAction -> mainUiScope.launch { view.dismiss() }
            else -> Unit
        }
    }

    override fun flowViewDidFinishPurchase(
        view: AdaptyUIFlowView,
        product: AdaptyPaywallProduct,
        purchaseResult: AdaptyPurchaseResult
    ) {
        if (purchaseResult !is AdaptyPurchaseResult.UserCanceled) {
            mainUiScope.launch { view.dismiss() }
        }
    }
})

// Get and display the flow
Adapty.getFlow("YOUR_PLACEMENT_ID")
    .onSuccess { flow ->
        AdaptyUI.createFlowView(flow)
            .onSuccess { view ->
                view.present()
            }
            .onError { error ->
                // the flow has no view configured — use custom logic
            }
    }
    .onError { error ->
        // handle the error
    }
```