Vue.jsを使ってBloggerの最新記事一覧を表示する

これは、Vue.js Advent Calendar 2014の記事です。

---
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 をさらっと読めば一通り使えるようになると思う。

d.sunnyone.org

ページ

2014-12-04