独自の hub テンプレートの作成

[OneMap] hub テンプレートは手早く操作を開始できる方法で、データを最適に整理する方法について考える際の手助けになるように設計されています。 このテンプレート (こちらで確認できます) は hub 設計のベースラインを提供するものなので、独自のスタイルや画像を追加して、組織向けにカスタマイズすることができます。 ArcGIS Hub には、ArcGIS Online アプリからアクセスします。

注意:

このチュートリアル全体を通して、「OneMap」という用語はコミュニティ GIS のブランディングのプレースホルダーとして使用します。 たとえば、Ireland GeoHive、NC OneMap、IndianaMap、HIFLD Open Data、UAE 1Map などです。

hub イニシアティブの作成

まず、[OneMap] hub テンプレートから hub イニシアティブを作成します。

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

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

  2. リボンで、ユーザー名の横のアプリ ボタンをクリックして、利用可能なアプリのリストを展開します。
  3. [Hub] ボタンをクリックします。

    アプリ リストの Hub ボタン

    [ハブの概要] ページが表示されます。 ここには、イニシアティブ、コンテンツ、コミュニティのメンバーが表示されます。 カスタマイズするイニシアチブを作成します。

  4. リボンの [新規作成] をクリックして [イニシアティブ] を選択します。

    新しいイニシアティブ オプション

    イニシアティブに名前を付けたり、テンプレートを参照したりするために使用できるいくつかのオプションが画面に表示されます。 使用するテンプレートを選択します。

    注意:

    イニシアティブは ArcGIS Hub Premium の機能です。 [イニシアティブ] オプションが見当たらない場合は、ArcGIS Hub のライセンス レベルを自身の権限とともに管理者に確認してください。

  5. [テンプレートの参照] をクリックします。

    テンプレートの参照ボタン

    使用可能なテンプレートの検索をフィルタリングして、検索結果を絞り込みます。

  6. [公開者] で、[Esri] のチェックボックスをオンにします。

    テンプレートをフィルタリングして、Esri が公開したもののみを表示します。

  7. [テンプレート] で、検索ボックス内に「onemap」と入力して、Enter キーを押します。

    [OneMap] イニシアティブが表示されます。

    OneMap イニシアティブ

  8. [テンプレートの有効化] をクリックします。

    次に、イニシアティブに名前を付けます。 ユーザーがこのサイトを見つける方法を考慮して、組織がわかるような名前を選択します。

  9. [イニシアティブの名前を入力] に、選択した名前を入力して、[検索] をクリックします。

    イニシアティブの有効化には約 1 分かかります。 この間に、ホーム ページと、世界中のデータ共有ポータルで最も使用頻度が高いものとして見つかったその他複数のページを使用して、サイトが構成されます。

    これらのページには以下が含まれます。

    • [ホーム] - インパクトを与えて誘導し、訪問者があなたの管轄区域をすばやく理解できるように手助けします。
    • [概要] - 組織のビジョン、目標、このページの目的の概要を示します。 訪問者がこのページを使用してあなたに連絡する方法も含めます。
    • [提供者] - このサイトにデータを提供している部門、機関、その他の組織をハイライトします。 提供者によって使用可能なデータをフィルタリングし、それぞれのページにリンクするようにこのページを構成できます。
    • [オープンデータ] - サイトの訪問者は、hub で管理されているすべてのデータを検索して参照できます。
    • [基本データ] - 他の人が基本データの価値を理解できるようにします。 テーマやカテゴリを割り当てることで、それが意思決定プロセスのどの部分に適合するのか慎重に検討して、データにコンテキストを与えます。 グローバルな例に基づいてこのことを実行する方法のヒントについては、「OneMap 管理者向け基本ガイド」をご覧ください。 基本データのページをコピーして、組織が特定する各データ テーマを反映させることもできます。
    • [学習] - 提供されるデータの使用方法を他のユーザーに教えます。 他のユーザーに特に伝えるべきことはありますか。 ここで GIS テクニカル ガイドにリンクすることもできます。
    • [注目のトピック] - トピックごとにデータを共有します。 組織に関連するトピックは、基本データのテーマとは異なる可能性があります。 たとえば、気候変動のトピックは、環境関連とインフラストラクチャ関連の両方のデータ テーマを含むことがあります。

    OneMap サイトを構成するときには、少し時間をかけて、それを独自のものにする方法を考えてみてください。 自分の組織を表すイメージを最初に考えてみることをお勧めします。

ホーム ページのバナー画像の検索

hub イニシアティブを作成したので、次にホーム ページのバナー画像を、組織や hub の使用目的と一致するようにカスタマイズします。 お好みの画像サイトでフリー ダウンロードの画像を検索し、hub イニシアティブで使用します。

  1. [はじめに] ウィンドウを閉じます。
  2. Web ブラウザー タブを開き、Unsplash などのお好みの画像サイトに移動します。
  3. 検索ボックスに「mapping」などの単語を入力して Enter キーを押します。
  4. 好ましい画像を選択し、それをクリックして拡大します。
  5. サイトのオプションを使用して、自分のコンピューターに画像をダウンロードします。

    注意:

    Web サイトから選択した画像、あるいは手元にある画像を使用できます。 いずれの場合も、画像を使用する権限があることを確認してください。 チュートリアルでは、世界の水彩画マップを使用します。

    このチュートリアルで Hub バナーとして使用されている画像、ユーザーによって画像は異なる

  6. ダウンロードが完了したら、ブラウザー タブの画像に戻ります。

    画像を閉じる前に、カラー パレットを使用して、画像から一部の色を取り込みます。 これらはサイトのブランディングに役立ちます。 組織には使用したい色がすでに存在している場合もあります。 選択した色がどれであれ、サイトを更新するにはその色の 16 進数のコードが必要になります。 16 進数コードは特定の色を識別する 1 つの方法です。

    この例では、ColorZilla という Chrome プラグインを使用して、選んだ画像から色を選択し、その 16 進数コードを見つけます。

  7. Google Chrome の Web ブラウザー タブを開き、Colorzilla を検索します。
  8. 最初の結果をクリックして、[Chrome および Firefox 向け ColorZilla] をクリックします [ColorZilla をインストール] をクリックして、[Chrome に追加] をクリックし、[エクステンションの追加] をクリックします。
  9. アドレス バーの横の [エクステンション] ボタンをクリックし、[ColorZilla] をクリックします。

    ColorZilla を選択

    これで、現在の Chrome ページのコンテンツや Chrome ブラウザー以外のコンテンツから色の 16 進数コードを特定するオプションを、ColorZilla のメニューから選択できるようになりました。

  10. [ブラウザーの外のカラーを選択する] を選択します。 画像にポインターを合わせ、クリックし、16 進数コードの表示を確認します。

    選んだ画像内の複数のエリアをクリックしてさまざまな色を取り込み、それらの 16 進数コードを記録します。 なお、16 進数コードは先頭に # 記号が付いています。 本チュートリアルでは、#7CA8AF、#014165、#7A8082 という 3 つの 16 進数コードを使用します。

  11. hub サイトに戻ります。

    このサイトを起動すると、編集モードになります。

    編集モードの hub サイト

    編集モードであることは、hub をカスタマイズするためのメニュー オプションがサイドに表示されるとわかります。

    注意:

    編集モードにならない場合は、ページの左端の方の編集ボタンをクリックして、編集を開始します。

  12. ホーム ページの上部の画像にポインターを合わせて、メニューを表示させます。 メニューで、編集ボタンをクリックして画像を編集します。

    画像の編集ボタン

  13. [レイアウト行] パネルの [表示設定][背景画像] で、[アップロード] をクリックし、ダウンロードした画像を選択します。

    背景画像のアップロード

    メイン ページの画像が更新されます。

    ヒーロー画像が更新

  14. [Our OneMap] テキストにポインターを合わせ、編集ボタンをクリックします。

    バナー テキストの編集

  15. 組織名が反映されるようにテキストを変更し、同時に汎用の [OneMap] テキストを削除します。

    これで、サイトを訪問した人が最初に目にする画像とテキストを更新しました。

hub テーマの変更

次に、ページのテーマを更新します。 テーマは、サイト全体のエレメントやテキスト、ボタンの色を表すものです。

  1. hub サイトのフロント ページのサイド パネルで、[カスタマイズ] が表示されるまで、戻る矢印をクリックします。

    カスタマイズ パネル

  2. [カスタマイズ][テーマ] をクリックします。

    テーマ オプション

    hub のテーマをカスタマイズするには、ホーム ページの画像から抽出したさまざまな色を入力します。

  3. [テーマ] パネルで、選択した色を設定するか、以下のパラメーターを使用します。
    • [グローバル ナビゲーションの背景色] に「#7ca8af」と入力するかコピーして貼り付けます。
    • [グローバル ナビゲーションのテキスト色] に「#7a8082」と入力します。
    • [ヘッダーの背景色] に「#014165」と入力します。
    • [本文のリンクの色] に「#014165」と入力します。

    変更されたテーマ色

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

    保存ボタン

  5. [テーマ] パネルで [カスタマイズ] の戻る矢印をクリックします。

    カスタマイズの戻る矢印

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

    ヘッダー オプション

    サイトの上部 (グローバル ナビゲーション バーの下) と、サイトに追加されたすべてのページとビューにヘッダーが表示されます。 ヘッダーはサイトのタイトル、ロゴ、メニュー リンクで構成されます。

    [ヘッダー] セクションで、画像 URL をコピーして貼り付けるか、手元にある画像をアップロードすることで、ページ上部のロゴを更新できます。 アップロードする画像のサイズは 3 MB 未満でなければなりません。

  7. ヘッダー用にアップロードできる画像の URL またはファイルがある場合は、この時点で追加します。

    または、テンプレートで用意されているロゴをそのまま使用することもできます。

    これで hub サイトに組織の全体的なテーマが反映されるようになります。

ここまでに、[OneMap] テンプレートから hub サイトを作成して、そのテーマを変更し、組織のスタイルやブランドに適したホーム ページ画像を追加しました。 次に、hub サイトにコンテンツを追加します。


コンテンツを追加して Web サイトを強化

コンテンツを追加して hub サイトをさらに強化する準備ができました。 hub は共同作業ができる空間で、コンテンツによってパートナーや GIS コミュニティに対してその価値が高まります。

hub セクションにコンテンツを追加

次に、hub の [Making an impact] セクションを変更します。 サイトのこの部分は、成功事例を共有して取り組みの価値を示すのに適した場所です。 たとえば、皆さんや皆さんのパートナーの注目のストーリー、アプリ、または魅力的なイニシアチブにリンクするカードを追加できます。

  1. サイトのフロント ページで、下にスクロールして [Making an impact] セクションを見つけます。

    Making an impact セクション

  2. 複数のアプリがあるエリアにカーソルを合わせ、編集ボタンをクリックします。

    Edit ボタン

    [レイアウト ギャラリー] パネルが表示されます。

    パネルに、共有するアイテムを選択する 2 つの方法が示されます。[動的] (グループからコンテンツを参照) と [手動] です。 どちらの場合も、表示されるコンテンツは ArcGIS Online 組織から取得されます。 組織内の他のユーザーのアプリを登録したり、自分が作成したアプリを参照したりすることもできます。 対象ユーザーが表示できるように、アイテムが正しく共有されていることを確認します。

  3. [手動] をクリックします。

    OneMap テンプレートの [ギャラリー] には、アプリが 7 つ表示されています。 もういくつか追加します。

  4. [コンテンツ] パネルで、[コンテンツの選択] をクリックします。

    [コンテンツの追加] ウィンドウが表示されます。 ソース位置とコンテンツのタイプをフィルターできます。

    コンテンツの追加ウィンドウ

    注意:

    ウィンドウに表示されるアプリは、ここに示す画像とは異なる可能性があります。

  5. 組織からいくつかのアイテムを追加します。

    アイテムがギャラリーの既存アイテムの下に追加されます。 [コンテンツの削除] ボタンや [コンテンツの並べ替え] ボタンを使用すると、ギャラリー ウィンドウのアイテムを削除したり、整理したりできます。

    Making an impact セクションのアイテム。新規アイテムは、最後のアプリ、Air Quality Aware の下に追加される。

カスタム コンポーネントでパートナーをハイライト

いくつかの単純なフロントエンド開発スキルを用いて、自分の [OneMap] サイトにカスタム コンポーネントを作成できます。 フロント ページの下部に、パートナーをリストするためのカスタム コンポーネントがあります。 パートナーには、データ プロバイダー、データ利用者、資金提供者、擁護者などが含まれます。 パートナーのプロモーションは、パートナーの重要な役割を認識し、パートナーの参加による恩恵に報いるための 1 つの方法です。

  1. hub のフロント ページで、下部にスクロールして [Esri のパートナー] セクションを見つけます。

    Esri のパートナー セクション

    OneMap テンプレートに、まだ Web サイトにリンクされていないサンプルのパートナー ロゴがあります。 次に、ロゴを変更してリンクを設定する方法について説明します。

  2. HTML コードを表示するには、アプリの行をクリックします。
  3. </>[HTML で編集] をクリックします。

    HTML で編集オプション

    [HTML] ウィンドウが表示されます。 最上部の HTML はスタイルを決定します。たとえば、スクロールが可能な <style> タグに注目してください。

    スタイル タグ

    <div class=”scrollmenu”> の下に、アイテムのリストが表示されます。 これらが [Esri のパートナー] ギャラリーに表示されるものです。

    ギャラリーのアイテム

    href=”#” および img src = テキストを記録しておきます。

    HTML では href はリンクを表します。 href の後ろの # を、親の Web サイトへのリンクに置き換えます。

    Img src は、親が誰であるかを示す画像の URL を指します。 これはロゴの画像であったり、ユーザーが作成した画像であったりします。 ホストされている画像がある場合は、ここで参照できます。 画像をホストする場所がない場合は、ArcGIS Online にアップロードできます。

    注意:

    画像がない場合は、Web 上の許可を得ている画像を使用できます。 画像を右クリックし、[画像アドレスをコピー] を選択して画像の URL を取得するか、[名前を付けて画像を保存] を選択して画像をダウンロードします。

  4. 必要に応じて、1 つ以上の # を独自のパートナー リンクと置き換えて、img src をパートナーの画像やロゴに更新します。

    チュートリアルでは、最初に提供された画像のリンクを更新します。

  5. 24 行目の最初の # を、「www.esri.com」に置き換えます。

    これで、最初のロゴのリンクが Esri のホームページに設定されます。

    最初のロゴのリンクを Esri の Web サイトに設定
  6. [適用] をクリックして [Esri のパートナー] ギャラリーの変更内容を保存します。 リボンの [保存] をクリックします。

hub サイト上でいくつかのパートナーを正しくハイライトできました。

hub テンプレート内のページを更新

フロント ページを更新したので、次に OneMap テンプレート内の他のページを管理します。 このテンプレートには複数のページがあり、すぐに使用できるノーコードまたはローコードの機能でカスタマイズできます。 また、複数のページを使用して、サイトのさまざまなトピックスやテーマを表すこともできます。 [OneMap Foundation Data] ページのコピーを作成します。

  1. [カスタマイズ] パネルで、ページ数のボタンをクリックします (この hub は 6 ページ)。

    ページの数

  2. [OneMap Foundation Data] ページをクリックして開きます。

    OneMap Foundation Data ページ

    「Transportation Data」というタイトルのページが表示されます。

  3. リボン上のオプション ボタンをクリックし、[レイアウトのクローン作成] を選択します。 サイトの公開を求められたら、[公開] をクリックします。

    レイアウトのクローン作成ボタン

    クローン化が完了すると、そのポイントに適用した変更とともにページがコピーされます。 クローン作成されるページは前のページからコピーされ、_1 が付きます (複数回コピーされれば、後続の番号が付きます)。

  4. リボン上の [ページ] ボタンをクリックします。

    ページ オプション

    クローン作成されたページが他のページとともにリストされます。

    クローン作成されたページ

    これで [OneMap Foundation Data] ページのクローンが作成されたので、これに一意の名前を付け、検索に適した URL を設定します。

  5. クローン作成されたページをクリックして開き、[ページ情報] をクリックします。

    ページ情報オプション

  6. [ページ情報] に、一意の名前を入力します。 この例では、[Transportation data] という名前が使用されます。

    新しいページの名前

    次に、ページの URL を編集して、更新後のページ名と一致させます。

  7. [URL 設定の編集] をクリックし、ページの名前を入力します。

    ページ スラッグ テキスト

    ページ スラッグはページの URL の末尾のテキストなので、ページ名を変更した後はページ スラッグを変更することが重要です。

  8. ページの URL の編集ウィンドウで、[保存] をクリックします。 リボン上で [保存] をクリックしてページを保存します。
    ヒント:

    [保存] の横にある下矢印をクリックすると、サイトのプレビューや公開のオプションが表示されます。

    [OneMap Foundation Data] ページのタイトルやヒーロー画像 (Web ページの上部に配置される大きな画像) など、どのコンポーネントもメイン ページと同じ方法で変更できます。 [OneMap Foundation Data] ページを探索しながら、組織とデータ主題そのものを両方をわかりやすく示すために、どの要素を変更したらよいのか検討します。 たとえば、ページの背後にあるデータの統計を更新する場合もあります。 あるいは、関連するアプリケーションや、テーマにコンテキストを与える他のサイトによってギャラリーを更新することも考えられます。

ここまでに OneMap テンプレートを変更して自分独自のものにしました。 ホーム ページの画像を更新し、hub のデータを変更して、ページのクローンも作成しました。 これらのスキルを適用して、残りの hub ページを変更し、自分の組織やパートナーのスタイルと一致させることができます。