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

##はじめに
これは「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(緯度,経度, "ほげほげ駅")
}

#####緯度経度を表示しよう
https://youtu.be/OY7aNX5eu_k?t=858

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:いろいろ改造
https://youtu.be/_GXsZ9g28QI?t=673
#####自分が作りたい物に合うフレームワークを参考にしてみよう。
https://code4fukui.github.io/egmapjs/tutorial.html
#####ARを使った 「◯◯ Go！」みたいなのも作れるようなのも公開しています。
https://github.com/taisukef/egarjs

##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という低コストで作れます

《後編へ続く・・・》