はじめてのモバイルウェブアプリ 3 SPARQLハンズオン...

SPARQLハンズオン

水位推移予測ゲームのつくりかた

HTML5+JavaScript Webアプリ編

株式会社 jig.jp 代表取締役社長福野泰介 @taisukef http://fukuno.jig.jp/

http://fukuno.jig.jp/

http://sparql.odp.jig.jp/


select * { ?s ?p ?o }

※RDFを取得するSPARQL問い合わせhttp://sparql.odp.jig.jp/


水位の上がり下がりを予測するゲームに改造

水位を値段に見立てて買う＆売る元手1,000ポイントの10倍増を狙う

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> 水位表示アプリ、ベース

<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内)

水位の上がり下がりを予測するゲームに完成

http://fukuno.jig.jp/2014/opdapps

http://fukuno.jig.jp/2014/opdapps

はじめてのモバイルウェブアプリ 3 SPARQLハンズオン...

Internet

Transcript of はじめてのモバイルウェブアプリ 3 SPARQLハンズオン...