WordBench京都10月号 WordPress × オープンデータ × データビジュアライゼーションハンズオン会 2015.10.03 メモ https://gist.github.com/uedayou/f9c72dcf208a59971b2e

1. ハンズオン
WordPressと
LODビジュアライズプラグイン
“WP Sgv”
特定非営利活動法人リンクト・オープン・データ・イニシアティブ
上田 洋
WordBench京都10月号
WordPress × オープンデータ × データビジュアライゼーションハンズオン会
2015.10.03

2. 今日使う資料・プログラムは
http://uedayou.net/
のGitHub・Gist・SlideShare
にあります

3. ハンズオンに必要なもの
1. WordPressを設置するPC
2. WordPressを編集するPC（1と同じPCでもOK）
3. WordPress
4. WP Sgv (WordPressプラグイン)
• 本家ではなく、今日のためにカスタマイズしたものを利用
• https://github.com/uedayou/wp-sgv

4. WP Sgvとは？
• 合同会社 緑ＩＴ事務所が開発したSPARQLを使用す
るビジュアライズツールSgvizlerのショートコードを発
行できるWordPressプラグイン
• 公式サイト：http://midoriit.com/works/wp-sgv.html
• 今回はハンズオン用に改修したプラグインを利用し
ます。
• ダウンロード先：https://github.com/uedayou/wp-sgv

5. 一式Zipファイルとして
ダウンロードできます

6. WP Sgv インストール
• 「wp-sgv-master.zip」を解凍
• 「wp-sgv-master」フォルダを
「[WordPressフォルダ]/wp-content/plugins」にコピー

7. WP Sgv インストール
• WordPressの管理ページの「プラグイン」タブを開き
「WP Sgv」が表示されていることを確認

8. WP Sgv でビジュアライズするには？
1. SPARQLクエリを書く
2. 「SPARQL可視化ショートコード」作成フォームにSPARQL
クエリや図表の設定を指定する
3. 「ショートコード」作成ボタンを押してショートコード作成
4. ショートコードをコピーして、記事内にペースト
5. プレビューで記事を確認
今日はSPARQLクエリを
書きません！

9. SPARQLとは？
• RDF(LOD)用の汎用クエリ言語
• RDF(LOD)用のデータベースからトリプル（3つ組）
データを検索して、表形式でデータが取得できます
PREFIX rdfs:
<http://www.w3.org/2000/01/rdf-schema#>
SELECT * WHERE {
?uri rdfs:label ?label .
}
LIMIT 10
?uri ?label
http://ja.dbpedia.org/resource/岩手県 "岩手県"
http://ja.dbpedia.org/resource/石川県 "石川県"
http://ja.dbpedia.org/resource/愛媛県 "愛媛県"
http://ja.dbpedia.org/resource/岡山県 "岡山県"

10. じゃあどうするの？
• SPARQLクエリ作成支援ツールを使います！
SPARQL Creator

11. SPARQL Creatorとは？
• 中部大学 年岡研究室開発のSPARQLクエリ作成支
援ツール
• SPARQLエンドポイント(SPARQLクエリで検索できる
Web API)の指定と、簡単なマウス操作でSPARQLク
エリが簡単に作成可能
• 検索されるデータのプレビューが画面中央の表に
常に表示される
• LODチャレンジ2014 基盤技術部門 優秀賞 受賞

12. SPARQL Creator
• 今日は公式のものではなく、ハンズオン用に改修
した「SPARQL Creator(uedayou改) 」を利用します。
• http://uedayou.net/SPARQLCreator/

13. SPARQL Creatorの使い方
1. SPARQLエンドポイントのURLを入力
2. 「クラス」メニューより興味のある項目を一つ
チェック
3. 「編集ツール」メニューのリストより面白そうな項
目をチェック（複数選択可）
4. 画面中央に表示される検索結果サマリーを確認
5. 「SPARQL Query」テキストエリアの文字列
（SPARQLクエリ)をコピーして利用
※4のサマリーのデータが検索できます
とても簡単にSPARQLクエリを作れます！

14. (1) SPARQLエンドポイントのURLを
入力
クリック！

15. (2) 「クラス」メニューより項目を一
つチェック

17. (3) 「編集ツール」メニューのリス
トより項目をチェック

18. (1) “type”, “comment”のチェックをはずす
(2) “birthDate”, “コンビ名”, “出身地”にチェックをいれる

19. (4) 検索結果サマリーを確認

20. (5) SPARQLクエリ完成
コピー
select ?label ?birthDate ?p1 ?p13 where{?s a
<http://dbpedia.org/ontology/Comedian>.?s
<http://www.w3.org/2000/01/rdf-schema#label> ?label.?s
<http://dbpedia.org/ontology/birthDate> ?birthDate.?s
<http://ja.dbpedia.org/property/コンビ名> ?p1.?s
<http://ja.dbpedia.org/property/出身地> ?p13.}limit 100

21. “SPARQL Creator”
と
“WP Sgv”
を使ったビジュアライズ

22. SPARQL Creator x WP Sgv
1. SPARQL Creator で SPARQLクエリを作る
2. SPARQLクエリを一部書き換える
3. WordPressのWP Sgv ショートコード作成フォーム
にSPARQLクエリを入力
4. WP Sgv にグラフの種類などを設定する
5. ショートコードを作成してWordPressに貼り付ける

23. (1) SPARQL Creator で SPARQLクエリを作る
(1) 全てチェックをはずす
(2) “birthPlace”だけ、チェックをいれる
チェックを入れるのは一つだけに！

24. (2) SPARQLクエリを一部書き換える
コピー
select ?birthPlace where{
?s a <http://dbpedia.org/ontology/Comedian>.
?s <http://dbpedia.org/ontology/birthPlace> ?birthPlace.}
limit 100
select ?birthPlace (count(?s) as ?num) where{
?s a <http://dbpedia.org/ontology/Comedian>.
?s <http://dbpedia.org/ontology/birthPlace> ?birthPlace.}
group by ?birthPlace ORDER BY DESC(?num) limit 10
(1) “?birthPlace” と “where”の間に (count(?s) as ?num) を挿入
(2) “limit 100” を “group by ?birthPlace ORDER BY DESC(?num) limit 10”
に置換

25. (3) WordPressのWP Sgv ショートコード
作成フォームにSPARQLクエリを入力

26. 縦棒グラフ
(4) WP Sgv にグラフの種類などを
設定する
• 今日は、円グラフと棒グラフを作成してみましょう！
横棒グラフ
円グラフ
今はこれを！

27. (5)ショートコードを作成して
WordPressに貼り付ける
クリック！
コピー
ペースト

28. 完成！
クリック！

29. 完成したけど・・・
URLみたいになっててかっこ悪い… SPARQLクエリ少し書き換えるだけで
スッキリ！

30. どうやったか？
select ?birthPlace (count(?s) as ?num) where{
?s a <http://dbpedia.org/ontology/Comedian>.
?s <http://dbpedia.org/ontology/birthPlace> ?Place.
?Place rdfs:label ?birthPlace.}
group by ?birthPlace ORDER BY DESC(?num) limit 10
とか
select ?birthPlace (count(?s) as ?num) where{
?s a <http://dbpedia.org/ontology/Comedian>.
?s <http://dbpedia.org/ontology/birthPlace> ?Place.
bind( substr(str(?Place), 32) as ?birthPlace) }
group by ?birthPlace ORDER BY DESC(?num) limit 10
SPARQLを少し勉強すればいろんなことができます！

31. 円グラフだと…

32. 都道府県だけに…
select ?birthPlace (count(?s) as ?num) where{
?s a <http://dbpedia.org/ontology/Comedian>.
?s <http://dbpedia.org/ontology/birthPlace> ?Place.
?Place rdf:type <http://schema.org/Place>.
?Place rdfs:label ?birthPlace.}
group by ?birthPlace ORDER BY DESC(?num)

33. 面白いデータを見つけて
ビジュアライズ作品を
作りましょう！

34. 検索すると面白いデータベース
• DBpedia Japanese
• Wikipedia日本語版のデータが検索できます
• 京都国際マンガミュージアム書誌情報LOD
• マンガのデータが検索できます
• 青空文庫LOD
• 青空文庫に登録された文学作品を検索できます
• 京都が出てくる本のデータ
• 京都が舞台の小説やマンガを検索できます
※ 全てSPARQL Creator ・ WP Sgv で利用できます

35. DBpedia Japanese
• SPARQL EndPointに「http://ja.dbpedia.org/sparql」を入力
• Graph URIを全て消す
クリック！

36. 京都が出てくる本のデータ
• SPARQL EndPointに
「http://lodcu.cs.chubu.ac.jp/SparqlEPCU/api/kyotobook_list」を
• Graph URIを全て消す
クリック！
「クラス指定無し」
を指定してください

37. 京都国際マンガミュージアムLOD
• SPARQL EndPointに「http://mdlab.slis.tsukuba.ac.jp/sparql」を
• Graph URIに「http://purl.org/net/mdlab/kmm」を入力
クリック！

38. 青空文庫LOD
• SPARQL EndPointに「http://mdlab.slis.tsukuba.ac.jp/sparql」を
• Graph URIに「http://purl.org/net/aozora/resources」を入力
クリック！

39. 注意
• マンガミュージアム・青空文庫LODは“WP Sgv”で
“jsonp”を指定してください
jsonp

40. ※ 参考
WordPressの設置(Windows編)
• XAMPPダウンロード
• https://www.apachefriends.org/jp/download.html
xampp-portable-win32-5.6.12-0-VC11.zip

41. ※ 参考
WordPressの設置(Windows編)
• XAMPPインストール・Apache起動
• xampp-portable-win32-5.6.12-0-VC11.zip を解凍
• xampp/xampp-control.exe を実行
クリック！

42. ※ 参考
WordPressの設置(Windows編)
• WordPress ダウンロード
• DB設定の必要のないSQLite版を使いました
• 例えば：https://github.com/icryptic/WordPress-SQLite
一式Zipファイルとして
ダウンロードできます

43. ※ 参考
WordPressの設置(Windows編)
• WordPressインストール
• WordPress-SQLite-master.zip を解凍
• 「WordPress-SQLite-master」フォルダをxampp/htdocs
フォルダに移動

44. ※ 参考
WordPressの設置(Windows編)
• ブラウザで「http://localhost/WordPress-SQLite-master/」
を開く
後は、WordPressの初期設定を行ってください。