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