[WordPressでLOD Part.2]jQueryでDBpediaの情報を表示させる

前回の記事ではPHPを使ってDBpediaの記事データを取得→表示まで処理させていました。

しかし実際に動かしてみるとどうにも「遅い」。

「file_get_contents」をコメントアウトすると早くなることから、DBpediaから取得するJSONファイルが重たいと判断。

「読み込み中サイトが表示されない」というデメリットを考慮すると、表示部分はjQueryでやるべきと思ったので切り替えました。

今回の完成図

PHP→jQueryの切り替えがメインのため、情報量をかなり削りました。

次回作業でもうちょっと増やせるようにします。

書いたコード

そして今回functions.phpに書いたコードがこちら。
[php]
add_action(‘admin_menu’, ‘sparql_hooks’);
add_action(‘save_post’, ‘save_sparql’);
add_action(‘wp_footer’,’insert_custom_js’);

function get_sparql_data(){
$sparql = get_post_meta(get_the_ID(), ‘_sparql’, true);
$sparql = urlencode($sparql);
$sparql_url = "https://ja.dbpedia.org/sparql?default-graph-uri=http%3A%2F%2Fja.dbpedia.org&query={$sparql}&format=application%2Fsparql-results%2Bjson&timeout=0";
return $sparql_url;
}

function sparql_hooks() {
add_meta_box(‘sparql’, ‘SPARQL QUERY’, ‘sparql_input’, ‘post’, ‘normal’, ‘high’);
add_meta_box(‘sparql’, ‘SPARQL QUERY’, ‘sparql_input’, ‘page’, ‘normal’, ‘high’);
}
function sparql_input() {
global $post;
echo ‘<input type="hidden" name="sparql_noncename" id="sparql_noncename" value="’.wp_create_nonce(‘custom-js’).’" />’;
echo ‘<textarea name="sparql" id="sparql" rows="5" cols="30" style="width:100%;">’.get_post_meta($post->ID,’_sparql’,true).'</textarea>’;
}
function save_sparql($post_id) {
if (!wp_verify_nonce($_POST[‘sparql_noncename’], ‘custom-js’)) return $post_id;
if (defined(‘DOING_AUTOSAVE’) && DOING_AUTOSAVE) return $post_id;
$sparql = $_POST[‘sparql’];
update_post_meta($post_id, ‘_sparql’, $sparql);
}

function insert_custom_js() {
if (is_page() || is_single()) {
if (have_posts()) : while (have_posts()) : the_post();
echo "<script type=’text/javascript’>
jQuery(document).ready(function($){
$.getJSON(‘" . get_sparql_data() . "’,function(data) {
$(‘.lod’).append(
‘<h1>’+data.results.bindings[0].num.value+'</h1><dl><dt>名称</dt><dd>’+data.results.bindings[0].name.value+'</dd><dt>住所</dt><dd>’+data.results.bindings[0].address.value+'</dd><dt>説明</dt><dd>’+data.results.bindings[0].cont.value+'</dd></dl>’
);
})
});
</script>";
endwhile; endif;
rewind_posts();
}
}
[/php]

続いて各コードについてまとめます。

今回の作業

１：SPARQLを取得

◆該当コード
[php]
function sparql_hooks() {
add_meta_box(‘sparql’, ‘SPARQL QUERY’, ‘sparql_input’, ‘post’, ‘normal’, ‘high’);
add_meta_box(‘sparql’, ‘SPARQL QUERY’, ‘sparql_input’, ‘page’, ‘normal’, ‘high’);
}
function sparql_input() {
global $post;
echo ‘<input type="hidden" name="sparql_noncename" id="sparql_noncename" value="’.wp_create_nonce(‘custom-js’).’" />’;
echo ‘<textarea name="sparql" id="sparql" rows="5" cols="30" style="width:100%;">’.get_post_meta($post->ID,’_sparql’,true).'</textarea>’;
}
function save_sparql($post_id) {
if (!wp_verify_nonce($_POST[‘sparql_noncename’], ‘custom-js’)) return $post_id;
if (defined(‘DOING_AUTOSAVE’) && DOING_AUTOSAVE) return $post_id;
$sparql = $_POST[‘sparql’];
update_post_meta($post_id, ‘_sparql’, $sparql);
}
[/php]
例によって投稿画面からSPARQLを取得させています。

「sparql_input」で投稿・固定ページへのカスタムフィールドを作成し、「save_sparql」でDBに保存させています。

コードはNxWorld様の記事で紹介されているものを流用しました。

WordPress：ページや記事ごとに個別のCSSやJavaScriptを追加する方法 | NxWorld

２：DBpediaに接続するためのURI作成

続いてDBpediaに接続するためのURIを作ります。
◆該当コード
[php]
function get_sparql_data(){
$sparql = get_post_meta(get_the_ID(), ‘_sparql’, true);
$sparql = urlencode($sparql);
$sparql_url = "https://ja.dbpedia.org/sparql?default-graph-uri=http%3A%2F%2Fja.dbpedia.org&query={$sparql}&format=application%2Fsparql-results%2Bjson&timeout=0";
return $sparql_url;
}
[/php]
カスタムフィールドからSPARQLを取得し、URLエンコードをした後にURIに埋め込んでいます。

改行・インデント対応を省略している関係上、SPARQLは１行で書かないとキツそうです。

ちなみにSPARQLでDBpediaの情報がとれているかの確認はVirtuoso SPARQL Query Editorを使いましょう。

３：表示処理をするjQueryを作成

そしてjQueryで表示させる部分を作成します。
[php]
function insert_custom_js() {
if (is_page() || is_single()) {
if (have_posts()) : while (have_posts()) : the_post();
echo "<script type=’text/javascript’>
jQuery(document).ready(function($){
$.getJSON(‘" . get_sparql_data() . "’,function(data) {
$(‘.lod’).append(
‘<h1>’+data.results.bindings[0].num.value+'</h1><dl><dt>名称</dt><dd>’+data.results.bindings[0].name.value+'</dd><dt>住所</dt><dd>’+data.results.bindings[0].address.value+'</dd><dt>説明</dt><dd>’+data.results.bindings[0].cont.value+'</dd></dl>’
);
})
});
</script>";
endwhile; endif;
rewind_posts();
}
}
[/php]

表示部分のjQueryは大串さんのブログ記事より引用しています。
jQueryでjsonデータを扱ってみる【入門編】 | webOpixel

なお、PHPで「””」・jQueryで「”」を使ってしまった関係上、htmlタグでどちらも使えなくなる問題発生中だったりします。

ベタ書きなんて横着をせずに分けて書けってことなんでしょうね・・・

４：WordPressにフックさせる

functionsに記述しているため、動作させるにはWordPressへフックさせる必要があります。
[php]
add_action(‘admin_menu’, ‘sparql_hooks’);
add_action(‘save_post’, ‘save_sparql’);
add_action(‘wp_footer’,’insert_custom_js’);
[/php]
それぞれ投稿画面・保存処理・フッター読み込みにフックさせています。

５：SPARQLクエリを投稿に記述する。

後は実際に表示させる部分を投稿画面で作成します。

まずは本文エリアに
[html]
<div class="lod"></div>
[/html]
を記述して表示領域を確保します。

続いてSPARQLクエリをカスタムフィールドに記述します。

今回はアイキャッチ画像の通り、「青岸渡寺」を検索させています。

[php]
PREFIX geo: <https://www.w3.org/2003/01/geo/wgs84_pos#>
PREFIX dbpedia-owl: <https://dbpedia.org/ontology/>
PREFIX prop-ja: <https://ja.dbpedia.org/property/>
PREFIX rdfs: <https://www.w3.org/2000/01/rdf-schema#>
PREFIX rs:<https://ja.dbpedia.org/resource/>

select distinct ?cont ?lat ?long ?address ?thumb ?link ?name where {
?b prop-ja:札所等 "西国三十三所第1番"@ja;
rdfs:label ?titles;
rdfs:comment ?cont;
dbpedia-owl:address ?address;
dbpedia-owl:thumbnail ?thumb;
dbpedia-owl:wikiPageExternalLink ?link;
prop-ja:名称 ?name;
geo:lat ?lat;
geo:long ?long.
}
[/php]

これをインデント・改行させていない状態で叩き込みます。

ちなみに「?b prop-ja:札所等 “西国三十三所第1番”@ja;」の「西国三十三所第1番」を書き換えることで、他のお寺を表示させることが「理論上」可能です。

もっとも、下の様なトラップがあるのでこのクエリを応用させるのはあまりよろしくないのではと思いますが・・・

というわけで、「PHPでDBpediaの記事データURIを作成→jQueryで表示」という処理は実装できました。

次回はもうちょっと汎用性の高くなるようにカスタマイズしていきます。