2 つのマップを使用した Web エクスペリエンスの作成

新しいエクスペリエンスの作成

ArcGIS では、ArcGIS Dashboards、ArcGIS Instant Apps、または ArcGIS StoryMaps を使用して Web アプリを作成できます。このプロジェクトでは、レイアウトの制御およびカスタマイズ機能が最も豊富な ArcGIS Experience Builder を選択してアプリを作成します。

注意:

さまざまな状況で使用するアプリビルダーの詳細については、記事「どのアプリビルダーを選択すればよいですか？」をご参照ください。

Experience Builder を使用して作成された Web アプリも、Web エクスペリエンスと呼ばれます。最初に、空白の全画面テンプレートを使用して新しいエクスペリエンスを作成します。

ArcGIS Online または ArcGIS Enterprise ポータルを開きます。
ArcGIS アカウントにサインインします。
注意:
ArcGIS アカウントがない場合は、ソフトウェアアクセスのオプションをご参照ください。
ページの上部で、ユーザー名の横にあるアプリランチャーボタンをクリックします。
[Experience Builder] をクリックします。
ArcGIS Experience Builder が新しいタブに表示されます。
[新規作成] ボタンをクリックします。
[開始するテンプレートの選択] ページには、一般的なレイアウトデザインの作成に使用できるテンプレートのリストが表示されます。このチュートリアルでは、空白のテンプレートから開始しますが、全画面、グリッド、スクロールのいずれかのページタイプを選択する必要があります。マップが主な焦点となるアプリに適しており、レイアウトを最も自由に制御できる全画面を選択します。このページタイプでは、ウィジェットを互いが重なる場合でも、キャンバス上の任意の位置に配置することができます。
[空白の全画面] カードで、[作成] をクリックします。
注意:
[はじめに] ウィンドウが表示されたら、[ツアーのスキップ] をクリックします。
Web アプリを作成するキャンバスが表示されます。
ページ上部のビルダーツールバーで、[無題のエクスペリエンス] をクリックします。既存のテキストを消去して、「American River Marine Estuary」と入力します。
キャンバスの横に、[ウィジェットの挿入] ウィンドウが開きます。このウィンドウには、レイアウトに追加できるウィジェットと呼ばれるエレメントがすべて表示されます。
[ウィジェットの挿入] ウィンドウの下部までスクロールし、[レイアウト] セクションを見つけます。
レイアウトウィジェットは、キャンバス上の他のウィジェットを適切に整理できるようにするコンテナーです。ウィジェットによりレイアウトが整理され、画面サイズが変化しても整理された状態を維持します。レイアウトを設計する最も簡単な方法は、レイアウトウィジェットを他のウィジェットよりも先に追加して配置することです。
[ウィジェットの挿入] ウィンドウから、[行] ウィジェットをキャンバスにドラッグします。
キャンバスの行ウィジェットのツールバーで、[配置] ボタンをクリックし、[フルサイズ] をクリックします。
行ウィジェットが拡大され、キャンバス全体に広がります。

2 つのマップを含むマップウィジェットの追加

これまでに河口域のマップを 2 つ作成しており、エクスペリエンス内でこれらのマップを紹介する必要があります。次に、マップウィジェットを追加し、2 つのマップで構成します。

[ウィジェットの挿入] ウィンドウで、スクロールしてウィンドウの上部に戻り、[マップ] ウィジェットをクリックします。行ウィジェットの内側のキャンバスにドラッグアンドドロップします。
デフォルトのマップがキャンバスに表示されます。
マップウィジェットの左端または右端をドラッグします。
垂直の破線が表示されます。行ウィジェットは、コンテンツを 12 等分したスペースに並べて整理します。
マップの端をドラッグして、行の左端の 2 つのスペース以外をすべて埋めます。
左の 2 つのスペースは凡例や他のウィジェットに使用するため、そのままにしておきます。
キャンバスの反対側に [マップ] ウィンドウが開き、選択したウィジェットのプロパティが表示されます。次に、以前にこのプロジェクトのために作成した 2 つのマップをマップウィジェットに設定します。
[マップ] ウィンドウで、[マップの選択] をクリックします。
[データの選択] ウィンドウの下部で [新しいデータの追加] をクリックします。
[データの追加] ウィンドウで、[ArcGIS Online] タブをクリックします。検索バーに「American River owner:Learn_ArcGIS」と入力します。
検索結果で、[Tidal class] カードと [Cover type] カードをクリックします。
選択したマップにチェックマークが表示されます。
[完了] をクリックします。
2 つのマップが [データの選択] ウィンドウに追加されます。
[データの選択] ウィンドウで、[Cover type] と [Tidal class] をクリックします。
2 つのマップが [マップ] ウィンドウに追加されます。キャンバスで、マップウィジェットには、以前表示されていたデフォルトの世界のマップではなく、河口域マップのいずれかが表示されるようになりました。縮尺が小さすぎるため、河口域はキャンバスの中央に非常に小さく表示されます。マップウィジェットのデフォルトの表示範囲を変更します。
[マップ] ウィンドウの [初期表示] で、[カスタム] をクリックします。 [変更] をクリックします。
[初期表示の変更] ウィンドウで、画面移動およびズームして河口域をビューの中央に表示します。
[OK] をクリックします。
キャンバスで、マップが定義した縮尺と位置に合わせてズームします。

マップの確認

次に、2 つのマップを確認し、これらのマップ間の切り替えをテストします。

ビルダーツールバーの [ライブビュー] をクリックします。
ライブビューでは、ウィジェットを選択する代わりに、ユーザーとしてキャンバスを操作できます。
マップウィジェットの左下隅で、マップの切り替えボタンをクリックして、もう一方のマップを表示します。
必要に応じて、[Tidal class] マップ (画像を含む) が表示されるまで、マップの切り替えボタンを再度クリックします。
このマップは、河口域の潮間帯、潮上帯、座礁感潮域を定義します。河口域は湿地帯の一種です。通常、河口域は、河川からの淡水と、海との接続部分からの海水が混じり合う沿岸の水域です。このように水が混じり合うことで、多くの栄養素が供給され、その結果、生物多様性が高くなります。
この河口域は American River と名付けられ、南オーストラリア州のカンガルー島にあります。渉禽類、海鳥、魚類にとって重要な場所であり、ペリカンラグーン保護公園があります。ただし、開発、観光、栄養塩負荷の増加による脅威に直面しています。
注意:
American River とカンガルー島の他の河口域の詳細については、南オーストラリア州政府の環境遺産局のレポート「Kangaroo Island Natural Resources Management Region: Estuaries Information Package」(カンガルー島自然資源管理地域: 河口域情報パッケージ) をご参照ください。
マップの切り替えボタンを再度クリックすると、[Cover type] マップが表示されます。
このマップは、河口域の各エリアをカバーしている主な植生または堆積物のタイプを示しています。この情報を最初のマップに含めることもできましたが、別のマップに含めたほうが読みやすくなります。 1 つのマップに多くの情報を盛り込むほど、その情報の解釈は難しくなります。多くの場合、2 つ目のマップを作成するのが最善策です。
マップでズームおよび画面移動します。
マップの左上隅にある [デフォルトマップビュー] ボタンをクリックします。
マップは、構成した初期表示に戻ります。
注意:
画面にレイアウト全体が表示されない場合は、Experience Builder の右下隅にある [幅を現在のウィンドウに調整] ボタンをクリックします。

マップツールの構成

マップツールには、[デフォルトマップビュー] ボタンなどがあります。次に、マップウィジェットの上に表示される他のツールを構成します。アプリに必要なツールについては、時間をかけて検討してください。追加できるという理由だけでレイアウトに追加せず、追加が必要な理由を常に説明できるようにしてください。不要なエレメントはマップのメッセージの邪魔になるだけで、マップユーザーを混乱させる場合さえあります。

[マップ] ウィンドウの [ツール] で、[検索] ツールをオフにします。
[検索] ボタンがマップから消えます。河口域には検索する町名や道路名がないため、検索バーは不要です。
[コンパス] ツールは方位記号です。すべてのマップに方位記号が必要なわけではなく、Web マップではユーザーが認識できるジオグラフィを見つけるまで縮小表示できるため、静的マップよりも方位記号が必要な可能性が低くなります。ただし、このアプリは主にタッチスクリーンデバイスで表示されるため、ユーザーが誤ってマップを回転させる可能性が高くなります。方位記号を追加して、ユーザーがマップの方向を変更しやすくすることができます。
[ツール] で [コンパス] ツールをオンにします。
[コンパス] ボタンは、マップ上の [デフォルトマップビュー] ボタンの下に表示されます。
[レイヤー] ツールと [ベースマップ] ツールでは、表示するレイヤーと使用するベースマップを変更できます。これらのオプションは、ユーザーが意思決定する際に、探索方法を細かく制御する必要がある場合に役立ちます。今回は、河口域について制御されたストーリーを伝えようとしています。ユーザーにマップを変更する手段を提供すると、一部の制御が失われ、伝えたいメッセージの邪魔になる可能性があります。 [レイヤー] ツールも [ベースマップ] ツールも含めません。
ユーザーは面積や距離を計算する必要がないため、[計測] ツールも含めませんが、河口域の大きさを十分に理解することで、河口域に対する理解が深まります。マップ上でユーザーが直感的に縮尺を決定するのに役立つ視覚的なインジケーターが比較的少ないため、縮尺記号を追加します。
[縮尺記号] ツールをオンにします。
マップの下部に縮尺記号が表示されます。
注意:
すべてのマップツールについては、「マップウィジェット」ヘルプページをご参照ください。
ビルダーツールバーの [ライブビュー] をオフにします。
マップに含める必要があるツールを示すルールはありません。マップの目的、利用者、メッセージ、使用方法に基づいて、各ツールを検討する必要があります。

タイトルを含むヘッダーの追加

Web アプリ内にマップを表示するメリットの 1 つは、目立つマップタイトルをカスタマイズできることです。レイアウトのヘッダーを作成し、タイトルのテキストウィジェットを追加します。ヘッダーとフッターは、[ページ] ウィンドウで有効にできます。

サイドツールバーで [ページ] ボタンをクリックします。表示されたウィンドウで、ハイライト表示された [ページ] エレメントをクリックします。
キャンバスの反対側に [ページ] ウィンドウが開き、ページのプロパティが表示されます。
[ページ] ウィンドウで、[ヘッダー] 切り替えボタンをオンにします。
キャンバスの上部に青色のヘッダーが表示されます。それに合わせて、行ウィジェットが下に移動します。ヘッダーのデフォルトの青色は、どちらのマップにも存在しません。首尾一貫したレイアウトを作成するには、マップに繰り返し同じ色を使用するなど、限られた色のパレットを使用し続けます。
2 つのマップは両方とも非常に色鮮やかであり、これらのマップを目立たせる必要があります。レイアウトのマップ以外のエレメントに黒、白、グレーなどの中間色を使用すると、マップが目立ちやすくなります。黒は中間色で、マップにも使用されている色なので、ヘッダーに適しています。
[ページ] ウィンドウの [塗りつぶし] の横にある青色の正方形をクリックします。 [標準色] の下にある黒色の正方形をクリックします。
ヘッダーの色が更新されます。次に、タイトルのテキストウィジェットを追加します。
キャンバス上で、ヘッダーにポインターを合わせます。 [ヘッダーの編集] をクリックします。
サイドツールバーで [挿入] ボタンをクリックします。
[ウィジェットの挿入] ウィンドウが表示されます。
[ウィジェットの挿入] ウィンドウで、[マップ中心] の横にある矢印をクリックして、このセクションを折りたたみます。
[データ中心] セクションも折りたたみます。
[ページ要素] の下にある [テキスト] ウィジェットをクリックしてドラッグします。キャンバスにドラッグし、ヘッダーにドロップします。
キャンバス上にテキストウィジェットが表示され、[テキスト] ウィンドウが表示されます。デフォルトではテキストは黒色で、ヘッダーの黒色の背景では見えないため、テキストを入力する前に、テキストの色を白に変更します。
[テキスト] ウィンドウの [テキスト形式] で、[フォントカラー] ボタンをクリックします。 [標準色] の下にある白色の正方形をクリックします。
[太字] ボタンをクリックします。
キャンバス上でテキストウィジェットをダブルクリックし、「American River Marine Estuary」と入力します。 Enter キーを押し、「Kangaroo Island, South Australia」と入力します。
次に、テキストの一番上の行を大きくします。
テキストの一番上の行をダブルクリックして選択します。表示されたツールバーで、フォントサイズを [25] に変更し、Enter キーを押します。
これによりテキストウィジェットは、タイトル全体を表示するのに十分な大きさがありません。サイズを拡大して、ヘッダーいっぱいの大きさにします。
[テキスト] ウィンドウで、[スタイル] タブをクリックします。
[スタイル] タブのすぐ下にあるオプションボタンをクリックし、[フルサイズ] をクリックします。
テキストウィジェットをヘッダーのフルサイズにすることで、タイトルのテキストが常に最大限のスペースで表示されるようになります。これは、アプリが小さな画面上に表示される際に、より重要になってきます。
ヘッダーの編集を中止するには、マップの横にある行ウィジェットの空白の部分をクリックします。
ビルダーツールバーの [保存] ボタンをクリックします。

このチュートリアルでは、ArcGIS Experience Builder を使用して Web アプリを作成しました。このアプリには、タイトルを含むヘッダーと、2 つのマップと複数のマップツールが存在するマップウィジェットを含む行ウィジェットが含まれています。たとえば、マップ以外のエレメントの色を選択する方法や、含めるツールを決定する方法など、Web アプリレイアウトを設計するうえで重要な設計の概念について学習しました。このシリーズの次のチュートリアル「複数のウィジェットを含む Web アプリレイアウトの配置」で、American River Marine Estuary エクスペリエンスに凡例、ブックマーク、スワイプの各ウィジェットを追加する方法を学習してください。

新しいエクスペリエンスの作成

注意:

注意:

注意:

2 つのマップを含むマップウィジェットの追加

マップの確認

注意:

注意:

マップツールの構成

注意:

タイトルを含むヘッダーの追加

Building Web Apps with ArcGIS Experience Builder

Get Started with ArcGIS Experience Builder

Building an App in ArcGIS Online to Expand Food Access

要件

Outline

2 つのマップを使用した Web エクスペリエンスの作成

新しいエクスペリエンスの作成

注意:

注意:

注意:

2 つのマップを含むマップ ウィジェットの追加

マップの確認

注意:

注意:

マップ ツールの構成

注意:

タイトルを含むヘッダーの追加

使用許諾

フィードバックを送信

このチュートリアルの共有と再利用

詳細​

関連する Esri トレーニング

Building Web Apps with ArcGIS Experience Builder

Get Started with ArcGIS Experience Builder

Building an App in ArcGIS Online to Expand Food Access

2 つのマップを含むマップウィジェットの追加

マップツールの構成

詳細