diff --git a/matsuGO/README.md b/matsuGO/README.md new file mode 100644 index 0000000..6e36017 --- /dev/null +++ b/matsuGO/README.md @@ -0,0 +1,3 @@ +Silk Re:road +============= +Destination Seeking Game diff --git a/matsuGO/gpsgo.css b/matsuGO/gpsgo.css new file mode 100644 index 0000000..bc75a60 --- /dev/null +++ b/matsuGO/gpsgo.css @@ -0,0 +1,65 @@ +/* + * Style Sheet for open lecture for SakataKoryo high school + */ + +@media print { + body {font-family: "IPA明朝", "yoz";} + h1,h2,h3,h4,h5,h6,dt {font-family: "IPA gothic", "aqua";} + a:link, a:visited {color: blue;} + div.list { + margin-left: 1em; border-left: 1px dotted black; padding-left: 1ex; + } +} +body {background: #ffb;} +h1 {text-align: center; color: #005020; margin: 0 1em;} +h1:before {content: "◆"; color: #a80;} /* dark gold */ +h1:after {content: "◆"; color: #a80;} + +h1+p, h2+p, h3+p, h4+p, h5+p, h6+p, ul+p, ol+p, dl+p, p+p { + text-indent: 1em;} +p.urls {text-indent: 0;} + +div.fr {float: right; margin-left: 1em;} +div.fr p {margin: 0;} +h2 { + border: #0a2 solid 0px; border-left-width: 1em; + border-bottom-width: 1px; padding: 0.2ex; +} +h3 {border-left: navy solid 1em; border-radius: 0.2em; padding-left: 0.5ex;} + +.c {text-align: center;} +em {color: red;} +span.see {color: #e22;} + +div.list {background: white;} +.screen { + background-color: #606060; color: white; + margin-left: 5%; +} +.screen .u {text-decoration: underline;} +img {vertical-align: middle;} + +p.framebox { + margin: 1ex 2em; border: 1px solid navy; + padding: 0.5ex; text-align: center; +} +dl {border-left: 10px solid navy; padding-left: 1em; background: #ee8;} +dt {text-decoration: underline;} +ul p, ol p {margin: 0.2ex;} + +span.spot {background: pink; text-decoration: underline;} +p.urls {line-height: 2.8; word-spacing: 2em; font-size: 140%;} +/* Map related */ +div#map {width: 900px; height: 700px;} +p#ok {background: white;} +p#err {background: pink;} +p.panel button {margin: 1em; padding: 1em; font-size: 200%;} +button#start {background: #dfd;} +button#stop {background: #fdd;} +button#zuru {display: none;} +div#get { + position: absolute; top: 0; left: 0; + width: 0; height: 0; z-index: 0; transition: 5s; + opacity: 0; +} +.leaflet-popup-content {font-size: 200%;} diff --git a/matsuGO/gpsgo.js b/matsuGO/gpsgo.js new file mode 100644 index 0000000..520a1f9 --- /dev/null +++ b/matsuGO/gpsgo.js @@ -0,0 +1,227 @@ +// 愛 +function goinit() { + var koeki_latlng = [38.8934, 139.819]; + var baseLayer = {}; + var map_osm = new L.tileLayer( + 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + attribution : '© OpenStreetMap contributors | MatsuGO' + , maxZoom: 20, maxNativeZoom: 18 + }); + baseLayer["OpenStreetMap"] = map_osm; + var map_gsi = new L.tileLayer( // 国土地理院 + 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { + attribution: "国土地理院" + , maxZoom: 20, maxNativeZoom: 18 + }); + baseLayer["地理院地図"] = map_gsi; + function putlog(msg, id = "ok") { + var o = document.getElementById(id); + if (o) o.innerHTML = msg; + } + var map = L.map("map").setView(koeki_latlng, 15); + map_osm.addTo(map); + L.control.scale().addTo(map); + var mapControl = L.control.layers(baseLayer, null).addTo(map); + var watchTimer = null // geolocation timer + function clearWatch() { + if (watchTimer) { + clearTimeout(watchTimer); + watchTimer = null; + } + watchID && navigator.geolocation.clearWatch(watchID); + watchID = null; + } + function stopChase() { + clearWatch(); + putlog("追跡終了", "info"); + startButton.removeAttribute("disabled"); + } + function gotIt() { + stopChase(); + var g = document.getElementById("get"); + if (g) { + // document.getElementById("map").style.visibility = "hidden"; + document.getElementById("map").style.zIndex = 0; + // alert("みつかったー"+watchTimer); + g.style.display = "block"; + g.style.width = 500; + g.style.height = "auto"; + g.style.top = "20%"; + g.style.right = "90%"; + g.style.opacity = 0.8; + g.style.zIndex = 20; + g.style.transition = 10; + } + putlog("捕獲!", "rest"); + tgt && map.removeLayer(tgt); + tgt = L.marker(targetLoc).addTo(map); + tgt.bindPopup(foundMsg).openPopup(); + setTimeout(function() { + var g = document.getElementById("get"); + // g.removeChild(g.childNodes[0]); + g.style.display = 'none'; + putlog("", "rest"); + tgt._popup.setContent("またネ!"); + }, 10000); + } + function dispDistance() { + //var d = getDistance(currentLoc, targetLoc); + var d = currentLoc.distanceTo(targetLoc); + d = Math.abs(Math.round(d-Math.min(curAccuracy, 10), 1)); + var msg = currentLoc+targetLoc; + putlog(msg); + putlog("あと"+ d + "m", "rest"); + putlog("Count: "+ ++repeatCount, "info"); + if (d < threshold) { + gotIt(); + } + } + var repeatCount = 0, repeatMax = 30; + var currentLoc = koeki_latlng; + var curMarker, curCircle, curAccuracy; + var curMarkerIcon = L.icon({ + iconUrl: defIcon || "main.png", + // iconSize: [80, 120], + iconAnchor: [0, 00] + }); + function mainMarker(pos) { + return L.marker(pos, {icon: curMarkerIcon}); + } + function onLocationFound(e) { + curAccuracy = e.accuracy / 2; + + if (curMarker) map.removeLayer(curMarker); + curMarker = mainMarker(e.latlng).addTo(map); + curMarker.bindPopup("いまココ").openPopup(); + currentLoc = e.latlng; + if (repeatCount%3 == 0) map.setView(e.latlng); // 3回に1回センタリング + if (curCircle) map.removeLayer(curCircle); + curCircle = L.circle(e.latlng, curAccuracy).addTo(map); + dispDistance(); + } + function onLocationError(e) { + putlog(e.message, "err") + if (true && !curMarker) { + currentLoc = L.latLng(koeki_latlng); + curMarker = mainMarker(currentLoc).addTo(map); + curMarker.bindPopup("いまココ").openPopup(); + } + } + + var tgt; + function setNewLoc(latlng) { + putlog(latlng+"に設定しました", 'err'); + targetLoc = latlng; // タップした地点をゴールにすり替える + dispDistance(); + } + map.on("click", function(e) { + if (tgt) { + map.removeLayer(tgt); + map.panTo(e.latlng); + if (true) { + tgt = L.marker(e.latlng, {draggable: true}).addTo(map); + tgt.on("dragend", function (e) { + setNewLoc(e.target.getLatLng()); + }); + } + setNewLoc(e.latlng); + } + }); + map.on('zoomend', function (e) { + if (map._locateOptions) map._locateOptions.maxZoom = map.getZoom(); + }); + var watchID, geoOpt = {maximumAge: 0, timeout: 2000, + enableHighAccuracy: true}, + watchINT = 5000, watchTimer; + function watchRestart() { + putlog("Sleeping...Count:"+repeatCount, "info"); + clearWatch(); + if (watchTimer) { + clearTimeout(watchTimer); + watchTimer = null; + } + watchTimer = setTimeout(startWatch, 7500); + } + function watchFound(pos) { + putlog("Sleeping...FOUND!", "info"); + putlog("", "err"); + onLocationFound({ + latlng: L.latLng([ + pos.coords.latitude, pos.coords.longitude]), + accuracy: pos.coords.accuracy}); + // watchRestart(); + } + function watchError() { + onLocationError({ + message: "GPS信号が弱いようです"}); + } + function startWatch() { + putlog("Start...Count:"+repeatCount, "info"); + clearWatch(); // confirmation + watchID = navigator.geolocation.watchPosition( + // watchID = navigator.geolocation.getCurrentPosition( + watchFound, watchError, geoOpt + ); + } + var startButton = document.getElementById("start"); + startButton.addEventListener("click", function(e) { + startWatch(); + putlog("追跡を開始します", "info"); + this.setAttribute("disabled", true); + if (tgt) { // 開始したらターゲットを消す + map.removeLayer(tgt); // マニュアルモード時はマーカが見える + tgt = null; + } + }) + var endButtonClicks = 0; + document.getElementById("stop").addEventListener("click", function(e) { + stopChase(); + if (++endButtonClicks > 9) { + document.getElementById("zuru").style.display = "inline"; + } + }); + document.getElementById("zuru").addEventListener("click", function(e) { + gotIt(); + }); + document.getElementById("(C)").addEventListener("click", function(e) { + tgt && tgt.removeLayer(tgt); + tgt = L.marker(targetLoc).addTo(map); + putlog("マニュアル設定モード: 好きな位置をタップしてゴールを設定できます。置いたマーカをドラッグして移動できます。「追跡をはじめる」でゴールマーカが消えます。", "info") + }); + // umappop([{'color': 'red', 'file': 'matsu-spots.geojson'}]); + function loadgeofile(arg, callback) { + var xobj = new XMLHttpRequest(); + xobj.overrideMimeType("application/json"); + xobj.open('GET', arg['file'], true); + xobj.onreadystatechange = function () { + if (xobj.readyState == 4 && xobj.status == "200") { + callback(arg, xobj.responseText); + } + }; + xobj.send(null); + } + if (false) + var json = loadgeofile({file: "matsu-spots.geojson"}, + function(arg, text) { + var geojson = JSON.parse(text); + var jL = L.geoJson(geojson); + jL.addTo(map); + }); + var now = new Date(); + var today = ""+now.getFullYear()+"/"+(now.getMonth()+1)+"/"+now.getDate(); + var matsugo = localStorage.getItem("matsugo-warning"); + if (matsugo != today) { + if (confirm("【matsugo 5つの誓い】\n\ +・危険な場所には行かない。\n\ +・移動するときはこの画面を見続けない。\n\ +・人の話を聞くべきときは画面を閉じる。\n\ +・すべては自己責任で楽しむ。\n\ +・誰かにやらせるときにはこれらを守らせる。")) { + localStorage.setItem("matsugo-warning", today); + } else { + alert("さようなら..."); + var body = document.getElementsByTagName("body")[0]; + body.parentNode.removeChild(body); + } + } +} diff --git a/matsuGO/index.html b/matsuGO/index.html new file mode 100644 index 0000000..15727a2 --- /dev/null +++ b/matsuGO/index.html @@ -0,0 +1,21 @@ + + + +$B>>%v2,$X(BGO + + + + +

$B>>%v2,3+:&>l$X(BGO

+ + +
+ + + diff --git a/matsuGO/matsugo.html b/matsuGO/matsugo.html new file mode 100644 index 0000000..e017421 --- /dev/null +++ b/matsuGO/matsugo.html @@ -0,0 +1,41 @@ + + + + + + + + + + + +KoryoGo + + + +

追跡!

+
+
+ +

OK:

+

NG:

+

+

+ + +source +

+
+

+ + diff --git a/matsuGO/signature.html b/matsuGO/signature.html new file mode 100644 index 0000000..708cfd8 --- /dev/null +++ b/matsuGO/signature.html @@ -0,0 +1 @@ +(C)2019 koeki-u.ac.jp & SKIP diff --git a/matsuGO/umappop.js b/matsuGO/umappop.js new file mode 100644 index 0000000..8444809 --- /dev/null +++ b/matsuGO/umappop.js @@ -0,0 +1,196 @@ +/* + * Emulate uMap notation in your map + */ +var umappop = + umappop|| + function(a) +{ + +var colors = ["red", "green", "blue", "purple", "yellow", "cyan", "magenta"] +function wikiRepl(s) { + return s.replace(/{{(.*)\|([0-9][0-9]*)}}/g, + ''). + replace(/{{(.*)}}/g, ''). + replace(/\[\[(.*)\|(.*)\]\]/g, '$2'). + replace(/\[\[(.*)\]\]/g, '$1'). + replace(/^### (.*)/, '

$1

'). + replace(/^## (.*)/, '

$1

'). + replace(/^# (.*)/, '

$1

'); +} +// https://codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript +function loadgeofile(arg, callback) { + var xobj = new XMLHttpRequest(); + xobj.overrideMimeType("application/json"); + xobj.open('GET', arg['file'], true); + xobj.onreadystatechange = function () { + if (xobj.readyState == 4 && xobj.status == "200") { + callback(arg, xobj.responseText); + } + }; + xobj.send(null); +} +function escapeHtml(str) { + return str.replace(/&/g, '&'). + replace(//g, '>'). + replace(/\"/g, '"'). + replace(/'/g, '''); +} +function bindPopUp(feature, layer) { + var altattrs = ["住所", "電話番号", "筆者", "撮影者"] + var d = feature.properties.description||feature.properties.desc||''; + var r = "", term; + for (var i=0; i\n" + + "
"+feature.properties[term]+"
\n"; + } + layer.bindPopup( + "

"+feature.properties.name + "

\n" + + "

"+wikiRepl(d)+"

\n
"+ + wikiRepl(r)+"
\n" + ); +} + +function init(logfiles) { + if (!logfiles[0]) { + logfiles = [logfiles]; + } + var baseLayer = {}; + var map_osm = new L.tileLayer( // OpenStretMap + 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + attribution : '© OpenStreetMap contributors | Generated with gpx-photo' + }); + baseLayer["OpenStreetMap"] = map_osm; + + var map_gsi = new L.tileLayer( // 国土地理院 + 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { + attribution: "国土地理院" + }); + baseLayer["地理院地図"] = map_gsi; + + var map_ort = new // 地理院オルソ + L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', { + attribution: "国土地理院" + }); + baseLayer["地理院地図オルソ画像"] = map_ort; + var map_gazo = new L.tileLayer( // 地理院画像1974-1978 + 'https://cyberjapandata.gsi.go.jp/xyz/gazo1/{z}/{x}/{y}.jpg', { + attribution: "国土地理院" + }); + baseLayer["地理院画像(1974-1978)"] = map_gazo; + + if (L.BingLayer) { + var bing_key = + "AjyiuTOpH-_ZQdW4bvsPnNsjKBQQ6n59nrXj92ccHqwvKgiDHJxmo1tEJHs3w70K"; + map_bing = new L.BingLayer( // BingMap + bing_key, {type: "Road", culture: "ja"}); + baseLayer["Bing Map"] = new L.BingLayer( + bing_key, {type: "Road", culture: "ja"}); + baseLayer["Bing Map 衛星写真"] = new L.BingLayer( + bing_key, {type: "Aerial", culture: "ja"}); + baseLayer["Bing Map 衛星写真+ラベル"] = new L.BingLayer( + bing_key, {type: "AerialWithLabels", culture: "ja"}); + } + if (L.Google) { + baseLayer["Google Map"] = new L.Google("ROADMAP"); + baseLayer["Google Map 衛星写真"] = new L.Google('SATELLITE'); + baseLayer["Google Map 衛星写真+ラベル"] = new L.Google('HYBRID'); + } + + var map = L.map('map', {layers: [map_osm]}); + var mapControl = L.control.layers(baseLayer, null).addTo(map); + var sakuraicon = L.icon({ + iconUrl: 'sakura-icon.jpg', + }); + var markerLayers = L.featureGroup(); + var centermarker; + var fileptn = /\.o?(gpx|csv|kml|geojson|topojson|polyline)/i; + for (var i=0; i 1) + map.fitBounds(markerLayers.getBounds()); + //else + // map.setView(markerLayers.getLatLngs()[0], 13); + mapControl.addOverlay(jsonLayer, title); + }); + } + } // End of logfiles loop + L.control.scale().addTo(map); + + function round(n, d) { + return Math.round(n * Math.pow(10, d))/Math.pow(10, d); + } + var latlngform = document.getElementById("latlng"); + function displayLatLng(lat, lon) { + lat = round(lat, 5); lon = round(lon, 5); + latlngform.textContent = lat+", "+lon; + } + + map.on('contextmenu', function(e) { + if (e.originalEvent.shiftKey) { + } else { + centermarker && map.removeLayer(centermarker); + displayLatLng(e.latlng.lat, e.latlng.lng); + centermarker = L.marker(e.latlng, {title: 'foo', draggable:true}).addTo(map) + centermarker.on('dragend', function(e) { + var la = e.target._latlng.lat, lo = e.target._latlng.lng; + displayLatLng(la, lo); + }); + map.panTo(e.latlng) + return false; + } + }); + // Marker in the CENTER position +} /* End of init() */ + +init(a); /* Call from toplevel */ +} diff --git a/paper/IPSJ-IS-150/storymap.odp b/paper/IPSJ-IS-150/storymap.odp index 57c46e1..3437d77 100644 --- a/paper/IPSJ-IS-150/storymap.odp +++ b/paper/IPSJ-IS-150/storymap.odp Binary files differ