Ractive.jsでWP REST APIを使ってWordPressのページを表示


##WP REST APIを使いたい
WordPress4.1から標準機能になるという、[WP REST APIプラグイン](http://wp-api.org/)がすごく面白い。これを使えば、WordPressのテンプレートタグにとらわれず、WordPressをCMSとしたサイトを自由に作れるのではないか。
それをテンプレート機能もある[Ractive.js](http://www.ractivejs.org/)でやったら楽なんじゃないかと。

##ページスラッグからpageのJSONデータを取得して表示内容を置換する例

```html:html
<div id="main-menu"></div>
<div id="pages"></div>
```

```html:template
<script id="menuTemplate" type="text/ractive">
<ul class="nav nav-pills">
    {{#menu}}
    <li class="{{#(activePage === slug)}}active{{/(activePage === slug)}}">
        <a on-click="setActivePage" data-target="{{slug}}" href="#">{{text}}</a>
    </li>
    {{/menu}}
</ul>
</script>

<script id="pagesTemplate" type="text/ractive">
{{#posts}}
<section class="container post post-{{slug}}">
    <div class="row">
        <header>
            <h1 class="entry-title">{{title}}</h1>
        </header>
        <div class="entry-content">{{{content}}}</div>
    </div>
</section>
{{/posts}}
</script>
```
###Ractiveオブジェクトを2つ作る
ractiveMenuオブジェクトにメニュー表示とページ切り替え機能
ractivePageオブジェクトにJSON取得、ページ更新機能をセットします
メニュー項目のプロパティは、WordPressのpageで投稿しときのslugと、メニューに表示してほしいテキストを設定します。

```JavaScript:Javascript
var jsonUrl, ractivePage, ractiveMenu;

//ダミーURLです
jsonUrl = 'http://sample-wordpress.com/wp-json/posts';

ractiveMenu = new Ractive({
    el: '#main-menu',
    template: '#mainMenuTemplate',
    data: {

		//投稿したWordPressページのslugとメニューに表示したいテキスト
		//このプロパティ自体をWP REST APIからうまいこと取ってくれば自分で書かなくても済みます
        menu:[
            {"slug":"home","text":"ホーム"},
            {"slug":"about","text":"このサイトについて"},
            {"slug":"profile","text":"プロフィール"},
            {"slug":"contact","text":"お問い合わせ"}
        ]
    }
});
ractiveMenu.on({
    setActivePage: function (event) {
        this.set('activePage', event.node.getAttribute('data-target'));
    }
});

ractivePage = new Ractive({
    el: '#pages',
    template: '#pagesTemplate',
    data: {
		pages[];
	}
});
ractivePage.on({
    setPageData: function (pageName, keyPath) {
        var self = this,
          jqxhr = $.getJSON(
            jsonUrl,
            {
				//APIに投げるオブジェクト
                type: 'page',
                filter: {name: pageName}
            }
        );
        jqxhr.done(function (json) {

			 //ページの内容を空にしてから取得した1件のページデータを追加
            self.set(keyPath, null) && self.set(keyPath, json[0]);

			 //ここの処理をpushにするとページが下に追加される
            //self.push(keyPath, json[0]);
        })
        .fail(function () {
			 //エラー処理
        })
        .always(function () {
        });
    }
});


//※修正点 ractiveMenuの{{activePage}}が更新されたらractivePageのページ更新イベントを発火
//ractiveMenu.observe()はractivePageをセットした後に書かないと動きませんでした
ractiveMenu.observe('activePage', function (val) {
	 ractivePage.fire('setPageData', {type: 'page', name: val}, 'pages');
});


//最初に表示されるページを設定
//※修正点 activePageの値をセットするのみに変更
//=>ractiveMenu.observe('activePage')が作動する
ractiveMenu.set('activePage', 'home');


```
この例はページ表示のみですが、もちろん通常のカテゴリーpostなどもいけます。もう少し複雑になります。

##WordPressのテンプレートタグからおさらばする
この先はもはや力技ですが、WordPressのテンプレート内で自らのJSONを取得して[mustache.php](https://github.com/bobthecow/mustache.php/wiki)を使うと、Ractive.jsと同じテンプレートファイルを使ということができそうです。
これができれば静的htmlでもファーストビューは全く同じ内容を表示することができます。
例えば、template/menuTemplate.htmlにテンプレートの内容をmustacheで書いて、

```php
<script id="menuTemplate" type="text/ractive">
	<?php require'template/menuTemplate.html';?>
</script>
```
などとするわけです。もちろんその場合、php側でも同じようなロジックを書かないといけません。
それにRactive.jsのmustacheは機能を少し拡張しているみたいなので、まったくそのままというわけにもいかなそうですが。

WordPressのテンプレートタグからおさらばする（なぜ？）日も近いです。

**追記**：上記の野望についてはいったんあきらめました。実際やってみて、ある程度は実現できたのですが、Ractive用に書いたテンプレートをそのまま本家mustacheに適用しようとすると当然互換性が保てず、かといって **Ractive側で拡張している機能は便利すぎ**て手放すわけにもいかず、とりあえずphpコメントアウトする、とか力技でなんとかしましたが、無駄な労力がかかってしまいました。

もしやるとしたら、

- php用にはシンプルなテンプレートを書いて、Ractive用にリッチなテンプレートを書く
- そもそもこのプランはあきらめ、おとなしくWPのテンプレートタグを使う（ただしシンプルに書く）

としたほうが現実的だと思いました。