Skip To Content

アプリの作成

前回のレッスンでは、人口統計データを追加してスタイル設定することで Web マップを完成させ、車のない世帯のパーセンテージが高い国勢調査地区を示しました。このレッスンでは、そのマップを使用して Web アプリを作成します。Web アプリは、カスタマイズされたユーザー インターフェイスであり、マップの外観を改善したり、機能を追加 (または削除) したり、マップを他のメディアと統合したりできます。マップをどのように表示したいかに応じて、構成可能なさまざまなテンプレートの中から選択できます。 マップを一般ユーザーに効果的に表示したいだけなので、[基本ビューアー] アプリ テンプレートをごくわずかの標準ナビゲーション ツールで構成します。また、アプリのアイテム詳細を編集して、アプリの目的やデータ ソースに関する適切な情報を含むようにします。

Web アプリの作成

Web アプリを作成するには、最初にマップを共有する必要があります。すでにマップを共有しているため、再度共有する必要はありません。 ただし、[共有] ウィンドウから構成可能なアプリ テンプレートのリストにアクセスします。

  1. 必要な場合は、[Houston Evacuation Map] を開きます
  2. リボン上で [共有] ボタンをクリックします。

    このマップは、すべてのユーザーと共有されています。

  3. [Web アプリの作成] をクリックします。

    [Web アプリの作成] ボタン

    [新しい Web アプリの作成] ウィンドウが開きます。ここでは、テンプレートのギャラリーが目的や機能に基づいてカテゴリ別に整理されています。マップに注目が集まるアプリにします。また、凡例、ポップアップ情報、マップの説明を表示したいと思います。これらの目的で、[基本ビューアー] アプリを使用します。

  4. [マップの紹介] タブをクリックします。

    [マップの紹介] タブ

    シンプルなユーザー インターフェイスを提供するアプリ テンプレートのリストが表示されます。

    注意:

    組織アカウントを使用しており、組織によってカスタム ギャラリーが構成されている場合は、このタブに同じテンプレートが表示されないことがあります。その場合は、検索ボックスを使用して [基本ビューアー] テンプレートを検索できます。

  5. [基本ビューアー] アプリをクリックします。次に、[Web アプリの作成] をクリックします。

    アプリを構成する前に、そのタイトル、タグ、サマリーを指定する必要があります。デフォルトでは、アプリはその作成に使用される Web マップと同じ情報を持ちます。タイトルを変更し、マップ上で強調したい内容をよりわかりやすく表現するようにして、その他のパラメーターはそのままにしておきます。

  6. [タイトル] を「At-Risk Population in Houston」に変更します。
  7. [Done] をクリックします。

    アプリが、構成可能な状態で開きます。

    デフォルトの構成可能なアプリ

アプリの構成

次に、マップのストーリーがユーザーにうまく伝わるように、アプリのプレゼンテーションの要素を変更します。構成可能なパラメーターの 4 つのタブが用意されています。デフォルトのタブは [General (一般)] です。このタブには、タイトルとサブタイトルのオプションと、マップを説明するための詳細のオプションが含まれています。すでにタイトルを指定したため、サブタイトルから始めます。

  1. [Subtitle (サブタイトル)] に、「Census tracts that may be vulnerable during a hurricane」と入力します。

    アプリの詳細は、アプリに表示される長い説明です。

  2. [Details (詳細)] の横にある [Edit (編集)] をクリックします。次のテキストを入力 (またはコピーと貼り付け) します。

    This map shows evacuation routes and demographic data by census tract for Houston, Texas. (このマップには、避難ルートと人口統計データがヒューストンの国勢調査地区ごとに示されています。) The darker blue tracts have a higher percentage of households without a vehicle. (青色が濃い地区ほど、車のない世帯のパーセンテージが高くなっています。) This pattern helps answer the question: Where in Houston should we provide evacuation assistance during a hurricane? (「ハリケーンの際にヒューストンのどの場所に避難支援を提供する必要がありますか?」という質問への回答に、このパターンが役立ちます。)

    ヒント:

    テキストをコピーして貼り付けると、書式設定されたテキストが表示されることがあります。この書式を削除するには、テキストをハイライト表示して、ツールバーの [書式の解除] ボタンをクリックします。

    [General (一般)] タブのパラメーター

  3. [Theme (テーマ)] タブをクリックします。

    このタブには、さまざまなユーザー インターフェイス要素の色を指定するためのオプションが用意されています。お気軽にさまざまな色を試し、お好きな色を選択してください。次の手順では、お勧めの色を指定します。

  4. [Header color (ヘッダーの色)] で、下から 2 行目の右から 4 列目にある青色 (#0084A8) を選択します。

    [Header color (ヘッダーの色)] オプション

  5. [Header text color (ヘッダーのテキスト色)][Button icon color (ボタン アイコンの色)] で、一番明るいグレー (#EBEBEB、2 行目の 1 列目) を選択します。
  6. [Panel background (パネルの背景)] で、2 番目に明るいグレー (#D6D6D6、3 行目の 1 列目) を選択します。
  7. [Panel text color (パネルのテキスト色)] で、黒 (#1A1A1A) を選択します。

    [Theme (テーマ)] タブのパラメーター

  8. マップの下で、[保存] をクリックします。

    選択したパラメーターが保存され、アプリに表示されます。次に、アプリに表示するナビゲーション ツールを構成します。

  9. [Options (オプション)] タブをクリックします。

    デフォルトでは、ベースマップ ギャラリー、ブックマーク、マップの詳細、共有ツールが選択されています。アプリには、マップ レイヤーのリストも含まれています。ユーザー エクスペリエンスを簡素化し、マップのコンテンツに注目が集まるようにするため、ベースマップ ギャラリーとブックマークのオプションをオフにします。また、使用可能なオプションのうち、凡例を含めます。

  10. [Basemap Gallery (ベースマップ ギャラリー)] ボックスと [Bookmarks (ブックマーク)] ボックスをオフにします。[Legend (凡例)] ボックスをオンにします。

    [Legend (凡例)] ボックス

    最後のタブ [Search (検索)] には、ユーザーがマップ内の特定の場所を検索するためのオプションが用意されています。このアプリでは、この機能は必要ないためオフにします。

  11. [Search (検索)] タブをクリックします。
  12. [Enable search tool (検索ツールの有効化)] をオフにします。

    [Enable search tool (検索ツールの有効化)] ボックス

  13. [Save (保存)] をクリックします。

    最終的なアプリ構成のプレビュー

  14. プレビューで、アプリの機能をテストします。マップを操作して、ユーザー インターフェイスのさまざまなボタンをクリックします。
  15. 問題がなければ、[閉じる] をクリックします。

    アプリの詳細ページが開きます。

アイテムの詳細の編集

アプリが完成しました。次に、その詳細を編集して、ユーザーにマップやデータに関する有意な情報を提供するようにします。この情報はメタデータと呼ばれ、どのマップおよびアプリでもこの情報を持つことが重要です。[アイテム情報] バーは、高品質なアイテム情報に向けた進捗を示します。また、実行できる最も重要な改善も示します。

  1. [アイテムの情報][最初の改善] の横にある [サマリーの追加] をクリックします。

    アイテム情報の改善

    [サマリーの編集] ボックスがアクティブになります。

  2. 次のテキストを入力 (またはコピーと貼り付け) します。

    This web app highlights areas in need of assistance during a hurricane evacuation in Houston, Texas. (この Web アプリは、テキサス州ヒューストンでのハリケーン避難の際に支援を必要とするエリアを強調表示しています。)

    [サマリーの編集] ボックス

  3. [Save (保存)] をクリックします。

    [アイテム情報] バーが更新され、追加した情報が反映されます。次に、説明を追加するように勧められます。

  4. [最初の改善] の横にある [より長いサマリーを追加] をクリックします。

    [説明の編集] ボックスがアクティブになります。説明はサマリーよりも詳細で掘り下げたものとなる必要があります。アプリの目的やアプリが表示するデータの種類だけでなく、アプリの使用方法やアプリが作成された方法についての説明も必要となります。

  5. 次のテキストを入力 (またはコピーと貼り付け) します。

    This app shows evacuation routes and demographic data by census tract for Houston, Texas. (このアプリには、避難ルートと人口統計データがヒューストンの国勢調査地区ごとに示されています。) The darker blue tracts have a higher percentage of households without a vehicle. (青色が濃い地区ほど、車のない世帯のパーセンテージが高くなっています。) This pattern helps answer the question: Where in Houston should we provide evacuation assistance during a hurricane? (「ハリケーンの際にヒューストンのどの場所に避難支援を提供する必要がありますか?」という質問への回答に、このパターンが役立ちます。)

    Use the Layers and Legend tools to learn more about the data shown in the map. ([レイヤー] ツールおよび [凡例] ツールを使用して、マップに表示されるデータの詳細を確認できます。) Click individual census tracts to see pop-up information, including the percentage of households without a vehicle. (個々の国勢調査地区をクリックすると、車のない世帯のパーセンテージなどのポップアップ情報が表示されます。)

    The map in this app contains a Living Atlas layer of Houston evacuation routes and a layer of Houston demographic data. (このアプリのマップには、ヒューストンの避難ルートの Living Atlas レイヤーと、ヒューストンの人口統計データのレイヤーが含まれています。) The demographic layer is styled using an Arcade expression that calculates the percentage of households without a vehicle. (人口統計レイヤーは、車のない世帯のパーセンテージを計算する Arcade 式を使用してスタイル設定されています。) This information is also provided in pop-ups. (この情報はポップアップでも提供されます。)

  6. [Save (保存)] をクリックします。

    [アイテム情報] の進行状況バーによって、アプリのアイテム情報が完成に近づいていることが示されます。

  7. [アイテム情報] の横にある [詳細] をクリックします。

    改善のヒントの完全なリストが表示されます。[利用規約の追加] を除き、すべてを完了しました。

    展開された [アイテム情報] セクション

  8. [利用規約の追加] をクリックします。

    [利用規約の編集] ボックスがアクティブになります。データは地方政府および連邦政府の当局から取得されたもので、パブリック ドメインであるため、利用規約はありません。

  9. None. (ありません。) Public domain data. (パブリック ドメイン データです。)」と入力します。[Save (保存)] をクリックします。

    次に、デフォルトのサムネイル画像を、アプリをより適切に示す画像に置き換えます。これによって、ユーザーがアプリを開く前にアプリの内容を予測できるようになります。通常、サムネイルは、マップまたはアプリの JPEG、PNG、または GIF 画像で、600 x 400 ピクセルのサイズである必要があります。

    Print Screen キーまたは画像編集ソフトウェアで画像をキャプチャできますが、このレッスンではサムネイルとして使用するサンプル画像が提供されます。

  10. サンプル画像をコンピューターに保存します。
  11. [サムネイルの編集] をクリックします。

    [サムネイルの編集] ボタン

  12. [サムネイルのアップロード] ウィンドウで、[ファイルの選択] (またはお使いのブラウザーの対応するコマンド) をクリックします。
  13. サンプル画像を保存した場所を参照します。画像をダブルクリックします。

    画像が [サムネイルのアップロード] ウィンドウに追加されます。画像の配置またはズームを変更できますが、画像は推奨サイズであるため、変更する必要はありません。

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

    サムネイルが追加されます。詳細ページが完成しました。アプリの URL をコピーして、アプリを見せたいユーザーと共有できます。

これらのレッスンでは、テキサス州ヒューストンのハリケーン避難ルートのレイヤーでマップを作成しました。次に、国勢調査地区ごとの人口統計データを追加し、スマート マッピング、ポップアップ、式を使用して、車両所有率が低いエリアを強調しました。マップに示された空間パターンは、ハリケーンの際に避難支援を最も必要とする場所を特定するために役立ちました。最後に、マップを対話型の Web アプリにして、結果を共有しました。

次は何を学びますか? ArcGIS Online でのマップ作成についてより詳しく学習するには、「人口統計解析を用いた子供の貧困対策」または「警察支援を目的とした犯罪パターンの追跡」をお試しください。空間解析や空間的問題の解決についてより詳しく学習するには、「ハワイ島の火山避難所へのアクセス分析」または「コロラド州の地滑りの危険性がある地域の特定」をお試しください。Web アプリについてより詳しく知りたい場合は、「はじめてのストーリー マップ」または「オソで発生した地滑り - その前後の状況」をお試しください。

その他のレッスンについては、「Learn ArcGIS Lesson ギャラリー」をご参照ください。