Upload
taisuke-fukuno
View
3.352
Download
0
Embed Size (px)
Citation preview
アプリ開発勉強会 JavaScript & SPARQL
福井県システム工業会オープンデータ委員会株式会社 jig.jp 福野泰介
@taisukef http://fukuno.jig.jp/
HTML ➔ RDF
リンク
iPhone
iOS
iPad
Xperia
Android
OS
typeof
typeof
typeof
typeoftypeof
Appleauthor
typeof
Company
意味付きリンク
世界最先端 IT 国家創造宣言、閣議決定 2013.6.14
Ⅰ.基本理念 Ⅱ. 目指すべき社会・姿 Ⅲ.目指すべき社会・姿を実現するための取組 1.革新的な新産業・新サービスの創出と全産業の成長を促進する社会の実現 (1)オープンデータ・ビッグデータの活用の推進 1.公共データの民間開放(オープンデータ)の推進 2013 年度中に試行版を立ち上げ、広く国民の意見募集を行うとともに、 2014 年度から本格運用を実施する 2014 年度及び 2015 年度の2年間を集中取組期間と位置づけ、 2015 年度末には、他の先進国と同水準の公開内容を実現する 2.健康で安心して快適に生活できる、世界一安全で災害に強い社会 3.公共サービスがワンストップで誰でもどこでもいつでも受けられる社会の実現
G8オープンデータ憲章、合意 2013.6.18
動きが加速する世界、データや情報は経済成長を促す大きな可能性を持つ(要約) 1.オープンデータは、この世界的な動きの中心に位置する
オープンデータによって - 公金の使途の開示により,更なる効率的な使用を動機付ける - 人々がサービスやその水準についての詳細な情報の入手を可能にする
そのため、我々は、以下の原則に合意する。 原則1:原則としてのオープンデータ 原則2:質と量 原則3:すべての者が利用できる 原則4:ガバナンス改善のためのデータの公表 原則5:イノベーションのためのデータの公表
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クエリー
{ "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クエリーの結果
<html> <head> <script src="http://fukuno.jig.jp/fukuno.js"></script> <script>
</script> </head> <body>
<h1>鯖江市 論手川水位メーター</h1> <div id="main"> <div id="level"><span id="value"></span>cm</div> <div id="datetime"></div> </div>
<div id="credit"> DATA: CC BY <a href=http://odp.jig.jp/ target=_blank>odp</a> </div>
</body> 水位表示アプリ、ベース
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タグ内
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タグ内
<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を記述して完成
<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>
予測ゲーム用に追加する
.btn { padding: 4px 12px; background: white; border-radius: 8px; margin: 4px; } #pointdiv { margin: 4px; font-weight: bold; }
CSSをstyleタグ内に追記
var point = localStorage["waterlavelgame_point"]; var stock = localStorage["waterlavelgame_stock"]; if (point) { get("point").textContent = point; get("stock").textContent = stock; }
ポイントとストックの読み込み (onload内)
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内)
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内)