Apps Kit SDK logoApps Kit SDK
ドキュメント · Apps Kit SDK ポータル

ペイウォール

サイドバーの ペイウォール グループ(商品、オファリング、ペイウォールテンプレート)は、ペイウォール UI のコードを書かずに、アプリ内サブスクリプションと買い切り商品を作成・販売できる独立した機能エリアです。これらの3つの要素は、決まった順序で組み合わせて使用します。商品 は、Google Play、App Store、Amazon からインポートするか、手動で登録する単一のストア SKU(サブスクリプションの基本プラン、オファー、または買い切り商品)です。オファリング は、1つのアプリに属する複数の商品を名前付きのグループにまとめたもので、1つの商品をデフォルトの選択肢に設定します。ペイウォールテンプレート は、オファリングの商品を表示し、購入処理を開始するための実際の画面デザインで、ポータル上で視覚的に作成します。テンプレートを公開したら、アプリの詳細 → アプリのプレースホルダー用ペイウォール に戻り、アプリ内の実際の表示箇所に紐付けます。この手順は本ガイドの前のセクションで説明しています。

商品

商品 ページ(/paywall-products)では、管理しているすべてのアプリの商品を1つのテーブルで一覧表示します。列は #、タイトル、アプリ(アイコン、名前、パッケージ)、ストア(Google Play、Apple App Store、Amazon Appstore のプラットフォームアイコン。アプリのストアを認識できない場合は灰色のダッシュ)、ストア識別情報(ストア側の商品/SKU 文字列を等幅フォントで表示)、期間、ステータス バッジ(有効/無効)、作成日時、行ごとの操作です。検索ボックスでは、タイトル、SKU、説明、アプリ名、パッケージを検索できます。さらに、アプリ、ステータス、ストア、期間 フィルターで一覧を絞り込めます。フッターには、ペイウォール関連ページで共通のページネーションが表示されます。

1789744318189-products-list.png

新しい商品を作成するには、右上の 商品を作成 をクリックします。既存の商品を編集するには、その行をクリックします。どちらの場合も、2つのパネルで構成されたエディターが開きます。まず、商品が属する アプリ を選択してください(選択するまで、ほかの操作は有効になりません)。その後、そのアプリのストアから インポート するか、商品を追加 で手動作成します。

1789744336705-products-tree-grouped.png

アプリに商品を追加すると、左パネルに種類別のグループが表示されます。グループは、手動作成の商品(ポータルで直接作成した商品)、買い切り商品、および各 サブスクリプション です。サブスクリプションを展開すると、その 基本プラン と、各基本プランの下にある オファー が表示されます。基本プランとは、1つの共通サブスクリプションに属する、ストア上の課金・料金設定の単位です。たとえば、「Weekly Pro」と「Monthly Pro」という基本プランを、同じサブスクリプションの下に作成できます。

Google Play(Android)からのインポート。 Google Play アプリの場合、インポート → Google Play に接続 を選択すると、単なる入力フォームではなく、初回のみ必要な2段階のセットアップが案内されます。

1789744372767-products-import-google-play.png

  • 1. Google Cloud — Google Cloud Console でサービスアカウントを作成し、Google Play Android Developer API を有効にして、その JSON キーをダウンロードします。
  • 2. Play Console — そのサービスアカウントのメールアドレスを、アプリ情報の閲覧 と ストアでの表示の管理 の権限を付与して Play Console に招待します。モーダルにはコピー用のメールアドレスと、両方のコンソールへの直接リンクが表示されます。

ダウンロードした サービスアカウントの JSON キー をアップロードし、必要に応じて 無効な基本プランとオファーを含める にチェックを入れてから、商品を取得 をクリックします。このオプションはデフォルトでオフになっており、Play Console で現在有効なものだけがインポートされます。取得した各項目は、タイトル、説明、価格プレビュー、ステータスが入力済みの商品ドラフトになります。Google の場合のみ、基本プラン/オファーの完全なツリー(サブスクリプション ID、基本プラン ID、各オファーの種類、料金、フェーズ、利用資格)も取り込まれます。インポートを再実行すると、未保存のドラフトが Play Console の情報で更新されます。保存済みの商品には影響しません。

Apple App Store(iOS)からのインポート。 App Store アプリの場合、App Store の商品をインポート で、アプリの Bundle ID(入力済み)、Key ID、Issuer ID を指定し、アプリ内課金キー(.p8) ファイルをアップロードします。Key ID、Issuer ID、.p8 ファイルは、いずれも App Store Connect の「ユーザとアクセス → 統合 → アプリ内課金」ページから取得します。モーダルには、このページへの直接リンクがあります。Key ID、Issuer ID、.p8 ファイルがすべて揃うまで、商品を取得 は無効のままです。Apple 独自の階層構造(サブスクリプショングループ → 商品)により、インポートされた商品には Google のような基本プランのツリーは作成されません。ステータスは Apple の実際の審査状況から決まるため、APPROVED のサブスクリプションだけが「有効」として取り込まれます。審査中、デベロッパーの対応待ち、却下のものは、すべて「無効」として取り込まれます。

Amazon Appstore からのインポート。 Amazon では認証情報ではなくファイルを使用します。商品カタログ JSON(Amazon App Tester の商品エクスポート)をアップロードし、商品をインポート をクリックします。項目タイプが SUBSCRIPTION のものはサブスクリプション商品に、ENTITLED と CONSUMABLE のものは買い切り商品になります。Amazon には基本プランの概念がないため、インポートされた各商品は、基本プランのツリーではなく Amazon の商品 ID/SKU を直接保持します。

商品の手動作成。 商品を追加 をクリックすると、ストア識別情報をインポートせず、自分で入力するドラフトが作成されます。ストアのコンソールでまだ商品を設定していない場合や、先にポータルで準備しておきたい場合に便利です。表示される識別情報のフィールドは、アプリのストアによって異なります。Google Play ではサブスクリプション ID、基本プラン ID、請求対象期間、App Store ではサブスクリプショングループと商品 ID、Amazon では商品 ID と商品タイプを指定します。また、継続課金のサブスクリプションではなく、買い切り商品として設定することもできます。

インポートが成功して値が入力されたフィールドは読み取り専用になり、「ストアからインポートされました。Google Play / App Store / Amazon で編集してから、再度インポートしてください」 というツールチップが表示されます。ここで直接編集するのではなく、実際のストアのコンソールで変更してから、インポートを再実行してください。

1789744448829-products-base-plan-offers.png

ストアに関係なく、すべての商品には タイトル(100文字)、必須の 説明(500文字)、任意の 機能 / メリット タグ、カスタムのキー/値形式の パラメーター、ステータス(有効/無効)があります。ステータスは、インポートした商品でも切り替えられます。期間 は、週、月、3か月、6か月、年、無期限、または自由入力の カスタム期間 から指定します。保存した商品は、次に オファリング に紐付けます。

オファリングやペイウォールテンプレートからまだ参照されている商品を削除しようとしても、何も表示されずに失敗することはありません。ポータルには、商品が紐付いている対象を明示した2回目の確認画面が表示されます。それらの対象からも商品が削除されることを了承するチェックボックスを明示的にオンにしない限り、削除は実行できません。

オファリング

オファリング は、1つのアプリに属する複数の商品を、ペイウォールテンプレートで表示できる1つの名前付きグループにまとめたものです。各ペイウォールで どの商品を 販売できるか、どの商品を初期選択するかを決める役割を担います。

1789744472318-offerings-list.png

オファリング ページ(/paywall-offerings)には、#、オファリング名、アプリ、商品 数、ステータス、作成日時、操作が表示されます。商品ページと同様に、検索ボックスとアプリ/ステータスのフィルターを使用できます。新規作成するには、オファリングを作成 をクリックします。

1789744566510-offerings-edit-products.png

各オファリングは、必ず1つの アプリ に属します。選択できる商品がアプリによって決まるため、最初にアプリを選択してください。後からアプリを変更すると、選択中の内容がリセットされます。名前(100文字)と任意の 説明(500文字)を入力し、オファリング内の商品 チェックリストで、そのアプリの商品(個々の基本プランのバリエーションを含む)のうち、このオファリングに含めるものを選択します。すべて選択 のショートカットと専用の検索ボックスも用意されています。チェックした各商品には、それぞれ デフォルト ボタンがあります。クリックすると、その商品がオファリングのデフォルト/初期選択パッケージになり、それまでデフォルトだった商品の指定は自動的に解除されます。これにより、各オファリングのデフォルトは常に1つだけになります。保存するには、少なくとも1つの商品を選択する必要があります。

ペイウォールテンプレートは、必ず1つのオファリングに紐付きます。これは、次に説明するテンプレートの アプリを設定 ダイアログで指定します。テンプレートのキャンバスに配置した各価格カードは、紐付けたオファリングから取得した特定の1商品にバインドされます。このバインドによって、そのペイウォールに表示できる商品と価格が実際に決まります。

ペイウォールテンプレート

ペイウォールテンプレート では、実際のペイウォール画面を視覚的にデザインできます。ネイティブ UI のコードは不要です。一度作成したテンプレートを1つのアプリと1つのオファリングに紐付け、複数の言語に翻訳できます。公開すると、アプリの詳細に戻って、実際の表示箇所に紐付けられるようになります。

1789744608353-paywall-templates-list.png

テンプレート一覧

ペイウォールテンプレート ページ(/paywall-templates)には、作成したすべてのペイウォールが表示されます。列は #、テンプレート名、ステータス(公開済み/ドラフト)、割り当て先の アプリ、更新日時、操作です。ステータス と アプリ のフィルターで一覧を絞り込めるほか、検索ボックスで名前を検索できます。

新しいペイウォールの作成

ペイウォールを作成 をクリックすると、2つの作成方法が表示されます。最初から作成(「空のスマートフォン画面を開き、スタック、テキスト、パッケージ、ボタン、法的情報へのリンクを追加」)、または テンプレートを使用(「既存のペイウォールを選び、同じキャンバスとコンポーネントで新しいドラフトを作成」)です。

1789744746399-paywall-create-picker.png

テンプレートを使用 を選択すると、デフォルトテンプレート と 自分のテンプレート に分かれたギャラリーが開きます。デフォルトテンプレートには、出発点として使い、自由にカスタマイズできる組み込みデザインがいくつか用意されています。それぞれに名前と説明があります。自分のテンプレートには、アカウントに保存済みのテンプレートが表示されます。いずれかのカードを選択すると、そのテンプレートのキャンバスとコンポーネントが新しいドラフトに複製されます。商品へのバインドは引き継がれないため、後で各価格カードを自分のオファリングの商品に再度紐付けます。一方、最初から作成 を選択すると、完全に空のキャンバスが開きます。

1789744771801-paywall-use-template-gallery.png

ペイウォールのデザイン(キャンバス)

新規・既存を問わず、テンプレートを開くとビルダーが表示されます。

1789744792287-paywall-builder-overview.png

ワークスペースの上には、ヘッダーが1行で表示されます。ヘッダーには、タイトル、名前変更用の鉛筆アイコン、アプリを設定、ドラフト / 公開版 の切り替え、言語セレクター、クリア / ドラフトを破棄 / ドラフトを保存 / 公開 があります。左パネルは、キャンバス上の全要素をツリー表示する レイヤー(スタックのコピー/貼り付け操作を含む)と、挿入するブロックを選ぶ コンポーネントを追加 のパレットを切り替えて使用します。いずれかのスタックで + をクリックすると、コンポーネントを追加するパレットが開きます。中央パネルには、スマートフォンのフレーム付きで実寸大のライブプレビューが表示されます。右パネルは選択中の要素の インスペクター で、コンテンツ、レイアウト、レイヤー順序、外観、アクション に分かれています。

1789744812066-paywall-add-components.png

コンポーネントパレットは用途別に分類されています。基本 ブロックには、テキスト、画像、GIF、閉じるボタン、動画、スタックコンテナ(縦方向、横方向、重ね合わせ)、複合ヘッダーブロック、空のカスタムコンテナがあります。ペイウォール ブロックには、パッケージ(クリック可能な価格カード。シンプル、おすすめ、コンパクト、無料トライアル、割合割引、定額割引、導入価格の7種類)、購入ボタン、買い切り購入ボタン、エクスプレスチェックアウト ボタンがあります。インタラクティブ ブロックには、タブ(月額/年額などのプラングループの切り替え用)、スイッチ、ボタン、カルーセルがあります。コンテンツ ブロックには、利用者の声、機能一覧、バッジ、「受賞」/最もお得なオファーのバッジ、利用規約/プライバシーポリシーなどの法的情報へのリンクがあります。

価格の紐付け

1789744829200-paywall-package-product-data.png

各 パッケージ カードのコンテンツセクションには、オファリングのパッケージ ドロップダウンがあります。ここには「アプリを設定」で指定したオファリングの商品だけが、サブスクリプション → 基本プラン → 優先オファーの順に表示されます。1つ選択すると、カードがその商品にバインドされます。インスペクターには、その商品から直接取得した読み取り専用の 商品データ プレビュー(タイトル、説明、価格プレビュー、機能)がリアルタイムで表示されます。また、{planKey.price} のような価格トークンを使って、キャンバス上のほかの場所からも参照できるというヒントが表示されます。カードの見た目のレイアウトが、選択したパッケージに必要なレイアウトと一致していない場合(たとえば、通常の価格カードを、無料トライアルが設定された商品にバインドした場合)、インスペクターに [x] レイアウトを適用 ショートカットが表示され、両者を整合させることができます。購入ボタンと価格カードには、表示対象のタブ も設定できます。これにより、対応するタブ項目が選択されている間だけカードを表示できます。

アプリを設定 では、テンプレートの商品を取得するアプリとオファリングを指定します。

1789744847559-paywall-configure-app.png

左側で アプリ を1つ選び、右側でそのアプリの オファリング を1つ選択します。各選択肢には、オファリングのキーと、その商品パッケージのキーが最大5つ表示されます。テンプレートが同時に対象とできるのは、必ず1つのアプリと1つのオファリングだけです。

言語と翻訳

1789744871233-paywall-language-dropdown.png

ヘッダーの言語ドロップダウンには、デフォルト言語と追加したすべての言語が表示されます。各言語には、デフォルト、翻訳済み、更新が必要、ドラフトのいずれかのラベルが付きます。言語を管理 では、言語を追加・削除できます(上限は利用プランによって異なります)。AI で翻訳 では、選択した言語に機械翻訳できます(こちらも利用プランに応じて、1時間/1日あたりの利用回数が制限されます)。翻訳はレイアウトの別コピーではなく、1つのデフォルト言語のデザインに、置き換え用のテキストを重ねる仕組みです。そのため、デフォルト以外の言語を選ぶと、キャンバスは「翻訳テキストのみ編集可能、スタイルはロック」モードに切り替わります。翻訳中は、要素の追加、移動、サイズ変更、スタイル変更はできませんが、各テキストフィールドのインスペクターが翻訳入力モードになり、入力するとその言語のテキストだけが保存されます。

ドラフト、公開版、公開操作

ドラフト / 公開版 の切り替えでは、表示するテンプレートのバージョンを切り替えます。公開版は読み取り専用のため、変更する前にドラフトへ切り替えてください。クリア は、ローカルのキャンバスを空の状態に戻します(保存するまでサーバー上のデータは削除されません)。ドラフトを破棄 は、未保存のドラフトを完全に削除し、最後に公開したバージョンを再読み込みします。ドラフトを保存 は、現在のキャンバスをドラフトとして保存し、公開中の内容には影響しません。公開 は、アプリとオファリングがそれぞれ1つ設定され、すべてのパッケージカードが実在の商品にバインドされるまで無効のままです。これらのチェックを通過すると、現在のドラフトを新しい公開版にできます。公開後は、アプリの詳細 → アプリのプレースホルダー用ペイウォール に戻り、アプリのプレースホルダーに割り当てられるようになります。