ハンズオン勉強会はじめてのJavaScriptとSPARQL

アプリ開発勉強会
JavaScript & SPARQL
福井県システム工業会オープンデータ委員会 
株式会社 jig.jp 福野泰介
@taisukef http://fukuno.jig.jp/

1. ページ→アプリ
2. ハンズオン勉強会 JavaScript
3. ハンズオン勉強会 SPARQL
4. カスタマイズ
5. 質疑応答

HTML ➔ RDF
リンク
iPhone
iOS
iPad
Xperia
Androi
d
OS
typeof
typeof
typeof
typeof
typeof
Apple
author
typeof
Compan
y
意味付きリンク

現代Web
膨大なゴミデータから検索

次世代Web
探す必要すらない

EPSON MOVERIO(2011release) MWC2012にてデモ

オープンデータ
＝
自由に使えるWeb上のデータ
出展明示が条件、加工OK! 遊びOK! 転売OK!
（Creative Commons 表示)

次世代Webの基礎
= オープンデータ

Photo credit: kevin dooley / Foter / CC BY

サービスサービスサービス
データデータデータ
いままでの行政サービス
行政
市民

サービスサービスサービス
オープンデータオープンデータオープンデータ
オープンデータ時代の行政サービス
行政
市民
民間

PDF
Excel
XML/CSV
RDF
Linked-RDF
+
オープンライセンス
５つ星オープンデータ / 5Star Open Data

世界最先端 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など

5つ星オープンデータ
RDFの集合へのアクセス手段(API)
＝SPARQL(スパークル)
select * { ?s ?p ?o }
※W3C標準

http://taisukef.github.io/SPARQLKnocker/

補習ハンズオン、水位アプリ

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("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("point").textContent = pnt;
localStorage["waterlavelgame_point"] = pnt;
localStorage["waterlavelgame_stock"] = stock;
};
売りオペ (onload内)

グラフ化する際のサンプルにどうぞ！

1.23(⼟土)
オープンデータハッカソン
at AOSSA 602

3.5(⼟土)
インターナショナル
オープンデータ・デイ
with Code for Fukui

ハンズオン勉強会はじめてのJavaScriptとSPARQL

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a ハンズオン勉強会はじめてのJavaScriptとSPARQL

Similar a ハンズオン勉強会はじめてのJavaScriptとSPARQL (20)

Más de Taisuke Fukuno

Más de Taisuke Fukuno (17)