はじめての ArcGIS Hub Premium

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

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

最終結果の表示​

要件

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

サイトの構築

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

イニシアティブの作成

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

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

   注意:

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

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

   

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

3. [イニシアティブ] で [新規作成] をクリックします。

   

4. [タイトル] に「William Land Park Improvement Initiative」と入力します。
5. [イニシアティブの作成] をクリックします。

   イニシアティブを作成すると、ArcGIS Online で 1 つのサイト アイテムと 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 Initiative</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 (Learn ArcGIS)」と入力し、Enter キーを押します。
8. 結果のリストで、[Adopt a Park Form (Learn ArcGIS)] のボックスをオンにします。

   

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

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

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

    

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

11. [リンク名] で、[Learn ArcGIS] テキストを削除して、リンク名が [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 Initiative Template. All photos used on this site are from Unsplash, unDraw, and Pexels.」

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

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

3. 行に [スペーサー] カードを追加します。
4. [スペーサー] カードの下に、[調査] カードを追加します。

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

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

   

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

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

   

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

   

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

   

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

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

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

1. [調査] カードの右側に [マップ] カードを追加します。

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

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

   

   イニシアティブで埋め込みマップが構成されます。

   

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

行動喚起の作成

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

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 Initiative] をクリックし、[コミュニティ] を選択します。

    

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

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

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

使用許諾

• このチュートリアルで使用した画像は、Unsplash (ライセンス)、unDraw (ライセンス)、および Pexels (ライセンス) から取得しました。
• Community Feedback for William Land Park Web マップは Esri により作成されました。