はじめての ArcGIS Hub Premium

最近、サクラメントの Youth, Parks, and Community Enrichment 課は、ウィリアム ランド パークを改修するための助成金を確保しました。 サクラメントのコミュニティー交流コーディネーターとして、資金をどのように配分するかについて、十分な情報を得た上で決定できるよう、コミュニティーが改善してほしい内容について知る必要が必要があります。 モバイルに最適化されたアクセスしやすい Web サイトを作成して一般ユーザーからのフィードバックを生成できるように、ArcGIS Hub Premium を使用してサイトを開始することにしました。

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

最終結果の表示​

要件

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

サイトの構築

ArcGIS Hub では、サイトを構築し、そのサイトにマップ、アプリ、調査などの他のエレメントを埋め込みます。 複数の異なるコンポーネントを組み合わせて、公園改善を中心とした魅力的な Web サイトを作成します。

サイトの作成

まず、編集と入力を行えるサイトを作成します。 ArcGIS Hub には、さまざまな Web サイト コンポーネントに使用できるドラッグ アンド ドロップ機能が含まれており、HTML コードを編集してさらにカスタマイズできます。

1. 「ArcGIS の組織アカウント」にサイン インします。

   注意:

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

2. リボンのアプリ ランチャーをクリックし [Hub] を選択します。

   

   ArcGIS Hub ホーム ページから、複数の主要なワークフロー (サイトの作成と管理、コンテンツの追加、リンクされたコミュニティー組織へのアクセスによるコミュニティー アカウントおよびコンテンツの管理) にアクセスできます。 [編集] ナビゲーション バーをクリックして [概要] を選択することで、いつでも概要に戻ることができます。

3. [サイト] で [新規作成] をクリックします。

   

4. [サイトの名前を入力] で「William Land Park Improvement Plan」と入力します。
5. [サイトの作成] をクリックします。

   サイト アイテムを作成すると、ArcGIS Online で 3 つのグループが作成されます。 これらのグループを使用して、サイトのコンテンツ (コンテンツ グループ)、チーム メンバー (コア チーム グループ)、およびサイトに関する最新情報を受信するためにサイン アップしたユーザー (フォロワー グループ) を管理できます。 チームのメンバーがサイトを更新できるよう、サイトはコア チーム グループに自動的に共有されます。

   サイトが作成されると、[はじめに] ウィンドウが開いて ArcGIS Hub に関する情報が表示されることがあります。

6. 必要に応じて、[はじめに] ウィンドウを閉じます。

タイトル セクションの追加

サイトの利用者には、市の公園を頻繁に訪れるユーザーが含まれている可能性があるため、明確かつユーザーにとって使いやすい方法でコンテンツを共有することが目標です。 この目標を実現するために、ハイコントラストのタイトルと背景画像を使用したサイトを導入します。 まず、サイトの設計に使用する画像をダウンロードします。

1. [Images] 圧縮フォルダーをダウンロードします。
2. ダウンロードしたフォルダーを、覚えやすい場所 ([ドキュメント] フォルダーなど) に展開します。

   次に、このフォルダー内の画像の 1 つをアップロードして、サイトの上部のバナーとして使用します。 ArcGIS Hub では、コンテンツが行ごとに整理されます。 バナーは、サイトの最初の行です。

3. ArcGIS Hub で、最初の行 (背景画像とサイトのタイトルを含むバナー) をポイントします。 バナーの横に表示されるツールバーで、編集ボタンをクリックします。

   

   [行] サイド パネルが表示されます。 このパネルでは、この行専用の設計オプションを構成します。

4. [行] サイド パネルの [背景画像] で、[アップロード] をクリックします。 [画像の参照] をクリックします。

   

5. 展開した [Images] フォルダーを参照します。 [intro_image1] をダブルクリックします。

   画像が行の背景画像としてアップロードされます。 また、行の透過的な背景色を変更して、画像を補完するフィルターを提供します。

6. [背景色] に「#6a9ab0」と入力します。

   

   注意:

   デフォルトでは、この行の背景の画像透過率は 30 パーセントです。 [行] サイド パネルの下部にある [画像透過率] パラメーターでこの値を変更できます。

   次に、タイトル テキストを編集します。

7. バナー行でタイトル テキストをポイントします。 テキストの上にある [テキスト] ツールバーで、編集ボタンをクリックします。

   

   テキストが編集可能になります。

8. テキストをすべて削除します。

   テキストを編集する場合は、テキスト書式設定ツールを使用するか、カスタム HTML および CSS コードを挿入できます。 ここでは、後者を実行します。

9. 行の下部にある [HTML で編集] ボタンをクリックします。

   

   HTML エディターが表示されます。 タイトルとバナーを大きくする HTML および CSS を追加して、ユーザーにすぐに印象を与えることができるようにします。

10. [HTML] ウィンドウで、既存のコードをすべて削除し、次のコードを貼り付けます。
    <div style="text-align: center;">
    </div><div style="text-align: center;"><span style="background-color: initial; color: currentcolor;"><br></span></div><div style="text-align: center;"><span style="background-color: initial; color: currentcolor;"><br></span></div><div style="text-align: center;"><span style="background-color: initial; color: currentcolor;"><br></span></div><div style="text-align: center;"><span style="background-color: initial; color: currentcolor;"><br></span></div><div style="text-align: center;"><span style="background-color: initial; color: currentcolor;"><br></span></div><div style="text-align: center;"><br></div><div style="text-align: center;"><br></div><div style="text-align: center;"><br></div><div style="text-align: center;"><span style="background-color: initial; color: currentcolor;"><br></span></div><div style="text-align: center;"><span style="background-color: initial; color: currentcolor; font-size: 64px;"><strong>William Land Park Improvement Plan</strong></span></div>
    <h1 style="text-align: center; "><br></h1><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div>

11. [適用] をクリックします。 テキストの上にある [テキスト] ツールバーで、編集ボタンをクリックし、編集内容を保存します。

    新しいサイトには、ページ レイアウトを構成する方法について複数の例が表示されます。 カスタマイズしたサイトを構築するため、使用されないすべてのテンプレート情報を削除します。 ここでは、タイトルの行と連絡先の行の間の 10 行分のコンテンツを削除します。

12. 下にスクロールして、[これまでの進捗] 行をポイントします。 行の横にあるツールバーで、削除ボタンをクリックします。

    

    ウィンドウが表示され、行を削除するか確認するよう求められます。

13. [レイアウトから行を削除] ウィンドウで、[削除] をクリックします。
14. 次の行を削除します。
    • 既存のアプリケーションをカスタム サイトと組み合わせて、独自のイニシアティブを作成します
    • 今すぐコミュニティーにご参加ください。
    • 当社の取り組み
    • ストーリーを伝えるだけでなく見せる
    • 活動中の都市の表示
    • 今後のイベントのリスト
    • サイン アップしてこのサイトをフォロー
15. リボンの [保存] をクリックします。

    

    変更内容が保存されます。

サイトの目的の定義

次に、情報を追加して、説明文と追加の画像という形でサイトの目的を定義します。 新しい行を作成し、テキスト カードを追加して、一般ユーザーが公園の採用に参加できる方法についての情報を編集して追加します。

1. 必要に応じて、サイド パネルで [カスタマイズ] をクリックします。

   

2. [カスタマイズ] サイド パネルで [レイアウト] をクリックします。

   

3. [レイアウト] サイド パネルで、[行] カードをタイトル行の下にドラッグし、[下に挿入] ドロップ領域にドロップします。

   

   空の行が作成されます。 行にテキスト カードをドラッグします。

4. [行] サイド パネルで、[レイアウト] をクリックします。

   

   [カスタマイズ] パネルに戻ります。

5. [テキスト] カードを空の行にドラッグし、[行に追加] ドロップ領域にドロップします。

   

   テキスト エディターが表示されます。

6. テキスト エディターで、次のテキストをコピーして貼り付けます。「We want your insight on how we can make William Land Park a cleaner, more beautiful space.」
7. テキストをハイライト表示します。 [スタイル] ボタンをクリックし、[ヘッダー 2] を選択します。

   

8. すべてのテキストを選択解除します。
9. 文の前後に空白を 1 文字ずつ入力して Enter キーを押します。
10. [カスタマイズ] サイド パネルで、[画像] カードをテキスト カードの左側にドラッグし、[左に挿入] ドロップ領域にドロップします。

    [画像] サイド パネルが表示されます。 [Images] フォルダー内の画像の 1 つをアップロードします。

11. [画像] サイド パネルの [アップロード] をクリックし、[画像の参照] をクリックします。 [park_image2] をアップロードします。

    画像が行に追加されます。 画像のサイズを調整して、テキストとの位置関係がよくなるようにします。

12. 画像カードの右側をポイントし、矢印をクリックします。

    

    画像のサイズが縮小されます。 また、画像に代替テキストを追加して、アクセシビリティーを向上させます。

13. [画像] サイド パネルで、[オプション] を展開します。 [画像の代替テキスト] に「People enjoying their park」と入力します。

    

14. リボンの [保存] をクリックします。

ブランディングとグローバル ナビゲーションの構成

組織のロゴを追加し、公園に関連するテーマでサイトをブランディングして、公園の外観を反映します。 次に、サイトの上部にあるグローバル ナビゲーション バーを構成します。 このバーを使用すると、ArcGIS Hub コミュニティーのユーザーは、サイン イン、ユーザー プロフィールと通知の管理、ArcGIS Hub の他の部分への移動を行うことができます。 グローバル ナビゲーション機能は、新規サイトのすべてで自動的に有効になります。

注意:

詳細については、「グローバル ナビゲーションとメニュー リンクの構成」をご参照ください。

1. [画像] サイド パネルで、[レイアウト] をクリックし、[カスタマイズ] をクリックします。

   [カスタマイズ] サイド パネルに戻ります。

2. [カスタマイズ] サイド パネルで [ヘッダー] をクリックします。

   

3. [ヘッダー] サイド パネルで、[名前] をオフにします。

   

4. [ロゴ] で、[アップロード] をクリックし、[画像の参照] をクリックします。 展開した [Images] フォルダーを参照し、[cpp-logo] 画像をアップロードします。

   サイトの上部、最初の行の上にロゴが追加されます。 次に、ユーザーが公園の状態に関するフィードバックを提供し、公園の管理を支援するかどうかを選択できる事前構成済みの調査を追加します。

5. [メニュー] を展開します。 [リンクの追加] をクリックし、[既存のコンテンツ] を選択します。

   

6. [コンテンツの追加] ウィンドウで、[取得元] の下の [世界 (パブリック)] をクリックします。 [コレクション] の下の [フィードバック] をクリックします。

   

7. 検索バーに「Adopt a Park Form (Esri Tutorials)」と入力し、Enter を押します。
8. 結果のリストで、[Adopt a Park Form (Esri Tutorials)] のチェックボックスをオンにします。

   

9. [保存] をクリックします。

   調査がサイド パネルに追加されます。

10. サイド パネルの [Adopt a Park Form (Esri Tutorials)] で、設定ボタンをポイントして [編集] を選択します。

    

    [リンクの編集] ウィンドウが表示されます。

11. [リンク名] で、[Esri Tutorials] テキストを削除して、リンク名が [Adopt a Park Form] のみになるようにします。 [保存] をクリックします。

    オープン スペースに関する詳細情報を示すサイトへのリンクも追加します。

12. サイド パネルで、[リンクの追加] をクリックして [リンク] を選択します。
13. [リンク名] に「What is Open Space?」と入力します。 [リンク先] に、URL (「https://www.epa.gov/G3/green-streets-and-community-open-space」) をコピーして貼り付けます。
14. [保存] をクリックします。

    追加した両方のリンクが、最初の行の上にあるヘッダーのロゴの横に表示されます。

    

15. リボンの [保存] をクリックします。

フッターへの属性の追加

フッターには、連絡先、サービスの利用条件、行動喚起、ページ上の画像の著作権などの重要な情報を表示することができます。 最初にテンプレート フッターを削除してから、オリジナルでないコンテンツの著作権と、このサイトが学習のためにのみ作成されたことを示す、カスタムのシンプルなフッターを設計します。

1. サイトの下部へスクロールします。
2. サイド パネルで、[カスタマイズ] をクリックして、[カスタマイズ] サイド パネルに戻ります。 [フッター] をクリックします。

   

   [フッター] サイド パネルが表示されます。

3. サイド パネルで [なし] をクリックします。

   

   デフォルトのフッターが削除されます。 次に、[問い合わせ] 行を編集して、使用許諾を含めます。

4. [問い合わせ] 行をポイントします。 行の横にあるツールバーで、編集ボタンをクリックします。

   

5. [行] サイド パネルで、[背景色] に「#32444d」と入力します。
6. [問い合わせ] 行で、テキストをクリックして編集します。 既存のテキスト ([行動の喚起] ボタンを含む) を削除して、「Acknowledgements」と入力します。

   ヒント:

   書式設定なしでテキストを貼り付けるには、Ctrl + Shift + V キーを押して貼り付けます。

7. Enter キーを押します。 次のテキストをコピーして貼り付けます。

   「This is not an official website of Sacramento and is used for demonstration purposes only.

   Sacramento Parks data was provided by Sacramento County Open Data.

   © Custom Site Template. All photos used on this site are from Unsplash and Esri.」

8. 各テキスト行の間の改行をすべて削除します。
9. すべてのテキストをハイライト表示します。 [段落] ボタンをクリックし、[中央揃え] を選択します。

   

10. [使用許諾] をハイライト表示します。 [スタイル] ボタンをクリックし、[ヘッダー 1] を選択します。

    これで [使用許諾] セクションが完了しました。

    

11. リボンの [保存] をクリックします。

指示の追加

イニシアティブの目標と、コミュニティーがどのように役立つかを明確に伝えることは、利用者の注目を集めるために重要です。 次に、調査に関する説明を入力し、リアルタイムに結果を表示する Web マップを使用して、利用者の回答がどのように影響するかを示します。 利用者が洞察を共有するために何をする必要があるか、および利用者の回答によって Web マップがどのように更新されるかを説明します。

1. 導入行とフッター行の間に、別の [行] カードを追加します。

   

   [行] サイド パネルが表示されます。

2. [テキストの色] に「#ffffff」と入力します。 [背景色] に「#6a9ab0」と入力します。
3. [レイアウト] をクリックし、[カスタマイズ] サイド パネルに戻ります。 [テキスト] カードを空の行に追加します。
4. テキスト カードに次のテキストを入力します。「Please take the survey below to add your insight to the map. Your responses will help us to identify what and where improvements can be made.」
5. Enter キーを押して、テキストの前後に行を追加します。
6. すべてのテキストをハイライト表示します。 [スタイル] ボタンをクリックし、[ヘッダー 2] を選択します。

   

7. テキストの右に [画像] カードを追加します。

   [画像] サイド パネルが表示されます。

8. [アップロード] をクリックし、[画像の参照] をクリックします。 [map_image4] をアップロードします。
9. 画像カードのサイズを縮小して、画像の高さがテキストの段落とほぼ同じ高さになるようにします。

   

10. リボンの [保存] をクリックします。

サイトに手順を追加したことで、ユーザーはイニシアティブの目的と、マップや調査の操作方法を理解する可能性が高くなります。

コミュニティーからのフィードバックの収集

次に、新しい行を作成し、事前構成済みのマップと調査を設定します。 この調査は、ボランティア活動を行ったり、公園に関するフィードバックを提供したりするユーザーに関する情報を収集することを目的としています。 調査結果は Web マップに直接フィードされ、Web マップは即座に更新されて回答を表示します。

調査の追加

調査では、発生している事象とその場所についてユーザーに質問します。

1. これまで学習したことを活かして、手順行の下に [行] カードを追加します。
2. [行] サイド パネルで、[背景色] に「#f5fcfc」と入力します。

   スペーサー カードを追加して、行内に追加のスペースを作成します。

3. [行] サイド パネルで、[レイアウト] をクリックします。
4. 行に [スペーサー] カードを追加します。
5. [スペーサー] サイド パネルで、[レイアウト] をクリックします。
6. [スペーサー] カードの下に、[調査] カードを追加します。

   [調査] サイド パネルが表示されます。

7. [調査の選択] をクリックします。

   

   [調査の選択] ウィンドウが表示されます。 自分または組織内の他のユーザーが作成した調査を選択できます。

8. [取得元] で、[世界 (パブリック)] を選択します。
9. 「William Land Parks Improvements Feedback (Esri Tutorials)」を検索します。 検索結果のリストで、ボタンをクリックして [William Land Parks Improvements Feedback (Esri Tutorials)] を選択します。

   

10. [保存] をクリックします。
11. [調査] サイド パネルで [埋め込み] をクリックします。

    

    調査はサイトに埋め込まれ、ユーザーは別のウィンドウで開く必要はありません。

    

12. [調査] サイド パネルの [オプション] で、[高さ] に「945」と入力します。
13. リボンの [保存] をクリックします。

フィードバック Web マップの追加

調査の送信内容をリアルタイムで表示するように事前構成した Web マップを、調査の横に追加します。

1. [調査] サイド パネルで、[レイアウト] をクリックします。
2. [調査] カードの右側に [マップ] カードを追加します。

   [マップ] サイド パネルが表示されます。

3. [マップの選択] をクリックします。
4. [マップの選択] ウィンドウの [取得元] で、[世界 (パブリック)] を選択します。 [Community Feedback for William Land Park (Esri Tutorials)] を検索して選択します。
5. [保存] をクリックします。
6. [マップ] サイド パネルの [オプション] で、[タイトル] を「Community Feedback for William Land Park」に変更します。
7. [高さ (px)] に「900」と入力します。
8. [マップの凡例の有効化] をオンにします。

   

   サイトで埋め込みマップが構成されます。

   

9. [調査] カードと [マップ] カードの下に、[スペーサー] カードを追加します。
10. リボンの [保存] をクリックします。

行動喚起の作成

サイトの末尾の行動喚起で、一般ユーザーにコミュニティー アカウントにサイン アップし、作業に関連する電子メールを受信するよう促します。 行動喚起に従ったコミュニティー メンバーがサイトのフォロワー グループに追加され、追加されたメンバーに電子メールを送信できるようになります。

1. 調査行とフッター行の間に [行] カードを追加します。
2. [行] サイド パネルで、[テキストの色] に「#32444d」と入力します。
3. [テキスト] カードを行に追加します。 [テキスト] カードに、以下のテキストを入力します。

   「Follow us!

   We'll reach out about once a month to share the following:」

4. [ヘッダー 1] スタイルを使用して [Follow us!] をスタイル設定します。 [We'll reach out about once a month to share the following:] を [ヘッダー 2] スタイルを使用してスタイル設定します。

   

5. 2 行目の下に、改行を追加して、以下のテキストを入力します。

   「Project updates

   New ways to get involved

   今後のイベント

   More feedback and opportunities」

6. 前のステップで入力したテキストをハイライト表示し、[順不同リスト] ボタンをクリックします。

   

7. [ヘッダー 3] スタイルを使用してリストをスタイル設定します。
8. [テキスト] カードの右側に [画像] カードを追加して、[mailbox_image5] をアップロードします。
9. 画像のサイズを 2 回縮小します。

   次に、ユーザーが作業をフォローするためにクリックできるボタンを追加します。

10. [テキスト] カードの下に、[フォロー] カードを追加します。

    サイトをフォローまたはフォロー解除するためのボタンが追加されます。 ボタンには説明テキストも含まれています。 サイトのフォローに関する情報を含むテキスト カードをすでに追加したため、ボタンに付属するテキストを削除できます。

11. [フォロー] サイド パネルで、[行動喚起] フィールドのテキストを削除します。

    

    テキストが削除されます。 次に、ボタンの色を変更します。

12. [レイアウト] をクリックし、[カスタマイズ] をクリックして、[カスタマイズ] サイド パネルに戻ります。
13. [テーマ] をクリックします。 [本文のリンクの色] に「#6a9ab0」と入力します。
14. リボンの [保存] をクリックします。

    サイトが完了しました。 次に、他のユーザーが表示できるようにイニシアティブを共有します。

15. リボンの [アクセス権のあるグループはこの Hub Site Application を表示できます] ボタンをクリックします。

    

16. [共有] サイド パネルの [共有レベル] で、[パブリック] を選択します。

    これで、サイトがパブリックで利用できるようになりました。 次に、サイトを公開します。

17. リボンの [保存] 矢印をポイントし、[ドラフトの公開] をクリックします。

    

    サイトが公開されます。 これで、公開したサイトを表示できるようになりました。

18. リボンの [保存] 矢印をポイントし、[公開済みの表示] をクリックします。

    

    公開済みバージョンのサイトに移動します。このサイトは、すべてのユーザーが表示できます。 サイトを表示することで、サイトがユーザーにどのように表示されるかを確認できます。 調査とマップの機能を確認することもできます。

19. [編集] ボタンをクリックして、[編集] モードに切り替えます。

    

    一般ユーザーがサイトをフォローし始めたら、[コミュニティー] タブで管理できます。

20. リボンの [William Land Park Improvement Plan] をクリックし、[コミュニティー] を選択します。

    

    [コミュニティー] ページが開きます。 このページでは、サイトのフォロワーのリストを表示したり、すべてのフォロワーを管理したり、作業の進行状況についてフォロワーに最新情報を送信したりできます。

最初のサイトが完成したら、このサイトを適切な利用者に共有します。 このサイトは、ソーシャル メディアを使用してプロモーションするサイトとして独立させることも、組織の他のサイトやページに埋め込むこともできます。

他のチュートリアルについては、チュートリアル ギャラリーをご覧ください。

使用許諾

• サイトのタイトルとともに使用した画像は iStock から取得しました。
• Community Feedback for William Land Park Web マップは Esri により作成されました。
• バナー画像は Mikolaj Niemczewski によるもので、Adobe Stock から取得しました。 Adobe Stock の画像はすべて © 2024 Adobe Stock に属しています。 All rights reserved.
• ギャラリー カード画像は Swetlana Wall によるもので、Adobe Stock から取得しました。 Adobe Stock の画像はすべて © 2024 Adobe Stock に属しています。 All rights reserved.
• World Imagery レイヤーの出典: Esri、Maxar、Earthstar Geographics、GIS ユーザー コミュニティ。
• World Topographic Map の出典: Esri、TomTom、Garmin、FAO、NOAA、USGS、OpenStreetMap の投稿者、GIS ユーザー コミュニティ
• Colored Pencil の出典: Esri、TomTom、Garmin、FAO、NOAA、USGS、OpenStreetMap の投稿者、GIS ユーザー コミュニティー
• Outline の出典: Esri、TomTom、Garmin、FAO、NOAA、USGS、OpenStreetMap の投稿者、GIS ユーザー コミュニティー