ハンズオン勉強会 はじめてのjavascriptとsparql
TRANSCRIPT
アプリ開発勉強会 JavaScript & SPARQL
福井県システム工業会オープンデータ委員会株式会社 jig.jp 福野泰介
@taisukef http://fukuno.jig.jp/
1. ページ→アプリ
2. ハンズオン勉強会 JavaScript
3. ハンズオン勉強会 SPARQL
4. カスタマイズ
5. 質疑応答
ページ → アプリ
HTML / リンク
HTML ➔ RDF
リンク
iPhone
iOS
iPad
Xperia
Android
OS
typeof
typeof
typeof
typeoftypeof
Appleauthor
typeof
Company
意味付きリンク
現代Web 膨大なゴミデータから検索
次世代Web 探す必要すらない
EPSON MOVERIO(2011release) MWC2012にてデモ
村田製作所 x 鯖江市
オープンデータ ＝
自由に使えるWeb上のデータ
出展明示が条件、加工OK! 遊びOK! 転売OK! （Creative Commons 表示)
次世代Webの基礎 = オープンデータ
Photo credit: kevin dooley / Foter / CC BY
サービスサービスサービス
データ データ データ
いままでの行政サービス
行政
市民
サービスサービスサービス
オープンデータ オープンデータ オープンデータ
オープンデータ時代の行政サービス
行政
市民
民間
Excel
XML/CSV
RDF
Linked-RDF
+オープンライセンス
５つ星オープンデータ / 5Star Open Data
2013.6.7 テレビ東京 WBS
世界最先端 IT 国家創造宣言、閣議決定 2013.6.14
Ⅰ．基本理念 Ⅱ. 目指すべき社会・姿 Ⅲ.目指すべき社会・姿を実現するための取組 １．革新的な新産業・新サービスの創出と全産業の成長を促進する社会の実現 （１）オープンデータ・ビッグデータの活用の推進 1.公共データの民間開放（オープンデータ）の推進 2013 年度中に試行版を立ち上げ、広く国民の意見募集を行うとともに、 2014 年度から本格運用を実施する 2014 年度及び 2015 年度の２年間を集中取組期間と位置づけ、 2015 年度末には、他の先進国と同水準の公開内容を実現する ２．健康で安心して快適に生活できる、世界一安全で災害に強い社会 ３．公共サービスがワンストップで誰でもどこでもいつでも受けられる社会の実現
G8オープンデータ憲章、合意 2013.6.18
動きが加速する世界、データや情報は経済成長を促す大きな可能性を持つ（要約） １．オープンデータは、この世界的な動きの中心に位置する
オープンデータによって - 公金の使途の開示により，更なる効率的な使用を動機付ける - 人々がサービスやその水準についての詳細な情報の入手を可能にする
そのため、我々は、以下の原則に合意する。 原則1：原則としてのオープンデータ 原則2：質と量 原則3：すべての者が利用できる 原則4：ガバナンス改善のためのデータの公表 原則5：イノベーションのためのデータの公表
http://fukuno.jig.jp/app/opendatacity/
福井県 全17市町+県 オープンデータ コンプリート
福井県システム工業会
オープンデータ委員会
＆
福井県オープンデータ
ビジネス利活用研究会
ハンズオン、アプリづくり
世界で最も応用範囲の広い言語
HTML + CSS + JavaScript
パソコン、Android、iPhoneなど
http://fukuno.jig.jp/app/map/
5つ星オープンデータ
RDFの集合へのアクセス手段(API)
＝SPARQL(スパークル)
select * { ?s ?p ?o }
※W3C標準
http://taisukef.github.io/SPARQLKnocker/
http://odp.jig.jp/app_list/
補習ハンズオン、水位アプリ
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内)
グラフ化する際のサンプルにどうぞ！
1.23(⼟土) オープンデータハッカソン
at AOSSA 602
3.5(⼟土) インターナショナル オープンデータ・デイ with Code for Fukui