内容が古くなっている可能性がありますのでご注意下さい。
※当サイトを 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クエリを使用しても大丈夫です。
今回作成したプラグインのダウンロードはこちらからどうぞ。