フローのプレビュー

フローをさまざまな画面タイプでプレビューする方法は2つあります:

  • デバイスでプレビュー:開発のどの段階でも、実際のデバイスでフローの見た目を確認できます。
  • Adapty ダッシュボードでプレビュー:デザイン中にフローをプレビューできます。

実機でプレビューする

実際のデバイスでフローをプレビューするには:

  1. iOS または Android 向けの Adapty モバイルアプリをダウンロードし、ダッシュボードで使用している Adapty アカウントでサインインします。
  2. Flow & Paywall Builder で Test on device をクリックします。
Test on device button in the Flow & Paywall Builder
  1. フローのロケールを選択します。
  2. デバイスのカメラでQRコードをスキャンするか、リンクを開きます。これにより、Adapty モバイルアプリでフローが表示されます。
Note

Adapty モバイルアプリでのフロープレビューは、ストア内のプロダクトにアクセスできないため、サンプル価格が表示されます。また、カスタムタグの値は渡されないため、各タグの初期値が表示されます。

Locale selector and QR code in the Test on device dialog

トラブルシューティング

フローのプレビューが開かない場合、原因として多いのは、未完了のアクション、空のスクリーン、またはプロダクトが紐付けられていないケースです。詳しいリストはよくある問題をご覧ください。

HTTP 401 エラーでプレビューが失敗する場合は、Adapty モバイルアプリにサインインしていません。ダッシュボードで使用している Adapty アカウントでサインインしてから、QR コードを再スキャンしてください。

Adapty ダッシュボードでプレビューする

Tip

フローを公開する前に、実機でプレビューしてエラーなく表示されることを確認しましょう。

Flow & Paywall Builder のプレビューエリアを使って、さまざまな画面タイプでフローをプレビューできます。これにより、各種デバイスや画面サイズでフローが正しく表示されるかを確認できます。

プレビュー下部のコントロールを使うと、次のことができます:

  • プレビューするデバイスを選択する。
  • 横向きと縦向きのプレビューモードを切り替える。
  • ライトモードとダークモードを切り替える。
  • ロケールを切り替える。
Tip
  • 異なる言語では単語の長さが異なるため、画面レイアウトが変わることがあります。必ずさまざまなロケールでプレビューしてください。
  • ビルダーのプレビューエリアでは、各カスタム変数にはその初期値(例:name 変数の場合は Jane Doe)が表示されます。カスタムタグでは、サンプルデータを入力しないでください。アプリから値が渡されない場合、ユーザーには初期値がフォールバックとして表示されます。「Welcome back, friend!」の friend のように、すべてのユーザーに合う言葉を入力してください。
preview-paywall.gif

プロダクトとオファーのプレビュー

プレビューは、Adapty カタログからプロダクト変数を読み込みますが、これはデバイスが解決する内容の一部のみをカバーしています。

  • prod_title はAdaptyに保存されているプロダクトのタイトルを表示します。prod_price および prod_price_per_* 変数は、Adaptyに保存されている価格(米ドル)を表示します。ユーザーには、ストアのローカライズされた価格が表示されます。
  • offer_price、offer_billing_period、offer_full_duration、および offer_price_per_* 変数は未解決のままとなるため、プレビューには変数名が波括弧付きで表示されます(例:{{products.selectedProduct.offer_price}})。これらの値は、SDKがアプリ内でレンダリングする際にフローに渡されます。
  • is_free_trial、is_pay_up_front、is_pay_as_you_go は、プロダクトカードで選択されたオファーに従います。オファーがない場合、3つすべてが false となります。オファーがある場合、プレビューは従量制(pay-as-you-go)として扱います。

オファータイプに関する条件はプレビューで切り替わりますが、デフォルトでは「Pay as you go(従量払い)」ブランチのみ表示されます。他のブランチを確認するには、支払いモードをシミュレートしてください。

  1. キャンバス上で、オファーが設定されたプロダクトカードを選択します。
  2. 右パネルの Product の下にあるオファードロップダウンを開きます。
  3. Preview as の下で Free trial、Pay up front、または Pay as you go を選択します。この設定は現在のカードにのみ適用されます。