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

オープンデータ/Linked Open Data お手軽可視化ツールの紹介~SPARQLでマッシュアップ~

Embed Size (px)

Citation preview

オープンデータ/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

• https://github.com/uedayou/leaflet-simple-sparql

使い方: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

• https://github.com/uedayou/SlickQuiz-SPARQL

使い方: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

• https://github.com/uedayou/fullcalendar-sparql-js

使い方: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

• http://uedayou.net/SPARQLTimeliner/

使い方: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

大阪市版トイレ危険地帯

http://uedayou.github.io/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

• https://github.com/uedayou/booksearch-sparql-js

使い方: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

• http://dev.data2000.no/sgvizler/

• ※今回はバージョン0.5を使います

使い方: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/で検索できます

京都が出てくる本のデータ:出版年ランキング

http://uedayou.net/sparql-mashup/sgvizler/kyoto-issued-ranking.html

京都が出てくる本のデータ:著者トップ10

http://uedayou.net/sparql-mashup/sgvizler/kyoto-author-top10.html

京都が出てくる本のデータ:おすすめ度ランキング

http://uedayou.net/sparql-mashup/sgvizler/kyoto-recommend-ranking.html

京都が出てくる本のデータ:出版社別ランキング

http://uedayou.net/sparql-mashup/sgvizler/kyoto-publisher-ranking.html

京都が出てくる本のデータ:カテゴリ別ランキング

http://uedayou.net/sparql-mashup/sgvizler/kyoto-category-ranking.html

クエリの書き方(棒グラフ、円グラフの場合)• 「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)

クエリの書き方(棒グラフ、円グラフの場合)•実際のデータは…

LODチャレンジ応募作品の関連グラフ

http://uedayou.net/sparql-mashup/sgvizler/lodc-network.html

クエリの書き方(無指向グラフの場合)

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で二つのラベルが入るようにクエリを記述

クエリの書き方(無指向グラフの場合)•実際のデータは…

LOD・SPARQLをもっと知りたい!• LODハッカソン関西公式サイトで詳しく紹介しています

http://wp.lodosaka.jp/