スクリーンとレイヤー
フローは1つまたは複数のスクリーンで構成されます。各スクリーンは、ユーザーの操作の中の1ステップを表します（例：ペイウォール、クイズ、プロダクト情報のスライドなど）。
各スクリーン上の要素は、レイヤー階層で整理されています。 スクリーン、レイヤー、要素を管理するには、デフォルトの Screens and Layers ビューを開きます。ここでは、スクリーンの順序と各スクリーンのレイヤー構造が表示されます。
画面の管理
左パネルの上部セクションには、フロー内のすべての画面が一覧表示されます。各エントリには番号付きのラベルとサムネイルプレビューが表示されます。
- 画面を選択する: 画面エントリをクリックするとアクティブになります。ビジュアルエディタに選択した画面が表示され、下の「Layers」セクションがそのレイヤー階層に更新されます。
- 画面を追加する: 「Screens」セクション上部の ボタンをクリックすると、フローに新しい空の画面が追加されます。
- テンプレートライブラリを開く: 「Screens」セクション上部の ボタンをクリックすると、フローテンプレートを閲覧して適用できます。
- 画面を並べ替える: 画面エントリをドラッグ＆ドロップして、フロー内の順序を変更します。
フローに未使用の空のスクリーンがある場合、公開できません。公開する前に、下書きのスクリーンを削除してください。
画面アクション
画面エントリの三点アイコン をクリックすると、コンテキストメニューが開きます。
| アクション | ショートカット | 説明 |
|---|---|---|
| Play Animation | このスクリーンに設定されたアニメーションをプレビュー | |
| Copy | ⌘C / Ctrl+C | スクリーンをクリップボードにコピー |
| Paste here | ⌘V / Ctrl+V | コピー済みのスクリーンを貼り付け |
| Duplicate | ⌘D / Ctrl+D | スクリーンのコピーを作成してフローに追加 |
| Rename | スクリーンの表示名を変更 | |
| Delete | ⌘⌫ / Ctrl+Del | スクリーンをフローから削除 |
クリップボードはフローをまたいで保持されます。あるフローでスクリーンや要素をコピーし、別のフローを開いて貼り付けることができます。
スクリーンを削除すると、そのスクリーンを対象にしていたスクリーンへ移動アクションは移動先を失いますが、アクション自体は削除されません。新しい移動先を設定するか、アクションを削除してください。そうしないと、フローのプレビューや公開ができなくなります。
スクリーン間の移動
メイン記事：ナビゲーションとインタラクション
リスト内のスクリーンの順序だけでは、ナビゲーションは決まりません。スクリーンを接続するには、要素のインタラクションを使用してください。ボタンを設定して、ユーザーを別のスクリーンに移動させます。
スクリーン設定
アクティブなスクリーンのプロパティと設定を表示するには、スクリーンプレビューの空白部分をクリックしてください。右パネルがスクリーン設定ビューに切り替わります。
システムUI
スクリーンがデバイスのハードウェアとどのように連携するかを制御します。
- Safe area は、ノッチやシステムバーからコンテンツを保護するパディングを追加します。
- Status bar は、システムのステータスバー（時刻、バッテリー、信号アイコン）の表示と非表示を切り替えます。
プログレスインジケーターへのスクリーンの含め方
フローにプログレスインジケーター要素を追加すると、Adaptyはすべてのスクリーンに表示します。
Include screen in progress indicator のチェックを外すと、特定のスクリーンからプログレスインジケーターが非表示になります。ウェルカムスクリーン、最終的なペイウォール、または進行状況として登録したくないステップに使用してください。
スクリーンのレイアウト
詳細記事: 要素の配置
Layout セクションでは、スクリーンが子要素をどのように配置するかを設定します。これらのプロパティは、すべてのコンテナ要素で利用できます。
-
Free: 子要素が独立して配置されます。
-
Vertical: 要素がフレックスボックスの列のように、上から下へ並びます。
-
Horizontal: 要素がフレックスボックスの行のように、左から右へ並びます。 縦横のレイアウトでは、間隔と配置も設定できます。
-
Alignment（配置）: クロス軸に沿った要素の位置。
-
Gap（間隔）: 隣接する要素間のスペース。
-
Distribution（分布）: 子要素の間や周囲のスペースの分配方法。
RTL レイアウト
Mirror for RTL チェックボックスをオンにすると、右から左に読む言語のためにレイアウトが反転されます。横並びコンテナ内の要素の順序が入れ替わります。
画面の背景
メイン記事: 背景
Fill は画面の背景を単色、グラデーション、画像、または動画に設定します。背景はデバイスのビューポート全体を埋め、ノッチやシステムバーの背後も含まれます。Safe area が有効な場合も同様です。
背景動画のループ再生
Loop トグルを有効にすると、背景動画が繰り返し再生されます。
カスタムメディア ID の割り当て
カスタムメディアと同様に、スクリーンの背景にカスタムメディアIDを割り当てて、SDK内で参照することができます。
スクリーンの余白
各辺（上、右、下、左）のスクリーンパディングを調整します。
スクロール
オーバーフローの動作を制御します。Vertical scroll を有効にすると、スクリーンコンテンツがビューポートの高さを超えたときにスクロールできるようになります。
選択グループ
メイン記事：選択可能な要素とグループ
Selectable groups セクションには、現在の画面上にあるすべての選択グループが一覧表示されます。クイズ、プロダクト、タブ、トライアルトグル、または任意のカスタム選択可能要素から構成されます。
グループのエントリをクリックすると、名前の変更、タイプの変更、公開される変数の確認、または削除が行えます。
レイヤーを管理する
スクリーン上の各要素はレイヤーとして表示されます。Layers セクションには、アクティブなスクリーン上の要素の順序が表示されます。
フローのレイヤーは、グラフィックデザインソフトのレイヤーのように重なり合うわけではありません。各レイヤーはスクリーンの個別のコンポーネントを表しています。要素が重なり合うのは、絶対配置または固定配置を使用している場合のみです。重なり順は、レイヤーツリー内の位置ではなく、z-index プロパティによって決まります。
ツリー構造は親子関係を表しています。親レイヤーの矢印をクリックすると、子要素を展開または折りたたむことができます。
レイヤーを直接作成することはできません。要素を追加ビューから追加したすべての要素は、ツリーの新しいレイヤーとして表示されます。
- レイヤーを選択する: レイヤーをクリックして選択します。ビジュアルエディタはキャンバス上の対応する要素をハイライトし、右パネルにはそのデザインとインタラクションのプロパティが表示されます。
- レイヤーを並べ替える: ツリー内でレイヤーをドラッグ＆ドロップして、親コンテナ内の順序を変更します。ツリー内の順序は画面上の表示順序と一致します。
- レイヤーを表示／非表示にする: レイヤーにカーソルを合わせると、右側に目 アイコンが表示されます。クリックするとレイヤーの表示を切り替えられます。非表示にしたレイヤーはツリーには残りますが、ビジュアルエディタやデバイス上には表示されません。実行時にロジックで表示を制御するには、条件付き表示を使用してください。
- すべてのレイヤーを折りたたむ: Layersセクションの右上にある折りたたみ ボタンをクリックすると、ツリー全体が折りたたまれます。
レイヤーのアクション
三点アイコン をクリックすると、コンテキストメニューが開きます。
| アクション | ショートカット | 説明 |
|---|---|---|
| Copy | ⌘C / Ctrl+C | レイヤーをクリップボードにコピーする |
| Paste here | ⌘V / Ctrl+V | コピーしたレイヤーを子要素として貼り付ける |
| Duplicate | ⌘D / Ctrl+D | 同じコンテナ内にレイヤーのコピーを作成する |
| Rename | レイヤーの表示名を変更する。デフォルトでは、レイヤーのコンテンツまたはコンポーネントタイプが名前として使用される | |
| Delete | ⌘⌫ / Ctrl+Del | レイヤーとその子要素をすべて削除する |
| Wrap | レイヤーを新しいコンテナで囲む: Wrap in Horizontal Container または Wrap in Vertical Container | |
| Unwrap / Ungroup | 囲んでいるコンテナを削除し、その子要素を一つ上のレベルに移動する | |
| Move up | ↑ | 親コンテナ内でレイヤーを一つ上に移動する |
| Move down | ↓ | 親コンテナ内でレイヤーを一つ下に移動する |