スクリーンとレイヤー

フローは1つ以上のスクリーンで構成されます。各スクリーンは、ユーザーのジャーニーにおける1つのステップを表します。たとえば、ペイウォール、クイズ、プロダクト情報のスライドなどがこれにあたります。

各スクリーン上の要素はレイヤー階層で管理されます。スクリーン、レイヤー、エレメントを管理するには、デフォルトの Screens and Layers ビューを開きます。ここでは、スクリーンの順序と各スクリーンのレイヤー構造が表示されます。

スクリーンの管理

Flow builder screens and layers view (both panels visible)

左パネルの上部には、フロー内のすべてのスクリーンが一覧表示されます。各エントリには番号付きのラベルとサムネイルプレビューが表示されます。

スクリーンを選択する: スクリーンのエントリをクリックしてアクティブにします。ビジュアルエディターに選択したスクリーンが表示され、下部の Layers セクションがそのレイヤー階層を表示するよう更新されます。
スクリーンを追加する: Screens セクション上部のボタンをクリックして、フローに新しい空のスクリーンを追加します。
テンプレートライブラリを開く: Screens セクション上部のボタンをクリックして、フローテンプレートを閲覧・適用します。
スクリーンを並べ替える: スクリーンのエントリをドラッグ＆ドロップして、フロー内の順序を変更します。

フローに未使用の空のスクリーンがある場合、公開できません。公開前にドラフトのスクリーンをすべて削除してください。

スクリーンのアクション

スクリーンエントリの三点アイコンをクリックすると、コンテキストメニューが開きます。

アクション	ショートカット	説明
Play Animation		このスクリーンに設定されたアニメーションをプレビューする
Copy	⌘C / Ctrl+C	スクリーンをクリップボードにコピーする
Paste here	⌘V / Ctrl+V	コピー済みのスクリーンを貼り付ける
Duplicate	⌘D / Ctrl+D	スクリーンのコピーを作成してフローに追加する
Rename		スクリーンの表示名を変更する
Delete	⌘⌫ / Ctrl+Del	スクリーンをフローから削除する

クリップボードはフローをまたいで保持されます。あるフローでスクリーンや要素をコピーし、別のフローを開いて貼り付けることができます。

スクリーンを削除すると、そのスクリーンを指定していたスクリーンへ移動アクションは遷移先を失いますが、アクション自体は削除されません。新しい遷移先を設定するか、アクションを削除してください。そうしないと、フローのプレビューや公開ができなくなります。

スクリーン間の移動

メイン記事：ナビゲーションとインタラクション

リスト内のスクリーンの順序だけでは、ナビゲーションは決まりません。スクリーンを接続するには、要素のインタラクションを使用してください。ボタンを設定して、ユーザーを別のスクリーンに移動させます。

Static Navigate to action on the Welcome screen's primary button

スクリーン設定

アクティブなスクリーンのプロパティと設定を表示するには、スクリーンプレビューの空白部分をクリックしてください。右パネルがスクリーン設定ビューに切り替わります。

システムUI

スクリーンがデバイスのハードウェアとどのように連携するかを制御します。

Safe area は、ノッチやシステムバーからコンテンツを保護するパディングを追加します。
Status bar は、システムのステータスバー（時刻、バッテリー、信号アイコン）の表示と非表示を切り替えます。

プログレスインジケーターへのスクリーンの含め方

フローにプログレスインジケーター要素を追加すると、Adaptyはすべてのスクリーンに表示します。

Include screen in progress indicator のチェックを外すと、特定のスクリーンからプログレスインジケーターが非表示になります。ウェルカムスクリーン、最終的なペイウォール、または進行状況として登録したくないステップに使用してください。

画面レイアウト

詳細記事：レイアウトと配置

Layout セクションでは、画面上の子要素をどのように配置するかを設定します。これらのプロパティはすべてのコンテナ要素で利用できます。

Free：子要素が独立した位置に配置されます。
Vertical：要素が上から下へ、フレックスボックスのカラムのように並びます。
Horizontal：要素が左から右へ、フレックスボックスの行のように並びます。縦横のレイアウトでは、スペーシングと配置も設定できます。
Alignment：クロス軸に沿った要素の位置。
Gap：隣接する要素間のスペース。
Distribution：子要素間およびその周囲のスペースの配分。

RTL レイアウト

Mirror for RTL チェックボックスをオンにすると、右から左に読む書記体系向けにレイアウトが左右反転します。横並びコンテナ内の要素の順序が入れ替わります。

スクリーンの背景

背景動画のループ再生

Loop トグルを有効にすると、背景動画を繰り返し再生できます。

カスタムメディア ID の割り当て

カスタムメディアと同様に、スクリーンの背景にカスタムメディアIDを割り当て、SDK から参照することができます。

スクリーンの余白

各辺（上、右、下、左）のスクリーンパディングを調整します。

スクロール

オーバーフローの動作を制御します。Vertical scroll を有効にすると、スクリーンコンテンツがビューポートの高さを超えたときにスクロールできるようになります。

選択可能なグループ

関連記事：選択可能な要素とグループ

Selectable groups セクションには、現在の画面上のすべての選択可能なグループが一覧表示されます。クイズ、プロダクト、タブ、トライアルトグル、または任意のカスタム選択可能要素が対象です。

グループのエントリをクリックすると、名前の変更、タイプの変更、公開される変数の確認、または削除ができます。

レイヤーを管理する

スクリーン上の各要素はレイヤーとして表示されます。Layers セクションには、アクティブなスクリーン上の要素の順序が表示されます。

フローのレイヤーは、グラフィックデザインソフトのレイヤーのように重なり合うわけではありません。各レイヤーはスクリーンの個別コンポーネントを表します。要素が重なるのは、絶対配置または固定配置を使用している場合に限られます。重なり順は、レイヤーツリー内の位置ではなく z-index プロパティによって決まります。

ツリー構造は親子関係を表しています。親レイヤーの矢印をクリックすると、子要素を展開・折りたたむことができます。

レイヤーを直接作成することはできません。要素を追加ビューから追加したすべての要素は、ツリー内に新しいレイヤーとして表示されます。

レイヤーを選択する: レイヤーをクリックして選択します。ビジュアルエディターはキャンバス上の対応する要素をハイライトし、右パネルにそのデザインとインタラクションプロパティが表示されます。
レイヤーを並べ替える: ツリー内でレイヤーをドラッグ＆ドロップして、親コンテナ内の順序を変更します。ツリー上の順序が画面上の表示順序と一致します。
レイヤーを表示／非表示にする: レイヤーにカーソルを合わせると、右側に目アイコンが表示されます。クリックするとレイヤーの表示／非表示を切り替えられます。非表示にしたレイヤーはツリーに残りますが、ビジュアルエディターやデバイス上には表示されません。実行時にロジックで表示を制御するには、条件付き表示を使用してください。
すべてのレイヤーを折りたたむ: Layers セクションの右上にある折りたたみボタンをクリックすると、ツリー全体が折りたたまれます。

レイヤーのアクション

3点アイコンをクリックしてコンテキストメニューを開きます。

アクション	ショートカット	説明
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	↑	親コンテナ内でレイヤーを1つ上の位置に移動する
Move down	↓	親コンテナ内でレイヤーを1つ下の位置に移動する