Geospatial Hackers Program 2020への参加準備＜前編＞ #geohack

はじめに

これは「Geospatial Hackers Program 関東」に参加するための予習メモです。
自分用のメモなので、参考まで。

自分について

プログラミングと黒い画面が苦手なデザイナー
デザイン作業はAdobe Photoshop,Illustrator,XDを使用
コーディングはSublimeText
HTML/CSSのコーディングは上級者な方だと思っている
JavaScriptは中級以下（主にjQuery使用）
sassとejsのコンパイルとしてnode（gulp用）を使用
GitHubはあまり使ってない
GitHubの作業はコマンドではなくTower3で行っている
地図（geo,GIS）に関しては初心者
Googleマップアプリ愛用者
Code for Japanの「紙マップ」にデザイナーとして関わり中
- 紙マップとは・・・ https://kamimap.com/

教材について

このハッカソンに参加する前段階として、教材が共有されています。
2018年からの教材ですが、内容は随時アップデートされているようです！至れり尽くせり。
https://hackmd.io/@GeospatialHackers/Byf-PMA6r

（この前編メモは「地図アプリ作成チュートリアル動画」の２本を見た内容で終わります）

地図アプリ作成チュートリアル動画（ベーシック編）

https://youtu.be/OY7aNX5eu_k

講師紹介

福野泰介さん
http://jig.jp/ の社長さん
IchigoJamの開発者
オープンデータ伝道師
Code for Sabae 代表

オープンデータについて

データがあれば「欲しい」は「創れる」
クリエイティブコモンズついて語りつつ、いらすとや
鯖江市では「一日一創」で200個以上のアプリがあるよ

ここから、いよいよ予習スタート！

GitHubアカウントの作成

https://youtu.be/OY7aNX5eu_k?t=285
既にあるのでスキップ

egmapjsをForkしよう

https://github.com/code4fukui/egmapjs 　 Fork！

STEP1:マップをだそう

https://youtu.be/OY7aNX5eu_k?t=393
ズーム率と中心緯度経度の変更

STEP2:アイコンを置こう

https://youtu.be/OY7aNX5eu_k?t=694
ホームグラウンドの最寄り駅とかを設定してみた

window.onload = function() {
    var map = initMap('mapid')
    map.setZoom(16)
    map.panTo([ 緯度,経度 ]) // 自分がいる場所とか
    map.addIcon(緯度,経度, "ほげほげ駅")
}

緯度経度を表示しよう

window.onload = function() {
    var map = initMap('mapid')
    map.setZoom(16)
    map.panTo([ 緯度,経度 ]) // 自分がいる場所とか
    map.addIcon(緯度,経度, "ほげほげ駅")
    map.on('click', (e) => alert(e.latlng)) // 追記
}

富士山の緯度経度をとってアイコンの追加

は、やりませんでした。ハッカソンでYahoo!に行ったらYahoo!アイコン設定したい！

地図アプリ作成チュートリアル動画（ステップアップ編）

https://youtu.be/_GXsZ9g28QI

５つ星オープンデータの説明

PDFや画像は１つ星、CSVは３つ星

共通語彙基盤

https://imi.go.jp/goi/
「共通語彙基盤」について〜は、IPAの現サイトには無くIMIのサイトへ引越しているっぽい

SPARQL

「スパークル」とは何ぞや？

『RDFをいい感じでとってくるための言語（API）です』いい感じって？もう少し知りたい。

SPARQLでオープンデータ活用！ from Hiroshi Ueda

『今回は「オープンデータプラットフォーム」を使います！』

odp

https://odp.jig.jp/
そんなのがあるんだ！

STEP3:SPARQLで検索！

https://youtu.be/_GXsZ9g28QI?t=263
RDFはHTMLの次世代のかたち！
Linked Open Data（LOD）=Linked-RDF

    // SPARQLクエリー
    var query = `
        prefix ic: <http://imi.go.jp/ns/core/rdf#>
        prefix xsd: <http://www.w3.org/2001/XMLSchema#>
        select ?uri ?name ?lat ?lng {
            ?uri ic:名称 [ ic:表記 ?name ].
            ?uri ic:地理座標 [ ic:緯度 ?lat; ic:経度 ?lng; ].
            filter(contains(str(?name),'地元')) // 鯖江から変更
        } limit 100
    `

    querySPARQL(query, function(data) {
        var items = data.results.bindings
        for (var i = 0; i < items.length; i++) {
            var item = items[i]
            var lat = item.lat.value
            var lng = item.lng.value
            var name = item.name.value
            map.addIcon(lat, lng, name)
        }
    })

SPARQLクエリーとは

『SQLを見たことがある人は馴染みがあるかもしれませんが、select文を使って必要なデータを記述します』
この辺、やっぱりデザイナーには敷居が高いので深く考えず・・・そのままコピペをして進めます。

私の地元は市役所しかマッピングされなかった・・・（頑張れ！オープンデータ化！）
次に、駐車場のマップ情報にして車アイコン表示に変更する。

    // SPARQLクエリー
    var query = `
        prefix ic: <http://imi.go.jp/ns/core/rdf#>
        prefix xsd: <http://www.w3.org/2001/XMLSchema#>
        select ?uri ?name ?lat ?lng {
            ?uri ic:名称 [ ic:表記 ?name ].
            ?uri ic:地理座標 [ ic:緯度 ?lat; ic:経度 ?lng; ].
            filter(contains(str(?name),'駐車場')) // 変更
        } limit 100
    `

    querySPARQL(query, function(data) {
        var items = data.results.bindings
        for (var i = 0; i < items.length; i++) {
            var item = items[i]
            var lat = item.lat.value
            var lng = item.lng.value
            var name = item.name.value
            map.addIcon(lat, lng, name, "icon/carparking.png", 64)) // 変更
        }
    })

5つ星オープンデータ対応一覧表

https://fukuno.jig.jp/app/odp/finddata.html
odpの5つ星オープンデータ都市数は「48」！もっと欲しい！

STEP4:GPSを使おう

https://youtu.be/_GXsZ9g28QI?t=604
SPARQLクエリーは残したまま、最初の記述をmap6.htmlから移植してみる

window.onload = function() {
// ここからコピペ
    var map = initMap('mapid')
    map.setZoom(16)
    map.panTo([ 35.943560,136.188917 ]) // 鯖江駅
    map.addIcon(35.944571, 136.186228 , "Hana道場", "icon/hanadojo.png", 64)

    var current = map.addIcon(0, 0, "現在地", "icon/walking.png", 64, 64)
    navigator.geolocation.watchPosition(function(gpos) {
        const pos = [ gpos.coords.latitude, gpos.coords.longitude ]
        current.setLatLng(pos)
        map.panTo(pos)
    }, function() {
        alert("現在位置に取得に失敗！")
    })
// ここまでコピペ

    // SPARQLクエリー
    var query = `
        prefix ic: <http://imi.go.jp/ns/core/rdf#>
        prefix xsd: <http://www.w3.org/2001/XMLSchema#>
        select ?uri ?name ?lat ?lng {
            ?uri ic:名称 [ ic:表記 ?name ].
            ?uri ic:地理座標 [ ic:緯度 ?lat; ic:経度 ?lng; ].
            filter(contains(str(?name),'駐車場'))
        } limit 100
    `

    querySPARQL(query, function(data) {
        var items = data.results.bindings
        for (var i = 0; i < items.length; i++) {
            var item = items[i]
            var lat = item.lat.value
            var lng = item.lng.value
            var name = item.name.value
            map.addIcon(lat, lng, name, "icon/carparking.png", 64)
        }
    })
}

スマホでQRコード読み取り、位置情報取得許可をすると人アイコンが出て
現在位置が取得されました

STEP5:ゲームの例

https://youtu.be/_GXsZ9g28QI?t=643
GPSを使って消火栓の位置当てクイズに答えてアイコンの状態を変えるゲーム
たぶん現地で試さないと検証できないのでやらない

STEP6:いろいろ改造

自分が作りたい物に合うフレームワークを参考にしてみよう。

ARを使った「◯◯ Go！」みたいなのも作れるようなのも公開しています。

IchigoSodaを活用したIoT事例

IchigoSodaって？

https://sakura.io/docs/pages/guide/startup-guide/ichigosoda.html
https://hello002.stores.jp/items/5c19aac1144448027ddc3cfd
IchigoJamより高いのかな？（1,500円〜だったから）

図書館の在籍状況（女子高生が作ったよ）
バスのリアルタイム位置情報
川の水位情報
通信コスト66円/月（4G） or WiFiという低コストで作れます

《後編へ続く・・・》

Geospatial Hackers Program 2020への参加準備＜前編＞