関西オープンデータEXPO'15 2015.02.11 http://expo15.theodi.jp/

1. オープンデータ／Linked Open Data
お手軽可視化ツールの紹介
～SPARQLでマッシュアップ～
上田 洋
LODチャレンジJapan実行委員会
特定非営利活動法人リンクト・オープン・データ・イニシアティブ
Linked Open Dataハッカソン関西
http://wp.lodosaka.jp/
関西オープンデータEXPO’15
2015.2.11

2. オープンデータ／Linked Open Data
お手軽可視化ツール
• SPARQLクエリ（クエリ言語)を書くだけでプログラミ
ングなしにいろんなビジュアライズやアプリが作れ
ます
• 全てWebブラウザがあれば動作します
• Webサーバは必要ありません！

3. 今日紹介するツール
• 地図アプリ
• leaflet-simple-sparql
• クイズアプリ
• SlickQuiz-SPARQL
• カレンダーアプリ
• fullcalendar-sparql-js
• 地図とタイムラインビジュアライズアプリ
• SPARQL Timeliner
• 地図で空白地域ビジュアライズアプリ
• ○○危険地帯
• 書籍検索アプリ
• booksearch-sparql-js
• データビジュアライズツール
• Sgvizler
※全てオープンソースです

4. 地図アプリ
• leaflet-simple-sparql
• https://github.com/uedayou/leaflet-simple-sparql

5. 使い方：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];

6. クイズアプリ
• SlickQuiz-SPARQL
• https://github.com/uedayou/SlickQuiz-SPARQL

7. 使い方：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];

8. SlickQuiz-SPARQL用の
データの作り方
• データは簡単に作成できます。
• LinkData.org の「横浜検定問題・解答集」と同じよう
にデータを作るだけ
• http://linkdata.org/work/rdf1s560i
データを作って「ご当地検定アプリ」作りませんか？

9. カレンダーアプリ
• fullcalendar-sparql-js
• https://github.com/uedayou/fullcalendar-sparql-js

10. 使い方：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];

11. 地図とタイムラインの
ビジュアライズアプリ
• SPARQL Timeliner
• http://uedayou.net/SPARQLTimeliner/

12. 使い方：SPARQL Timeliner
エンドポイントのURLを入力
クエリを入力
• http://uedayou.net/SPARQLTimeliner
を開いてエンドポイントURLとクエリを入力して
「Load>>」ボタンをクリック

13. 使い方：SPARQL Timeliner
• 以下のルールに従ってクエリを作成してください
• 詳しい使い方は以下の資料にまとめています
• http://www.slideshare.net/uedayou/sparql-timeliner-
28905905

14. トイレ危険地帯
• Linked Open Data チャレンジ 2013 受賞作品
• 鯖江市が公開するオープンデータのうち、公衆トイ
レの位置を利用してトイレのない地域をWebアプリ
でビジュアライズ
http://y4ashida.github.io/toilet/

15. ○○危険地帯
• トイレ危険地帯のソースコードを修正して、SPARQL
でさまざまなデータで空白地域をビジュアライズで
きるようにしました
• https://github.com/uedayou/dangerzone-sparql

16. 大阪市版トイレ危険地帯
http://uedayou.github.io/dangerzone-sparql/

17. ○○危険地帯の使い方
1. 「Download ZIP」ボタンを押してソースコード
をダウンロード
2. ZIPファイルを解凍
3. config.js の 書き換える
4. Index.html をブラウザで開く
SPARQLを書きます

18. 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
エンドポイント

19. 大阪市のいろんな危険地帯を作っ
てみよう！
// 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
…

20. 書籍検索アプリ
• booksearch-sparql-js
• https://github.com/uedayou/booksearch-sparql-js

21. 使い方：booksearch-sparql-js
• githubのページから「Download ZIP」ボタンを押して、
ソースコード一式をダウンロード
• 解凍して「config.js」 にエンドポイントとクエリを記述する
• ?uri に書籍URI、?title に書籍タイトル、?description に詳細情
報が入るようにクエリを記述してください。
• {% QUERY %} が検索文字列に置き換えられます。
• index.html をブラウザで開く
// SPARQLエンドポイントURL
var 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];

22. 使い方：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":"著者",
…

23. データビジュアライズツール
• sgvizler
• http://dev.data2000.no/sgvizler/
• ※今回はバージョン0.5を使います

24. 使い方：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 ?year
ORDER 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

25. 使い方：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 ?year
ORDER BY DESC(?noOfUri)
“
data-sgvizler-chart="gBarChart"
data-sgvizler-loglevel="2"
data-sgvizler-chart-options=“title=出版年別ランキング"
style="width:800px; height:500px;"></div>
クエリを記述
グラフの
種類を指定
エンドポイントを指定
グラフタイトル
を記述
Idを指定

26. 例で利用するデータ
• 京都が出てくる本のデータ
• 京都岡崎にある図書館で働く司書の方々が中心のグ
ループ「ししょまろはん」が作成・公開する京都が舞台の
小説やマンガ・ライトノベル等のデータ
• 作品の舞台となった京都府内の位置データや司書さん
のおすすめ度もデータ化される
• LODチャレンジJapan2014データセット部門応募作品
• LODチャレンジ2011-2013応募作品メタデータ
どちらも
LODチャレンジ応募作品のSPARQLエンドポイント（試行版）
http://lodc.jp/
で検索できます

27. 京都が出てくる本のデータ：
出版年ランキング
http://uedayou.net/sparql-mashup/sgvizler/kyoto-issued-ranking.html

28. 京都が出てくる本のデータ：
著者トップ10
http://uedayou.net/sparql-mashup/sgvizler/kyoto-author-top10.html

29. 京都が出てくる本のデータ：
おすすめ度ランキング
http://uedayou.net/sparql-mashup/sgvizler/kyoto-recommend-ranking.html

30. 京都が出てくる本のデータ：
出版社別ランキング
http://uedayou.net/sparql-mashup/sgvizler/kyoto-publisher-ranking.html

31. 京都が出てくる本のデータ：
カテゴリ別ランキング
http://uedayou.net/sparql-mashup/sgvizler/kyoto-category-ranking.html

32. クエリの書き方
（棒グラフ、円グラフの場合）
• 「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 ?year
ORDER BY DESC(?noOfUri)

33. クエリの書き方
（棒グラフ、円グラフの場合）
• 実際のデータは…

34. LODチャレンジ応募作品の
関連グラフ
http://uedayou.net/sparql-mashup/sgvizler/lodc-network.html

35. クエリの書き方
（無指向グラフの場合）
select distinct ?title1 ?title2
from <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で二つのラベルが入るようにクエリを記述

36. クエリの書き方
（無指向グラフの場合）
• 実際のデータは…

37. LOD・SPARQLをもっと知りたい！
• LODハッカソン関西 公式サイトで詳しく紹介してい
ます
http://wp.lodosaka.jp/