---
title: "Capacitor SDKでフローを使ってアプリ内課金を有効にする"
description: "Adapty フローを使ってアプリ内課金を有効にするためのクイックスタートガイド。"
---

アプリ内課金を有効にするには、3つの重要な概念を理解する必要があります。
- [**プロダクト**](product) – ユーザーが購入できるもの（サブスクリプション、消耗型アイテム、永続アクセス）
- [**フロー**](adapty-flow-builder) – ノーコードのフロービルダーで作成した、ユーザーにプロダクトを提示する画面シーケンス。SDKは`getFlow`を通じてフローを取得します。独自のコードでUIを構築したい場合は、ペイウォールを使用してください — [ペイウォールを手動で実装する](capacitor-quickstart-manual)を参照してください。
- [**プレースメント**](placements) – アプリ内でフローを表示する場所とタイミング（`main`、`onboarding`、`settings`など）。ダッシュボードでフローをプレースメントに紐付け、コード内でプレースメントIDを指定してリクエストします。これにより、A/B テストの実施や、ユーザーごとに異なるフローを表示することが簡単になります。
Adapty では、アプリに課金機能を実装する方法を3つ提供しています。アプリの要件に合わせて選択してください。
| 実装方法 | 複雑さ | 使用するタイミング |
|---|---|---|
| Adapty フロービルダー | ✅ 簡単 | [ノーコードビルダーで購入可能な完全なフローを作成します](quickstart-paywalls)。Adapty が自動でレンダリングし、複雑な購入フロー、レシート検証、サブスクリプション管理をすべて裏側で処理します。 |
| 手動作成のペイウォール | 🟡 普通 | アプリのコードでペイウォール UI を実装しますが、プロダクト提供の柔軟性を保つために Adapty からフローオブジェクトを取得します。[ガイド](capacitor-quickstart-manual)を参照してください。 |
| オブザーバーモード | 🔴 難しい | 独自の購入処理インフラがすでにあり、それを引き続き使用したい場合に選択します。オブザーバーモードには Adapty での制限があることに注意してください。[記事](observer-vs-full-mode)を参照してください。 |
:::important
**以下の手順は、Adapty フロービルダーで作成したフローの実装方法を説明しています。**

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

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

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-capacitor)。

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

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

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

Adapty フロービルダーで作成したフローを取得するには、`getFlow` メソッドを使って[プレースメント](placements) ID から `flow` オブジェクトを取得します。フローには表示に必要な UI 要素とスタイルが含まれています。
```typescript showLineNumbers title="Capacitor"

try {
  const flow = await adapty.getFlow({
    placementId: 'YOUR_PLACEMENT_ID',
  });
  // the requested flow
} catch (error) {
  // handle the error
}
```

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

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

`createFlowView` メソッドで `view` を作成し、イベントハンドラーを設定して、`view.present()` を呼び出します。各 `view` は一度しか使用できません。フローを再度表示する場合は、`createFlowView` をもう一度呼び出して新しい `view` インスタンスを作成してください。
```typescript showLineNumbers title="Capacitor"

try {
  const view = await createFlowView(flow);

  await view.setEventHandlers({
    onPurchaseCompleted(purchaseResult, product) {
      return purchaseResult.type === 'success'; // close the flow on a successful purchase, keep it open for cancelled or pending purchases
    },
  });

  await view.present();
} catch (error) {
  // handle the error
}
```

:::tip
フローの表示方法の詳細については、[ガイド](capacitor-present-paywalls)をご覧ください。
:::
## 3. ボタンアクションの処理 \{#handle-button-actions\}

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

ただし、カスタムまたは事前定義済みの ID を持つボタンについては、コード内でアクションを処理する必要があります。また、デフォルトの動作をオーバーライドしたい場合もあります。

たとえば、以下は閉じるボタンのデフォルトの動作です。コードに追加する必要はありませんが、必要な場合にどのように実装するかを確認できます。
```typescript showLineNumbers title="Capacitor"
const unsubscribe = await view.setEventHandlers({
  onCloseButtonPress() {
    return true; // allow the flow to close
  },
});
```

:::tip
ボタンの[アクション](capacitor-handle-paywall-actions)と[イベント](capacitor-handling-events)の処理方法については、ガイドをご覧ください。
:::
## 次のステップ \{#next-steps\}

:::tip
ご質問やお困りのことがあれば、[サポートフォーラム](https://adapty.featurebase.app/)をご覧ください。よくある質問への回答を見つけたり、ご自身の質問を投稿することができます。チームとコミュニティがサポートいたします！
:::

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

次に、適切なユーザーにペイウォールを表示したり有料機能へのアクセスを付与したりするため、[ユーザーのアクセスレベルを確認する](capacitor-check-subscription-status)必要があります。

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

このガイドの全手順をアプリに統合する方法を以下に示します。
```typescript showLineNumbers title="Capacitor"

export async function showFlow() {
  try {
    const flow = await adapty.getFlow({
      placementId: 'YOUR_PLACEMENT_ID',
    });

    const view = await createFlowView(flow);

    await view.setEventHandlers({
      onCloseButtonPress() {
        return true;
      },
      onPurchaseCompleted(purchaseResult, product) {
        return purchaseResult.type === 'success'; // close the flow on a successful purchase, keep it open for cancelled or pending purchases
      },
    });

    await view.present();
  } catch (error) {
    // handle any error that may occur during the process
    console.warn('Error showing flow:', error);
  }
}
```