---
title: "はじめに"
description: "Adapty フィーチャーフラグを使って、サブスクリプションフローをパーソナライズしましょう。"
---

Adapty を使うと、モバイルアプリのユーザーの旅のさまざまな時点（オンボーディング、設定画面など）でペイウォールや A/B テストを作成・実行できます。これらの時点を[プレースメント](placements)と呼びます。アプリ内のプレースメントは、複数のペイウォールや [A/B テスト](ab-tests)を同時に管理でき、それぞれ特定のユーザーグループ（[オーディエンス](audience)と呼びます）向けに作成されます。さらに、新しいアプリバージョンをリリースせずに、ペイウォールを別のものと入れ替えながら実験することも可能です。モバイルアプリにハードコードするのはプレースメント ID だけです。

  <img src="/assets/shared/img/audience.jpg"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

Adapty ライブラリは、Adapty ダッシュボードから最新のプロダクトを取得し、ペイウォールを常に最新の状態に保ちます。[プロダクトデータを取得](ff-action-flow)して[ペイウォールに表示](ff-add-variables-to-paywalls)し、[購入を処理](ff-make-purchase)し、[ユーザーのアクセスレベルを確認](ff-check-subscription-status)して有料コンテンツを表示すべきかどうかを判断します。

始めるには、以下の手順に従って FlutterFlow プロジェクトに [Adapty ライブラリを追加](ff-getting-started#add-the-adapty-library-as-a-dependency)し、[初期化](ff-getting-started#initiate-adapty-plugin)してください。

:::warning

始める前に、以下の制限事項を確認してください：

- FlutterFlow 用 Adapty ライブラリは Web アプリをサポートしていません。Web アプリへのコンパイルは避けてください。
- FlutterFlow 用 Adapty ライブラリは、Adapty のペイウォールビルダーで作成されたペイウォールをサポートしていません。Adapty で購入を有効にする前に、FlutterFlow で独自のペイウォールをデザインする必要があります。

:::

## Adapty ライブラリを依存関係として追加する \{#add-the-adapty-library-as-a-dependency\}

1. [FlutterFlow ダッシュボード](https://app.flutterflow.io/dashboard)でプロジェクトを開き、左メニューから **Settings and Integrations** をクリックします。左側の **Project setup** セクションで **Project dependencies** を選択します。
   

     <img src="/assets/shared/img/main_settings.webp"
     style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
     }}
   />

2. **FlutterFlow Libraries** セクションで **Add Library** をクリックし、`adapty-xtuel0` と入力します。**Add** をクリックします。

3. 次に、SDK キーをライブラリに関連付けます。ライブラリの横にある **View details** をクリックします。

     <img src="/assets/shared/img/ff_view_details.webp"
     style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
     }}
   />

4. Adapty ダッシュボードの [**App Settings** -> **General** タブ](https://app.adapty.io/settings/general)から **Public SDK key** をコピーします。

   
     <img src="/assets/shared/FF_img/adaptyapikey.webp"
     style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
     }}
   />
   

5. FlutterFlow の **AdaptyApiKey** にキーを貼り付けます。

   
     <img src="/assets/shared/img/ff_apikey.webp"
     style={{
    border: '1px solid #727272', /* border width and color */
    width: '400px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
     }}
   />
   

Adapty FF ライブラリがプロジェクトの依存関係として追加されます。**Adapty** FF ライブラリウィンドウには、プロジェクトにインポートされたすべての Adapty リソースが表示されます。

## アプリ起動時に新しいアクティベーションアクションを呼び出す \{#call-the-new-activation-action-at-application-launch\}

1. 左メニューから **Custom Code** セクションに移動し、`main.dart` を開きます。

   
     <img src="/assets/shared/img/ff_dartmain.webp"
     style={{
       border: '1px solid #727272', /* border width and color */
       width: '700px', /* image width */
       display: 'block', /* for alignment */
       margin: '0 auto' /* center alignment */
     }}
   />
   

2. **+** をクリックして `activate (Adapty)` を選択します。

   
     <img src="/assets/shared/img/ff_activate.webp"
     style={{
       border: '1px solid #727272', /* border width and color */
       width: '700px', /* image width */
       display: 'block', /* for alignment */
       margin: '0 auto' /* center alignment */
     }}
   />
   

3. **Save** をクリックします。

## Adapty プラグインを初期化する \{#initiate-adapty-plugin\}

Adapty ダッシュボードにアプリを認識させるには、FlutterFlow で特別なキーを設定する必要があります。

1. FlutterFlow プロジェクトで、左メニューから **Settings and Integrations > Permissions** に移動します。
2. 開いた **Permissions** ウィンドウで、**Add Permission** ボタンをクリックします。
3. **iOS Permission Key** と **Android Permission Key** の両方のフィールドに `AdaptyPublicSdkKey` を貼り付けます。
4. **Permission Message** には、Adapty ダッシュボードの [**App Settings** -> **General** タブ](https://app.adapty.io/settings/general)から **Public SDK key** をコピーして貼り付けます。各アプリには固有の SDK キーがあるため、複数のアプリがある場合は正しいキーを使用してください。

   
     <img src="/assets/shared/img/ff_permissions.webp"
     style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
     }}
   />
   

これらの手順が完了すると、FlutterFlow アプリでペイウォールを呼び出し、そこから購入を有効にできるようになります。

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

1. FlutterFlow で Adapty ペイウォールのプロダクトとそのデータを処理するための[アクションフローを作成](ff-action-flow)します。
2. 受け取ったデータを FlutterFlow でデザインした[ペイウォールにマッピング](ff-add-variables-to-paywalls)します。
3. ペイウォールの[購入ボタンを設定](ff-make-purchase)して、クリック時に Adapty 経由でトランザクションを処理できるようにします。
4. 最後に、[サブスクリプションステータスの確認を追加](ff-check-subscription-status)して、ユーザーに有料コンテンツを表示するかどうかを判断します。