データ可視化プラグインの開発(1)

この記事は1年以上前に書かれました。
内容が古くなっている可能性がありますのでご注意下さい。


※当サイトを 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]

以下のチャートが表示されます。

[WP Sgv] Failed to draw chart. Maybe server error.

まだ改良の余地がありますね。

●バージョン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'}}

不便ですが、どうにかチャートの表示を整えることができます。

[WP Sgv] Failed to draw chart. Maybe server error.

●バージョン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クエリを使用しても大丈夫です。

今回作成したプラグインのダウンロードはこちらからどうぞ。

データ可視化プラグインの開発 12