フローのプレビュー
フローをさまざまな画面タイプでプレビューする方法は2つあります:
- デバイスでプレビュー:開発のどの段階でも、実際のデバイスでフローの見た目を確認できます。
- Adapty ダッシュボードでプレビュー:デザイン中にフローをプレビューできます。
デバイスでプレビューする
フローを実機でプレビューするには:
- フローのロケールを選択します。
- デバイスのカメラで QR コードをスキャンするか、リンクを開きます。Adapty モバイルアプリでフローが表示されます。
Note
Adaptyモバイルアプリのフローのプレビューには、ストアのプロダクトにアクセスできないため、サンプル価格が表示されます。また、カスタムタグの値も渡されないため、各タグの初期値が表示されます。
トラブルシューティング
フローがプレビューで開かない場合、アクションの未完了、空のスクリーン、またはプロダクトが紐付けられていないことが主な原因です。詳細はよくある問題をご覧ください。
Adapty ダッシュボードでプレビューする
Tip
フローを公開する前に、実機でプレビューしてエラーなく表示されることを確認しましょう。
Flow & Paywall Builder のプレビューエリアを使って、さまざまな画面タイプでフローをプレビューできます。これにより、各種デバイスや画面サイズでフローが正しく表示されるかを確認できます。
プレビュー下部のコントロールを使うと、次のことができます:
- プレビューするデバイスを選択する。
- 横向きと縦向きのプレビューモードを切り替える。
- ライトモードとダークモードを切り替える。
- ロケールを切り替える。
Tip
- 異なる言語では単語の長さが異なるため、画面レイアウトが変わることがあります。必ずさまざまなロケールでプレビューしてください。
- ビルダーのプレビューエリアでは、各カスタム変数にはその初期値(例:
name変数の場合はJane Doe)が表示されます。カスタムタグでは、サンプルデータを入力しないでください。アプリから値が渡されない場合、ユーザーには初期値がフォールバックとして表示されます。「Welcome back, friend!」のfriendのように、すべてのユーザーに合う言葉を入力してください。
プロダクトとオファーのプレビュー
プレビューは、Adapty カタログからプロダクト変数を読み込みますが、これはデバイスが解決する内容の一部のみをカバーしています。
prod_titleは Adapty に保存されているプロダクトタイトルを表示します。prod_priceとprod_price_per_*変数は Adapty に保存されている米ドル建ての価格を表示します。ユーザーにはストアのローカライズされた価格が表示されます。offer_price、offer_billing_period、offer_full_durationは未解決のままとなるため、プレビューでは変数名が波括弧付きで表示されます(例:{{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(従量払い)」ブランチのみ表示されます。他のブランチを確認するには、支払いモードをシミュレートしてください。
- キャンバス上で、オファーが設定されたプロダクトカードを選択します。
- 右パネルの Product の下にあるオファードロップダウンを開きます。
- Preview as の下で Free trial、Pay up front、または Pay as you go を選択します。この設定は現在のカードにのみ適用されます。