インターナショナルオープンデータデイ２０１７。CodeforMatsudoのチームのハッカソン発表資料です、

1. IODD2017
松戸ハッカソンAチーム
通学路動画
やぎさん、あさのさん
2017/03/04 柏、麗澤大学生涯教育プラザにて

2. Made with CodeforMatsudo
本日の内容は？
• 2/25、事前にアイデアソンを実施
⇨ＩＴで子供を犯罪・事故・災害から守るには？〜みんなでアイデア会議〜
http://code4matsudo.org/news/2017/02/26/137/
• その中で出たアイデアのひとつから
⇨「通学路動画を作ろう」を実現させようハッカソン！！
• 事前にどんなツールやサービスが使用できるのか調査した結果の打合せ
• 市役所から頂いたオープンデータの確認、イメージ合わせ
そんなところから始めていきます。

3. Made with CodeforMatsudo
アイデアソンでのイメージは？
1. スマホから通学路の動画を見ながらその下に
地図が表示され動画と合わせて地図上のピン
の位置も移動する
2. 危険情報があるところには地図上に情報を表
示する
3. 動画の上に注意情報のコメントを流す
なんて機能！

4. Made with CodeforMatsudo
事前準備
• 実現するのにイメージに近かったツール
Mapillaryが使えないかを調査
近所の通学路を実際にMapillaryを使用して動
画（写真）を登録
https://www.mapillary.com/map/im/X-npoJ_p8kKy-dokgGE1gg
Mapillary
スマホ画面

5. Made with CodeforMatsudo
事前準備
• 市役所から防災データを
shapefileで提供して頂きまし
た
提供元はここ
https://www.sonicweb-
asp.jp/matsudo/
• 防災データのshapefileをQＧＩ
Ｓを使用して必要な箇所を
切り出し
http://qgis.org/ja/site/
崖くづれの危険箇所
のshapeを別ファイ
ルに切り出し

6. Made with CodeforMatsudo
二つのデータを合体
• MapillaryはGithub上にAPIが公開されている
https://github.com/mapillary/mapillary-js
• Mapillaryの地図上にShapefileを展開する
Leafletjsを使用して切り出したshapefileを重ねる
こちらもGitHub上に公開されている
https://github.com/Leaflet/Leaflet

7. Made with CodeforMatsudo
MapillaryのAPIとLeafletjsと危険情報を合体

8. Made with CodeforMatsudo
①Mapillaryの機能はそのま
ま
Playボタンを押すと画像が動
く
◆スマホでの実装は時間が足りなかったので実装できませんでしたがPCでの実装は以下の通り
②同時に地図上にも危険箇
所を表示

9. Made with CodeforMatsudo
• デモ
• よろしく！
今回は動画上にコメントを流す機能は時間がなく断念しましたが、今後少しずつ継続してブラッ
シュアップして行こうを思います。
以上、お疲れ様でした。。。