Help us understand the problem. What is going on with this article?

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の「紙マップ」にデザイナーとして関わり中

教材について

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

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

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

:clapper: https://youtu.be/OY7aNX5eu_k

講師紹介

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

オープンデータについて

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

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

GitHubアカウントの作成

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

egmapjsをForkしよう

https://github.com/code4fukui/egmapjs  :point_right: 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!アイコン設定したい!

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

:clapper: https://youtu.be/_GXsZ9g28QI

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

PDFや画像は1つ星、CSVは3つ星

共通語彙基盤

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

SPARQL

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

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

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

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コード読み取り、位置情報取得許可をすると人アイコンが出て
現在位置が取得されました :clap:

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

《後編へ続く・・・》

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした