Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
オープンデータ/Linked Open Data
お手軽可視化ツールの紹介
~SPARQLでマッシュアップ~
上田 洋
LODチャレンジJapan実行委員会
特定非営利活動法人リンクト・オープン・データ・イニシアティブ
Linked Open ...
オープンデータ/Linked Open Data
お手軽可視化ツール
• SPARQLクエリ(クエリ言語)を書くだけでプログラミ
ングなしにいろんなビジュアライズやアプリが作れ
ます
• 全てWebブラウザがあれば動作します
• Webサーバは...
今日紹介するツール
• 地図アプリ
• leaflet-simple-sparql
• クイズアプリ
• SlickQuiz-SPARQL
• カレンダーアプリ
• fullcalendar-sparql-js
• 地図とタイムラインビジュアラ...
地図アプリ
• leaflet-simple-sparql
• https://github.com/uedayou/leaflet-simple-sparql
使い方:leaflet-simple-sparql
• githubのページから「Download ZIP」ボタンを押して、
ソースコード一式をダウンロード
• 解凍して「config.js」 にエンドポイントとクエリを記述する
• index...
クイズアプリ
• SlickQuiz-SPARQL
• https://github.com/uedayou/SlickQuiz-SPARQL
使い方:SlickQuiz-SPARQL
• githubのページから「Download ZIP」ボタンを押して、
ソースコード一式をダウンロード
• 解凍して「config.js」 にエンドポイントとクエリを記述する
• index.html...
SlickQuiz-SPARQL用の
データの作り方
• データは簡単に作成できます。
• LinkData.org の「横浜検定問題・解答集」と同じよう
にデータを作るだけ
• http://linkdata.org/work/rdf1s56...
カレンダーアプリ
• fullcalendar-sparql-js
• https://github.com/uedayou/fullcalendar-sparql-js
使い方:fullcalendar-sparql-js
• githubのページから「Download ZIP」ボタンを押して、
ソースコード一式をダウンロード
• 解凍して「config.js」 にエンドポイントとクエリを記述する
• inde...
地図とタイムラインの
ビジュアライズアプリ
• SPARQL Timeliner
• http://uedayou.net/SPARQLTimeliner/
使い方:SPARQL Timeliner
エンドポイントのURLを入力
クエリを入力
• http://uedayou.net/SPARQLTimeliner
を開いてエンドポイントURLとクエリを入力して
「Load>>」ボタンをクリック
使い方:SPARQL Timeliner
• 以下のルールに従ってクエリを作成してください
• 詳しい使い方は以下の資料にまとめています
• http://www.slideshare.net/uedayou/sparql-timeliner-...
トイレ危険地帯
• Linked Open Data チャレンジ 2013 受賞作品
• 鯖江市が公開するオープンデータのうち、公衆トイ
レの位置を利用してトイレのない地域をWebアプリ
でビジュアライズ
http://y4ashida.git...
○○危険地帯
• トイレ危険地帯のソースコードを修正して、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 () {/*...
大阪市のいろんな危険地帯を作っ
てみよう!
// SPARQLエンドポイントを指定
var endpoint = "http://db.lodc.jp/sparql";
// SPARQLクエリを指定
var query = (function...
書籍検索アプリ
• booksearch-sparql-js
• https://github.com/uedayou/booksearch-sparql-js
使い方:booksearch-sparql-js
• githubのページから「Download ZIP」ボタンを押して、
ソースコード一式をダウンロード
• 解凍して「config.js」 にエンドポイントとクエリを記述する
• ?uri に...
使い方:booksearch-sparql-js
• config.js の prop_labels にURIとそのラベルを設定
しておくと、詳細表示の際にURIをラベルに置き換
わります。
var prop_labels = {
"http:...
データビジュアライズツール
• sgvizler
• http://dev.data2000.no/sgvizler/
• ※今回はバージョン0.5を使います
使い方:sgvizler
• 以下のコードをHTMLファイルに貼り付けて保存してブラウザで開くだけ
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs...
使い方:sgvizler
<div
id=“sgvizler-sample”
data-sgvizler-endpoint
= "http://lodcu.cs.chubu.ac.jp/SparqlEPCU/api/kyotobook_list...
例で利用するデータ
• 京都が出てくる本のデータ
• 京都岡崎にある図書館で働く司書の方々が中心のグ
ループ「ししょまろはん」が作成・公開する京都が舞台の
小説やマンガ・ライトノベル等のデータ
• 作品の舞台となった京都府内の位置データや司書さ...
京都が出てくる本のデータ:
出版年ランキング
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」
• GROU...
クエリの書き方
(棒グラフ、円グラフの場合)
• 実際のデータは…
LODチャレンジ応募作品の
関連グラフ
http://uedayou.net/sparql-mashup/sgvizler/lodc-network.html
クエリの書き方
(無指向グラフの場合)
select distinct ?title1 ?title2
from <http://lod.sfc.keio.ac.jp/challenge/entries>
where {
?s <http://...
クエリの書き方
(無指向グラフの場合)
• 実際のデータは…
LOD・SPARQLをもっと知りたい!
• LODハッカソン関西 公式サイトで詳しく紹介してい
ます
http://wp.lodosaka.jp/
Upcoming SlideShare
Loading in …5
×

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

2,566 views

Published on

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

Published in: Engineering
  • Be the first to comment

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

  1. 1. オープンデータ/Linked Open Data お手軽可視化ツールの紹介 ~SPARQLでマッシュアップ~ 上田 洋 LODチャレンジJapan実行委員会 特定非営利活動法人リンクト・オープン・データ・イニシアティブ Linked Open Dataハッカソン関西 http://wp.lodosaka.jp/ 関西オープンデータEXPO’15 2015.2.11
  2. 2. オープンデータ/Linked Open Data お手軽可視化ツール • SPARQLクエリ(クエリ言語)を書くだけでプログラミ ングなしにいろんなビジュアライズやアプリが作れ ます • 全てWebブラウザがあれば動作します • Webサーバは必要ありません!
  3. 3. 今日紹介するツール • 地図アプリ • leaflet-simple-sparql • クイズアプリ • SlickQuiz-SPARQL • カレンダーアプリ • fullcalendar-sparql-js • 地図とタイムラインビジュアライズアプリ • SPARQL Timeliner • 地図で空白地域ビジュアライズアプリ • ○○危険地帯 • 書籍検索アプリ • booksearch-sparql-js • データビジュアライズツール • Sgvizler ※全てオープンソースです
  4. 4. 地図アプリ • leaflet-simple-sparql • https://github.com/uedayou/leaflet-simple-sparql
  5. 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. 6. クイズアプリ • SlickQuiz-SPARQL • https://github.com/uedayou/SlickQuiz-SPARQL
  7. 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. 8. SlickQuiz-SPARQL用の データの作り方 • データは簡単に作成できます。 • LinkData.org の「横浜検定問題・解答集」と同じよう にデータを作るだけ • http://linkdata.org/work/rdf1s560i データを作って「ご当地検定アプリ」作りませんか?
  9. 9. カレンダーアプリ • fullcalendar-sparql-js • https://github.com/uedayou/fullcalendar-sparql-js
  10. 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. 11. 地図とタイムラインの ビジュアライズアプリ • SPARQL Timeliner • http://uedayou.net/SPARQLTimeliner/
  12. 12. 使い方:SPARQL Timeliner エンドポイントのURLを入力 クエリを入力 • http://uedayou.net/SPARQLTimeliner を開いてエンドポイントURLとクエリを入力して 「Load>>」ボタンをクリック
  13. 13. 使い方:SPARQL Timeliner • 以下のルールに従ってクエリを作成してください • 詳しい使い方は以下の資料にまとめています • http://www.slideshare.net/uedayou/sparql-timeliner- 28905905
  14. 14. トイレ危険地帯 • Linked Open Data チャレンジ 2013 受賞作品 • 鯖江市が公開するオープンデータのうち、公衆トイ レの位置を利用してトイレのない地域をWebアプリ でビジュアライズ http://y4ashida.github.io/toilet/
  15. 15. ○○危険地帯 • トイレ危険地帯のソースコードを修正して、SPARQL でさまざまなデータで空白地域をビジュアライズで きるようにしました • https://github.com/uedayou/dangerzone-sparql
  16. 16. 大阪市版トイレ危険地帯 http://uedayou.github.io/dangerzone-sparql/
  17. 17. ○○危険地帯の使い方 1. 「Download ZIP」ボタンを押してソースコード をダウンロード 2. ZIPファイルを解凍 3. config.js の 書き換える 4. Index.html をブラウザで開く SPARQLを書きます
  18. 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. 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. 20. 書籍検索アプリ • booksearch-sparql-js • https://github.com/uedayou/booksearch-sparql-js
  21. 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. 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. 23. データビジュアライズツール • sgvizler • http://dev.data2000.no/sgvizler/ • ※今回はバージョン0.5を使います
  24. 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. 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. 26. 例で利用するデータ • 京都が出てくる本のデータ • 京都岡崎にある図書館で働く司書の方々が中心のグ ループ「ししょまろはん」が作成・公開する京都が舞台の 小説やマンガ・ライトノベル等のデータ • 作品の舞台となった京都府内の位置データや司書さん のおすすめ度もデータ化される • LODチャレンジJapan2014データセット部門応募作品 • LODチャレンジ2011-2013応募作品メタデータ どちらも LODチャレンジ応募作品のSPARQLエンドポイント(試行版) http://lodc.jp/ で検索できます
  27. 27. 京都が出てくる本のデータ: 出版年ランキング http://uedayou.net/sparql-mashup/sgvizler/kyoto-issued-ranking.html
  28. 28. 京都が出てくる本のデータ: 著者トップ10 http://uedayou.net/sparql-mashup/sgvizler/kyoto-author-top10.html
  29. 29. 京都が出てくる本のデータ: おすすめ度ランキング http://uedayou.net/sparql-mashup/sgvizler/kyoto-recommend-ranking.html
  30. 30. 京都が出てくる本のデータ: 出版社別ランキング http://uedayou.net/sparql-mashup/sgvizler/kyoto-publisher-ranking.html
  31. 31. 京都が出てくる本のデータ: カテゴリ別ランキング http://uedayou.net/sparql-mashup/sgvizler/kyoto-category-ranking.html
  32. 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. 33. クエリの書き方 (棒グラフ、円グラフの場合) • 実際のデータは…
  34. 34. LODチャレンジ応募作品の 関連グラフ http://uedayou.net/sparql-mashup/sgvizler/lodc-network.html
  35. 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. 36. クエリの書き方 (無指向グラフの場合) • 実際のデータは…
  37. 37. LOD・SPARQLをもっと知りたい! • LODハッカソン関西 公式サイトで詳しく紹介してい ます http://wp.lodosaka.jp/

×