複数のウィジェットを含む Web アプリ レイアウトの配置
エクスペリエンスを開く
最初に、前のチュートリアルで作成したエクスペリエンスを開きます。
- 前回のチュートリアル「2 つのマップを使用した Web エクスペリエンスの作成」を完了した場合は、[American River Marine Estuary] エクスペリエンスをもう一度開いて次のセクションに進みます。
注意:
エクスペリエンスを見つける方法がわからない場合は、ArcGIS Experience Builder を開いて ArcGIS アカウントでサイン インします。 [最近のエクスペリエンス] ページに自分のエクスペリエンスが一覧表示されます。
- 前回のチュートリアルを完了していない場合は、ArcGIS Experience Builder を開いて ArcGIS アカウントでサイン インします。
注意:
ArcGIS アカウントがない場合は、ソフトウェア アクセスのオプションをご参照ください。
[最近のエクスペリエンス] ページが表示されます。
- [新規作成] ボタンをクリックします。
![[新規作成] ボタン](GUID-8D3C2FA9-0984-46CC-8E2D-70718EF4D6E3-web.png "[新規作成] ボタン")
- [ArcGIS Online] タブをクリックします。
- 検索バーに「estuary template 1」と入力します。
- [American River Marine Estuary Template 1] カードで、[作成] ボタンをクリックします。
キャンバスが開き、これまでに作成されたエクスペリエンスが表示されます。 これには、切り替え可能なマップが 2 つあるマップ ウィジェットと、タイトル付きのヘッダーが含まれています。
- ビルダー ツールバーで、タイトルをクリックして名前を「American River Marine Estuary」に変更します。
凡例ウィジェットと列ウィジェットの追加
すべてのマップに凡例が必要な訳ではありません。 たとえば、マップ上に表示されているすべてのものにラベルが付いている場合や明らかな場合、凡例は冗長です。 ただし、この Web アプリの 2 つのマップには凡例が必要です。 ユーザーがマップを適切に解釈できるように、凡例ウィジェットを使用して凡例をレイアウトに追加します。 また、別のレイアウト ウィジェット、この場合は列ウィジェットも追加します。
- [ウィジェットの挿入] ウィンドウが表示されていない場合、ツールバーで [挿入] ボタンをクリックします。
- [ウィジェットの挿入] ウィンドウの [マップ中心] セクションから、[凡例] ウィジェットを行ウィジェットの空白部分にドラッグします。
新しいウィジェットはスペース全体を占有していて、他のウィジェットを配置する余地がありません。 このスペースに、複数のウィジェットを縦方向に積み重ねることを見込んでいました。 そのためには、まず列ウィジェットを追加する必要があります。
- ツールバーで、[元に戻す] ボタンをクリックします。
- [ウィジェットの挿入] ウィンドウで [検索] ボタンをクリックします。 「列」と入力します。
- ウィンドウから、[列] ウィジェットを行ウィジェットの空白部分にドラッグします。
列を使用することで、コンテンツを縦方向に整理できます。
- [ウィジェットの挿入] ウィンドウで、検索バーを消去します。 [凡例] ウィジェットを列にドラッグします。
凡例ウィジェットは、スペース全体を占有しなくなりました。
- [凡例] ウィンドウの [マップ ウィジェットの選択] で、[マップ] を選択します。
現在のマップに対応する凡例がウィジェットに設定されます。
- ビルダー ツールバーで、[ライブ ビュー] をクリックして、マップや他のウィジェットを操作できるようにします。
- マップの左下隅にあるマップの切り替えボタンをクリックします。
凡例が更新され、他のマップの凡例が表示されます。
ブックマーク ウィジェットの追加
次に、ブックマーク ウィジェットで Web アプリに優れた対話機能を追加します。 このウィジェットを使用すると、ユーザーがマップ上の土地被覆タイプごとにズームできます。
- ビルダー ツールバーの [ライブ ビュー] をオフにします。
ライブ ビューのときにはウィジェットを追加できません。
- サイド ツールバーで [挿入] ボタンをクリックして、[ウィジェットの挿入] ウィンドウをもう一度開きます。
- 「ブックマーク」を検索します。 [ブックマーク] ウィジェットをキャンバスにドラッグし、列内の凡例の下にドロップします。
- [ブックマーク] ウィンドウの [テンプレートの選択] で、[シンプル] の下にある 4 番目のオプション [スライド 1] を選択します (テンプレートにポインターを合わせると名前が表示されます)。
- [開始] をクリックします。
- [マップ ウィジェットの選択] で、[マップ] を選択します。
次に、ブックマークを追加するオプションがあります。 マップの任意の部分にブックマークを手動で定義できます。 ただし、今回のマップには両方ともブックマークがすでに定義されているため、それらを使用します。
- [ブックマークを Web マップから表示] チェックボックスをオンにします。
ブックマーク ウィジェットには、最初のブックマークである [Seagrass] が設定されています。
ユーザーがブックマークをスクロールできるように、[配置] 設定を変更します。
- [ブックマーク] ウィンドウで、[配置] セクションを展開します。
- [ページング スタイル] で [スクロール] を選択します。 [方向] で [下] を選択します。
ウィジェットに矢印が表示されます。
- [アイテムの高さ (px)] に「200」と入力します。
次に、ウィジェットの背景色を変更して、凡例のように白色にします。 優れたレイアウト デザインに一貫性は重要です。
- ウィンドウの上部にある [スタイル] タブをクリックします。
- [背景] の横にある [クイック スタイル] ボタンをクリックします。
[クイック スタイル] メニューのオプションに白色はありません。
- [カスタム] をクリックします。
[背景] セクションに、その他のスタイル オプションが表示されます。
- [塗りつぶし色] ボタンをクリックします。 [標準色] の下にある白色のボックスをクリックします。
ブックマーク ウィジェットの背景が凡例ウィジェットと同じ色になりました。
次に、ブックマーク ウィジェットをテストします。
- [ライブ ビュー] をオンにします。
- ブックマーク ウィジェットをスクロールして、1 つのブックマークをクリックします。
マップがそのブックマークの場所にズームします。
- マップの切り替えボタンをクリックすると、もう 1 つのマップが表示され、別のブックマークにズームします。
どちらの Web マップも同じブックマークのセットで構成されており、ウィジェットは両方のマップで同様に動作します。 1 つのマップだけにブックマークがある場合、もう 1 つのマップを選択したときにウィジェットは空白で表示されます。
注意:
Web マップでブックマークを構成する方法については、ドキュメントをご参照ください。
スワイプ ウィジェットの追加
現在、ユーザーは 2 つのマップを切り替えることができます。 しかし、それぞれの土地被覆タイプが地表でどのように見えるかを理解しやすいように、両方のマップを一度に表示できるようにします。 これを実現するために、スワイプ ウィジェットを追加します。
- [ライブ ビュー] をオフにします。
- サイド ツールバーで [挿入] ボタンをクリックします。 [ウィジェットの挿入] ウィンドウで、「スワイプ」を検索します。
注意:
ArcGIS Enterprise を使用している場合、スワイプ ウィジェットを使用できない場合があります。 次のセクションに進んでもかまいません。
- [スワイプ] ウィジェットをキャンバスにドラッグし、列内の凡例の上にドロップします。
- [スワイプ] ウィンドウで、[コンテンツ] タブをクリックします。 [テンプレートの選択] で、[水平 (シンプル)] が選択されていることを確認します。
- [開始] をクリックします。
- [マップ ウィジェットの選択] で、[マップ] を選択します。
キャンバス上のスワイプ ウィジェットには、切り替えボタンと 2 つの展開可能なセクションに設定されています。
ユーザーがマップ レイヤー間でなく 2 つのマップ間をスワイプできるようにします。
- [スワイプ] ウィンドウの [スワイプ モード] で、[Web マップまたは Web シーン間をスワイプ] を選択します。
- [一般設定] の [スライダーの初期位置] に「50」と入力します。
ウィジェットの中央にスライダー バーが配置されます。 これで、スワイプ ウィジェットをテストする準備が整いました。
- [ライブ ビュー] をオンにします。 スワイプ ウィジェットで、[スワイプ] 切り替えボタンをクリックします。
- マップをズームおよび画面移動し、スワイプ バーを移動して機能をテストします。
2 つのマップが同期して移動します。これにより、両方のマップを同時に探索できます。 凡例が更新され、最後にクリックされたマップが表示されます。
- 列を下にスクロールして、1 つのブックマークをクリックします。
両方のマップがブックマークされた場所にズームします。 スワイプ機能を使用すると、[Cover type] マップだけで示される明確な境界ではなく、景色の中で土地被覆タイプが徐々に変化する様子を簡単に確認できるようになります。
ウィジェットの高さ設定の調整
次に、列内の各ウィジェットの高さを調整します。 ウィジェットのサイズを決定するには、自動、ストレッチ、カスタムの 3 つの方法があります。 ウィジェットごとに異なる方法を使用します。
- [ライブ ビュー] をオフにします。 スワイプ ウィジェットをクリックして選択します。
注意:
スワイプ ウィジェットがない場合は、手順 4 に進みます。
スワイプ ウィジェットは、必要以上のスペースを占有しています。 また、必要以上の情報を表示しています。 含める必要があるものとそうでないものを決めることは、レイアウト デザインの重要な部分です。 含める必要がないものを排除することで、対象ユーザーにとってレイアウトが明確でわかりやすくなります。 スワイプ ウィジェットの高さを短くして、切り替えボタンのみを表示し、マップ名は非表示にします。
- [スワイプ] ウィンドウで、[スタイル] タブをクリックします。 [高さ] の横の矢印ボタンをクリックします。
高さには、次の 3 つのオプションがあります。
- [自動] は、コンテンツに対して過不足のないように、ウィジェットの高さを調整します。
- [ストレッチ] は、コンテナー内の利用可能なスペースを占有するように、ウィジェットの高さを調整します。
- [カスタム] は、高さをピクセル単位またはコンテナーの高さのパーセンテージで定義できます。
スワイプ ウィジェットを短くすることで、一部を非表示にします。 ウィジェットの高さをコンテンツよりも短くできる高さオプションは [カスタム] のみです。 このオプションはすでに選択されています。
カスタムの高さを調整するには、数値を入力するか、ウィジェットをドラッグします。
- キャンバスで、ウィジェットの下部にあるハンドルをクリックして上にドラッグし、ウィジェットの高さを短くします。 マップ名が表示されなくなり [スワイプ] という語句と切り替えボタンのみが表示されるまでドラッグします。
[スワイプ] ウィンドウで、[高さ] パラメーターが約 [50] ピクセルに更新されます。 次に、凡例ウィジェットの高さを設定します。
- 凡例ウィジェットをクリックします。
ユーザーが 2 つのマップを切り替えるとき、一方の凡例が他方よりも長くなるため、このウィジェットの高さは変化する必要があります。
- [凡例] ウィンドウの [スタイル] タブの [高さ] で、[自動] を選択します。
注意:
[高さ] がすでに [自動] に設定されている場合は、[縦横比を維持] ボタンのロックが解除されていることを確認します。
[凡例] ウィンドウが、凡例全体をちょうど表示できる高さに短くなります。
- ブックマーク ウィジェットをクリックします。 [ブックマーク] ウィンドウの [高さ] で、[ストレッチ] を選択します。
ブックマーク ウィジェットが列の残りの高さを占有するようストレッチされます。
- [ライブ ビュー] をオンにします。
- クリックするか 2 つのマップを切り替えて、列内のウィジェットがどのように変化するかを確認します。
スワイプ ウィジェットは [カスタム] 高さ方法を使用しているため、変化しません。常に同じ高さを維持します。 凡例ウィジェットは [自動] 方法を使用しているため、アクティブな凡例の高さに応じて高さが変化します。 ブックマーク ウィジェットは [ストレッチ] 方法を使用しているため、列内で利用可能なスペースの大きさに応じて高さが変化します。
アウトラインの確認
ArcGIS Experience Builder でレイアウトを設計しているときは、ウィジェットの配置とネストの状態を理解できるように、[アウトライン] セクションを頻繁に確認してください。 これまで 5 つのウィジェットを追加したので、アウトラインを確認して、エクスペリエンスが意図したとおりに構成されていることを確認します。
- [ページ] ウィンドウの [アウトライン] セクションで、[ボディ]、[行]、[列] がすべて展開されていることを確認します。
ヒント:
[ページ] ウィンドウが開いていない場合は、サイド ツールバーで [ページ] ボタンをクリックします。
[アウトライン] セクションには、ページ内にあるすべてのウィジェットが一覧表示され、互いのネスト状況が示されています。 このページは、[行] ウィジェットで構成されています。 行の中には、[列] ウィジェットと [マップ] ウィジェットがあります。 列の中には、[スワイプ]、[凡例]、[ブックマーク] の 3 つのウィジェットがあります。
[アウトライン] セクションを使用して、ウィジェットを選択したり、それらのプロパティを変更することもできます。
- [アウトライン] セクションで、[行] をクリックします。
[行] ウィンドウが表示されます。
- [行] ウィンドウで、[コンテンツ] タブをクリックします。
- [ギャップ] と [パディング] に「0」と入力します。
キャンバスで、列とマップの間にあったグレーのギャップが消えます。 ヘッダーを除くすべての周囲にあったグレーの余白も消えます。
余分なパディングとギャップは、レイアウトに必要ありませんでした。 それらを削除することで、余分な視覚的な乱雑さがなくなり、デザインが簡素化されました。 行ウィジェットの残りの空白部分が表示されないと、キャンバス上で行を選択できなくなりますが、[アウトライン] セクションで引き続き選択することができます。
- ビルダー ツールバーで、[ライブ ビュー] をオフにし、[保存] ボタンをクリックします。
このチュートリアルでは、ArcGIS Experience Builder で 5 つのウィジェットを Web マップに追加しました。 レイアウトのウィジェット、サイズ設定方法、および [アウトライン] セクションについて学習しました。 このシリーズの次のチュートリアル「Web アプリへのウィンドウの追加」で、ウィンドウとボタンを追加する方法と、それらを互いにリンクする方法を学習してください。
