がん診療圏域のマップを作成

米国の 36 州およびコロンビア特別区には現在、NCI 指定がんセンターが 72 か所あります。 そのほとんどが、大学医療センターと提携しています。

がんセンターの診療圏域の範囲とアクセス性を理解するために、まず米国全土の既存の NCI 指定がんセンターの位置を詳しく調べ、対応する診療圏域のポリゴンをダウンロードします。 そして、このデータから Web マップを作成します。 がんセンターの診療圏域の範囲をマップ上で視覚化することは、がんセンターからサービスを受ける住民を把握するための第一歩です。

マップの構築後、各がんセンターが担当する住民に関する重要な情報を詳述したインフォグラフィックスを自身および同僚が表示できる Web アプリを作成します。

診療圏域のデータをダウンロード

まず、NCI のウェブサイトから診療圏域のポリゴンをダウンロードし、がんセンターと、各がんセンターの診療圏域のマップを作成します。

  1. ブラウザで NCI Catchment Areas のページに移動します。
  2. ページの半分ほどまでスクロールすると、[Datasets] というセクションがあります。
  3. [Catchment Area Shapefile] のリンクをクリックし、データの .zip アーカイブをダウンロードします。

    NCI Catchment Areas ページの Datasets セクションにある Catchment Area Shapefile のリンク

    コンピューターに [NCI_Catchment_Areas_fall2023.zip] ファイルがダウンロードされます。

    ファイルがダウンロードされた場所をメモしておきます。

これで、マップに必要なデータの一部をダウンロードしました。

マップの作成

次に、がんセンターの情報を含む新規マップを開始します。

  1. ArcGIS Online に移動して [サイン イン] をクリックします。
  2. ArcGIS の組織アカウント」にサイン インします。
    注意:

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

  3. [マップ] をクリックします。

    ArcGIS Online 組織のマップ タブ

    新しいマップが開きます。

    まず、がんセンターの住所のポイントをマップに追加し、米国全土のがんセンターの位置を視覚化します。 このデータはすでに ArcGIS Online にあるため、マップに直接追加する準備はできています。

  4. [レイヤー] ウィンドウで、[追加] ボタンをクリックします。

    新規マップのレイヤー ウィンドウに追加ボタンが表示されている状態

  5. [マイ コンテンツ] ドロップダウン リストをクリックして、[ArcGIS Online] をクリックします。

    レイヤーの追加ウィンドウにレイヤーのソースのドロップダウン リストが表示されている状態

  6. 検索ボックスに「NCI center addresses」と入力します。
  7. [Esri Tutorials] が所有する [NCI_Center_Addresses] レイヤーを探し、そのレイヤーをクリックして、[追加] ボタンをクリックします。

    Esri Tutorials が所有する NCI_Center_Addresses フィーチャ レイヤー アイテム

    がんセンターのポイント フィーチャがマップに追加されます。

    NCI_Center_Addresses フィーチャ レイヤーがマップに表示されている状態。

    これらはタイプ別にシンボル表示されています。カテゴリとシンボルは、レイヤーの [プロパティ] ウィンドウの [シンボル] セクションに一覧表示されています。

    レイヤーのプロパティ ウィンドウにシンボルが表示されている状態

    これは有益なデータですが、各がんセンターが担当する地理的範囲を示していません。 地理的範囲を視覚化するために、NCI Web サイトからダウンロードした、がんセンターの診療圏域データを追加します。

診療圏域の新規レイヤーを作成

次に、NCI サイトからダウンロードした .zip ファイルを使用して、がんセンターの診療圏域を示すレイヤーを新たに作成します。

  1. [コンテンツ] ツールバーの [追加] をクリックし、[ファイルからレイヤーを追加] をクリックします。

    コンテンツ ツールバーに、追加ボタンと、ファイルからレイヤーを追加オプションが表示されている状態

    [レイヤーの追加] ウィンドウが表示されます。

    レイヤーの追加ウィンドウ

    [レイヤーの追加] ウィンドウでは、ファイルをドラッグして、ArcGIS Online にアップロードできます。

  2. [NCI_Catchment_Areas_fall2023.zip] ファイルをダウンロードした、コンピューターのフォルダーに移動します。 .zip ファイルをクリックし、ファイル アップロード ウィンドウにドラッグします。

    ダウンロード フォルダーの場所にある .zip ファイルをレイヤーの追加ウィンドウにドラッグ

    [レイヤーの追加] ウィンドウが、アップロードされた .zip ファイルにシェープファイル データが含まれていることを検知します。

    シェープファイルがアップロードされた、レイヤーの追加ウィンドウ

    次に、新規レイヤーを特定しやすくするために、タイトルとメタデータを追加します。

  3. [次へ] をクリックします。
  4. [タイトル] に「Cancer Center Catchment Areas_」と入力し、自分のイニシャルを追加します。

    レイヤーの追加ウィンドウのタイトル ボックスに自分のイニシャル付きの新たなタイトルが入力された状態

  5. [タグ] に以下のタグを入力します。1 つ入力するたびに Tab キーを押します。

    • 医療
    • Cancer Center Catchment Areas
    • Healthcare services

  6. [サマリー] に「This layer represents Cancer Center Catchment Areas for Fall 2023 as per the National Cancer Institute.」と入力します。

    タグとサマリーがここに追加されている。

  7. [作成してマップに追加] をクリックします。

    レイヤーの追加ウィンドウにある、作成してマップに追加ボタン

    レイヤーが作成され、マップに追加されます。

レイヤーの順序およびベースマップの変更

がんセンターと、各がんセンターに対応する診療圏域を含む Web マップができました。 このマップは、がんセンターの実際の所在地と、地理的なサービス区域を示します。 がんセンターは診療圏域内の住民にがん治療サービスを提供する責任があります。 診療圏域に焦点を合わせるためにマップを更新します。

  1. [レイヤーの追加] ウィンドウで、[戻る] ボタンをクリックします。

    レイヤーの追加ウィンドウの戻るボタン

    [コンテンツ] ウィンドウが開き、マップに追加したレイヤーが表示されます。

  2. [コンテンツ] ウィンドウで、[NCI_Center_Addresses] レイヤーのドラッグ用ハンドルをクリックし、[Cancer_Center_Catchment Areas_YOUR INITIALS] レイヤーの上にドラッグします。

    NCI_Center_Addresses レイヤーをクリックして、他のレイヤーの上にドラッグ

    設定した順序になったレイヤー

    ポイントのレイヤーがポリゴンのレイヤーの上に描画されるようになります。

    レイヤーの順序を変更したマップ

    がんセンターが、その診療圏域との関係において見やすくなりました。 ただし、ホストした、がんセンター診療圏域ポリゴンのフィーチャ レイヤーはデフォルトの色でシンボル表示されています。また、マップにはデフォルトのベースマップが含まれています。 最終版のアプリを共有する予定なので、デフォルトを変更して余分な情報を取り除き、重要なデータをより効果的に視覚化する必要があります。これをベースマップで始めます。

  3. [コンテンツ] ツールバーの [ベースマップ] ボタンをクリックします。

    コンテンツ ツールバーとベースマップ ボタン

    マップは現在、[地形図ベースマップ] オプションを使用しています。 ArcGIS Online のベースマップは、Esri や他の多数の組織から提供された信頼性の高いマップやデータのコレクションである ArcGIS Living Atlas of the World の一部です。 今回のマップの焦点はがんセンターの診療圏域なので、そのデータをさらに目立たせるために、背景がよりシンプルで無彩色に近いベースマップに変更します。

  4. [ベースマップ] リストをスクロール ダウンし、[キャンバス (ライト グレー)] ベースマップをクリックします。

    キャンバス (ライト グレー) ベースマップが表示されているベースマップ リスト

    マップが更新され、新しいベースマップにがんセンターのデータが表示されます。

    マップはライト グレーのベースマップで描画される。

    この変更で、ベースマップよりフィーチャ データに注意が向くようになりました。

レイヤー シンボルの変更

次に、がんセンターの診療圏域ポリゴンの色を変更します。

  1. [コンテンツ] ツールバーにある [レイヤー] ボタンをクリックします。

    コンテンツ ツールバーのレイヤー ボタン

  2. [Cancer_Center_Catchment Areas_YOUR INITIALS] レイヤーをクリックします。

    診療圏域のレイヤー

  3. マップの右側にある [設定] ツールバーで、[スタイル] ボタンをクリックします。

    設定ツールバーのスタイル ボタン

  4. [スタイル] ウィンドウの [スタイルの選択] セクションで、[スタイル オプション] をクリックします。

    スタイル ウィンドウのスタイル オプション ボタン

  5. [スタイル] ウィンドウの [場所 (単一シンボル)] セクションで、[シンボル スタイル] パッチの横の編集ボタンをクリックします。

    シンボル スタイルの編集ボタン

    [シンボル スタイル] ウィンドウが表示されます。

    診療圏域ポリゴンの塗りつぶしと枠線の色を編集します。

  6. [シンボル スタイル] ウィンドウで、[塗りつぶし色] パッチの横の編集ボタンをクリックします。

    塗りつぶし色パッチの編集ボタン

  7. [色の選択] ウィンドウの色番号ボックスに「067ac6」と入力します。

    色の選択ウィンドウの 16 進数コード ボックス

    067ac6 という数字は、青っぽい特定の色を示す、16 進数のコード番号です。 希望の色のコードがわかっている場合は、16 進数コードを入力した方が手早く色を指定できます。 また、RGB (赤、緑、青) または HSV (色相、彩度、明度) の値を指定したり、対話型カラー パレット ウィジェットをクリックしたりすることでも、好みの色を選択できます。

  8. [完了] をクリックします。
  9. [シンボル スタイル] ウィンドウで、[アウトライン色] パッチの横の編集ボタンをクリックします。

    アウトライン色パッチの編集ボタン

  10. [色の選択] ウィンドウの色番号ボックスに「FFFFFF」と入力し、[完了] をクリックします。

    色の選択ウィンドウの 16 進数コード ボックス

    FFFFFF は白色を表す 16 進数コードです。

  11. [シンボル スタイル] ウィンドウを閉じ、[スタイル] ウィンドウの [完了] をクリックします。
  12. [スタイル] ウィンドウを閉じます。

    カートグラフィが改善され、がんセンターと、各がんセンターの診療圏域の範囲が見やすくなりました。

    次に、マップを保存して、対話形式のアプリで使用できるようにします。

  13. [コンテンツ] ツールバーで [保存して開く] をクリックしてから [名前を付けて保存] をクリックします。

    名前を付けて保存オプション

  14. [マップの保存] ウィンドウの [タイトル] に、「Cancer Center Catchment Areas Map」と入力し、自分のイニシャルを追加します。

    タイトルが入力された、マップの保存ウィンドウ

  15. [タグ] に以下のタグを入力します。1 つ入力するたびに Tab キーを押します。

    • 医療
    • Cancer Center Catchment Areas
    • Healthcare services

  16. [サマリー] に、「This map displays NCI-designated cancer centers and their associated catchment areas.」と入力します。

    タグとサマリーが入力された状態

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

    次に、診療圏域内でサービスを受ける住民の人口統計を詳しく調べるための、対話形式のアプリを作成します。 人口統計はリソースの割り当ておよびサービスの提供を決める際に不可欠な情報です。

データを正常にダウンロードし、米国全土の NCI 指定がんセンターを各がんセンターに対応する診療圏域ポリゴンと共に表示するマップを作成して、シンボル表示を行いました。 このマップは、米国全土における、がんセンター診療圏域の範囲の把握に役立ちます。

このマップを使うことで、がん治療サービスへのアクセスが十分でない可能性のある地域を特定することもできます。 医療組織や政策立案者は、この情報を活用して、サービスが提供されていない、またはサービスの提供が不十分な住民に医療を拡大するための最善の方法について、情報に基づく意思決定を行うことができます。

次の手順では、人口統計データを使用して、各がんセンター診療圏域に含まれる住民への理解を深めます。 これは、がん研究やサービスを地域のニーズに確実に沿わせるための重要な手順です。 そのために、各がんセンター診療圏域の人口データを要約するインフォグラフィックスを作成する Web アプリを構築します。


インフォグラフィックスを表示するアプリの作成

ここで、ArcGIS Experience Builder を使用して、ユーザーががんセンターを選択し、その診療圏域を確認し、対象となる住民の人口統計情報に関するインフォグラフィックスを調査することができる Web アプリを開発します。 このアプリは、各診療圏域の対象となるコミュニティの固有の特性に合わせた取り組みを行うことを目指している医療従事者、研究者、政策立案者にとって有益なツールとなります。

マップからのアプリの作成

まず、作成済みのマップから直接 ArcGIS Experience Builder アプリを作成します。 幅広いアプリをマップから作成できます。 ここでは Experience Builder を使用します。これには ArcGIS Business Analyst ウィジェットが含まれており、アプリに含めたい人口統計情報にはこのウィジェットからアクセスできるからです。

Business Analyst ウィジェットを含む Experience Builder アプリを作成するには、[ジオエンリッチメント] および [ネットワーク解析] の権限を持つ ArcGIS Online アカウントでサイン インする必要があります。 詳細については、「Business Analyst ウィジェット - ArcGIS Experience Builder ドキュメント」をご参照ください。

  1. [コンテンツ] ツールバーで [アプリの作成] ボタンをクリックし、[Experience Builder] をクリックします。

    アプリの作成ボタンと Experience Builder オプション

    ArcGIS Experience Builder テンプレート ページが新しいタブで開きます。 このページではアプリ用のテンプレートを選択できます。ここでは空白のテンプレートを選択します。空白のテンプレートでは、ウィジェットを自分が置きたい場所に構成できます。

  2. [テンプレートを選択して開始] ウィンドウの [空白の全画面] テンプレートで、[作成] ボタンをクリックします。

    テンプレートを選択して開始ウィンドウで空白の全画面テンプレートを選択

  3. Experience Builder のツアーの開始についてのメッセージが表示されたら、[スキップ] をクリックします。

    ツアーの開始についてのメッセージが表示される場合がありますが、 ここではスキップをクリックします。

  4. アプリ名ボックスで、[無題のエクスペリエンス 1] をクリックします。

    左上隅にデフォルトのアプリ名が表示されます。

    これはデフォルトの新規アプリ名です。 わかりやすい名前に変更します。

  5. アプリ名ボックスで、古い名前を削除し、「Cancer Center Catchment Area Demographics」と入力して Enter キーを押します。

    このアプリをマップから直接作成したため、マップ ウィジェットがすでにキャンパス上に表示されています。 キャンバスは Experience Builder におけるワークスペースであり、ここでウィジェットの追加と構成を行います。 ウィジェットは、対象を絞った特化型のアプリ内機能を実現します。 このアプリでは、ユーザーが、がんセンター診療圏域とその対象となる住民について調査して把握できるようにします。 そのためには、さらに 2 つのウィジェットが必要になります。Business Analyst ウィジェットと [リスト] ウィジェットです。

Business Analyst ウィジェットの追加

Business Analyst ウィジェットは、対話的なインフォグラフィックスを使用して特定の位置に関する主要な指標と情報を視覚化できます。 ここでは、このウィジェットを追加します。

  1. [ウィジェットの挿入] ウィンドウが表示されていない場合、サイドバーで [ウィジェットの挿入] ボタンをクリックします。

    サイドバーにあるウィジェットの挿入ボタン

    [ウィジェットの挿入] ウィンドウにウィジェットのリストが表示されます。 ウィジェットは [マップ中心][データ中心][ページ エレメント] など、さまざまなカテゴリ別にまとめられています。

  2. [マップ中心] セクションのウィジェットのリストを下にスクロールして、Business Analyst ウィジェットを表示します。
  3. Business Analyst ウィジェットをクリックして、キャンバス上のマップ ウィジェットの上にドラッグします。

    ウィジェットの挿入リストの Business Analyst ウィジェットをクリックしてキャンバス上にドラッグできます。

    キャンバス上に、ウィジェットを表すボックスが表示されます。 配置は後で行うため、今の時点で気にする必要はありません。

    キャンバス上の未構成状態の Business Analyst ウィジェット

    Business Analyst ウィジェットの構成ウィンドウがキャンバスの右側に表示されます。

    Business Analyst ウィジェットの構成ウィンドウ

    このウィジェットのデフォルト モードは [ワークフロー] モードです。

  4. [モード] セクションで、[プリセット] をクリックします。

    プリセット ワークフロー モード

    [プリセット] モードのウィジェットでは、アプリのユーザー向けに特定のサイトとインフォグラフィックスを定義します。この方法により、ユーザーに見せたい情報を確実に見せることができます。 このアプリの場合、調査対象となる特定のサイトはがんセンター診療圏域となります。ここでは、関連する保健情報が含まれる設計にすでになっている、デフォルトの、保健に限定したインフォグラフィックスを選択します。 これらについては後で構成します。

    キャンバス上のウィジェット プレースホルダーが変更されます。

    キャンバス上のプリセット モードの Business Analyst ウィジェット

    このウィジェットのその他の設定については後で構成します。

リスト ウィジェットの追加

次に、[リスト] ウィジェットを追加して、アプリのユーザーがさまざまながんセンターを選択できるようにします。

  1. [データ中心] セクションのウィジェットのリストを下にスクロールして、[リスト] ウィジェットを表示します。
  2. [リスト] ウィジェットをクリックして、キャンバス上のマップ ウィジェットの左にドラッグします。

    ウィジェットの挿入リストのリスト ウィジェットをクリックしてキャンバス上にドラッグできます。

    [リスト] ウィジェットはカスタム リスト ビューにデータ レコードを表示します。

  3. [リスト] ウィジェットの上にポインターを合わせます。

    ポインターが変形し、ウィジェットを選択して動かせることが示されます。

    このポインターはウィジェットを選択して動かせることを示しています。

  4. [リスト] ウィジェットをクリックして、キャンバス上の左下にドラッグします。

    ウィジェットが動くと、配置を示すガイド ラインが表示されます。 ガイド ラインによりキャンバス上のウィジェットの正確な配置が可能になります。

    キャンバス上のガイド ライン

  5. [リスト] ウィジェットの右上隅にポインターを合わせます。

    ポインターが変形し、ウィジェットの隅を選択して動かせることが示されます。

    ポインターが変形し、ウィジェットの隅を選択して動かせることが示されます。

  6. [リスト] ウィジェットの四隅をクリックしてドラッグし、キャンバスの左側で、キャンバスの約 3 分の 1 の大きさになるように調整します。

    キャンバス上で適切に配置されたリスト ウィジェット

  7. 同じ手法でマップ ウィジェットのサイズと配置を変更し、キャンバスの下側で残りのスペースの 4 分の 1 を占めるように調整します。

    キャンバス上でサイズと配置が変更されたマップ ウィジェット

  8. 同じ手法で Business Analyst ウィジェットのサイズと配置を変更し、キャンバスの残りのスペースを占めるように調整します。

    キャンバス上でサイズと配置が変更された Business Analyst ウィジェット

    Experience Builder のレイアウト機能の詳細については、「ArcGIS Experience Builder でのレイアウトの設計」チュートリアル シリーズをご参照ください。

リスト ウィジェットをデータに接続

現時点で、[リスト] ウィジェットはマップ上のデータに接続されていません。 マップをデータ ソースとして使用して、各がんセンターに関する情報を [リスト] ウィジェットに表示したいので、接続の状態を変更します。

  1. キャンバスで、[リスト] ウィジェットをクリックします。

    キャンバス上で選択されているリスト ウィジェット

    [リスト] ウィジェットの構成ウィンドウがキャンバスの右側に表示されます。

    リスト ウィジェットの構成ウィンドウ

  2. [リスト] ウィジェットの構成ウィンドウの下部で、[開始] をクリックします。

    ウィジェットの構成ウィンドウの開始ボタン

  3. [リスト] ウィジェットの構成ウィンドウの上部で、[データの選択] をクリックします。

    データの選択ボタン

    [データの選択] ウィンドウが表示されます。

  4. [データの選択] ウィンドウで、[Cancer Center Catchment Area Map] の横にある [展開] ボタンをクリックします。

    データの選択ウィンドウのマップの展開ボタン

  5. [Cancer Center Catchment Areas] ポリゴン レイヤーをクリックします。

    データの選択ウィンドウのマップの Cancer Center Catchment ポリゴン レイヤー

    これで、[リスト] ウィジェットがマップ内のデータに接続されました。

動的テキストを表示するためのリスト ウィジェットの構成

ここでは、各がんセンターについて、名称、住所、Web サイトへのリンクなどの重要な情報を表示するようにリスト ウィジェットを構成します。 これらの情報はそれぞれ、[Cancer Center Catchment Areas] ポリゴン レイヤーの属性として含まれています。

  1. キャンバスの [リスト] ウィジェットで、丸い画像プレースホルダーをクリックします。

    リスト ウィジェットの画像プレースホルダー

  2. [リスト] ウィジェットのアイテム編集ツールバーで、[削除] ボタンをクリックします。

    削除ボタン

  3. [リスト] ウィジェットのテキスト ボックスをクリックします。

    テキスト ボックスをクリックします。

  4. 画像プレースホルダーがあったスペースを使用するため、テキスト ボックスの左下隅をクリックしてドラッグします。

    テキスト ボックスの隅を選択して動かせる状態

  5. テキスト ボックスのサイズを変更し、空いているスペースを覆います。

    スペースを使用するようにサイズ変更されたテキスト ボックス

  6. テキスト ボックスをダブルクリックし、内容を編集します。

    インライン エディターが表示され、リストのテキストの書式設定を行うことができます。 各がんセンターの名称と住所を手動で入力する代わりに、リスト内で動的コンテンツを使用し、データ レイヤーからそれらの属性を取得して表示できます。

  7. [リスト] ウィジェットのアイテム編集ツールバーで、[動的コンテンツ] ボタンをクリックします。

    ツールバーの動的コンテンツ ボタン

    [Cancer Center Catchment Areas] ポリゴン レイヤーの属性のリストが表示されます。

  8. [動的コンテンツ] の属性リストで、[name] をクリックします。

    動的コンテンツの属性リスト

  9. [動的コンテンツ] の属性リストで、[address] をクリックします。

    動的コンテンツ リストの address アイテム

    name 属性と address 属性がリスト アイテムのテキスト ボックスに追加されます。 中括弧は動的テキストであることを示します。

    テキスト ボックス内の name、address 動的属性

  10. [動的コンテンツ] の属性リストを閉じます。
  11. テキスト ボックスで、[{name}][{address}] の間をクリックし、Enter キーを押します。

    [{address}] 動的テキスト アイテムがテキスト ボックスの 2 行目に移動します。

    テキスト ボックスの 2 行目にある address 動的テキスト アイテム

  12. テキスト ボックス内の [{name}] をクリックし、表示されるテキストの書式設定バーで、[太字] ボタンをクリックします。

    テキストの書式設定バーの太字ボタン

  13. リスト アイテムで、ボタンの上の空白スペースをクリックします。

    ボタンの上の空白スペース

    [リスト] ウィジェットが更新され、フィーチャごとに前述の 2 つの属性が表示されます。

    書式設定後の動的テキストを表示するリスト ウィジェット

    ここでは、[Cancer Center Catchment Areas] ポリゴン フィーチャの属性から取得した動的テキストを表示するように、リスト ウィジェットを構成しました。 次に、がんセンターの Web ページにリンクするボタンを構成します。

リスト ウィジェットのボタンの構成

[Cancer Center Catchment Areas] レイヤーには、各がんセンターの Web ページの URL も含まれています。 すでに名称と住所を設定しており、ここで各センターの URL をリスト ウィジェットに追加できます。 多くの場合、がんセンターの Web ページには、各種がんプログラム、専門分野、治療オプション、臨床試験、支援サービスに関する正確な最新の情報が記載されています。 がんセンターのページに直接リンクすることで、アプリのユーザーに対して信頼できる情報源を提示します。

ここでは、センターのページを開くボタンを、[リスト] ウィジェットの各アイテムに対して構成します。

  1. [リスト] ウィジェット アイテムで、[ボタン] コントロールをクリックします。

    リスト ウィジェット アイテムのボタン コントロール

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

    ボタン ウィンドウ

  2. [ボタン] ウィンドウで、[テキスト] ボックス内をクリックし、デフォルト テキストの [Button] を削除して、「Website」と入力します。

    Website と表示されるように変更されたボタン ラベル テキスト

    アプリのユーザーは、このボタンをクリックするとがんセンターの Web サイトが表示されることを理解します。

  3. [ボタン] ウィンドウで、[リンクの設定] ボタンをクリックします。

    リンクの設定ボタン

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

  4. [リンクの設定] ウィンドウで、[リンク先] ドロップダウン リストをクリックします。

    リンクの設定ウィンドウ

  5. [リンク先] リストで、[URL] をクリックします。

    リンク先リストの URL アイテム

  6. URL ボックスの横にある [ページ] ボタンをクリックします。

    URL ボックスのページ ボタン

  7. [ページ] リストで、[属性] をクリックします。

    ページ リストの属性オプション

  8. [属性] リストで、[url] をクリックします。

    属性リストの url 属性

    これは、各がんセンターの Web ページの URL が格納されたフィールドです。

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

    リンクの設定ウィンドウの OK ボタン

    これで、[リスト] ウィジェット アイテムのボタンが、がんセンターの Web ページを開くように構成されました。

ボタンのスタイルをマップに合わせて設定

ここでは、マップの診療圏域のシンボルに合うようにボタンのスタイルを設定します。

  1. [ボタン] ウィンドウで、[高度] 設定をオンにします。

    ボタン ウィンドウの高度切り替えボタン

    追加のボタン書式設定オプションが [ボタン] ウィンドウの [高度] セクションに表示されます。

  2. ボタンの [塗りつぶし] のカラー パッチをクリックします。

    塗りつぶしのカラー パッチをクリックします。

  3. カラー パネルで、[その他] をクリックします。

    ボタンの塗りつぶしカラー パネルのその他の色オプション

    診療圏域の塗りつぶし色と同じ色を使用します。

  4. [HEX] テキスト ボックスで、デフォルト値を「#067ac6」に置き換えます。

    ボタンのカラー パレットの Hex テキスト ボックス

  5. [塗りつぶし] カラー パネルの横にある [ボタン] ウィンドウをクリックして、カラー パネルを非表示にします。

    ボタン ウィンドウをクリックして非表示にします。

    ボタンの色がマップ上の診療圏域ポリゴンと同じ色になりました。

    ボタンの色が更新され、マップ上の診療圏域ポリゴンと同じ色になります。

    ボタンのテキストを読みやすくするため、白色の太字に変更します。

  6. [ボタン] ウィンドウの [テキスト] の書式設定ツールバーで、[太字] をクリックします。

    テキストの書式設定ツールバーの太字オプション

  7. [ボタン] ウィンドウの [テキスト] の書式設定ツールバーで、[テキストの色] ボタンをクリックし、カラー パネルの [標準色] セクションで、白色のカラー パッチをクリックします。

    テキストのカラー パレットの標準色セクション

  8. [テキスト] の書式設定ツールバーの横にある [ボタン] ウィンドウをクリックして、カラー パネルを非表示にします。

    ボタンのテキストが白色の太字になり、ボタンの青い背景に対してより目立つようになりました。

    ボタンのテキストが更新された。

    ボタンの書式設定が完了しました。 次に、アプリをよりインタラクティブにします。

ウィジェットのアクションの構成

[リスト] ウィジェットの書式設定が完了したので、ウィジェットのアクションの有効化に進むことができます。 Web アプリ内でウィジェットのアクションを使用すれば、アプリのインタラクティブ性が大幅に向上し、ユーザーが関心を持つフィーチャや情報を選択して表示することができます。

  1. [リスト] ウィジェットの上部をクリックします。

    リスト ウィジェットの上部

    [リスト] ウィジェットの構成ウィンドウが表示されます。

  2. [リスト] ウィジェットの構成ウィンドウで、[アクション] タブをクリックします。

    リスト ウィジェットの構成ウィンドウのアクション タブ

  3. [アクション] タブで、[トリガーの追加] をクリックします。

    アクション タブのトリガーの追加ボタン

    [トリガーの選択] ウィンドウが表示されます。

  4. [トリガーの選択] ウィンドウで、[レコード選択の変更] をクリックします。

    トリガーの選択ウィンドウのレコード選択の変更トリガー

    [ターゲットの選択] ウィンドウが表示されます。

    このウィンドウでは、リスト ウィジェット内で選択対象が変更された場合に影響を受けるウィジェットを選択できます。

  5. [ターゲットの選択] ウィンドウの [ウィジェット] セクションで、[マップ] をクリックします。

    ウィジェット リストが表示された、ターゲットの選択ウィンドウ

    [アクションの選択] ウィンドウが表示されます。

    アクションの選択ウィンドウ

  6. [アクションの選択] ウィンドウで、[ズーム] をクリックします。

    このウィジェットに対して [ズーム] アクションが追加されます。

    マップにズーム アクションがリスト ウィジェットのアクションに追加されました。

    Business Analyst ウィジェットを [リスト] ウィジェットに接続するために、アクションをもう 1 つ追加します。

  7. [アクションの追加] をクリックします。

    アクションの追加ボタンが表示されたアクション タブ

  8. [ターゲットの選択] ウィンドウの [ウィジェット] セクションで、[Business Analyst] をクリックします。

    ウィジェット リストが表示された、ターゲットの選択ウィンドウ

  9. [アクションの選択] ウィンドウで、[フィーチャの選択] をクリックします。

    アクションの選択ウィンドウのフィーチャの選択オプション

    ここでは、ユーザーが [リスト] ウィジェットでがんセンターをクリックすると、[マップ] ウィジェットがそのエリアにズームし、そのがんセンターの診療圏域に関する人口統計データと保健データが [Business Analyst] ウィジェットに表示されるようにアプリを構成しました。

検索機能の追加

人口統計情報を表示したいのがどのがんセンターであるかをアプリのユーザーが知っていることもよくあります。 ここでは、ユーザーが特定のセンターを検索できるように、[リスト] ウィジェットの検索機能を有効にします。

  1. [リスト] ウィジェットの構成ウィンドウで、[コンテンツ] タブをクリックします。

    リスト ウィジェットの構成ウィンドウのコンテンツ タブ

  2. [コンテンツ] タブで、[ツール] セクションを展開します。

    コンテンツ タブのツール セクション

  3. [ツール] セクションで、[検索] オプションをオンにします。

    検索オプションを有効にする。

    アプリのユーザーが主にがんセンターの名称または場所に基づいて検索することを望むと想定しています。 そのため、これらの属性内を参照するように、検索機能を構成します。

  4. [検索] セクションで、[検索フィールドの選択] ドロップダウン リストをクリックします。

    検索セクションの検索フィールドの選択ドロップダウン リスト

  5. フィールド リストで、[name][address] のチェックボックスをオンにします。

    検索のフィールド リストで name と address をオンにした状態

  6. [検索フィールドの選択] ラベルの横にある、構成ウィンドウの背景をクリックして、フィールド リストを非表示にします。

    これで、[リスト] ウィジェットが [マップ] ウィジェットと [Business Analyst] ウィジェットの両方に接続され、ユーザーに対して、統一感のある接続型エクスペリエンスがもたらされます。 この統合によって、ユーザーはがんセンターを検索し、がんセンターの Web サイトから情報を取得し、マップ上でがんセンターの位置を視覚化し、対象となる住民に関する適切な人口統計データを表示することができます。

Business Analyst ウィジェットの構成

ここでは、選択した診療圏域に関するインフォグラフィックスを表示するように Business Analyst ウィジェットを構成します。

Business Analyst インフォグラフィックスは、データや解析情報を簡単に理解できる形式にまとめた、見た目にも美しい動的プレゼンテーションです。 マップ、チャート、テキスト、画像を組み合わせることによって、複雑な情報をすばやく明確に伝えるように設計されています。

  1. キャンバスで、[Business Analyst] ウィジェットをクリックします。

    キャンバス上の Business Analyst ウィジェット

    デフォルトでは、フィーチャが選択されていない場合、ウィジェットに [マップ上のフィーチャを選択するか、位置を検索してインフォグラフィックスを表示します] というテキストが表示されます。

    このアプリではユーザーが [リスト] ウィジェットからがんセンターを選択することを想定しているため、このテキストを更新します。

  2. [Business Analyst] ウィジェットの構成ウィンドウの [コンテンツ] タブで、[概要テキスト] ボックスの既存のテキストを次のテキストに置き換えます。「Search for a cancer center from the list to view an interactive infographic with health care and insurance statistics for the population within the cancer center’s catchment area.

    新しいテキストが概要テキスト ボックスに追加されました。

    このような使用法を記述しておくことで、ユーザーがアプリを効果的に活用できます。 次に、がんセンターをリストから選択したときに表示されるインフォグラフィックスを選択します。

  3. [Business Analyst] ウィジェットの構成ウィンドウを下にスクロールして [インフォグラフィックス] セクションを表示し、[インフォグラフィックスの選択] をクリックします。

    Business Analyst ウィジェットの構成ウィンドウのインフォグラフィックス セクション

    [インフォグラフィックスの選択] ウィンドウが表示されます。

  4. [インフォグラフィックスの選択] ウィンドウで、[Esri インフォグラフィックス] セクションを展開します。

    インフォグラフィックスの選択ウィンドウ

    幅広いトピックにおよぶインフォグラフィックスのリストが表示されます。 このアプリで、各がんセンター診療圏域に関して提供したい情報には、基本の住民数、保険の範囲、医療支出などがあります。これらの情報から、この圏域にいる住民の医療費の支払い方法や、この圏域で最も一般的な健康保険の種類が明らかになります。 [医療と保険の統計情報] インフォグラフィックスがこの目的に適しています。

  5. インフォグラフィックスのリストを下にスクロールして [医療と保険の統計情報] を表示し、[医療と保険の統計情報] をクリックします。

    Esri インフォグラフィックスのリストの医療と保険の統計情報インフォグラフィックス アイテム

  6. [インフォグラフィックスの選択] ウィンドウを閉じます。

    ウィジェットの構成ウィンドウにこのインフォグラフィックスが追加されます。

    医療と保険の統計情報インフォグラフィックス アイテムが Business Analyst ウィジェットの構成ウィンドウに追加されました。

    ArcGIS Experience Builder アプリのすべてのウィジェットがインタラクティブで動的になるよう構成しました。

アプリの公開

これで、アプリを公開してテストする準備ができました。

  1. アプリ ウィンドウの上部にある [保存] ボタンをクリックします。

    アプリの上部にある保存ボタン

  2. [公開] ボタンをクリックします。

    アプリの上部にある公開ボタン

    ボタンのテキストが更新され、アプリが公開されたことが示されます。

    公開ボタンが、アプリが公開されたことを示しています。

  3. [詳細] ボタンをクリックし、[公開したアイテムの表示] をクリックします。

    詳細ボタンと公開したアイテムの表示オプション

    新しいタブが開き、公開された状態のアプリが表示されます。

    公開された状態のアプリ

  4. リスト ウィジェットで、1 つ目のアイテムをクリックします。

    公開されたアプリのリスト ウィジェット

    マップがズームされ、このがんセンターの診療圏域がフォーカスされます。

    選択したがんセンターの診療圏域を示すマップ

    [Business Analyst] ウィジェットに、その診療圏域の人口統計の特性を示すインフォグラフィックスが表示されます。

    注意:
    インフォグラフィックスが表示されない場合は、[Business Analyst] ウィジェットの構成手順を再確認してください。

  5. [リスト] ウィジェットの [検索] ボックスに「Dallas」と入力して、Enter キーを押します。

    検索ボックスと Dallas の検索結果

    リストがフィルター処理され、住所フィールドに Dallas が含まれる 1 つのアイテムが表示されます。

  6. [検索] ボックスの [消去] ボタンをクリックして、検索語句を消去します。
  7. [リスト] ウィジェット内のアイテムの [Website] ボタンをクリックします。

    がんセンターの Web サイトが新しいタブで開きます。

    アプリが正しく機能しています。

    現時点で、このアプリは非公開の状態です。 これを変更してアプリを組織内で共有すれば、関係者が意思決定に使用できるようになります。また、パブリックに共有してコミュニティを引き入れて、そのコミュニティの、がん治療や自らのコミュニティの特性に関する理解を深めることもできます。

    注意:

    インフォグラフィックスの表示およびダウンロードでは ArcGIS Online クレジットを消費します。 公開アプリでの Business Analyst ウィジェットの共有に関する詳細をご参照ください。

    ここでは、ArcGIS Experience Builder アプリを構成しました。まず、[リスト] ウィジェットを組み込んで、がんセンターを選択しやすくしました。また、Business Analyst ウィジェットを組み込んで、各診療圏域の人口統計情報を表示するようにしました。 その後、他のユーザーががんセンターとその対象となる住民を調査するために共有して使用できるように、アプリを公開しました。

このチュートリアルでは、米国 NCI 指定のがんセンター、その診療圏域、対象となる住民に関する包括的な知見が得られるインタラクティブなアプリを構築しました。 このアプリで提供されるデータと解析情報を活用することで、個々のがんセンターは、研究課題やサービス提供戦略についてより的確に情報を発信し、最も必要とされる場所にリソースを確実に投入できるようになります。 国家レベルでは、このアプリが助成金の決定をサポートする可能性や、がん治療にアクセスしづらいエリアまたはアクセスできないエリアがこのアプリによって特定される可能性があります。 地理的なアプローチからこのデータを共有することで、医療提供の効率が向上するだけでなく、そのコミュニティ独自の課題や要件に対応するように、提供するサービスが調整されるようになります。 このアプリにより、米国のがんセンター プログラムは、がん患者をサポートし治療するというミッションにおいて、効果的な特化型のアプローチを採用できます。