静的マップを Web アプリに変換する

あなたが教えている高校の歴史の授業のために、アフリカの古代都市のマップを作成しました。 ここでは、このマップの対話型 Web アプリ バージョンを作成し、生徒がこれらの場所を詳しく調査して現代のコンテキストに関連付けることができるようにしたいと思います。 このチュートリアルでは、ArcGIS Pro から Web マップを共有し、拡大/縮小すると表示されるベースマップを制御し、生徒がデスクトップ デバイスまたはモバイル デバイスでマップを探索するために使用できるダッシュボード アプリケーションを構築する方法を学びます。

このチュートリアルは、2024 年 8 月 13 日に最終テストされました。

最終結果の表示​

要件

• 公開者、ファシリテーター、または管理者ロールを持つ ArcGIS 組織アカウント (ソフトウェア アクセスのオプションをご参照ください)
• ArcGIS Pro
• ArcGIS Dashboards

静的マップを Web アプリに変換する

Web マップとしてのマップの共有

ArcGIS Pro でマップを起動した後、そのマップの Web バージョンを作成する必要があることに気付くことがあります。そうすることで、そのマップを対話型フォームで共有できます。 ArcGIS Online にマップを共有して、そこで作業を続行することができます。

1. [Ancient cities in Africa] zip ファイルをダウンロードして、コンピューター上の場所 (たとえば、C: ドライブ) に展開します。
2. 展開したフォルダーを開き、[Ancient cities in Africa.aprx] をダブルクリックして、プロジェクトを ArcGIS Pro で開きます。

   

3. 求められた場合、ArcGIS アカウントにサイン インします。

   注意:

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

   マップが表示され、アフリカの 37 の古代都市の場所が示されます。 このマップは、Wikipedia の継続的に居住されているアフリカ最古の都市のリストから作成されました。 このマップの作成方法を知りたい場合は、チュートリアル「歴史的な場所のリストをマップに変換する」をお試しください。

   

   このマップの対話型バージョンを作成する必要があります。 最初に、マップを Web マップとして共有します。これにより、このマップが、ArcGIS Online で表示および編集できるマップに変換されます。

4. リボンの [共有] タブをクリックします。 [共有] グループで、[Web マップ] をクリックします。

   

5. [Web マップとして共有] ウィンドウで、次のパラメーターを変更します。
   • [名前] に「Ancient cities in Africa web map」と入力し、続けて自分のイニシャルを入力します。
   • [サマリー] に、「Some of the oldest continuously inhabited cities in Africa.」と入力します。
   • [タグ] に、授業の名前「Ancient History」を入力します。
   • [構成の選択] で、[すべてのデータをコピー: 調査] を選択します。
   • [すべてのクライアントと互換性のあるシンボル タイプを使用する] がオンであることを確認します。
   • [次のグループと共有] で [すべての人に公開] をオンにします。

   

6. [分析] ボタンをクリックします。

   

   2 つのエラーが [メッセージ] タブが表示されます。 すべてのエラーが解決されるまで、マップを共有できません。

7. エラー メッセージを展開し、必要に応じて、ウィンドウの端をドラッグして、完全なメッセージを読むことができるようにします。

   

   2 種類のエラーが特定されています。 最初にマップの投影法のエラーに対処します。

   マップ内の 2 つのレイヤーが、マップの投影法とは異なる投影法を持っています。 Web マップは ArcGIS Pro 内よりも座標系について厳しい要件を持つため、これは一般的なエラーです。 エラーを解決して共有を続けるために、ベースマップ レイヤーが使用する Web メルカトル座標系に合わせてマップの座標系を変更します。 Web マップは、そのベースマップと同じ座標系を使用する必要があります。

8. ネストされているエラー メッセージのいずれかをポイントし、表示される [オプション] ボタンをクリックします。

   

9. 表示されるメニューで、[マップを更新してベースマップの座標系を使用] をクリックします。

   

   赤いエラー メッセージの 1 つが緑のチェック マークで更新され、それが解決されたことを示します。

10. [分析] をもう一度クリックします。

    マップの投影法のエラーが解決されましたが、もう 1 つ解決すべき未解決エラーがあります。

11. 一意の数値 ID のエラーをダブルクリックします。

    

    [一般] タブに [マップ プロパティ] ウィンドウが表示されます。

12. [Web レイヤーを共有できるよう一意の数値 ID の割り当てを許可] のボックスをオンにします。

    

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

    エラー メッセージが緑のチェック マークで更新され、それが解決されたことを示します。

14. [Web マップとして共有] ウィンドウで [分析] をクリックします。

    エラーも警告も見つかりませんでした。 ベースマップの座標系を使用するようにマップを更新すると、両方の投影法のエラーが解決されました。

    注意:

    Web マップの投影法の詳細については、チュートリアル「Web メルカトルを使用しない Web マップの作成」で学習できます。

15. [共有] をクリックします。

    共有が完了すると、ウィンドウの下部に緑のメッセージ バナーが表示されます。

16. [Web マップの管理] をクリックして、ArcGIS Online で Web マップを表示します。

    

    Web マップのアイテム詳細ページがブラウザーに表示されます。

17. ArcGIS Pro を閉じます。

    マップを保存する必要はありません。

さまざまな縮尺に向けたベースマップ レイヤーの構成

マップは現在 Web マップとして存在しています。この Web マップを生徒と共有できます。 ただし、生徒がマップを簡単に探索して、あなたが授業で説明した関連付けを容易に行うことができるように、もう少しカスタマイズされた操作性を実現します。 そのための 1 つの方法は、さまざまな縮尺でどのベースマップが表示されるかを制御することです。

1. アイテム詳細ページの上部で、[サイン イン] をクリックして、ArcGIS アカウントにサイン インします。 ArcGIS Pro にサイン インしたときと同じアカウントを使用します。
2. [Map Viewer で開く] をクリックします。

   注意:

   ArcGIS Online には、マップの表示、使用、作成のための 2 つのマップ ビューアーがあります。 このチュートリアルでは新しい Map Viewer を使用します。 ボタンに [Map Viewer Classic で開く] と表示されている場合は、矢印ボタンをクリックして、代わりに [Map Viewer で開く] を選択します。

   

3. [Map Viewer が正式版になりました] というメッセージとともにウィンドウが表示されたら、[OK] をクリックします。
4. [コンテンツ] (暗い背景の) ツールバーにある [ベースマップ] をクリックします。

   

   ベースマップ オプションのリストが表示されます。 マップが縮小されたときには引き続き現在のベースマップを使用しますが、マップが拡大されたときには画像ベースマップを表示したいと思います。 そのようにするには、マップに複数のベースマップを追加して、それぞれのベースマップがいつ表示されるかを制御します。

5. [現在のベースマップ陰影起伏図 (World Hillshade)] をクリックします。

   

   [モダン アンティーク] と [陰影起伏図 (World Hillshade)] という 2 つのレイヤーが表示されます。

6. [レイヤーの追加] をクリックします。

   

7. [レイヤーの追加] ウィンドウの上部で、[マイ コンテンツ] をクリックして [Living Atlas] を選択します。
8. 検索バーに「Imagery」と入力し、Enter キーを押します。
9. 検索結果の [World Imagery] カードで、[レイヤーをベースマップに追加] ボタンをクリックします。

   

   マップが画像で更新されます。 ただし、ラベルがありません。 ラベルを別のレイヤーとして追加します。

10. 「Hybrid Reference Layer」を検索します。 Esri が所有する [ハイブリッド参照レイヤー] タイル レイヤーが見つかるまで検索結果をスクロールして、[レイヤーをベースマップに追加] ボタンをクリックします。

    

11. [レイヤーの追加] ウィンドウの上部にある戻るボタンをクリックします。

    これで、[ベースマップ] ウィンドウに 4 つのレイヤーが表示されるようになりました。

    

12. [ハイブリッド参照レイヤー] をクリックします。

    レイヤーの [プロパティ] ウィンドウが開きます。 レイヤーの表示範囲を調整して、特定の縮尺のみでこのレイヤーが表示されるようにします。

13. [プロパティ] ウィンドウの下部にある [表示範囲] で、[世界] をクリックして [都市 (複数)] に変更します。

    

    スライダーが更新され、マップが [都市 (複数)] の縮尺を超えて拡大された場合にのみ、このレイヤーが表示されることを示します。

    

14. [ベースマップ] ウィンドウで、[World Imagery] をクリックします。 [プロパティ] ウィンドウの [表示範囲] で、[世界] をクリックして [都市 (複数)] に変更します。

    [World Imagery] レイヤーと [ハイブリッド参照] レイヤーは、同じ表示範囲を持つ必要があります。

    画像ベースマップがマップに表示されなくなります。 [ベースマップ] ウィンドウで、上の 2 つのレイヤーがグレー表示され、それらのレイヤーが現在表示されていないことを示します。 次に、他の 2 つのレイヤーを調整して、縮小したときにのみそれらのレイヤーが表示されるようにします。

15. [モダン アンティーク] レイヤーをクリックします。 [表示範囲] で、[部屋] をクリックして [都市 (複数)] に変更します。

    

16. [陰影起伏図 (World Hillshade)] レイヤーをクリックします。 [表示範囲] で、[部屋] をクリックして [都市 (複数)] に変更します。

    [モダン アンティーク] レイヤーと [陰影起伏図 (World Hillshade)] レイヤーは、同じ表示範囲を持つ必要があります。

    次に、ベースマップに設定した表示範囲が適切に機能するかどうかテストします。

17. マップで、いずれかの都市を拡大します。

    その都市に近づくと、ベースマップが更新されて画像が表示されるはずです。

    

18. アフリカ全土が表示されるまで縮小します。 この大陸をマップの中央に配置します。

    [モダン アンティーク] ベースマップが表示されるはずです。

19. [コンテンツ] ウィンドウで、[保存して開く] をクリックし、[保存] をクリックします。

    

20. [Web マップ] ウィンドウで、[このマップを保存] をクリックします。

ダッシュボードの作成

次に、Web アプリの内部でマップをパッケージ化します。Web アプリは、マップを共有するためのシンプルなインターフェイスを提供します。 Web アプリでは、マップのオプションを制御および簡素化することができます。 生徒がマップとリストで同時に都市を調査できるアプリを作成します。

1. [コンテンツ] ツールバーで、[その他] → [アプリの作成] の順にクリックします。

   

   複数のオプションが表示されます。 これらは Web アプリを作成するための異なる方法で、それぞれが別のフォームに合うように調整されています。 最適な方法を選択するには、アプリがどのように見えてほしいか、どのように動作してほしいかを最初にイメージする必要があります。 その後、そのビジョンに最適なテンプレートを選択できます。

   

   このアプリでは、生徒が各都市を次々にクリックし、その属性情報を表示して、マップ上でその場所を調査できるように、すべての都市のリストを提供したいと思います。 ArcGIS StoryMaps と ArcGIS Instant Apps を少し試してみた後、ArcGIS Dashboards が希望に近い操作性を提供することがわかりました。

2. [Dashboards] をクリックします。
3. [新しいダッシュボードの作成] ウィンドウで、[タイトル] に「Explore ancient cities in Africa」と入力し、続けて自分のイニシャルを入力します。

   [タグ] と [サマリー] は、Web マップから値を取得してすでに入力されているはずです。

4. [ダッシュボードの作成] をクリックします。

   マップがスペース全体を埋めた状態で、新しいダッシュボードが表示されます。 このスペースにさらにいくつかのエレメントを追加しますが、まずマップを構成します。

5. 一連のボタンが表示されるまで、マップの左上隅をポイントします。 [構成] ボタンをクリックします。

   

6. [マップ] ウィンドウの [設定] タブで、[ポップアップ] をオフにします。

   アプリの他の場所でデータの属性を表示するため、ポップアップを含めると冗長になります。

   ほとんどの場合、マップはさまざまな都市を拡大表示します。 生徒がアフリカ全土を表示できる縮尺に簡単に戻ることができるよう、デフォルトの範囲のボタンが必要です。

7. [デフォルトの範囲およびブックマーク] をオンにします。

   マップを簡単にナビゲートできるように、さらにいくつかのコントロールを追加します。

8. [検索] および [拡大/縮小] をオンにします。

   

9. [完了] をクリックします。

   次に、各都市の属性を表示する詳細エレメントを追加します。

10. ダッシュボード ツールバーで [表示] をクリックします。

    ヒント:

    ダッシュボード ツールバーの下部の [展開] または [折りたたみ] をクリックすると、ツールバーを展開または折りたたむことができます。

    

    詳細エレメントを作成するには、作成元のレイヤーを選択する必要があります。 ダッシュボード内の唯一のレイヤーである古代都市のレイヤーを選択します。

11. [表示] パネルで [エレメントの追加] をクリックし、[詳細] をクリックします。

    

12. [レイヤーの選択] ウィンドウで、[Africa_Geocoded] をクリックします。

    詳細エレメントのプレビューとオプションが表示されます。 ほとんどの生徒が、デスクトップ コンピューターではなくモバイル デバイスでこのアプリを表示すると思われます。そこで、スペースを節約する方法を探します。

13. [詳細] タブをクリックして、[タイトル] をオフにします。

    [タイトル] は [Name] フィールドと同じであるため、必要ありません。

    

14. [完了] をクリックします。

    詳細エレメントがマップの横のダッシュボード プレビューに表示され、ダッシュボードのスペースの半分を占めます。 後で、すべてのエレメントを並べ替えます。

    

対話型リストの構成

次に、すべての都市を一覧表示するリスト エレメントを追加します。 また、生徒がリストをナビゲーション ツールとして使用できるように、アクションを使用して、リストをダッシュボードの残りの部分に接続します。

1. [表示] パネルで [エレメントの追加] ボタンをクリックし、[リスト] をクリックします。
2. [レイヤーの選択] ウィンドウで、[Africa_Geocoded] をクリックします。

   リストのプレビューとオプションが表示されます。 データセットには 37 の都市があるため、それらすべての都市が確実にリストに含まれるようにします。

3. [データ オプション] ウィンドウの [フィーチャの表示最大数] で、「37」と入力します。

   

   次に、リスト内の各都市名の横に表示されるポイント シンボルを削除します。 これによってスペースが節約されます。これは、小さな画面では重要です。

4. [リスト] タブをクリックします。 [ライン アイテム アイコン] で、[なし] を選択します。

   

   ポイント シンボルがリストに表示されなくなります。

   最後に、リストをマップ エレメントと詳細エレメントにリンクします。そうすることで、リスト上で都市をクリックすると、ダッシュボードの残りの部分が反応します。

5. [アクション] タブをクリックします。 [選択の変更時] で [フィルター] を展開します。

   

   リスト エレメントで選択が行われるたびに、詳細エレメントをフィルタリングします。

6. [フィルター] で [詳細 (1)] をオンにします。

   

   次に、マップもリスト内の選択に反応するように、さらにアクションを追加します。

7. [画面移動] を展開し、[Ancient cities in Africa] Web マップをオンにします。 [ズーム] を展開し、[Ancient cities in Africa] Web マップをオンにします。

   

8. [完了] をクリックします。
9. ダッシュボードのリスト エレメントで、リスト内の 1 つの都市をクリックします。

   詳細エレメントにその都市の情報が入力され、マップがその都市にズームして、画像ベースマップが表示されます。

   

ダッシュボードの再編成

現在、リストがダッシュボードのスペースの多くを占めています。 マップが最大のエレメントとなるようにしたいと思います。 また、レイアウトがデスクトップとモバイルの両方の画面で機能することを確認したいと思います。

1. ボタンが表示されるまで、リスト エレメントの上隅をポイントします。 [アイテムのドラッグ] ボタンをクリックして押したままにします。

   

2. ドッキング位置が表示されるまで、リスト エレメントをマップ エレメント上にドラッグします。 リストを下部のドッキング位置にドロップして、行としてドッキングします。

   

3. 詳細エレメントをドラッグして、リスト エレメントの右側に 1 列としてドッキングします。

   

   これで、ダッシュボードの上部にマップ、下部にリスト エレメントと詳細エレメントが配置されました。

4. マップとその他のエレメントの間の区切り線をポイントし、約 60 パーセントに達するまで下にドラッグします。

   

5. リスト エレメントと詳細エレメントの間の区切り線を、約 30 パーセントに達するまでドラッグします。

   

   詳細エレメントの方が大きなスペースを持つ必要があります。 次に、このレイアウトが小さな画面で機能するかどうかテストします。

6. Ctrl + Shift + I キーを押して、ブラウザーの調査ウィンドウを開きます。 Ctrl + Shift + M キーを押して、レスポンシブ デザイン ビューに切り替えます。

   注意:

   これらのショートカットは、Chrome、Firefox、および Microsoft Edge で機能します。 Safari を使用している場合は、Option + Command + R キーを押します。 Internet Explorer を使用している場合は、F12 キーを押してから、Ctrl + Shift + M キーを押します。

   ダッシュボードのビューが縮小して、モバイル デバイスの画面を模倣します。

   

7. ダッシュボードの小さなビューで、画面移動、ズーム、スクロール、クリックを試します。

   ダッシュボードのこのビューには、ダッシュボード編集コントロールとともに上部にリボンが含まれています。 これらはダッシュボードの最終バージョンには表示されないため、もう少し縦のスペースが確保されます。

   これは、デスクトップとモバイルの両方の画面で読みやすく使いやすいレイアウトです。

ダッシュボードを説明するテキストの追加

ダッシュボードを完成させるために、マップに関する情報と、生徒の探索を案内するいくつかの質問を含めます。

1. 調査ウィンドウを閉じて、ダッシュボードの標準ビューに戻ります。
2. [表示] パネルで [エレメントの追加] ボタンをクリックし、[リッチ テキスト] をクリックします。
3. テキスト エディターで、次のテキストを貼り付けます。

   Ancient cities in Africa (アフリカの古代都市)

   This map shows some of the oldest continuously inhabited cities in Africa. (このマップには、継続的に居住されているアフリカ最古のいくつかの都市が表示されます。) Click the city names in the list to visit each of these ancient cities on a modern map. (現代のマップでこれらの各古代都市にアクセスするには、リストで都市名をクリックします。)

   As you explore the map imagery, can you find any evidence that points to an ancient past; for example, old neighborhoods or buildings? (マップ画像を探索しながら、古い地域や建物など、古代を示唆する証拠を見つけることができますか？) If so, in which cities? (もしそうなら、どの都市の中ですか？)

   This map only shows places that are still inhabited today. (このマップには、現在でも人が居住している場所のみが表示されます。) Some places that were important cities in the past are only small villages now. (過去に重要な都市であった一部の場所は、現在では小さな村にすぎません。) Can you find any on this map? (このマップでそのうちのどれかを見つけることができますか？)

   Some other important cities from the past are no longer inhabited, like Great Zimbabwe. (他にも、過去の重要な都市の中には、Great Zimbabwe のようにもう人が居住していないものもあります。) Can you find the ruins of Great Zimbabwe on this map? (このマップで Great Zimbabwe の遺跡を見つけることができますか？)

   ヒント:

   元の書式設定を含めずにテキストを貼り付けるには、Ctrl + Shift + V キーを押します。 Safari を使用している場合は、Command + Shift + V キーを押します。

4. テキストの最初の行をハイライト表示して、[太字] ボタンをクリックします。

   

5. 「Great Zimbabwe」への最初の言及をハイライト表示して、[リンク] ボタンをクリックします。
6. [リンク] ウィンドウの [URL] で、「https://en.wikipedia.org/wiki/Great_Zimbabwe」を貼り付けます。 [OK] をクリックします。
7. 「on a modern map」の後にあるすべてのテキストをハイライト表示します。 [番号付きリストの挿入/削除] ボタンをクリックします。

   

8. [完了] をクリックします。
9. リッチ テキスト エレメントをマップの中央にドラッグして、2 つのアイテムを重ねます。

   リッチ テキスト エレメントがマップの背後で非表示になりますが、マップの下のタブでアクセスできます。

10. マップの下の [リッチ テキスト] タブをクリックします。

    

11. リストで都市を選択および選択解除して、ダッシュボードをテストします。

    テキストがマップの代わりに表示されます。 テキストにスペースが多すぎるように思えるかもしれませんが、ダッシュボードがモバイル デバイスで表示される場合、この余分なスペースが必要となります。

    

12. [リッチ テキスト] タブで、編集ボタンをクリックします。
13. 「About the map」と入力して Enter キーを押し、タブの名前を変更します。
14. [マップ] タブをクリックします。 ダッシュボードを探索し、期待通りに機能することを確認します。

    

ダッシュボードの保存と共有

ダッシュボードを生徒と共有する準備ができました。 共有レベルとメタデータを更新し、共有するための適切な URL を生徒に送信します。

1. ダッシュボード ツールバーで [保存] をクリックし、[保存] をクリックします。
2. 画面上部の、ダッシュボード タイトルの横にあるメニュー ボタンをクリックし、[ダッシュボード アイテムの詳細] をクリックします。

   

   ダッシュボードのアイテム ページが表示されます。 共有する前に、アイテムにメタデータを追加します。

3. [アイテムの簡単なサマリーを追加] の横で [編集] ボタンをクリックし、「Some of the oldest continuously inhabited cities in Africa」と入力します。 [保存] をクリックします。
4. [説明] も編集します。 「Data source: https://en.wikipedia.org/wiki/List_of_oldest_continuously_inhabited_cities」と入力するか、コピーして貼り付けます。

   次に、ダッシュボードをパブリックに共有して、生徒が ArcGIS Online にサイン インしていなくても、確実にダッシュボードを表示できるようにします。

5. [共有] をクリックします。 [共有] ウィンドウで、[すべての人に公開 (パブリック)] をクリックして、[保存] をクリックします。

   

6. アイテム詳細ページの下部にある [URL] で、[コピー] ボタンをクリックします。

   

   これが生徒と共有できる URL です。

   ヒント:

   生徒がダッシュボードにアクセスする前にサイン インするよう求められる場合は、ダッシュボードとマップの両方が [すべての人に公開 (パブリック)] で共有されていることを確認してください。

7. [ダッシュボードの表示] をクリックし、完成したアプリを新しいタブに表示します。

Web マップと静的マップは利点が異なり、問題点も異なります。 マップがどちらかのフォームで開始しても、そのフォームに制限されません。 このチュートリアルでは、静的マップを対話型の Web アプリに変換し、複数のベースマップ、縮尺表示コントロール、対話型リスト、属性ビューなど、そのフォームのいくつかの利点を利用しました。 ArcGIS Pro から ArcGIS Online にマップを共有し、Web マップをダッシュボード アプリに変換し、デスクトップ デバイスとモバイル デバイスの両方で機能できるダッシュボード レイアウトを構成する方法を学習しました。

Web アプリのレイアウトを作成する方法の詳細については、チュートリアル「ArcGIS Experience Builder で主題図のレイアウトを設計する」をお試しください。

カートグラフィのその他のチュートリアルについては、「マップの作成方法」ページをご参照ください。