新型コロナウイルス感染症のアプリのための開発者ツール

※ この記事は、米国 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 の場合、更新した主要部分は次のとおりです。

// OSMのグレイ ベクター ベースマップを URL から取得します:
// https://www.arcgis.com/home/item.html?id=1932e7d4432d45dabc0d4d13109c1f09
var basemap = new Basemap({
  baseLayers: [
    new VectorTileLayer({
      portalItem: {
        id: "1932e7d4432d45dabc0d4d13109c1f09"
      }
    })
  ]
});

var map = new Map({
  basemap
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

アウトプットはこちらを参照してください。

データのホストと追加

要約：データのアップロード、スタイルとポップアップの設定、そしてアプリへの追加のチュートリアル。サービスのベスト プラクティス

無償の200MB のベクターデータのホスティングを活用しましょう！このチュートリアルでは CSV、 GeoJSON、そしてその他のデータソースを UI または Python を使ってアップロードします。アップロードしたら、このチュートリアルを通じて、アプリに追加することが可能な RESTful なサービスを作成します。

サービスは編集、動的なタイル表示、空間または統計的なクエリなどをサポートしています。これらのサービスは一日に数十億のリクエストを処理することがきますので、重要な運用の実践方法についてはこのブログを参照してください。アプリでは、レイヤーのスタイルの設定や (チュートリアル) 、クリックされたときのポップアップにデータを表示させる (チュートリアル) ことができます。

デモとして、この Unacast のソーシャル・ディスタンシングのデータを所有しており、アップロードしたと仮定しましょう。主要なコードの更新部分は次のようになります。

// Unacast social distancing layer
// pulled from REST API link (bottom right) of item page
// https://www.arcgis.com/home/item.html?id=ab72fb3e9bf24d9594f0b942718bffeb
var layer = new FeatureLayer({
  url: 'https://services.arcgis.com/DO4gTjwJVIJ7O9Ca/arcgis/rest/services/Unacast_Latest_Available__Visitation_and_Distance_/FeatureServer',
  renderer: {
    type: 'unique-value',
    field: 'grade_distance',
    defaultSymbol: {type: 'simple-fill', outline: {color: 'gray', width: '0.1px'}},
    legendOptions: {title: 'Grade'},
    uniqueValueInfos: [{
      value: 'A',
      symbol: {type: 'simple-fill', color: '#0070ff', outline: {color: 'gray', width: '0.1px'}}
    }, {
      value: 'B',
      symbol: {type: 'simple-fill', color: '#bed2ff', outline: {color: 'gray', width: '0.1px'}}
    }, {
      value: 'C',
      symbol: {type: 'simple-fill', color: '#e6e600', outline: {color: 'gray', width: '0.1px'}}
    }, {
      value: 'D',
      symbol: {type: 'simple-fill', color: '#ffaa00', outline: {color: 'gray', width: '0.1px'}}
    }, {
      value: 'F',
      symbol: {type: 'simple-fill', color: '#e60000', outline: {color: 'gray', width: '0.1px'}}
    }],
  },
  popupTemplate: {
    title: "{county_name}",
    content: "Unacast's social distancing grade is {grade_distance}"
  }
});

var map = new Map({
  basemap,
  layers: [layer]
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

アウトプットはこちらを参照してください。

注：個別にレイヤーを追加、スタイリングする代わりに、ArcGIS Online の Map Viewer を使用して Web マップを作成することも可能です。Web マップはアプリにコード 1 行で追加することができます。詳細はWeb マップのチュートリアル、レイヤーのスタイル設定のチュートリアル、そしてWeb マップを追加するチュートリアル^※を参照してください。

※ 日本語で Web マップの作成・表示に関するブログ記事も公開しているのでご参照ください。

信頼性の高いデータの追加

要約：データ ソースと上記と同じチュートリアル

コロナウイルス対策の一貫として、数多くの信頼性の高い地理空間データが全世界の GIS コミュニティや信頼できるパートナーから提供されています。これらの中には上記で紹介した Unacast のデータや、ジョンズ・ホプキンス大学の現在の COVID-19 の発生件数、Definitive Healthcare の病床数などが含まれています。これらのデータセットはここから検索し、上記のチュートリアルと同じ手順であなたのマップに追加することができます。

注：これらのデータは多くの業務の中で価値を付加することができ、クライアントのアプリから直接呼び出す必要はありません。REST API に直接アクセスしたり、Python と Pandas を使ってデータ処理のパイプラインを作成したりすることもできます (ガイド)。

ユーザーエクスペリエンスを組み込む

要約：検索とルート案内のチュートリアル、その他の機能

データとレイヤーは、アプリの中でその他の位置情報サービスや解析処理と組み合わせることで、情報量が多く説得力のあるソリューションを構築することができます。検索とルート案内機能^※、そして強力なビジュアライゼーションの作成に関するチュートリアルがあるのでご参照ください。

※ 訳注：日本語でルート案内に関するブログ記事も公開しているのでご参照ください。

ここではユーザーが場所を発見できるようにするための Search と凡例を追加するだけにとどめますが、追加のアイディアのために最後の「追加のリソース」もチェックしてください。主なスニペットは次のとおりです。

var searchWidget = new Search({
  view
});
view.ui.add(searchWidget, 'top-right');

var legendWidget = new Legend({
  view
});
view.ui.add(legendWidget, 'bottom-right');‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

全てのアウトプットはこちらを参照してください。

追加のリソース

これが最終的なアウトプットです！以下は、もしあなたがより深く学びたい場合に私がおすすめするいくつかのリソースです。

Esri の COVID-19 resources と ArcGIS for Developers resources ページ
GitHub 上のサンプルアプリ– これらはアプリに追加することができる API のその他の機能と対話的な UX に焦点を当てています (フィードバックやプルリクエスト歓迎です！)。
構成可能なアプリ– もしすぐにアプリを作成する必要があったり、デバッグのことを考えたりしたくなければ、Esri はたくさんの構成可能なアプリのビルダーとテンプレートを提供しています。
Disaster response program – もしあなたが追加のリソースや支援が必要であれば、Esri は公衆衛生当局や他の組織を緊急の GIS 支援で支援します^※。
※ 国内においても同様に無償の支援プログラムを展開しています。
開発ブログとチュートリアル^※: 全ての開発チュートリアル | Google Maps からの移行 | スマートマッピングのブログ | クライアントサイドのクエリのブログ
※ 日本語でも Web アプリ開発のブログをシリーズ記事として公開しています。また、上記Google Maps からの移行については翻訳記事を公開しています。
カートグラフィーのブログ: | Mapping Coronavirus, responsibly | Improve Your COVID-19 Cases Map | Better colors for better mapping

新型コロナウイルス感染症のアプリのための開発者ツール

新型コロナウイルス感染症のアプリのための開発者ツール

Web 開発