スクリーンとレイヤー
フローは1つ以上のスクリーンで構成されています。各スクリーンはユーザーのジャーニーにおける1つのステップを表します。たとえば、ペイウォール、クイズ、プロダクト情報のスライドなどです。
各スクリーン上の要素はレイヤー階層として整理されています。
スクリーン、レイヤー、要素を管理するには、デフォルトの Screens and Layers ビューを開いてください。スクリーンの順序と各スクリーンのレイヤー構造が表示されます。
スクリーンの管理
左パネルの上部セクションには、フロー内のすべてのスクリーンが一覧表示されます。各エントリには番号付きのラベルとサムネイルプレビューが表示されます。
- スクリーンを選択する: スクリーンエントリをクリックしてアクティブにします。ビジュアルエディターに選択したスクリーンが表示され、下のレイヤーセクションがそのレイヤー階層に更新されます。
- スクリーンを追加する: スクリーンセクション上部の ボタンをクリックして、フローに新しい空のスクリーンを追加します。
- スクリーンを並べ替える: スクリーンエントリをドラッグ＆ドロップして、フロー内の順序を変更します。
フローに未使用の空のスクリーンがある場合、公開できません。公開前に下書きのスクリーンをすべて削除してください。
スクリーンの操作
スクリーンエントリの三点アイコン をクリックすると、コンテキストメニューが開きます。
| 操作 | ショートカット | 説明 |
|---|---|---|
| Play Animation | このスクリーンに設定されたアニメーションをプレビューする | |
| Copy | ⌘C / Ctrl+C | スクリーンをクリップボードにコピーする |
| Paste here | ⌘V / Ctrl+V | 以前にコピーしたスクリーンを貼り付ける |
| Duplicate | ⌘D / Ctrl+D | スクリーンのコピーを作成してフローに追加する |
| Rename | スクリーンの表示名を変更する | |
| Delete | ⌘⌫ / Ctrl+Del | フローからスクリーンを削除する |
スクリーンを削除すると、そのスクリーンを指定していた Navigate to Screen アクションはターゲットを失いますが、アクション自体は削除されません。新しい遷移先を設定するか、アクションを削除してください。そうしないと、フローのプレビューや公開ができなくなります。
スクリーン間の移動
メイン記事：ナビゲーションとインタラクション
リスト内のスクリーンの順序だけでは、ナビゲーションは決まりません。スクリーンを接続するには、要素のインタラクションを使用してください。ボタンを設定して、ユーザーを別のスクリーンに移動させます。
スクリーン設定
アクティブなスクリーンのプロパティと設定を表示するには、スクリーンプレビューの空白部分をクリックしてください。右パネルがスクリーン設定ビューに切り替わります。
システム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 セクションには、現在のスクリーン上のすべての選択可能なグループが一覧表示されます。クイズ、プロダクト、タブ、トライアルトグル、またはカスタムの選択可能な要素から作成されます。
グループエントリをクリックすると、名前の変更、タイプの変更、公開している変数の確認、または削除ができます。
レイヤーの管理
スクリーン上の各要素はレイヤーとして表されます。レイヤーセクションには、アクティブなスクリーン上の要素の順序が表示されます。
フローのレイヤーは、グラフィックデザインソフトウェアのレイヤーのように重なりません。代わりに、スクリーンの個々のコンポーネントを表します。要素が重なるのは、絶対配置または固定配置を使用している場合だけです。重ね順はレイヤーツリー内の位置ではなく、z-index プロパティによって決まります。
ツリー構造は親子関係を反映しています。任意の親レイヤーの矢印をクリックすると、子要素を展開または折りたたむことができます。
レイヤーを直接作成することはできません。要素を追加ビューから追加したすべての要素は、ツリーに新しいレイヤーとして表示されます。
- レイヤーを選択する: レイヤーをクリックして選択します。ビジュアルエディターでキャンバス上の対応する要素がハイライトされ、右パネルにそのデザインとインタラクションプロパティが表示されます。
- レイヤーを並べ替える: ツリー内でレイヤーをドラッグ＆ドロップして、親コンテナ内の順序を変更します。ツリー内の順序はスクリーン上の視覚的な順序と一致します。
- レイヤーの表示・非表示を切り替える: レイヤーにカーソルを合わせると、右側に目 アイコンが表示されます。クリックするとレイヤーの表示・非表示が切り替わります。非表示のレイヤーはツリーに残りますが、ビジュアルエディターやデバイスには表示されません。実行時にロジックで表示を制御するには、条件付き表示を使用してください。
- すべてのレイヤーを折りたたむ: レイヤーセクションの右上にある折りたたみ ボタンをクリックすると、ツリー全体が折りたたまれます。
レイヤーの操作
三点アイコン をクリックすると、コンテキストメニューが開きます。
| 操作 | ショートカット | 説明 |
|---|---|---|
| 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 | ラップしているコンテナを削除して、その子を1つ上のレベルに移動する | |
| Move up | ↑ | 親コンテナ内でレイヤーを1つ上の位置に移動する |
| Move down | ↓ | 親コンテナ内でレイヤーを1つ下の位置に移動する |