[Polymer]DBpediaのデータをcore-ajaxで表示させてみる覚書

以前に「PolymerでWP-APIのjsonから記事データを表示させる覚書」でPolymerを使ったJSONデータの取得処理を試しました。

今回はDBpediaから同様にデータを取得してみた覚書です。

今回必要なテンプレート

[html]
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/core-ajax/core-ajax.html">
<link rel="import" href="../../bower_components/paper-shadow/paper-shadow.html">
[/html]

上から順に

1. Polymer本体：本体部分
2. core-ajax要素：AJAX処理部分
3. ペーパーシャドウ要素：MaterialDesign部分

という役割があります。

１：URLを作る

AJAXで処理するためのURL（エンドポイント）を作ります。

DBpediaですので、DBpediaのSPARQLエンドポイントでSPARQLを書きましょう。

SPARQLの書き方については下のスライドを見ながら色々試してみてください。

ちなみに出力がデフォルトではHTMLになっていますので、JSONにする必要があります。

２：core-ajaxで読み込む

先ほど作成したURLをcore-ajaxのurlに入れましょう。
[html]
<core-ajax url="https://ja.dbpedia.org/sparql?default-graph-uri=http%3A%2F%2Fja.dbpedia.org&query=PREFIX+dbpedia-owl%3A+%3Chttp%3A%2F%2Fdbpedia.org%2Fontology%2F%3EPREFIX+rdfs%3A+%3Chttp%3A%2F%2Fwww.w3.org%2F2000%2F01%2Frdf-schema%23%3EPREFIX+dcterms%3A%3Chttp%3A%2F%2Fpurl.org%2Fdc%2Fterms%2F%3Eselect+distinct+*+where+%7B%3Flink+dcterms%3Asubject+%3Chttp%3A%2F%2Fja.dbpedia.org%2Fresource%2FCategory%3A%E8%A5%BF%E5%9B%BD%E4%B8%89%E5%8D%81%E4%B8%89%E6%89%80%3E%3Brdfs%3Acomment+%3Fcont%3Bdbpedia-owl%3Athumbnail+%3Fthumb%3Bdbpedia-owl%3Aaddress+%3Faddress%3Brdfs%3Alabel+%3Fname.%0D%0A%7D&format=application%2Fsparql-results%2Bjson&timeout=0&debug=on" handleAs="json" auto response="{{cont}}"></core-ajax>
[/html]

responseに指定している「{{cont}}」に取得したデータが格納されます。

通信失敗時の処理方法はちょっと今調べているとことです・・・orz ﾀﾞﾚｶｵｼｪｰﾃｸﾀﾞｻｲ

３：templateをループさせる

templateのrepeatに変数を渡すことでループ処理が行えます。

ここで「cont」ではなく「cont.results.bindings」まで渡しておくと、その後の呼び出し処理が楽です。
[html]
<template repeat="{{ent in cont.results.bindings}}">
ここにループ処理
</template>
[/html]

４：データを取り出す

取得したデータを表示させていきます。

{{ent.name.value}}のように「ent.[データ名].value」という形になります。

ちなみに[データ名]はSPARQLで指定した戻り値がそのまま入ります。

ということでこんな感じになります。

[html]
<paper-shadow z="1">
<img src="{{ent.thumb.value}}" class="thumb">
<div class="about">
<h1>{{ent.name.value}}</h1>
{{ent.address.value}}
</div>
</paper-shadow>
[/html]

ついでにpaper-shadow使ってみています。

作ったテンプレートを読み込ませる

作ったファイルをインポートして、タグを読み込ませる。
[html]
<link rel="import" href="./elements/sample/20141219.html">

<get-json2></get-json2>
[/html]

この辺りは以前のPolymer記事と変わりありません。

できたもの

https://wp-kyoto.cdn.rabify.me/sample/polymer/20141219.html

画像の縦横比がバラバラ過ぎて綺麗に揃わんのが気に入らない。。

Polymer側にもレイアウト設定できる方法があるそうなので、そこも含めてもうちょっと追いかけて行きたいと思います。