ウィンドウは、アプリのレイアウトを補完します。 Web エクスペリエンスにウィンドウを追加するには、[ページ] パネルに移動し、[ウィンドウ] タブをクリックして [ウィンドウの追加] ボタンをクリックし、テンプレートを選択します。 ページとは異なり、ウィンドウには本文しかありません。 ウィンドウにウィジェットを追加すると、[ウィンドウ] タブの [アウトライン] セクションと (ビルダー ウィンドウの下部にある) クイック ナビゲーション メニューに表示されます。 ウィンドウは、固定ウィンドウとアンカー ウィンドウでグループ化されます。 ウィンドウがページで開くようにまだ接続されていない場合は、パネルでウィンドウをポイントして、[スプラッシュとして設定] をクリックします。 ウィンドウ名の変更またはウィンドウの削除を行うには、ウィンドウのその他のオプション ボタンをクリックして、[名前の変更] または [削除] を選択します。 新しいウィンドウを追加すると、ラベルには連番ルールが適用されます。 たとえば、ウィンドウ 1 を複製するとウィンドウ 2 が生成されます。ウィンドウ 2 がすでに存在する場合はウィンドウ 3 が生成されます。 固定ウィンドウ (スプラッシュを除く) では、ウィンドウの名前はエクスペリエンスの URL でも使用されます (公開後にウィンドウの名前を変更した場合でも、以前に使用していた URL は有効です)。
アプリ内のウィンドウを管理するには、次のオプションを使用します。
- Web エクスペリエンスで開くスプラッシュ ウィンドウは、[ウィンドウ] パネルで設定できます。 [固定ウィンドウ] の下のウィンドウ (ページで開くように接続されたウィンドウを除く) をポイントして、[スプラッシュとして設定] ボタンをクリックします。 Web エクスペリエンスには、1 つのスプラッシュ ウィンドウを設定できます。
- ウィンドウをページで開くには、[ページ] 設定に移動し、[ウィンドウで開く] メニューから固定ウィンドウを選択します。 スプラッシュとして設定したウィンドウはオプションに表示されません。 ウィンドウをページで開くように設定すると、[ウィンドウ] パネルのウィンドウの横に [ページで開く] アイコンが表示されます。 このアイコンをポイントすると、接続されているページの名前を含むツールチップが表示されます。 ページ ウィンドウは、ユーザーがブラウザーを更新しない限り、Web エクスペリエンスに一度しか表示されません。
- ウィジェット設定を使用してウィンドウを開くには、[リンクの設定] を構成します。 ウィジェットの [リンクの設定] ウィンドウの [リンク] で [ウィンドウ] を選択し、アンカーまたは固定ウィンドウを選択します (スプラッシュを除く)。 ウィジェットでトリガーされるウィンドウは、ユーザーがウィジェットをクリックするたびに表示されます。
設定
ウィンドウには次のような構成の設定があります。
- モード
- [固定] - 固定された位置に表示されます。
- [アンカー] - リンクされたウィジェットの横に表示されます。
注意:
ウィンドウ モードは設定で変更できますが、スプラッシュとして設定された固定ウィンドウや、ページで開くように接続された固定ウィンドウでは、アクティブ化のメカニズムが異なるため、これらのウィンドウをアンカー モードに変更することはできません (その逆も同様です)。
- 位置およびサイズ
- [位置] - 固定ウィンドウの表示される位置には、中央、左、上、右、下の 5 つがあります。 (アンカー ウィンドウは関連ウィジェットの横に表示され、位置は自動的に設定されます)。
- [サイズ] - アンカー ウィンドウまたは固定ウィンドウが中央に配置されている場合に、幅と高さの値を指定できます。 [縦横比] ボタンをクリックすると、幅と高さの縦横比を維持できます。 ただし、固定ウィンドウが上または下に配置されている場合は、高さの値のみを指定できます (幅はページ幅に応じて自動的に設定されます)。 同様に、固定ウィンドウが左または右に配置されている場合は、幅の値のみを指定できます。 キャンバスでウィンドウの端をドラッグしてサイズを変更することもできます。
注意:
ウィンドウで、中画面または小画面デバイスに対してカスタム レイアウトを使用している場合、ウィンドウの配置、サイズ、レイアウトをカスタマイズできます。 配置設定とサイズ設定のアイコンは、構成が適用される画面サイズ (大、中、小) を示します。
- 閉じるオプション
- [外をクリックしてウィンドウを閉じます] - ウィンドウ外の任意の場所をクリックするとウィンドウが閉じます。
- [対話機能] (固定モードのみ)
- [スタイル] - チェックボックスとボタンのレイアウトを選択します。
- [タイプ] - ウィンドウのインタラクション タイプを選択します。
- [確認] - エンド ユーザーはチェックボックスをオンにしないと、ウィンドウを閉じることができません。 この制約はすべての閉じる動作に適用されます。 この対話式操作タイプは、[このウィンドウを常に表示] をオンにしない限り、デフォルトでウィンドウを一度だけ表示します。
- [今後、これを表示しない] オプション - エンド ユーザーはこのチェックボックスをオンにすると、ウィンドウを再び開かないようにすることができます。 このチェックボックスをオン/オフしなくても、ユーザーはウィンドウを閉じることができます。
ヒント:
チェックボックスをオンにした後にウィンドウを再び表示するには、エクスペリエンスをもう一度保存してプレビューするか、エクスペリエンスを再公開して公開されたアイテムを表示します。
- [チェックボックス テキスト] - チェックボックスの横に表示されるテキストを指定し、フォント サイズを変更します (ピクセルまたはレム単位)。
- [ボタンのテキスト] - (必要に応じて) ボタン上に表示されるテキストを指定し、フォント サイズを変更します (ピクセルまたはレム単位)。
- また、ウィンドウにボタン ウィジェットを追加して閉じることもできます。 ボタン設定で [リンクの設定] を使用すると、ボタンをページにリンクして閉じることができます。 1 つのウィンドウで複数のページを開くように設定する必要がある場合や、異なるページのボタンが 1 つのウィンドウにリンクしている場合、ある特定のページにリンクさせるのはあまり現実的ではないため、現在のページへのリンクを設定して、ウィンドウをアクティブ化するページに戻るようにします。
注意:
ウィンドウにボタンを設定してアプリ内の別のウィンドウにリンクさせることもできますが、この構成はお勧めしません。
- [アニメーション] - ウィンドウとそのウィンドウに含まれるウィジェットにアニメーションを追加します。
- [マスク色] - ウィンドウの周囲の空間を埋めるマスク色を選択します。 このオプションは固定ウィンドウにのみ存在します。
- [背景] - 塗りつぶし色または画像を選択して、ウィンドウの背景を設定します。 [クイック スタイル] ボタンを使用して、アプリのテーマに合った設定済みのデザインから選択できます。
- [枠線] - 枠線の色、スタイル、および幅を選択して、ウィンドウの枠線を設定します。 半径サイズを変更して、ウィンドウの角を作成します。 [クイック スタイル] ボタンを使用して、アプリのテーマに合った設定済みのデザインから選択できます。
- [ボックスの影] - ウィンドウの周囲に影の効果を追加します。 [クイック スタイル] ボタンを使用して設定済みのデザインから選択するか、次の設定を使用できます。
- [オフセット X] - 影の水平距離を設定します。 負の値にするとウィンドウの左側に影が配置され、正の値にすると右側に配置されます。
- [オフセット Y] - 影の垂直距離を設定します。 負の値にするとウィンドウの上側に影が配置され、正の値にすると下側に配置されます。
- [ぼかしの半径] - ぼかし効果を影に追加します。
- [拡張の半径] - 影のサイズを調整します。
- [色] - 色を選択します。
テンプレート
構成可能なウィンドウには、次の事前定義済みテンプレートが用意されています。
- [確認] は、ウィンドウを閉じる際の確認が事前に設定されたテンプレートで、続行する際に確認または受理が必要なコンテンツに適しています。
- [通知] は、ユーザーがメッセージを受理または拒否できるテンプレートです。
- [シンプル] テンプレートと [ヴォーグ] テンプレートは、情報の表示や紹介に適した 2 つの異なるレイアウトです。
- [ノベル] は、主要なコンテンツの外側に閉じるボタンを配置したレイアウトです。
- [サイドバー] はデフォルトで右側に配置されたテンプレートで、長いテキストを縦方向にスクロールするのに適しています。
- [ツールチップ] - ボタンや画像など、リンクされたウィジェットの詳細を表示するアンカー ウィンドウ用のテンプレートです。
- [カルーセル] は大きなウィンドウ用のテンプレートで、周期的なビューに複数の画像およびコンテンツを表示します。
- [特定] は、チャート、テーブル、リスト、画像、ボタン、ソーシャル共有オプションを使用して多くの情報を提供する大型のウィンドウ用のテンプレートです。
- [ステップ] は、複数のビューで情報を表示または紹介するように設計されたテンプレートです。