【IISAテクニカルカンファレンス2014】オープンデータ×オープンソース　～WEB上でのインタラクティブ可視化手法について～

オープンデータ × オープンソース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以上のリクエストは有料

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

7
行政の透明性・信頼性の向上
経済の活性化・行政の効率化
目的は？
地理空間情報 , 防災情報 , 統計情報, 交通情報,観光情報など
XML , CSV , JSON, RDF など、コンピュータが判読しやすい形式
どんなデータがあるの？
どんなデータの形式？

8
使用したオープンデータ
小地域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

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

小地域shpデータ
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を道連れに落ちる
大事件が発生！(☉Д⊙;;)

リリース２週間前、急きょ実装方法を変更！
大変でしたがなんとか間に合いました。
だったら地図を画像で表示してみたらいいんじゃない？？
和山

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メッシュ
PostGIS (データベース)
Mapnik (サーバ用ツールキット)
GIS

事業所からの到達圏域を計算する(1/4)
到達圏域の計算にはpgRoutingを使用する。
pgRoutingとは？
経路探索ができるPostGISのライブラリ。
(http://pgrouting.org/)
pgRoutingでこんなことができる！
x地点からy地点までの最短経路の検索。
x地点からの到達圏の探索 (自動車で30分圏内 etc)。
x地点からy地点, z地点を経由して
x地点に戻る際の最短経路の検索。など

さっそく事業所からの50分到達圏域を計算してみると、
非常に時間がかかることが判明！
事業所ノード数計算時間
9997件 × 2.5分＝
416.5時間
計算時間を短縮するため、以下の2つを試した。
① 事業所ノードの最適化 ② 探索範囲の絞りこみ
事業所ノード数計算時間
4653件 × 12秒＝
15.5時間
結果、約26倍の高速化に成功！

事業所事業所の最短ノード
2014/11/25
①事業所ノードの最適化
経路検索では、事業所に1番近いノードをスタート地点として検索を行う。
検索するノード数が多いと比例して計算量も増える。
⇒事業所のノードが密集している地域は1か所にまとめて、
検索するノード数を減らす。

②探索範囲の絞りこみ
経路検索では、すべてのノードを対象として探索を行うため、
計算時間がかかる。
⇒範囲を絞り込んで探索を行う。
●
●
●
●
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)
オープンデータは・・・
複数のオープンデータを組み合わせて分析することで、
今まで見えなかった部分が可視化され、様々な発見ができるの
ではないかと思う。
（地理×防災 , 交通 ×観光 , 公共施設×福祉など ... 可能性はいっぱい!!）
さらに、アプリケーションやサービスにオープンデータを積極的に
活用することで、データの新たな価値を生み出し、日常生活の
利便性の向上が図れるのではないかと思う。

オープンソースGISは・・・
マニュアルやリファレンスが主に海外のサイトであるため、
英語の内容を理解しなければならなかった。
⇒ 日本語への変換はGoogle翻訳をフル活用。
⇒ 分からないことはStack Overflow等、Q&Aサイトで検索。
GIS特有の「空間参照系」という概念に慣れるまで苦労した。

開発にあたって・・・
WEBブラウザの性能の向上により、デスクトップ用GISソフト並みの
インタラクティブな操作や分析がWEB上でもできることが分かった。
また、レガシー環境でもクライアントやサーバの協働により、安定した
レスポンスを確保できることが分かった。
開発中は苦労した面もあったが、無事に開発をやり遂げた時は
今までにない達成感を得ることが出来た。
今後もWEB上でのデータの視覚化という分野にもっと力を入れて
多くの人が驚くようなシステムをどんどん作成していきたい。

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

【IISAテクニカルカンファレンス2014】 オープンデータ×オープンソース ～WEB上でのインタラクティブ可視化手法について～

More Related Content

What's hot

Similar to 【IISAテクニカルカンファレンス2014】 オープンデータ×オープンソース ～WEB上でのインタラクティブ可視化手法について～