オープンデータ/Linked Open Dataお手軽可視化ツールの紹介~SPARQLでマッシュアップ~
上田洋
LODチャレンジJapan実行委員会
特定非営利活動法人リンクト・オープン・データ・イニシアティブ
Linked Open Dataハッカソン関西
http://wp.lodosaka.jp/
関西オープンデータEXPO’152015.2.11
オープンデータ/Linked Open Dataお手軽可視化ツール• SPARQLクエリ(クエリ言語)を書くだけでプログラミングなしにいろんなビジュアライズやアプリが作れます
•全てWebブラウザがあれば動作します• Webサーバは必要ありません!
今日紹介するツール
• 地図アプリ• leaflet-simple-sparql
• クイズアプリ• SlickQuiz-SPARQL
• カレンダーアプリ• fullcalendar-sparql-js
• 地図とタイムラインビジュアライズアプリ• SPARQL Timeliner
• 地図で空白地域ビジュアライズアプリ• ○○危険地帯
• 書籍検索アプリ• booksearch-sparql-js
• データビジュアライズツール• Sgvizler
※全てオープンソースです
使い方:leaflet-simple-sparql• githubのページから「Download ZIP」ボタンを押して、ソースコード一式をダウンロード
• 解凍して「config.js」にエンドポイントとクエリを記述する
• index.htmlをブラウザで開く
var endpoint = "http://ja.dbpedia.org/sparql";var query = (function () {/* PREFIX geo: <http://www.w3.org/2003/01/geo/wgs84_pos#> PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#> select * where {
?link rdfs:label ?title; geo:lat ?lat; geo:long ?long.
} limit 1000 */}).toString().match(/¥n([¥s¥S]*)¥n/)[1];
使い方:SlickQuiz-SPARQL• githubのページから「Download ZIP」ボタンを押して、ソースコード一式をダウンロード
• 解凍して「config.js」にエンドポイントとクエリを記述する
• index.htmlをブラウザで開くvar endpoint = "http://lodcu.cs.chubu.ac.jp/SparqlEPCU/api/yokohama_quiz";var query = (function () {/*
select distinct * where { ?uri<http://linkdata.org/property/rdf1s560i#question> ?question;
<http://linkdata.org/property/rdf1s560i#choice1> ?choise1;<http://linkdata.org/property/rdf1s560i#choice2> ?choise2;<http://linkdata.org/property/rdf1s560i#choice3> ?choise3;<http://linkdata.org/property/rdf1s560i#choice4> ?choise4;<http://linkdata.org/property/rdf1s560i#answer> ?answer_no;<http://linkdata.org/property/rdf1s560i#kaisetsu> ?kaisetsu.bind(concat('</p>解説:',str(?kaisetsu),'</p>') as ?correct)bind(concat('</p>解説:',str(?kaisetsu),'</p>') as ?incorrect) } ORDER BY
RAND() LIMIT 10*/}).toString().match(/¥n([¥s¥S]*)¥n/)[1];
SlickQuiz-SPARQL用のデータの作り方• データは簡単に作成できます。
• LinkData.org の「横浜検定問題・解答集」と同じようにデータを作るだけ• http://linkdata.org/work/rdf1s560i
データを作って「ご当地検定アプリ」作りませんか?
使い方:fullcalendar-sparql-js• githubのページから「Download ZIP」ボタンを押して、ソースコード一式をダウンロード
• 解凍して「config.js」にエンドポイントとクエリを記述する
• index.htmlをブラウザで開く
var endpoint = "http://archive.yafjp.org/test/inspection.php";var query = (function () {/*PREFIX dc: <http://purl.org/dc/elements/1.1/> PREFIX schema: <http://schema.org/> PREFIX event: <http://fp.yafjp.org/terms/event#> SELECT * WHERE{
?uri a event:Event;schema:name ?title;schema:startDate ?start;schema:endDate ?end;dc:description ?description.
} */}).toString().match(/¥n([¥s¥S]*)¥n/)[1];
使い方:SPARQL Timeliner
エンドポイントのURLを入力クエリを入力
• http://uedayou.net/SPARQLTimelinerを開いてエンドポイントURLとクエリを入力して「Load>>」ボタンをクリック
使い方:SPARQL Timeliner• 以下のルールに従ってクエリを作成してください
• 詳しい使い方は以下の資料にまとめています• http://www.slideshare.net/uedayou/sparql-timeliner-
28905905
トイレ危険地帯
• Linked Open Data チャレンジ 2013 受賞作品
•鯖江市が公開するオープンデータのうち、公衆トイレの位置を利用してトイレのない地域をWebアプリでビジュアライズ
http://y4ashida.github.io/toilet/
○○危険地帯
• トイレ危険地帯のソースコードを修正して、SPARQLでさまざまなデータで空白地域をビジュアライズできるようにしました
• https://github.com/uedayou/dangerzone-sparql
○○危険地帯の使い方
1. 「Download ZIP」ボタンを押してソースコードをダウンロード
2. ZIPファイルを解凍
3. config.js の書き換える
4. Index.html をブラウザで開く
SPARQLを書きます
config.js の書き方
// SPARQLエンドポイントを指定var endpoint = "http://db.lodc.jp/sparql";// SPARQLクエリを指定var query = (function () {/*SELECT DISTINCT *FROM <http://lod.sfc.keio.ac.jp/challenge2013/show_status.php?id=d030>WHERE{
?uri <http://lodosaka.hozo.jp/category_1> "公衆トイレ"@ja ;<http://www.w3.org/2003/01/geo/wgs84_pos#lat> ?latitude ;<http://www.w3.org/2003/01/geo/wgs84_pos#long> ?longitude .
}*/}).toString().match(/¥n([¥s¥S]*)¥n/)[1];// 中心位置を指定var initial_latitude =34.68206400648744;var initial_longitude =135.49816131591797;// ズーム率を指定var initial_zoom = 11;
SPARQLクエリ
SPARQLエンドポイント
大阪市のいろんな危険地帯を作ってみよう!
// SPARQLエンドポイントを指定var endpoint = "http://db.lodc.jp/sparql";// SPARQLクエリを指定var query = (function () {/*SELECT DISTINCT *FROM <http://lod.sfc.keio.ac.jp/challenge2013/show_status.php?id=d030>WHERE{
?uri <http://lodosaka.hozo.jp/category_1> "公衆トイレ"@ja ;<http://www.w3.org/2003/01/geo/wgs84_pos#lat> ?latitude ;<http://www.w3.org/2003/01/geo/wgs84_pos#long> ?longitude .
}LIMIT 1000*/}).toString().match(/¥n([¥s¥S]*)¥n/)[1];// 中心位置を指定var initial_latitude =34.68206400648744;var initial_longitude =135.49816131591797;// ズーム率を指定var initial_zoom = 11;
ここのカテゴリを変えるといろんな危険地帯が作れます例:“学校・保育所”@ja“名所・旧跡”@ja“警察・消防”@ja“医療・福祉”@ja“公園・スポーツ”@ja“駅・バス停”@ja…
使い方:booksearch-sparql-js• githubのページから「Download ZIP」ボタンを押して、ソースコード一式をダウンロード
• 解凍して「config.js」にエンドポイントとクエリを記述する• ?uriに書籍URI、?title に書籍タイトル、?description に詳細情報が入るようにクエリを記述してください。
• {% QUERY %} が検索文字列に置き換えられます。
• index.htmlをブラウザで開く// SPARQLエンドポイントURLvar endpoint = "http://lodcu.cs.chubu.ac.jp/SparqlEPCU/api/kyotobook_list";// SPARQLクエリ(検索用) var list_query = (function () {/*select distinct ?uri ?title ?description where {
?uri <http://linkdata.org/property/rdf1s1294i#title> ?title;<http://linkdata.org/property/rdf1s1294i#Summary> ?description.
filter(regex(str(?title), '.*?{% QUERY %}.*?'))} */}).toString().match(/¥n([¥s¥S]*)¥n/)[1];
使い方:booksearch-sparql-js• config.js の prop_labelsにURIとそのラベルを設定しておくと、詳細表示の際にURIをラベルに置き換わります。
var prop_labels = {"http://purl.org/dc/terms/title":"タイトル","http://purl.org/dc/elements/1.1/creator":"著者",…
使い方:sgvizler• 以下のコードをHTMLファイルに貼り付けて保存してブラウザで開くだけ
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script type="text/javascript" src="https://www.google.com/jsapi"></script><script type="text/javascript" id="sgvzlr_script" src="http://sgvizler.googlecode.com/svn/release/0.5/sgvizler.js"></script><script type="text/javascript"><!-- $(document).ready(sgvizler.go()); --></script><div id=“sgvizler-sample”data-sgvizler-endpoint
="http://lodcu.cs.chubu.ac.jp/SparqlEPCU/api/kyotobook_list"data-sgvizler-query=“SELECT ?year (count(?uri) AS ?noOfUri)WHERE {
?uri <http://linkdata.org/property/rdf1s1294i#Year> ?year.} GROUP BY ?yearORDER BY DESC(?noOfUri)“
data-sgvizler-chart="gBarChart"data-sgvizler-loglevel="2"data-sgvizler-chart-options="title=Number of instances"style="width:2000px; height:2500px;"></div>
• 以下で雛形コードをダウンロードできます
• http://uedayou.net/sparql-mashup/sgvizler-sample.html
使い方:sgvizler
<div id=“sgvizler-sample”data-sgvizler-endpoint= "http://lodcu.cs.chubu.ac.jp/SparqlEPCU/api/kyotobook_list"data-sgvizler-query=“SELECT ?year (count(?uri) AS ?noOfUri)WHERE {
?uri <http://linkdata.org/property/rdf1s1294i#Year> ?year.} GROUP BY ?yearORDER BY DESC(?noOfUri)“
data-sgvizler-chart="gBarChart"data-sgvizler-loglevel="2"data-sgvizler-chart-options=“title=出版年別ランキング"style="width:800px; height:500px;"></div>
クエリを記述
グラフの種類を指定
エンドポイントを指定
グラフタイトルを記述
Idを指定
例で利用するデータ
•京都が出てくる本のデータ• 京都岡崎にある図書館で働く司書の方々が中心のグループ「ししょまろはん」が作成・公開する京都が舞台の小説やマンガ・ライトノベル等のデータ
• 作品の舞台となった京都府内の位置データや司書さんのおすすめ度もデータ化される
• LODチャレンジJapan2014データセット部門応募作品
• LODチャレンジ2011-2013応募作品メタデータ
どちらもLODチャレンジ応募作品のSPARQLエンドポイント(試行版)
http://lodc.jp/で検索できます
クエリの書き方(棒グラフ、円グラフの場合)• 「data-sgvizler-chart」には以下を指定
• 円グラフ:「gPieChart」
• 縦棒グラフ:「gColumnChart」
• 横棒グラフ:「gBarChart」
• GROUP BY を使ってデータをグループ化する
• COUNTで出現回数を計算
PREFIX dcterms: <http://purl.org/dc/terms/>
SELECT ?year (COUNT(?uri) AS ?noOfUri)WHERE {
?uri dcterms:issued ?year.}GROUP BY ?yearORDER BY DESC(?noOfUri)
クエリの書き方(無指向グラフの場合)
select distinct ?title1 ?title2from <http://lod.sfc.keio.ac.jp/challenge/entries>where {?s <http://purl.org/dc/terms/relation> ?o.?s <http://purl.org/dc/terms/title> ?title1.?o <http://purl.org/dc/terms/title> ?title2.}
•無指向グラフの場合• 「data-sgvizler-chart」には「gForceGraph」を指定
• SELECTで二つのラベルが入るようにクエリを記述