内容が古くなっている可能性がありますのでご注意下さい。
※当サイトを https に変更したため、http で運用されているSPARQLエンドポイントとの接続でエラーになり、チャートが表示されなくなっています。
WordPressの投稿や固定ページに、Sgvizlerを使用してビジュアライズしたSPARQLクエリ結果を貼り付けるためのプラグイン、WP Sgvを開発します。
●バージョン0.1
以下のような囲み型ショートコードを使用し、SPARQLクエリは囲みの中に記述する仕様とします。
[wp_sgv endpoint="http://ja.dbpedia.org/sparql" chart="google.visualization.BarChart" height="600" width="600"]
SELECT DISTINCT ?kenmei COUNT(?shi) AS ?cities WHERE {
?ken rdf:type schema:AdministrativeArea ;
dbpedia-owl:country dbpedia-ja:日本 ;
prop-ja:name ?kenmei .
?shi rdf:type dbpedia-owl:City ;
dbpedia-owl:location ?ken . }
GROUP BY ?kenmei
ORDER BY DESC(?cities)
LIMIT 10
[/wp_sgv]
チャートの種類、高さと幅はショートコードの属性として記述します。ショートコードのタグの途中では改行できませんが、囲みの中は改行可能です。
プラグインの完全なソースコードは以下のとおりです。
<?php
/*
Plugin Name: WP Sgv
Plugin URI: http://midoriit.com/works/wp-sgv.html
Description: Visualize SPARQL query result using Sgvizler
Version: 0.1
Author: Midori IT Office LLC
Author URI: http://midoriit.com/
License: GPL3
*/
function wp_sgv_handler( $atts, $content ) {
extract( shortcode_atts( array(
'endpoint' => '',
'chart' => 'sgvizler.visualization.Text',
'height' => '100',
'width' => '100'),
$atts ) );
$query = str_replace(array("\r\n","\r","\n"), ' ', strip_tags($content));
if( empty($endpoint) ) {
return 'no endpoint';
} else if( !trim($query) ) {
return 'no query';
}
$uniq = uniqid("",1);
return
'<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://beta.data2000.no/sgvizler/release/0.6/sgvizler.js"></script>
<div id="sgvdiv'.$uniq.'"></div>
<script type="text/javascript">
var sparqlQueryString = "'.$query.'";
q = new sgvizler.Query();
q.query(sparqlQueryString)
.endpointURL("'.$endpoint.'")
.endpointOutputFormat("json")
.chartFunction("'.$chart.'")
.chartHeight("'.$height.'")
.chartWidth("'.$width.'")
.draw("sgvdiv'.$uniq.'");
</script>';
}
add_shortcode('wp_sgv', 'wp_sgv_handler');
?>
ショートコードのハンドラwp_sgv_handler()を定義し、add_shortcode()で登録しています。
囲み型ショートコードのため、ハンドラの引数は2つになります。1つめの$attsにはショートコードの属性、$contentは囲みの内容が入ります。
まず、
extract( shortcode_atts( array(
'endpoint' => '',
'chart' => 'sgvizler.visualization.Text',
'height' => '100',
'width' => '100'),
$atts ) );
で、属性の値を取り出し、デフォルト値を設定します。エンドポイントにはデフォルト値はありません。
次に、
$query = str_replace(array("\r\n","\r","\n"), ' ', strip_tags($content));
囲みの内容、すなわちSPARQLクエリから、(WordPressによって勝手に追加される)不要なタグと、改行コードを取り除きます。
if( empty($endpoint) ) {
return 'no endpoint';
} else if( !trim($query) ) {
return 'no query';
}
エンドポイントまたはSPARQLクエリが指定されていないときは、エラーを出力して終了します。
$uniq = uniqid("",1);
は、<div>のIDに付与し、IDをユニークにするためのものです。
最後に、
return
'<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://beta.data2000.no/sgvizler/release/0.6/sgvizler.js"></script>
<div id="sgvdiv'.$uniq.'"></div>
<script type="text/javascript">
var sparqlQueryString = "'.$query.'";
q = new sgvizler.Query();
q.query(sparqlQueryString)
.endpointURL("'.$endpoint.'")
.endpointOutputFormat("json")
.chartFunction("'.$chart.'")
.chartHeight("'.$height.'")
.chartWidth("'.$width.'")
.draw("sgvdiv'.$uniq.'");
SgvizlerのAPIを使用してビジュアライズしたチャートを表示するためのJavaScriptコードを返します。
SgvizlerのAPIについては、こちらの記事を参照して下さい。
以下のショートコードを記述すると、
[wp_sgv endpoint="http://ja.dbpedia.org/sparql" chart="google.visualization.BarChart" height="600" width="600"]
SELECT DISTINCT ?kenmei COUNT(?shi) AS ?cities WHERE {
?ken rdf:type schema:AdministrativeArea ;
dbpedia-owl:country dbpedia-ja:日本 ;
prop-ja:name ?kenmei .
?shi rdf:type dbpedia-owl:City ;
dbpedia-owl:location ?ken . }
GROUP BY ?kenmei
ORDER BY DESC(?cities)
LIMIT 10
[/wp_sgv]
以下のチャートが表示されます。
まだ改良の余地がありますね。
●バージョン0.2
そこで、極めて安直にですが、チャートのオプションを指定できるようにします。
まず、
extract( shortcode_atts( array(
'endpoint' => '',
'chart' => 'sgvizler.visualization.Text',
'options' => '',
'height' => '100',
'width' => '100'),
$atts ) );
ショートコードからoptions属性の値を取得して、
q = new sgvizler.Query(null, {'.$options.'});
JavaScriptのコードで、sgvizler.Queryクラスのコンストラクタに引数として渡します。
これだけですので、当然のことながら、options属性の値は以下のようなJavaScriptのコードとして記述しなければなりません。
chartArea:{left:'100'},title:'The number of cities per prefecture (Top 10)',titleTextStyle:{color:'red', fontSize:'16'},legend:{position:'none'},hAxis:{gridlines:{color:'red'}}
不便ですが、どうにかチャートの表示を整えることができます。
●バージョン0.3.1
ここで問題発覚。
SPARQLクエリには<http://www.w3.org/1999/02/22-rdf-syntax-ns#type>のようなURIが含まれることがあります。ところが、
$query = str_replace(array("\r\n","\r","\n"), ' ', strip_tags($content));
のstrip_tags()によってURIの記述が削除されてしまいます。
そこで、この行は
$query = str_replace(array("\r\n","\r","\n","<br />","<br>","</br>","<p>","</p>"), ' ', $content);
と修正し、strip_tags()は使わずに、<br />、<br>、</br>、<p>、</p>タグを取り除くことにします。もし、他にもWordPressによって勝手に挿入されるタグがあれば、それらも取り除く必要があります。
これで、URIを含むSPARQLクエリを使用しても大丈夫です。
今回作成したプラグインのダウンロードはこちらからどうぞ。