Web アプリへのウィンドウの追加

静的マップの作成に慣れているユーザーは、レイアウトを設計する方法を理解しています。これには、マップを説明するのに役立つタイトル、凡例、縮尺記号、著作権情報のテキストなどの情報があります。 Web マップにも、この周辺情報が必要です。 ArcGIS では、Web マップのレイアウトを作成するために Web アプリを作成できます。

あなたは、南オーストラリア州の通訳センターで、対話型キオスク用の河口域のマップを作成するために雇用されています。 クライアントは Web マップの作成を依頼しましたが、実際に必要なのは Web アプリです。 このチュートリアル シリーズでは、ArcGIS Experience Builder を使用して、河口域の 2 つのマップを含むカスタムの対話型レイアウトを構築します。

このチュートリアルは、「ArcGIS Experience Builder でのレイアウトの設計」シリーズの一部です。

• 2 つのマップを使用した Web エクスペリエンスの作成
• 複数のウィジェットを含む Web アプリ レイアウトの配置
• Web アプリへのウィンドウの追加
• より小さい画面に合わせたウィジェットのサイズ変更
• エクスペリエンスとテンプレートの公開

このチュートリアルの前に、シリーズ内の前のチュートリアルを完了することをお勧めします (ArcGIS Enterprise ユーザーの場合は、前のチュートリアルを完了することが必要です)。このチュートリアルでは、レイアウトに含めることは重要であるが、ユーザーにすぐに表示しなくても問題ない情報を保持するウィンドウを追加します。 また、そのウィンドウにアクセスできるボタンも追加します。

このチュートリアルは、ArcGIS Online および ArcGIS Enterprise 11.1 を使用して、2023 年 11 月 29 日に最終テストされました。 異なるバージョンの ArcGIS Enterprise を使用している場合、機能や結果が異なる可能性があります。

最終結果の表示​

要件

• ArcGIS 組織でのユーザー、公開者、または管理者ロール: ArcGIS Online (ソフトウェア アクセスのオプションをご参照ください) または ArcGIS Enterprise (詳細)
  • ArcGIS Enterprise を使用している場合、SearchArcGISOnlineEnabled プロパティを true に設定する必要があります (これがデフォルト設定です)。
  • 詳細については、ArcGIS Experience Builder の要件のドキュメントをご参照ください。

エクスペリエンスを開く

最初に、前のチュートリアルで作成したエクスペリエンスを開きます。

1. 前回のチュートリアル「複数のウィジェットを含む Web アプリ レイアウトの配置」を完了した場合は、[American River Marine Estuary] エクスペリエンスをもう一度開いて次のセクションに進みます。

   注意:

   エクスペリエンスを見つける方法がわからない場合は、ArcGIS Experience Builder を開いて ArcGIS アカウントでサイン インします。 [最近のエクスペリエンス] ページに自分のエクスペリエンスが一覧表示されます。

2. 前回のチュートリアルを完了していない場合は、ArcGIS Experience Builder を開いて ArcGIS アカウントでサイン インします。

   注意:

   ArcGIS アカウントがない場合は、ソフトウェア アクセスのオプションをご参照ください。

   [最近のエクスペリエンス] ページが表示されます。

3. [新規作成] ボタンをクリックします。

   

4. [ArcGIS Online] タブをクリックします。

   

5. 検索バーに「estuary template 2」と入力します。
6. [American River Marine Estuary Template 2] カードで、[作成] ボタンをクリックします。

   

   キャンバスが開き、これまでに作成されたエクスペリエンスが表示されます。 これには、マップが 2 つあるマップ ウィジェット、タイトル付きのヘッダー、およびスワイプ、凡例、ブックマークの 3 つのウィジェットがある列が含まれています。

   

7. ビルダー ツールバーで、タイトルをクリックして名前を「American River Marine Estuary」に変更します。

   

ウィンドウの追加

エクスペリエンスに追加する情報として、ロケーター マップと著作権情報のテキストがあります。 ただし、レイアウトに読み込む情報が多すぎて、マップの邪魔になる可能性があることに留意する必要があります。 静的レイアウトでは、見かけの階層の原則を使用して、マップなどの重要な情報は最初に注目され、著作権情報のテキストなどの二次情報は最後に注目されるようにすることができます。 Web アプリ レイアウトでは、さらに対話機能を使用して、最初に注目される内容を制御することができます。

次に、ロケーター マップと著作権情報のテキストを保持するウィンドウをレイアウトに追加します。 このウィンドウによって、マップを煩雑にすることなく、この二次情報が利用可能になり読みやすくなります。 このウィンドウは、ユーザーが開くまで表示されません。

1. サイド ツールバーで [ページ] ボタンをクリックします。
2. [ページ] ウィンドウの上部にある [ウィンドウ] タブをクリックします。

   

   エクスペリエンスには、複数のページと複数のウィンドウを追加できます。 このエクスペリエンスには、それぞれを 1 つずつ用意します。

3. [ウィンドウの追加] ボタンをクリックします。 下にスクロールして [サイドバー] をクリックします。

   

   キャンバスの右側にウィンドウが表示されます。 キャンバスの残りの部分は暗くなり、ウィンドウが上部にフローティングしているように表示されます。

   追加したウィンドウはテンプレートで、いくつかのウィジェットがすでに設定されています。 テンプレートを操作する際は、ページやウィンドウの構造を理解するために、そのアウトラインを確認してから変更を加えることをお勧めします。

   [ページ] ウィンドウの [アウトライン] セクションを見ると、このウィンドウには画像、ボタン、列が含まれていることがわかります。

4. [アウトライン] セクションで、[列 2] を展開します。

   

   列ウィジェットには 2 つのテキスト ウィジェットが含まれています。

5. [アウトライン] セクションで、[テキスト 2] をクリックして選択します。

   キャンバス上で [タイトル] テキストが選択されています。

   

   このウィンドウにタイトルは必要ないため、このウィジェットを削除します。

6. [アウトライン] セクションで、[テキスト 2] にポインターを合わせます。 [その他] ボタンをクリックし、[削除] をクリックします。

   

テキストの追加

ウィンドウにテキストを追加して、マップ データのソースとブックマーク ウィジェットで使用されている写真の著作権情報を提供します。

1. 次のテキストをコピーします。

   American River is a marine estuary on Kangaroo Island in South Australia. It is part of Encounter Marine Park and includes Pelican Lagoon Sanctuary Zone, a biodiversity hotspot which has been protected since 1914.

   The data used in this map was derived from Estuarine Habitats of South Australia, a dataset provided by the Government of South Australia, Department for Environment and Water.

   This site was created by Your Name on Current Date, following the tutorial Design a layout in ArcGIS Experience Builder.

   Photo credits:

   Seagrass: flickr user Paul Asman and Jill Lenoble - https://www.flickr.com/photos/pauljill/5777808662/

   Seagrass/Algal: flickr user Gerry Thomasen - https://www.flickr.com/photos/gerrythomasen/174310588/

   Samphire: Wikimedia Commons user Melburnian - https://commons.wikimedia.org/wiki/file:sarcocornia_quinqueflora.jpg

   Samphire/Atriplex/Grassland: iNaturalist user Samuel Brown - https://www.inaturalist.org/photos/31331920

   Sand: flickr user Phil Whitehouse - https://www.flickr.com/photos/philliecasablanca/2051633887/

   Melaleuca/Sedges: Wikimedia Commons user Melburnian - https://commons.wikimedia.org/wiki/file:melaleuca_squarrosa.jpg

   Grassland: Wikimedia Commons user Kolforn - https://commons.wikimedia.org/wiki/File:Grassland_countryside,_Vale_da_Azinheira,_25_June_2016.JPG

   Bare: Wikimedia Commons user Manage891a3 - https://commons.wikimedia.org/wiki/file:water_surface_lake.jpg

2. キャンバスで、残りのテキスト ウィジェットをダブルクリックして編集します。 右クリックして、[書式なしテキストとして貼り付け] を選択します。

   

   ヒント:

   [書式なしテキストとして貼り付け] オプションが使用できない場合は、Ctrl + Shift + V キーまたは Cmd + Option + Shift + V キーを押します。

   このテキストは、河口域に関する情報と、データと写真の帰属を提供しています。 次に、テキストの一部にハイパーリンクを追加します。

3. テキスト ウィジェットで、[Encounter Marine Park] をハイライト表示します。 [テキスト 3] ウィンドウで、[リンク] ボタンをクリックします。

   

4. [リンクの設定] ウィンドウの [リンク先] で、[URL] を選択します。 [URL] に「https://www.parks.sa.gov.au/parks/encounter-marine-park」を貼り付けます。

   

5. [OK] をクリックします。
6. 2 番目のパラグラフで、[Estuarine Habitats of South Australia] をハイライト表示します。 上記と同じ方法で、このテキストを「https://data.sa.gov.au/data/dataset/estuarine-habitats-of-south-australia」にリンクします。

   

7. テキストを編集し、ユーザー名と現在の日付を追加します。
8. ビルダー ツールバーの [保存] をクリックします。

画像の追加

次に、ロケーター マップの画像をウィンドウに追加します。

1. 画像ウィジェットをクリックします。 [画像] ウィンドウで、[画像の選択] をクリックします。

   

2. [画像の選択] ウィンドウで、[URL] タブをクリックし、「https://www.arcgis.com/sharing/rest/content/items/11b62ea3ef81427dbf6315563f17c810/data」を貼り付けます。

   

3. テキスト ボックスの外側をクリックして、変更を確定します。 [画像の選択] ウィンドウを閉じます。

   この画像は、オーストラリアの他の地域に対する American River のロケーター マップです。 これは ArcGIS Pro で作成され、PNG 画像として保存されたものです。

   

   マップが小さすぎるため、ラベルが判読できません。 マップを拡大できるようにウィンドウの幅を広げます。

4. [ページ] ウィンドウで、[ウィンドウ] をクリックして選択します。

   

   ヒント:

   または、キャンバスで、画像とテキストとの間のギャップをクリックします。

   [ウィンドウ] ウィンドウが表示されます。

5. [位置とサイズ] セクションの [W] に「340」と入力し、Enter キーを押します。

   

   ウィンドウの幅が広くなります。 加えて、画像ウィジェットの高さも伸ばします。

6. 画像ウィジェットをクリックします。 マップ全体が表示されるまで、下端をドラッグします。

   

   画像とテキストが重なり合って、読みにくくなっています。 画像の邪魔にならないように、テキストを下に移動します。

7. テキスト ウィジェットをクリックして選択します。

   このテキスト ウィジェットにはハンドルがありません。このため、ウィジェットを下に移動して画像の外に出すことができません。

   ウィジェットのサイズや位置を手動で変更できないのは、そのサイズが [自動] や [ストレッチ] に設定されているためである場合があります。 しかし、今回の場合、テキスト ウィジェットはカスタムの高さサイズであるため、それが原因ではありません。

   ヒント:

   ウィジェットがカスタムの高さサイズであることを確認するには、プロパティ ウィンドウの [スタイル] タブをクリックします。 [高さ] が [自動] や [ストレッチ] ではなく、数値に設定されていることを確認します。

   [カスタム] のサイズ設定方法を使用している場合でもウィジェットのサイズや位置を変更できない場合は、[アウトライン] セクションでウィジェットが別のウィジェットの内部に含まれているかどうかを確認します。

8. [ページ] ウィンドウで [アウトライン] セクションを確認します。

   今回の場合、テキストが列内に含まれています。 この列が、テキストのサイズと位置を一部決定しています。 今回の場合、テキスト ウィジェットを含む列ウィジェットを移動することで、テキスト ウィジェットを移動できます。

9. [アウトライン] セクションで、[列 2] をクリックします。

   

10. キャンバス上に、ウィジェットのドラッグ ハンドルが表示されます。 上部のハンドルを、ロケーター マップの下に配置されるまで下にドラッグします。

    

テーマの調整

テキスト ウィジェットのハイパーリンクは青色です。 この色は、エクスペリエンスのテーマから設定されています。 次に、テーマを編集して、リンクの色をロケーター マップの色に合わせます。

1. サイド ツールバーで [テーマ] ボタンをクリックします。

   

2. [テーマ] ウィンドウの下部にある [カスタマイズ] をクリックします。
3. [プライマリ] の上にある青の編集ボタンをクリックします。

   

4. [HEX] に「#27a3ad」と入力して、Enter キーを押します。

   

   原色がロケーター マップに使用されているのと同じターコイズ色に更新されます。 これは、[Cover type] マップの主要色の 1 つでもあります。 ハイパーリンク テキストとブックマーク ウィジェットのボタンが青からターコイズに変わります。

   

ボタンの追加とウィンドウへのリンク

次に、ユーザーがウィンドウを開く方法を追加する必要があります。 ヘッダーにボタンを追加し、そのボタンをウィンドウにリンクします。

1. サイド ツールバーで [ページ] ボタンをクリックします。 [ページ] ウィンドウの上部にある [ページ] タブをクリックします。

   

   ウィンドウが表示されなくなります。 ウィンドウの代わりにページの編集を続行できるようになりました。

2. キャンバス上で、ヘッダーにポインターを合わせ、[ヘッダーの編集] をクリックします。
3. サイド ツールバーで [挿入] ボタンをクリックします。 [ウィジェットの挿入] ウィンドウで、[検索] ボタンをクリックし、「ボタン」と入力します。
4. [ボタン] ウィジェットをキャンバスにドラッグします。 ヘッダーの右側にドロップします。

   

   ボタンが正確な位置になくてもかまいません。 サイズと位置は後で調整します。

5. [ボタン 2] ウィンドウの [テキスト] で、既存のテキストを消去して、「About this map」と入力します。 Enter キーを押します。

   

   ボタンのテキストが更新されます。 次に、ボタンをウィンドウに接続します。

6. [ボタン 2] ウィンドウで、[リンクの設定] をクリックします。
7. [リンクの設定] ウィンドウの [リンク先] で、[ウィンドウ] を選択します。

   

   このエクスペリエンスにはウィンドウが 1 つしかないため、[ウィンドウの選択] で選択を行う必要はありません。

8. [OK] をクリックします。

   最後に、ボタンとウィンドウをテストします。

9. ビルダー ツールバーの [ライブ ビュー] をクリックします。
10. [About this map] ボタンをクリックします。

    

    ウィンドウが表示されます。

11. ウィンドウの上部にある閉じるボタンをクリックします。

    

    ウィンドウが閉じます。

12. ビルダー ツールバーで、[ライブ ビュー] をオフにし、[保存] ボタンをクリックします。

このチュートリアルでは、ArcGIS Experience Builder でウィンドウとボタンを Web マップに追加しました。 テキストの編集、画像の追加、ボタンのウィンドウへのリンク、テーマ色の変更を行う方法を学習しました。 このシリーズの次のチュートリアル「より小さい画面に合わせたウィジェットのサイズ変更」を試して、さまざまな画面サイズに合わせてレイアウトをカスタマイズする方法を学習してください。

使用許諾

• 河口域のデータは、南オーストラリア州政府の環境保全局の Estuarine Habitats of South Australia から取得しました。 2023 年 5 月にアクセス。
• Human Geography Map の出典: Esri、HERE、Garmin、FAO、NOAA、USGS、OpenStreetMap の投稿者、GIS ユーザー コミュニティ
• World Hillshade レイヤーの出典: Esri、Airbus DS、USGS、NGA、NASA、CGIAR、N Robinson、NCEAS、NLS、OS、NMA、Geodatastyrelsen、Rijkswaterstaat、GSA、Geoland、FEMA、Intermap、GIS ユーザー コミュニティ
• World Imagery レイヤーの出典: Esri、Maxar、Earthstar Geographics、GIS ユーザー コミュニティ。
• Bare.png は、Wikimedia Commons ユーザー Manage891a3 の Water surface lake.jpg からトリミングしました。 2023 年 8 月にアクセス。
• Grassland.png は、Wikimedia Commons ユーザー Kolforn の Grassland countryside, Vale da Azinheira, 25 June 2016.JPG からトリミングしました。 2023 年 11 月にアクセス。
• Melaleuca_sedges.png は、Wikimedia Commons ユーザー Melburnian の Melaleuca_squarrosa.jpg からトリミングしました。 2023 年 8 月にアクセス。
• Samphire.png は、Wikimedia Commons ユーザー Melburnian の Sarcocornia quinqueflora.jpg からトリミングしました。 2023 年 8 月にアクセス。
• Samphire_atriplex_grassland.png は、iNaturalist ユーザー Samuel Brown の Grey Saltbush (Atriplex cinerea) からトリミングしました。 2023 年 8 月にアクセス。
• Sand.png は、Flickr ユーザー Phil Whitehouse の Kangaroo Island からトリミングしました。 2023 年 8 月にアクセス。
• Seagrass.png は、Flickr ユーザー Paul Asman および Jill Lenoble の Seagrass Halodule uninervis からトリミングしました。 2023 年 8 月にアクセス。
• Seagrass_algal.png は、Flickr ユーザー Gerry Thomasen の Seaweed the way it should look からトリミングしました。 2023 年 8 月にアクセス。