--- title: "チュートリアル: アプリ内購入をFlutterアプリに実装する方法" description: "Adapty を利用したFlutterアプリのアプリ内購入。" url: "https://adapty.io/ja/blog/flutter/" language: "ja" slug: "flutter" category: "adapty-updates" date: "2022-08-30T00:00:00.000Z" date_modified: "2022-08-30T00:00:00.000Z" author: "Alexey Goncharov" --- # チュートリアル: アプリ内購入をFlutterアプリに実装する方法 **Flutter** は、Googleが開発した比較的新しいフレームワークで、クロスプラットフォーム アプリをすばやく作成できます。もう1つの一般的なフレームワークは、Facebookの**React Native** です。 Flutterアプリは、iOSとAndroidの両方を一度に構築できます。そのため、購入ライブラリは、StoreKitとBilling Libraryの両方と互換性がある必要があります。 アーキテクチャに関しては、Adapty Flutter SDKを含むすべての支払いプラグインは、ネイティブライブラリであるStoreKitとBilling Libraryのラッパーです。この場合、これは独自の[Adapty iOS](https://github.com/adaptyteam/AdaptySDK-iOS)および[Android SDK](https://github.com/adaptyteam/AdaptySDK-Android)ライブラリのラッパーです。 ## Flutterベースのアプリでのアプリ内購入 (in-app purchase) 用のオープンソースライブラリ Flutterアプリでの購入の一般的なソリューションは、オープンソースプラグインの [in_app_purchase](https://pub.dev/packages/in_app_purchase) (Flutter開発チームによって開発) と[flutter_inapp_purchase](https://pub.dev/packages/flutter_inapp_purchase) (非公式プラグイン) です。 これらのプラグインは、クライアントサイドの購入を実装するために作成されました。サーバーサイド (server-side) のレシート検証 (receipt validation) 機能はありません。レシートを検証して、更新、返金、試用 (trial)、キャンセルなどに関する支払い分析を収集するには、独自のサーバーサイドインフラストラクチャを設定する必要があります。 さらに、これらのライブラリは通常、ストアの新しい機能をサポートするまで時間がかかります。例として、現時点ではプロモーションオファー (promo offer)、従量課金制 (pay as you go) の機能、iOSの前払い (pay upfront) 機能がありません。 当社のライブラリはサーバーと通信するため、次のすべてが揃っています。 ● 購入サーバーの検証 ● ネイティブ支払い機能の完全なサポート ● DRY構文 ● サブスクリプション (定期購入) (subscription) と購入の分析およびその他のデータ収集 ● A/Bテスト (A/B test) と、購入、価格設定、プロモーション期間の簡単な実験 ● ペイウォール (paywall) とプロモーションオファー 簡潔で読みやすい記事にするために、Flutterアプリの購入について説明する前に、実行すべき手順について以前に公開した記事のリンクを記載しておきます。 ## iOSおよびAndroidでの購入の作成 まず、デペロッパーアカウントをお持ちでない場合は作成してください。次に、iOSとAndroidの両方で毎週の購入を作成する必要があります。これを行う方法については、以前の記事で取り上げました。 [iOSの購入の作成](https://adapty.io/blog/ios-in-app-purchases-1/) [Androidの購入の作成](https://adapty.io/blog/android-in-app-subscriptions-part-1/) 完了したら、プロジェクトの作成と設定を開始できます。 ## プロジェクトの作成と設定 実装と当社のシステムの両方で購入を実行するには、以下の技術的な詳細情報を入力していただく必要があります。 ![](https://adapty.io/wp-content/uploads/2023/01/61dbfcadde3e1409fe5f8314_iy6l5yif4wtrzqfjzaek9s70lntdy9bul_7h6homozvwghjkvrzry8ohu9pva-7wq18d6lyztyrc3ochoezylyispz580qelit5axr2dlrpu0dat0qjcwdbx2ecgeosqtass0c7w.png) iOSの場合、次のことを行う必要があります。 ● **バンドルIDを指定** して、Adaptyプロジェクトをアプリに紐付ける ● **App Store ConnectでApp Storeサーバ通知を設定** して、サブスクリプションイベント(event) に関する通知を受け取れるようにします。 ● AdaptyサーバーがAppleのサーバーへの接続を確立して、レシートを検証するために使用する**App Store共有シークレット (shared secret) を指定** します。 Androidの場合、パッケージ名とサービスアカウントキーファイルの両方を指定する必要があります。パッケージ名は、Android版のiOSのバンドルIDです。コードで使用されているものと同じ名前を使用する必要があります。これは、*android.defaultConfig.applicationId* ディレクトリの/android/app/build.gradleファイルで確認できます。 ## プロダクトとペイウォールの設定 Adaptyプロダクトは、さまざまなストアのプロダクトを包括します。ここではApp StoreとGoogle Playのみを取り上げますが、今後他のストアも紹介していきます。このアプローチの目的は、クロスプラットフォームの統計収集を容易にして、識別子ではなくトップレベルのエンティティを操作できるようにすることです。 **ペイウォール** は、プロダクトの配列とリモート設定 (remote config) ファイル (ダッシュボードで指定したメタデータを含むJSONファイル) を含む抽象的なエンティティです。ペイウォールIDをアプリにハードコーディングします。このIDは、設定ファイルとプロダクトデータを取得するために使用されます。アプリを更新しなくても、これらの両方を編集できます。通常のシナリオでは、ペイウォールを設計して、当社から受け取ったデータを入力します。 ### プロダクトの作成 Google Play ConsoleとApp Store Connectを使用して、毎週のサブスクリプション (定期購入) に対応するプロダクトを作成してみましょう。支払いシステムから取得できる、対応するプロダクトのIDを入力します。 App Store ConnectにはAPIがないため、一度のみ手動で行う必要があることに注意してください。 ![61dbfcadc56e16884ceeda5a 34mxwyuolr8iv5x2uec0mz6 ezswlcwoiag3ixmluw25i8qerq8ybrz vj0crilc9uwnkrao9asthwrbehotn 8r7j5amw8ruxtuy2eogngkul8qubafsly9dsisdjsapx0kx2m8](https://adapty.io/wp-content/uploads/2023/01/61dbfcadc56e16884ceeda5a_34mxwyuolr8iv5x2uec0mz6-ezswlcwoiag3ixmluw25i8qerq8ybrz_vj0crilc9uwnkrao9asthwrbehotn_8r7j5amw8ruxtuy2eogngkul8qubafsly9dsisdjsapx0kx2m8.png) ### ペイウォールの作成 ペイウォールを作成する際の重要な点は、便利な形式でIDを指定できることです。この識別子は、後でSDKによってペイウォールデータをリクエストするために使用されます。これは、良いアプローチになるでしょう。このアーキテクチャでは、クライアントサイドでプロダクトをハードコーディングする必要はありません。プロダクト管理、バージョニング、テストなどを柔軟に行うことができます。代替のオプションは、一連の組み込みプロダクトを含むFirebase JSON です。ただし、エラー検証に対応していないため、利便性に欠けます。 ![61dbfcae9d2b62d615559378 zn55mgmaz86h7qtmlow pxcwlspih63ifgswsurxtydhjlqyj3gm jqtzo vk8bvb3txn29f7g2oe6o2voyadhruy1lhyyvqvuo6ms5ytfq sl9nf0ixpjtzyjdk0ozq9yzn7cx7](https://adapty.io/wp-content/uploads/2023/01/61dbfcae9d2b62d615559378_zn55mgmaz86h7qtmlow-pxcwlspih63ifgswsurxtydhjlqyj3gm-jqtzo-vk8bvb3txn29f7g2oe6o2voyadhruy1lhyyvqvuo6ms5ytfq-sl9nf0ixpjtzyjdk0ozq9yzn7cx7.png) 以上です。プロダクトとペイウォールを作成したので、最初の購入の準備が整いました。 SDKのインストールに進みましょう。 ## SDKの使用方法 サブスクリプション (定期購入) を設定して使用するために必要な主な機能を見てみましょう。 ### ライブラリのインストール まず、*adapty_flutter* ライブラリをプロジェクトに追加する必要があります。これを行うには、次の依存関係を*pubspec.yaml* ファイルに追加します。 ```dart dependencies: adapty_flutter: ^1.0.4 ``` その後、以下のコードを実行します。 ```dart flutter pub get ``` ここから、次のようにAdapty SDKをアプリにインポートできます。 ```dart import 'package:adapty_flutter/adapty_flutter.dart'; ``` ### 設定 Adaptyで動作するようにアプリを設定する必要があります。その際には、パブリック SDKキーを使用して、*AdaptyPublicSdkKey* フラグを***Info.plist** *(iOS の場合) または*AndroidManifest.xml* (Android の場合) に追加します。 [Adapty設定](https://app.adapty.io/settings/general)でSDKキーを確認できます。 ![61dbfcaef59c49d11e233082 lsazt3ucjsc79arcgsxqdhss6j5t7gzc1ozj9kcwzet3 ouvcwuj 63wfcgl1ptjy4xpny8axipncjwfqvyks1yhf88bj2joq3qpn luafk1smbmkclwkxeehl08fbucvxi7d9tx](https://adapty.io/wp-content/uploads/2023/01/61dbfcaef59c49d11e233082_lsazt3ucjsc79arcgsxqdhss6j5t7gzc1ozj9kcwzet3-ouvcwuj-63wfcgl1ptjy4xpny8axipncjwfqvyks1yhf88bj2joq3qpn_luafk1smbmkclwkxeehl08fbucvxi7d9tx.jpg) ***Info.plist***: ```dart ...      AdaptyPublicSdkKey ``` AndroidManifest.xml: ```dart ... ``` 次に、Flutter側でこのコードを呼び出してSDKを有効にします (プロジェクトのmain()メソッドなど)。 ```dart void main() { runZoned(() async { Adapty.activate(); final installId = await Service.getOrCreateInstallId(); await Adapty.identify(***customer-user-id***); await Adapty.setLogLevel(AdaptyLogLevel.verbose); runApp(MyApp()); }); } ``` *void Adapty.activate()* 関数は、*Adapty_Flutter* ライブラリを有効にします。 ```dart Future Adapty.identify(String customerUserId) ``` *Adapty.identify* を使用すると、ユーザーのIDを取得できます。 AdaptyはそのIDをサブスクリプション (定期購入) および分析システムに送信して、イベントをこのプロファイルに割り当てます。また、[プロファイル](https://app.adapty.io/profiles/users)の*customerUserId* でクライアントを見つけることもできます。 Adaptyは、エラーメッセージやその他の重要なデータをログに記録して、現状を把握するのに役立ちます。 ```dart Future Adapty.identify(AdaptyLogLevel value) ``` この関数を使用すると、想定される3つの値のいずれかを選択できます。 ● *AdaptyLogLevel.none* (デフォルト設定)：何も記録されません。 ● *AdaptyLogLevel.errors*：エラーメッセージのみが記録されます。 ● *AdaptyLogLevel.verbose*：メソッド呼び出し、APIリクエストと応答、エラーメッセージがログに記録されます。 ### ペイウォールの取得 ペイウォールリストを取得するには、次のコードを実行します。 ```dart try { final GetPaywallsResult getPaywallsResult = await Adapty.getPaywalls(forceUpdate: Bool); final List paywalls = getPaywallsResult.paywalls; } on AdaptyError(adaptyError) {} catch(e) {} ``` Adapty.getPaywalls()関数は、以下を含むGetPaywallsResultオブジェクトを返します。 ● ペイウォール：ペイウォール配列 (*AdaptyPaywall*)。モデルには、プロダクトリスト、ペイウォールID、カスタムペイロードなど、その他いくつかの値が含まれています。 ### 購入 前回の手順で、ペイウォール配列を取得しました。次に、これらのプロダクトをUIに表示するために必要なものを確認します。このペイウォールの名前が*your_paywall_id* であるとします ```dart final List? paywalls = getPaywallsResult.paywalls; myPaywall = paywalls?.firstWhere((paywall) => paywall.developerId == "your_paywall_id", orElse: null); ``` 次に、productsフィールドのproduct配列を使用して、すべての項目を表示します。ユーザーが最初のプロダクトを購入したいとしましょう。わかりやすくするために、product配列の最初の項目であると仮定します。 ```dart final AdaptyProduct? product = myPaywall?.products?.first; ``` 購入を開始するには、*makePurchaseResult* 関数を呼び出します (SDKからすべてのエラーメッセージを引き続き受け取るには、必ずtry-catchブロックでラップしてください)。 ```dart final MakePurchaseResult makePurchaseResult = await Adapty.makePurchase(product); ``` 関数が正常に実行されると、makePurchaseResult変数はその結果を値として受け取ります。購入完了後にアクセスレベルを確認する方法は、次のとおりです。 ```dart final isPremium = makePurchaseResult?.purchaserInfo?.accessLevels['premium']?.isActive ?? false; ``` *AdaptyErrorCode.paymentCancelled* は、ユーザー自身で購入をキャンセルしたことを意味します。これは、実際のエラーメッセージではありません。 購入を復元するには、*.restorePurchases()* メソッドを使用します。 ```dart try { final RestorePurchasesResult restorePurchasesResult = await Adapty.restorePurchases(); // "premium" is an identifier of default access level if (restorePurchasesResult?.purchaserInfo?.accessLevels['premium']?.isActive ?? false) { // grant access to premium features } } on AdaptyError catch (adaptyError) {} catch (e) {} ``` *MakePurchaseResult* オブジェクトと*RestorePurchasesResult* オブジェクトの両方に*purchaserInfo* が含まれていることを考慮してください。このオブジェクトには、アクセス レベル、サブスクリプション (定期購入)、購入に関するデータが含まれています。通常、アクセスレベルを確認するだけで、ユーザーがアプリの有料機能を利用できるかどうかを判断できます。 ### サブスクリプション (定期購入) のステータス 先行するトランザクションチェーン全体を確認する必要がないように、「アクセスレベル」という用語を導入しています。アクセスレベルは、ユーザーが利用可能なアプリの機能の範囲を説明するフラグです。まだ有料プランを購入していない場合、アクセスレベルは「null」になります。それ以外の場合は、プロダクトで指定した値になります。 たとえば、シルバーとゴールドの2つのアクセスレベルを設定できます。各レベルに応じて、購入すると異なるアクセスレベルと機能を利用できるようになります。ほとんどのアプリには、1つのアクセスレベルしかありません。 サブスクリプションがアクティブかどうかを確認するには、ユーザーにアクティブなアクセスレベルがあるかどうかを確認するだけで十分です。*.getPurchaserInfo()* メソッドを使用して、確認することができます。 ```dart try { AdaptyPurchaserInfo purchaserInfo = await Adapty.getPurchaserInfo(); // "premium" is an identifier of default access level if (purchaserInfo.accessLevels['premium']?.isActive ?? false) { // grant access to premium features } } on AdaptyError catch (adaptyError) {} catch (e) {} ``` *.purchaserInfoUpdateStream* ストリームに登録すると、サブスクリプショユーザーのアクセスレベルの変更に関する通知をリアルタイムで受け取ることもできます。方法は次のとおりです。 ```dart Adapty.purchaserInfoUpdateStream.listen((purchaserInfo) { print('#Adapty# Purchaser Info Updated'); if (purchaserInfo.accessLevels['premium'].isActive) { // grant access to premium features } }); ``` **まとめ** 当社の[SDK](https://github.com/adaptyteam/AdaptySDK-Flutter)は、支払いをアプリにすばやく統合できるように設計されています。さらに、A/Bテスト、分析、追加の統合など、必要となる他のすべての手順を効率化できるよう努めています。 お客様の収益が月額10,000ドル未満の場合、すべての購入機能を無料で提供します。数か月にわたって作業負担を軽減して、最も重要なプロダクトに集中できます。