※ この記事は、米国 Esri 社のブログ記事「Developer Tools for COVID-19 Apps」を翻訳したものです。
もしあなたが、斬新な可視化や対応支援をおこなうような新型コロナウイルス感染症 (COVID-19) のアプリを開発しているのなら、Esri はあなたのソリューションに利用することができる無償のロケーション サービスと SDK の一式を提供します。
このブログは ArcGIS for Developers を通じて使うことができるいくつかの重要なサービス (OpenStreetMap (OSM) ベースマップとスタイル設定、、そしてデータ ホスティング) について、シンプルなマッピング アプリを作成する観点から紹介します。これらのサービスを使用して利益を得る、または200MB以上のデータをホストする場合を除いて、無償で利用することができます (詳細※)
※ 具体的には ArcGIS Online（開発者向け）Subscription で毎月無償提供される50クレジットの範囲内でデータ ホスティングを含む各種サービスを利用できます。自動で有償プランに切り替わることはありません。サービスの利用によるクレジットの消費量については ArcGIS Online のページを参照ください。
はじめるには
要約 (主要なリンクのみまとめています)：アカウント作成とアプリの骨組み部分を作成するチュートリアル
最初のステップは無償の開発者アカウントを作成※することです。このアカウントはマップのスタイル設定の管理、データのホスト、セキュアなサービスのためのトークンの生成などに使用されます。次に、このチュートリアルに従って基本的な Web アプリの骨組みを作成しましょう。
※ 開発リソース集の開発者アカウントの作成で日本語のガイドを掲載しています。
このブログの残りの部分では、JavaScript の Web アプリについて紹介します。しかし、リンクしているチュートリアルではその他のプログラミング言語とプラットフォームにも共通するコンセプトをカバーしています。
これがアウトプットです (私達はアメリカ合衆国を俯瞰できるように中心点を変更しています)。
ベースマップの選択
要約：OSM と イコール アース図法のマップ ギャラリー、スタイル設定とアプリへの追加のチュートリアル
次はベースマップを更新しましょう。このリンク先では、OSM データから作成された高速描画のが豊富に提供されています。このチュートリアルを行うことで、これらのマップのスタイル設定をあなたの創造的なセンスに合うように変更することができます。
私の同僚の John Nelson も、いくつかの素晴らしいイコール アース図法のベースマップを公開しています。これらは COVID-19 の場合のように人口に基づいた可視化をする際により適切に表現することができます (詳細)。
ベースマップを選んだら、アイテムをクリックし、アイテム ID を URL から取得して、このチュートリアルに従ってあなたのアプリに追加しましょう。JavaScript の場合、更新した主要部分は次のとおりです。
<SPAN class="comment token">// OSMのグレイ ベクター ベースマップを URL から取得します:</SPAN>
<SPAN class="comment token">// https://www.arcgis.com/home/item.html?id=1932e7d4432d45dabc0d4d13109c1f09</SPAN>
<SPAN class="keyword token">var</SPAN> basemap <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Basemap</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
baseLayers<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>
<SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">VectorTileLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
portalItem<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"1932e7d4432d45dabc0d4d13109c1f09"</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">]</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
basemap
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>アウトプットはこちらを参照してください。
データのホストと追加
要約：データのアップロード、スタイルとポップアップの設定、そしてアプリへの追加のチュートリアル。サービスのベスト プラクティス
無償の200MB のベクター データのホスティングを活用しましょう！このチュートリアルでは CSV、 GeoJSON、そしてその他のデータ ソースを UI または Python を使ってアップロードします。アップロードしたら、このチュートリアルを通じて、アプリに追加することが可能な RESTful なサービスを作成します。
サービスは編集、動的なタイル表示、空間または統計的なクエリなどをサポートしています。これらのサービスは一日に数十億のリクエストを処理することがきますので、重要な運用の実践方法についてはこのブログを参照してください。アプリでは、レイヤーのスタイルの設定や (チュートリアル) 、クリックされたときのポップアップにデータを表示させる (チュートリアル) ことができます。
デモとして、この Unacast のソーシャル・ディスタンシングのデータを所有しており、アップロードしたと仮定しましょう。主要なコードの更新部分は次のようになります。
<SPAN class="comment token">// Unacast social distancing layer</SPAN>
<SPAN class="comment token">// pulled from REST API link (bottom right) of item page</SPAN>
<SPAN class="comment token">// https://www.arcgis.com/home/item.html?id=ab72fb3e9bf24d9594f0b942718bffeb</SPAN>
<SPAN class="keyword token">var</SPAN> layer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'https://services.arcgis.com/DO4gTjwJVIJ7O9Ca/arcgis/rest/services/Unacast_Latest_Available__Visitation_and_Distance_/FeatureServer'</SPAN><SPAN class="punctuation token">,</SPAN>
renderer<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'unique-value'</SPAN><SPAN class="punctuation token">,</SPAN>
field<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'grade_distance'</SPAN><SPAN class="punctuation token">,</SPAN>
defaultSymbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'simple-fill'</SPAN><SPAN class="punctuation token">,</SPAN> outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'gray'</SPAN><SPAN class="punctuation token">,</SPAN> width<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'0.1px'</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
legendOptions<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'Grade'</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
uniqueValueInfos<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
value<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'A'</SPAN><SPAN class="punctuation token">,</SPAN>
symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'simple-fill'</SPAN><SPAN class="punctuation token">,</SPAN> color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'#0070ff'</SPAN><SPAN class="punctuation token">,</SPAN> outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'gray'</SPAN><SPAN class="punctuation token">,</SPAN> width<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'0.1px'</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
value<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'B'</SPAN><SPAN class="punctuation token">,</SPAN>
symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'simple-fill'</SPAN><SPAN class="punctuation token">,</SPAN> color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'#bed2ff'</SPAN><SPAN class="punctuation token">,</SPAN> outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'gray'</SPAN><SPAN class="punctuation token">,</SPAN> width<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'0.1px'</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
value<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'C'</SPAN><SPAN class="punctuation token">,</SPAN>
symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'simple-fill'</SPAN><SPAN class="punctuation token">,</SPAN> color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'#e6e600'</SPAN><SPAN class="punctuation token">,</SPAN> outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'gray'</SPAN><SPAN class="punctuation token">,</SPAN> width<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'0.1px'</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
value<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'D'</SPAN><SPAN class="punctuation token">,</SPAN>
symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'simple-fill'</SPAN><SPAN class="punctuation token">,</SPAN> color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'#ffaa00'</SPAN><SPAN class="punctuation token">,</SPAN> outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'gray'</SPAN><SPAN class="punctuation token">,</SPAN> width<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'0.1px'</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
value<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'F'</SPAN><SPAN class="punctuation token">,</SPAN>
symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'simple-fill'</SPAN><SPAN class="punctuation token">,</SPAN> color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'#e60000'</SPAN><SPAN class="punctuation token">,</SPAN> outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'gray'</SPAN><SPAN class="punctuation token">,</SPAN> width<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'0.1px'</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
popupTemplate<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"{county_name}"</SPAN><SPAN class="punctuation token">,</SPAN>
content<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Unacast's social distancing grade is {grade_distance}"</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
basemap<SPAN class="punctuation token">,</SPAN>
layers<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>layer<SPAN class="punctuation token">]</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>アウトプットはこちらを参照してください。
注：個別にレイヤーを追加、スタイリングする代わりに、ArcGIS Online の Map Viewer を使用して Web マップを作成することも可能です。Web マップはアプリにコード 1 行で追加することができます。詳細はWeb マップのチュートリアル、レイヤーのスタイル設定のチュートリアル、そしてWeb マップを追加するチュートリアル※を参照してください。
※ 日本語で Web マップの作成・表示に関するブログ記事も公開しているのでご参照ください。
信頼性の高いデータの追加
要約：データ ソースと上記と同じチュートリアル
コロナ ウイルス対策の一貫として、数多くの信頼性の高い地理空間データが全世界の GIS コミュニティや信頼できるパートナーから提供されています。これらの中には上記で紹介した Unacast のデータや、ジョンズ・ホプキンス大学の現在の COVID-19 の発生件数、Definitive Healthcare の病床数などが含まれています。これらのデータセットはここから検索し、上記のチュートリアルと同じ手順であなたのマップに追加することができます。
注：これらのデータは多くの業務の中で価値を付加することができ、クライアントのアプリから直接呼び出す必要はありません。REST API に直接アクセスしたり、Python と Pandas を使ってデータ処理のパイプラインを作成したりすることもできます (ガイド)。
ユーザー エクスペリエンス を組み込む
要約：検索とルート案内のチュートリアル、その他の機能
データとレイヤーは、アプリの中でその他の位置情報サービスや解析処理と組み合わせることで、情報量が多く説得力のあるソリューションを構築することができます。検索とルート案内機能※、そして強力なビジュアライゼーションの作成に関するチュートリアルがあるのでご参照ください。
※ 訳注：日本語でルート案内に関するブログ記事も公開しているのでご参照ください。
ここではユーザーが場所を発見できるようにするための Search と凡例を追加するだけにとどめますが、追加のアイディアのために最後の「追加のリソース」もチェックしてください。主なスニペットは次のとおりです。
<SPAN class="keyword token">var</SPAN> searchWidget <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Search</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
view
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>searchWidget<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'top-right'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> legendWidget <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Legend</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
view
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>legendWidget<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'bottom-right'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>全てのアウトプットはこちらを参照してください。
追加のリソース
これが最終的なアウトプットです！以下は、もしあなたがより深く学びたい場合に私がおすすめするいくつかのリソースです。
