タイミングいいのか悪いのかわかりませんが、新型コロナウィルスの影響でしばらくしばらく千葉県に引きこもることになりそう・・・って所から今回のブログネタを思いつきました。

オープンソースで公開された東京都の新型コロナウィルス感染症対策サイトが話題になりました:
https://stopcovid19.metro.tokyo.lg.jp/

2020032601


オープンソースで公開されていることに加え、扱うデータもオープンデータを活用していることで他の自治体へも活用される動きが広がっています。スピード感も含めオープンソースやオープンデータはこういう時に強いですよね。


そんな流れに触発されたこともないわけではないのですが、自分もオープンデータを使ったサービスを作れないだろうか、それもできれば比較的得意としている地図情報を使う形で、、、といった経緯の中で1つアイデアを思いついて簡単な実装までしてみました。

技術的な説明は後述しますが、まずは動いているサービスをご覧ください。 PC またはスマホのブラウザで以下のサイトにアクセスしてください:
https://dotnsf.github.io/geojsonjapan/

2020032501


上記のような東京を中心とした日本地図が画面いっぱいに表示されます。画面左上の+ーで拡大縮小したり、マウスのドラッグ(スマホの場合はピンチイン/アウトやスクロール)で表示位置を変更することができます。

その上で、日本地図の陸地部分のどこかをタップすると、そのタップされた地点がどの都道府県に属しているのかがポップアップで表示される、というものです(下図は東京都の皇居付近をタップした時の様子):
2020032502


サービスとしてはただこれだけなんですが、そこそこの精度を実現しています。例えば千葉県の、チーバ君でいえば鼻の先端部分のこのあたり、、、
2020032503


千葉県民であれば常識だと思いますが、千葉県は四方を太平洋、東京湾、利根川、そして江戸川に囲まれていて、川にかかる橋を除けば全ての県境が水の上、と思われています。実際ほぼその通りなんですが、上記部分を拡大してみるとこんな感じになっています:
2020032504


向かって右側が利根川、左側が江戸川で、この2つに挟まれた三角州部分。そのわずかな先端部分だけはなぜか千葉県ではなく茨城県になっているのでした。そういった細かな県境がこのサービスではどうなっているかというと・・・ ちゃんと対応しています:
2020032505


また千葉県に関して言えば、富津岬の先にある2つの海堡も含めて対応しています。千葉県に限らず、そこそこ細かな所までは対応した都道府県判定ができていると思っているサービスです:
2020032506


もともとは「ジオロケーションを使って利用者の位置情報を取得して、香川県からのアクセスだとわかったら・・・ (^^; 」などと考えながらはじめた取り組みだったりしたのですが、対応範囲を日本の全都道府県にして、更に地図情報を連携させた結果がこういう形になりました。これ自体が何らかの直接の役に立つものではないと考えていますが、後述する技術要素も含めて今後更に精度を高めるためのカスタマイズをしたり、今後は「地形から場所を推測する」なんてことにも挑戦したいと考えていたりします。


以下、このサービスを実現するにあたっての技術要素の紹介です。興味ある方は引き続きご覧ください。

まずこのウェブサービスアプリケーションはオープンソースとして公開しています。興味ある方はこちらもどうぞ(実質的には index.html だけで実現しています):
https://github.com/dotnsf/geojsonjapan


次にこのサービスの URL (https://dotnsf.github.io/geojsonjapan/)を再確認いただきたいです。わかる人はわかると思うのですが、Github Pages を使って公開しているサービスです。要は Github のリポジトリを使い、静的なファイル(index.html)をウェブサーバーで表示することで、このサービスは成立しています。つまり外部 API 連携を含めたバックエンド機能を一切使わずに実現しています。では改めてその制約条件の上でどのような仕組みやロジックでこのサービスを実現しているか、わかりますか?


このサービスを実現する上で、以下のような実装をしています:
  1. 地図情報に OpenStreetMap 、地図操作ライブラリに Leaflet.js を使って、ブラウザ上に日本地図を表示する
  2. 各都道府県ごとの geoJSON ファイルを使って、日本地図上に各都道府県ごとの透明なレイヤーを重ねる。その際にレイヤーがタップされた場合に都道府県名がポップアップされるようなハンドラを定義する
  3. 各都道府県ごとの geoJSON ファイルはオープンデータとして提供されているものから作ったファイル(japan.geojson)を利用する。index.html からこの geoJSON ファイルを AJAX で取得して利用する

つまりオープンソースのツールと、オープンデータだけで作ったサービスということになります。

geoJSON ファイルについては補足しておきます。geoJSON とはこの地球上における緯度・経度、およびこれらの配列を用いて点、線、多角形、多角形の組み合わせを JSON ベースで表現する標準フォーマットです。上述の Leaflet.js も geoJSON に対応しており、関数一発で geoJSON のレイヤを地図上に追加することができたり、そのレイヤに対するクリックイベントハンドリングなどが実現できます。

今回公開したこのサービスでは、上述のように国土地理院から提供されている地球地図日本のデータを geoJSON ファイル化したものを使っています。このファイル(japan.geojson)を index.html からAJAX を使って読み込み、各都道府県の feature データごとに Leaflet.js の geoJSON メソッドでレイヤに追加しています(同時に bindPopup メソッドでレイヤがタップされた時の処理も定義しています)。オープンソースとオープンデータだけでここまで作れちゃうんですねー。

なお都道府県レベルではなく市区町村レベルで同様のことができるかというと、国土交通省の行政区域データを使って作られたものは存在しているので、仕組み上はそのままでもできないことはないと思います。一方で市区町村レベルとなるとデータ量がかなり膨大となってしまうため、そのままデータだけ変えて実現してしまうと通信料(量だけでなく料)の問題が発生しかねないと思っています。

一方このデータの精密度について、充分であるとは思いますが、まだまだ厳密性に欠ける部分もあります。例えばいわゆる「飛び地」データは僕が知る限りで試した範囲では存在していませんでした(つまり未対応)。例えば有名な所では埼玉県に囲まれた東京都練馬区西大泉町はこのデータでは「埼玉県」扱いになっています:
2020032602


また実際の geoJSON データを地図上に重ねてマッピングしてみると、そこまで正確とは言えない内容でした(※そもそも地図データ側がどこまで正確か、という問題もあるとは思っています):
2020032507

↑上述の富津岬部分の geoJSON データ、結構荒い・・・


ただ大事なことは API のようなブラックボックスではなく、ここまでの基礎情報がオープンデータとして提供されており、オープンソースのツールや標準化によってここまで実現でき、必要であれば自分で手元のデータを改良(カスタマイズ)して使うこともできるような形で実現できている、という点です(geoJSON は飛び地のようなデータにも対応したフォーマットです)。オープンデータとフロントエンド機能だけでここまで実現できるようになっていることには、あらためて位置情報サービスの人気や広がりを意識するし、今後のさらなる広がりにも期待できます。