---
Webサイトのトップページだとかに、ブログの最新記事一覧へのリンクを表示することがある。今回はGoogleのブログサービスである「Blogger」で記事を書いていた場合に、その一覧を、データバインディングを行うJavaScriptライブラリであるVue.jsを使って表示する方法を説明する。
サンプル
実際のコードを見るほうが簡単なので、このブログを表示する例を出すと、以下の通りとなる。動作例：http://jsfiddle.net/zvrakxuv/
短く書けるのがわかると思う。
解説
さて、以下で解説していく。BloggerのAPIからのJSONの取得
まずデータを得るが、BloggerにはJSONPで記事の情報を返すURLがあるので、これを利用する。具体的には、このようなURLにアクセスすればよい。http://blogname.blogspot.com/feeds/posts/default?alt=json-in-script&callback=myFunc(参考： Simple example of retrieving JSON feeds from Blogger Data API)
すると、以下のようなデータが返ってくるので、JSONPの要領でデータを読み込めばよい(データはあまりにも多いので、jqコマンドで整形後適宜省略)。
myFunc({
"feed": {
"entry": [
{（略）
"published": {
"$t": "2014-11-11T22:14:00.000+09:00"
}, (略)
"title": {
"$t": "「アセットを抽出」の出力は油断するとボケる (Photoshop CC 2014)",
"type": "text"
}, (略)
"link": [
(4つ省略),
{
"title": "「アセットを抽出」の出力は油断するとボケる (Photoshop CC 2014)",
"href": "http://d.sunnyone.org/2014/11/photoshop-cc-2014_67.html",
"type": "text/html",
"rel": "alternate"
}
],
"author": [（略）]
},（略）});
詳しくは実際に叩いてみるか「Using JSON in the Google Data Protocol」を参照。この他にも、サムネイルのURLや本文など、いろいろ入っているので、他にも状況に応じて使える。ただ、その分ブラウザに返すデータ量が多い。この時点でmax-results=5のように指定して数を限定するのがおすすめである。
Vue.jsによるデータバインディング
あとはcallbackに指定した関数でデータを受けて表示すればよいので、jQueryなんかで書いてももちろんよいが、ここではVue.jsを使う。Vue.jsは、データバインディングを行うライブラリで、他のメジャーどころで言えばKnockout.jsの立ち位置に近いが、DSLがもう少し簡略化されており、さらっと書けるので、今回のようなケースには向いていると思う。（基盤に徹するBackbone.jsや、詰め込みまくりなAngular.jsとは異なる。）
バインド対象となる要素の記述
まずテンプレートとなる要素を記述する。今回の例は以下。今回のポイントとなるのは以下の通り。
バインド対象となるidの記述
あとでCSSセレクタ記法で指示するので書き方はなんでもよいのだが、なんらかわかるように印をつける。今回はidとした。繰り返しを意味するv-repeat
Vue.jsでは、各種v-なんとか（デフォルトではv-だが、data-vのように変更も可能）という属性（Directiveと呼ぶらしい）が用意されている。このDirectiveのうち、まずはv-repeatを利用する。このv-repeat属性に「変数名: 対象」としておくと、対象を回して要素の中身を繰り返してくれる。
なお、dtとddをセットにしたいのでtemplate要素を利用したが、ul/liだったらliにv-repeatをつける感じになる。templateは、非対応ブラウザを考慮してdisplay: noneをつけたほうがいいかもしれない。
v-シリーズの指定方法は、概ねKnockout inspiredな感じである。詳しくは、Guideの「Directives」およびAPI Referenceの「Directives」を参照。
属性をセットするv-attr
v-attrに「属性名: 式」と記述するとその値を要素の属性にセットできる。属性にも後述の{{ }}の記法が使えるのだが、テンプレートの段階でブラウザに解釈されると悲しい属性(imgのsrc)があるので、属性には基本的にこのv-attrを使うほうがベターだと思う。
値を出力する{{ }}記法
mustacheテンプレートライクな (Angularライクというべきか) {{ }}記法を使うと、値を記述することができる。.でたどることもできるし、[n]も使える。| を使うとFilterを呼び出すこともできる。
フィルタ関数の定義
| に使うフィルタはカスタムに定義することができる。定義するには、値と引数を受け取り、値を返す関数を用意し、Vue.filter()で設定する。
Vue.filter('first', function(value, length) {
return value.substr(0, length);
});
フィルタについては、Guideの「Filters」およびAPI Referenceの「Filters」を参照。
データバインドの適用
あとは、先ほどcallback=に指定した関数でデータを受け取り、Vueオブジェクトを生成するだけ。今回は、elにバインド対象を、dataにバインドするデータを渡している。function showFeedArticles(json) {
new Vue({
el: '#feed-article-list',
data: json
});
}
今回のケースではこれでおしまい。あとは、Guide をさらっと読めば一通り使えるようになると思う。
0 件のコメント:
コメントを投稿