Contenu connexe
Similaire à ハンズオン勉強会 はじめてのJavaScriptとSPARQL (20)
Plus de Taisuke Fukuno (17)
ハンズオン勉強会 はじめてのJavaScriptとSPARQL
- 18. 世界最先端 IT 国家創造宣言、閣議決定
2013.6.14
Ⅰ.基本理念
Ⅱ. 目指すべき社会・姿
Ⅲ.目指すべき社会・姿を実現するための取組
1.革新的な新産業・新サービスの創出と全産業の成長を促進する社会の実現
(1)オープンデータ・ビッグデータの活用の推進
1.公共データの民間開放(オープンデータ)の推進
2013 年度中に試行版を立ち上げ、広く国民の意見募集を行うとともに、
2014 年度から本格運用を実施する
2014 年度及び 2015 年度の2年間を集中取組期間と位置づけ、
2015 年度末には、他の先進国と同水準の公開内容を実現する
2.健康で安心して快適に生活できる、世界一安全で災害に強い社会
3.公共サービスがワンストップで誰でもどこでもいつでも受けられる社会の実現
- 34. PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
PREFIX dct: <http://purl.org/dc/terms/>
PREFIX odp: <http://odp.jig.jp/odp/1.0#>
SELECT ?created ?value {
?s rdf:next rdf:nil;
rdf:type odp:WaterLevel;
<http://schema.org/spatial> <http://odp.jig.jp/jp/fukui/sabae/waterlevelsensor/1>;
dct:created ?created;
rdf:value ?value.
}
最新の水位を取得するSPARQLクエリー
- 35. {
"head": {
"vars": [ "created" , "value" ]
} ,
"results": {
"bindings": [
{
"created": { "datatype": "http://www.w3.org/2001/XMLSchema#dateTime" ,
"type": "typed-literal" , "value": "2015-02-05T10:35:01+09:00" } ,
"value": { "datatype": "http://www.w3.org/2001/XMLSchema#integer" , "type":
"typed-literal" , "value": "62" }
}
]
}
}
最新の水位を取得するSPARQLクエリーの結果
- 37. var getWaterLevelSPARQL = function(sensor, callback) {
var query = f2s(function() {/*
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
PREFIX dct: <http://purl.org/dc/terms/>
PREFIX odp: <http://odp.jig.jp/odp/1.0#>
select ?created ?value {
?s rdf:next rdf:nil;
rdf:type odp:WaterLevel;
<http://schema.org/spatial> {sensor};
dct:created ?created;
rdf:value ?value.
}
*/});
query = query.replace("{sensor}", "<" + sensor + ">");
var url = "http://sparql.odp.jig.jp/api/v1/sparql?output=json&query=" +
encodeURIComponent(query);
url += "&callback=" + getCallbackMethod(function(data) {
var d = data.results.bindings[0];
callback(d.created.value, d.value.value);
});
jsonp(url);
};
水位取得するJavaScript scriptタグ内
- 38. window.onload = function() {
var sensor = "http://odp.jig.jp/jp/fukui/sabae/waterlevelsensor/1"
var f = function() {
getWaterLevelSPARQL(sensor, function(datetime, value) {
get("datetime").textContent = datetime.replace("T", " ");
get("value").textContent = value;
});
};
setInterval(f, 5 * 60 * 1000);
f();
};
5分置きに取得し表示するJavaScript scriptタグ内
- 40. <style>
body {
text-align: center;
}
#main {
display: inline-block;
width: 300px;
height: 300px;
background-color: #8ca8ff;
position: relative;
}
#level {
padding-top: 60px;
font-size: 70px;
color: #002699;
}
#datetime {
font-size: 18px;
color: #002699;
}
</style> head内にCSSを記述して完成
- 42. <h1>鯖江市 論手川水位予測ゲーム</h1>
<div id="main">
<div id="level"><span id="value"></span>cm</div>
<div id="datetime"></div>
<div id=pointdiv><span id="point">1000</span>ポイント</div>
<span class=btn id="buy">買う</span><span class=btn id="sell">売
る</span><br>
<div><span id="stock">0</span>ストック</div>
</div>
予測ゲーム用に追加する
- 43. .btn {
padding: 4px 12px;
background: white;
border-radius: 8px;
margin: 4px;
}
#pointdiv {
margin: 4px;
font-weight: bold;
}
CSSをstyleタグ内に追記
- 44. var point = localStorage["waterlavelgame_point"];
var stock = localStorage["waterlavelgame_stock"];
if (point) {
get("point").textContent = point;
get("stock").textContent = stock;
}
ポイントとストックの読み込み (onload内)
- 45. get("buy").onclick = function() {
var pnt = parseInt(get("point").textContent);
var price = parseInt(get("value").textContent);
var stock = parseInt(get("stock").textContent);
if (price > pnt) {
alert("所持ポイントが足りません!!");
return;
}
pnt -= price;
pnt--;
stock++;
get("stock").textContent = stock;
get("point").textContent = pnt;
localStorage["waterlavelgame_point"] = pnt;
localStorage["waterlavelgame_stock"] = stock;
};
買いオペ (onload内)
- 46. get("sell").onclick = function() {
var pnt = parseInt(get("point").textContent);
var price = parseInt(get("value").textContent);
var stock = parseInt(get("stock").textContent);
if (stock == 0) {
alert("売却するストックがありません");
return;
}
stock--;
pnt += price;
if (price >= 10000) {
if (!localStorage["waterlavelgame_over"]) {
alert("おめでとう!!10,000ポイント達成!!");
localStorage["waterlavelgame_over"] = 1;
}
}
pnt--;
get("stock").textContent = stock;
get("point").textContent = pnt;
localStorage["waterlavelgame_point"] = pnt;
localStorage["waterlavelgame_stock"] = stock;
};
売りオペ (onload内)