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