オープンデータ × オープンソースGIS ～WEB上でのインタラクティブ可視化手法について～

テクニカルカンファレンス２０１４

株式会社ノーザンシステムサービス

中洞 友希

自己紹介

名前 中洞 友希 (なかほら ゆき) 出身 岩手県宮古市 会社 株式会社ノーザンシステムサービス 入社２年目 WEB上でのデータの可視化とGISについて日々研究中。

この分野でトップに上り詰めることを目標に頑張ってます！

1．開発に至った経緯 （1/2）

データを集計して地図で表示したい。

WEB上でインタラクティブに分析

できるようにしてね！

あとIE7でも動くようにして下さい☆

お客様

＿人人人人人人＿ ＞ I E 7 ＜ ￣^Y^Y^Y^Y^Y^￣

1．開発に至った経緯 （2/2）

入社して初めてのシステム開発！(*´∇｀*)

上司の和山にサポートしてもらいながら

開発を行いました。

・・・っていう案件があるんだけど、

クライアント側の実装をやって

みない？？ 和山

2．オープンデータの概要 （1/4）

なぜオープンデータなのか？

GoogleMapの商用版はいろいろと制約がある。

地図は印刷では使えない

→資料として配布できない

領土問題がある

25000以上のリクエストは有料

2．オープンデータの概要 （2/4）

オープンデータとは・・・

誰でも使えて、 再利用・再配布が可能であり、 利用しやすい形で公開されている、 行政機関などが保有する公共データ のこと。

7

行政の透明性・信頼性の向上 経済の活性化・行政の効率化

2．オープンデータの概要 （3/4）

目的は？

地理空間情報 , 防災情報 , 統計情報, 交通情報,観光情報など

XML , CSV , JSON, RDF など、コンピュータが判読しやすい形式

どんなデータがあるの？

どんなデータの形式？

8

2．オープンデータの概要 （4/4）

使用したオープンデータ 小地域shpデータ (国勢調査) 500mメッシュデータ (国勢調査) 世帯数・高齢化率データ (国勢調査) 男女5歳階級別人口shpデータ (国勢調査) 保険料データ (介護事業状況報告) 将来推計人口データ (社人研) 道路データ (国土数値情報) 介護事業所データ (介護サービス情報公表システム)

3．オープンソースGISの概要(1/2)

そもそもGISとは・・・

： Geographic

： Information

： System

地理情報システム

位置に関する情報を持つ地理データを管理・加工し、

視覚的に表示することで分析を可能にする技術。

G

I

S

3．オープンソースGISの概要(2/2)

使用したライブラリ

OpenLayers WEBブラウザで地図データを表示するJavaScriptライブラリ。 (http://openlayers.org/)

PostGIS PostgreSQLで地理空間情報を扱う為の拡張のライブラリ。 (http://postgis.net/)

Mapnik デスクトップ及びサーバー用の地図描画ツールキット。 (http://mapnik.org/)

GDAL ラスターデータフォーマット用ライブラリ。 (http://www.gdal.org/)

11

4．構築したWEBアプリケーションの主な機能

グラフ&地図の連動による

オープンデータの視覚化

生活圏域の設定

介護事業所のカバレッジ分析

4-1．グラフ＆地図の連動による

オープンデータの視覚化

地図データ ： 小地域shpデータ

グラフデータ ： 世帯数・高齢化率・保険料・

将来推計人口データ

amCharts (JavaScript)

OpenLayers (JavaScript)

使用したオープンデータ / ライブラリ

オープンデータ

オープンソース

GIS

その他

ライブラリ

2014/11/25

OpenLayersで地図を表示する

{ "type": "FeatureCollection",

"features": [

{"type": "Feature",

"geometry": {

"type": "Polygon",

"coordinates": [

[ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0],[100.0, 1.0] ]

},

"properties": {

"prop":"value0"

}

},

{"type": "Feature",

"geometry": {

"type": "Polygon",

"coordinates": [

[ [101.0, 0.0], [101.0, 0.0], [101.0, 1.0],[100.0, 1.0],]

]

},

"properties": {

"prop": "value1"

}

}

]

}

GeoJSON

OpenLayers [ベクターレイヤー]

PostGIS

amChartsとは？ JavaScriptのグラフ作成ライブラリ。

有償版($140)と無償版(テキストリンク有)の2つが提供されている。 (http://www.amcharts.com/)

amChartsでグラフを描画する (2/3)

amChartsを選んだ理由 IE7で動作する

Flashを使用せずJavaScriptのみで動く

指定できるパラメータやイベント関連が豊富

インタラクティブである

グラフの種類が豊富

機能のカスタマイズが可能

という条件にすべて合致したため。

amChartsでグラフを描画する (3/3)

Y 軸

X軸

グラフの基本情報

プロットするデータ

カーソルの動作

グラフ凡例

var chart = AmCharts.makeChart("chartdiv", { "type": "serial", "theme": "none", "dataProvider": protData, "valueAxes": [{ "axisAlpha": 0, "position": "left", "title": "Visitors from country" }], "startDuration": 1, "graphs": [{ "balloonText": "<b>[[category]]: [[value]]</b>", "colorField": "color", "fillAlphas": 0.9, "lineAlpha": 0.2, "type": "column", "valueField": "visits" }], "chartCursor": { "categoryBalloonEnabled": false, "cursorAlpha": 0, "zoomable": false }, "categoryField": "country", "categoryAxis": { "gridPosition": "start" }, "legend": {"position":"bottom", "labelText":"Visitors from country" } });

JavaScript

グラフ＆地図の連動による

オープンデータの視覚化

デ モ

4-2．生活圏域の設定

小地域shpデータ

OpenLayers (JavaScript)

PostGIS (データベース)

Mapnik (サーバ用ツールキット)

使用したオープンデータ / ライブラリ

オープンデータ

オープンソース

GIS

開発中に直面した問題(1/3)

{ "type": "FeatureCollection",

"features": [

{"type": "Feature",

"geometry": {

"type": "Polygon",

"coordinates": [

[ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0],[100.0, 1.0] ]

},

"properties": {

"prop":"value0"

}

},

{"type": "Feature",

"geometry": {

"type": "Polygon",

"coordinates": [

[ [101.0, 0.0], [101.0, 0.0], [101.0, 1.0],[100.0, 1.0],]

]

},

"properties": {

"prop": "value1"

}

}

]

}

GeoJSON

OpenLayers [ベクターレイヤー]

PostGIS

前例の通りGeoJSONで

地図を表示する方法で

開発を行っていた…

…しかしテスト工程で

IE7, 8で重すぎて

OSを道連れに落ちる

大事件が発生！(☉Д⊙;;)

開発中に直面した問題(2/3)

開発中に直面した問題(3/3)

リリース２週間前、急きょ実装方法を変更！

大変でしたがなんとか間に合いました。

だったら地図を画像で表示して

みたらいいんじゃない？？ 和山

OpenLayersでタイル画像の地図を表示する

Mapnik

ズーム値ごとにタイル画像

を生成

OpenLayers [ XYZグリッドレイヤー]

地物を選択する

① OpenLayersで矩形描画

② PostGISで矩形範囲に含まれる地物を取得

③ Mapnikで地物の画像を生成

④ OpenLayersで画像を表示 [ イメージレイヤー ]

緯度: 141.38 経度： 43.14

緯度: 141.38 経度： 43.10

緯度: 141.47 経度： 43.14

緯度: 141.47 経度： 43.10

temp.png

生活圏域の設定

デ モ

2014/11/25

4-3．介護事業所のカバレッジ分析

小地域shpデータ

道路データ

介護事業所データ

男女5歳階級別人口shpデータ

500mメッシュ

OpenLayers (JavaScript)

PostGIS (データベース)

Mapnik (サーバ用ツールキット)

使用したオープンデータ / ライブラリ

オープンデータ

オープンソース

GIS

事業所からの到達圏域を計算する(1/4)

到達圏域の計算にはpgRoutingを使用する。

pgRoutingとは？

経路探索ができるPostGISのライブラリ。 (http://pgrouting.org/)

pgRoutingでこんなことができる！

x地点からy地点までの最短経路の検索。

x地点からの到達圏の探索 (自動車で30分圏内 etc)。

x地点からy地点, z地点を経由して

x地点に戻る際の最短経路の検索。 など

事業所からの到達圏域を計算する(2/4)

さっそく事業所からの50分到達圏域を計算してみると、

非常に時間がかかることが判明！

事業所ノード数 計算時間

9997件 × 2.5分 ＝ 416.5時間

計算時間を短縮するため、以下の2つを試した。

① 事業所ノードの最適化 ② 探索範囲の絞りこみ 事業所ノード数 計算時間

4653件 × 12秒 ＝ 15.5時間

結果、 約26倍の高速化に成功！

事業所 事業所の最短ノード

2014/11/25

事業所からの到達圏域を計算する(3/4)

①事業所ノードの最適化 経路検索では、事業所に1番近いノードをスタート地点として検索を行う。

検索するノード数が多いと比例して計算量も増える。

⇒事業所のノードが密集している地域は1か所にまとめて、

検索するノード数を減らす。

事業所からの到達圏域を計算する(4/4)

②探索範囲の絞りこみ 経路検索では、すべてのノードを対象として探索を行うため、

計算時間がかかる。

⇒範囲を絞り込んで探索を行う。

●

●

●

● start

end

start

end

GDALでヒートマップを作成する

①事業所のノードデータを

補完し、 tif画像を作成

②都道府県の形に切り取る ③カラーテーブルファイ

ルで色付け

-999 0 0 0 0 -1 0 0 0 0 5.77664 0 193 0 255 11.43873 145 224 145 255 17.10082 255 242 138 255 22.76291 253 141 141 255 28.425 221 60 79 255

カラーテーブルファイル

gdal_grid gdalwarp gdaldem

500mメッシュ単位の高齢者人口を求める

面積：1420k㎡ 65歳以上の人口：18人

重なっている部分の面積：154k㎡ ≪面積按分の求め方≫ 65歳以上の人口= (154k㎡ × 18人) ÷ 1420k㎡ ≒ 1.9人

高齢者の分布を500mメッシュで表したいが、

メッシュ単位ではデータをもっていない。 面積按分にて算出

Mapnikで合成手法を変更する

OpenLayersではレイヤーの合成は透明度以外できない。

一方、Mapnikは複数のレイヤーを重ねたり、

合成手法(色の混じり具合など)を弄ることが出来る。

また、速度も速いためインタラクティブな操作が可能。

介護事業所のカバレッジ分析

デ モ

5．全体のまとめ(1/3)

オープンデータは・・・

複数のオープンデータを組み合わせて分析することで、

今まで見えなかった部分が可視化され、様々な発見ができるの

ではないかと思う。

（地理×防災 , 交通 ×観光 , 公共施設×福祉 など ... 可能性はいっぱい!!）

さらに、アプリケーションやサービスにオープンデータを積極的に

活用することで、データの新たな価値を生み出し、日常生活の

利便性の向上が図れるのではないかと思う。

5．全体のまとめ(2/3)

オープンソースGISは・・・ マニュアルやリファレンスが主に海外のサイトであるため、

英語の内容を理解しなければならなかった。

⇒ 日本語への変換はGoogle翻訳をフル活用。

⇒ 分からないことはStack Overflow等、Q&Aサイトで検索。

GIS特有の「空間参照系」という概念に慣れるまで苦労した。

5．全体のまとめ(3/3)

開発にあたって・・・ WEBブラウザの性能の向上により、デスクトップ用GISソフト並みの

インタラクティブな操作や分析がWEB上でもできることが分かった。

また、レガシー環境でもクライアントやサーバの協働により、安定した

レスポンスを確保できることが分かった。

開発中は苦労した面もあったが、無事に開発をやり遂げた時は

今までにない達成感を得ることが出来た。

今後もWEB上でのデータの視覚化という分野にもっと力を入れて

多くの人が驚くようなシステムをどんどん作成していきたい。

ご清聴 ありがとうございました。