wordpress rest api とリアクティブプログラミング
TRANSCRIPT
WordPress REST API とリアクティブプログラミング
SaCSS Special 08
自己紹介
名前 田中 広将（ひろましゃ）
住所 札幌市
職業 SIer 所属のインフラエンジニア
WordPress歴 2005年～
WordPress Bench 札幌 発起人（すいません…）
オープンソース活動
本日の内容
本日は、WordPress 4.4 から実装された
WordPress REST API と、
昨今定着してきた「リアクティブ」系
JavaScript ライブラリを組み合わせて、
ウェブサイトを構築する手法を
解説したいと思います
本日の内容
1.WordPress REST API とは
2.リアクティブプログラミングとは
3.Vue.js と WordPress REST API を組合せた活用
1. WordPress REST API とは
WP REST API の歴史
● WordPress REST API は、バージョン 4.4 からコア実装された、コンテンツの内容を JSON（JavaScript）形式で返すための仕組みです。
● 従来、WordPress においてコンテンツを出力するために「テーマ」を用いていましたが、REST API の追加により、新しい出力先が追加された形です。
● WordPress 4.7（近日リリース）ではさらに、標準的な API も実装され、複雑な抽出操作も、ドキュメントに従い簡単に取り扱えるようになります。
WordPress REST API の活用
● WordPress REST API は「エンドポイント（URL）」に対して JavaScript などから REST リクエストを行うことで、コンテンツの内容を取得できます。
● エンドポイントは自分で設計し拡張することができます。
WordPress REST API の活用
REST API を活用すると、WordPress で次のようなことが実現可能です。
– 静的サイトへの WordPress コンテンツの記載（本日紹介）
– 画面遷移のない検索の実装（本日紹介）
– ニュースサイトで見られるような、コンテンツの遅延ロード
– バックエンドのコンテンツリポジトリとしての WordPress の活用
– 等々...
WordPress REST API を体験する
WordPress サイトの URL のおしりに /wp-json/ を付与してみてください。
/wp-json/
サイトが持っている「エンドポイント」が確認できるエンドポイントです。
WordPress REST API を体験する
その情報を元にさらにエンドポイントをたどります。
/wp-json/oembed/1.0/embed/
指定した URL の投稿の抜粋が JSON 形式が取得できます。
WP REST API と JavaScript の関係
● 静的サイトや WordPress テーマが、WordPress REST API を通じてコンテンツを取得するために、JavaScript を使います。
● JavaScript から AJAX を用いて「エンドポイント」に対して REST リクエストを行い、戻された JSON 形式を入力とし、HTML に展開するのが大きな流れになります。
● 閲覧している人の操作に応じて、REST のリクエストを変化させ、必要な情報を取得します。（条件付き検索などで活用できます）
WP REST API と JavaScript の関係
これらを従来のプログラミング手法で実装すると、
煩雑な処理がたくさんでてきます。
そこで登場してきたのが「リアクティブ」系と言われる
JavaScript ライブラリです。
従来のプログラミング手法を使った REST API 活用の際の課題点
● プログラマーは、ユーザの操作に応じて JSON を取得し、DOM（HTML）を操作しコンテンツを整形して出力するプログラムをかきます。
● 現在画面に表示されている HTML ツリー状態（ノード）を把握し、必要に応じて HTML タグの追加や削除を行います。
従来のプログラミング手法を使った REST API 活用の際の課題点
● ある操作の後は、この HTML タグがあるので削除する・・・
● ある操作の後は、この HTML タグがないので追加する・・・
● ひとつの操作だけではなく、前回、前々回…、いろいろなパターンで変化していく HTML の状態をすべて把握して、プログラミングしなければならないのため、特定の操作順に対する考慮不足といった不具合も起きやすいです。
このような課題に対応すべく登場したのが、JavaScript のリアクティブ系のライブラリになります。
2. リアクティブプログラミングとは
プログラミングできる人
突然ですが問題です。
● "プログラミングができる人"とはどのような人でしょう?
●高度な CSS が記述できるのに、プログラミングが苦手という事象が起きるのはなぜでしょう？
プログラミングできる人（答え）
● 「変数」があるからです。
● CSS には変数がありません。
● プログラミングができる人は、上から順に流れていくソースコードの変数の状態を常に把握し、コントロールする術を知っています。
● 手続き型、構造化プログラミング、オブジェクト指向などなど、様々なプログラム言語が持つ仕組みは、いかに大量の変数の状態を把握しやすくするかとの戦いの中で生まれました。
プログラミングの例（FizzBuzz 問題）
● FizzBuzz 問題
プログラマーの基本的な素養をみるための、ごく簡単な問題。
プログラミングの例（FizzBuzz 問題）
● 問題
1から順に数を表示するプログラムを書け。ただし3の倍数のときは数の代わりに「Fizz」と、5の倍数のときは「Buzz」と表示し、3と5両方の倍数の場合には「FizzBuzz」と表示すること。
● 回答の出力例
1, 2, Fizz, 4, Fizz, Buzz, 7, 8, Fizz, Buzz, 11, Fizz, 13, 14, FizzBuzz, ...[省略]..., 97, 98, Fizz, Buzz
プログラミングの例（FizzBuzz 問題・回答）
var i; // 変数
for (i = 1; i <= 100; i++) { // ループ
if (i % 3 == 0 && i % 5 == 0) {
console.log('FizzBuzz');
} else if (i % 3 == 0) {
console.log('Fizz');
} else if (i % 5 == 0) {
console.log('Buzz');
} else {
console.log(i);
}
}
従来のプログラミングスタイル
従来のプログラミングスタイル
● ソースコードが上から下に流れることを基本として、ループで実行される命令の位置をコントロールする。
● 命令により変数の値を変化させ、実行中のプログラムの状態を変化させ、望みの処理をさせる。
● プログラミング言語から外の世界に命令し、外部の状態を変化させる。（画面出力等）
● つらい…
CSSとプログラミング言語の比較
● CSS はプログラミング言語と異なり、実行行や変数の状態などをもたず、宣言のみを行うため、シンプルで分かりやすい。
● このような宣言型のプログラミングスタイルが、従来と異なる、リアクティブプログラミングの特徴のひとつです。
CSS で FizzBuzz 問題
● 問題
1から順に数を表示するプログラムを書け。ただし3の倍数のときは数の代わりに「Fizz」と、5の倍数のときは「Buzz」と表示し、3と5両方の倍数の場合には「FizzBuzz」と表示すること。
CSSで FizzBuzz 問題・回答
<ol>
<li></li>
<li></li>
...[省略]...
<li></li>
<li></li></ol>
CSSで FizzBuzz 問題・回答
li:nth-child(3n):before {
content: "Fizz";
}
li:nth-child(5n):before {
content: "Buzz";
}
li:nth-child(15n):before {
content: "FizzBuzz";
}
li:nth-child(3n), li:nth-child(5n) {
list-style: none;
}
CSSで FizzBuzz 問題・回答
● 入力（HTML）を与えれば「宣言」通りオートマティックに表示が変わる。
● これがリアクティブな動きです。
● というわけで、JavaScript リアクティブ系プログラミングも、従来なプログラミングに慣れている方より、最初から CSS などで宣言的コーディングをしている方のほうが、とっつきやすいかもしれません。
JavaScript を使ったリアクティブな例
● この例は「時間」を入力として、キャラクターを動かす例です。
http://pararaehon.com/
● JavaScript で画面を書き換えるプログラムを簡潔にかこうとすると、リアクティブな宣言的プログラミングにたどりつくような気がします。
JavaScript を使ったリアクティブな例
hitsuji01: {
image: 'images/page02/02_hitsuji01.png',
update: function() {
this.y = 600 + (1 - Math.exp(-6 * (this.tick / 60))) * -280;
}
},
3. Vue.js と WP REST API を組み合せた活用
Vue.js でできること
● Vue.js は JavaScript のリアクティブ系ライブラリのひとつです。
● 今日の Vue.js の任務は JSON を入力とし HTML をリアクティブに変化させることです。
● WordPress REST API で取得した JSON を HTML に展開する宣言します（データバインディング）
● 宣言さえ完了すれば、取得した JSON データによって勝手に画面が書き換わるイメージです。
Vue.js の特徴
● Vue.js は通常 HTML に付与された属性を手がかりに、JavaScript と HTML を結びます。
● このため、既存の HTML や WordPress テーマ（CMS）と相性が良いです。
Vue.js の特徴
● 多くのリアクティブ系の JS ライブラリは、コンポーネントの考え方のもと、処理したい HTML を JavaScript ファイル側に持たせます。
● WordPress を始めとした多くの CMS では、テーマとなるファイルをその CMS で処理して HTML を生成するため、 .js ファイルに HTML が移動すると、結構つらいです。
var Hello = React.createClass({
render: function() {
return (
<div>Hello {this.props.name}</div>
);
}
})
Vue.js を単体で使う（練習）
● Vue.js を単体で使ってデータを HTML に展開
<tbody id="latest">
<tr v-for="item in items">
<td>{{item.post_title}}</td>
<td>{{item.post_content}}</td>
</tr>
</tbody>
Vue.js を単体で使う（練習）
<script>
new Vue({
el: '#latest',
data: {
items: [
{
post_title: '佐賀県',
post_content : "佐賀市"
},
{
post_title: '岩手県',
post_content : "盛岡市"
},
]
}
});
</script>
静的ページで Vue.js を使い WordPress からデータを取得
● functions.php で WordPress に REST API の口を作成する
add_action( 'rest_api_init', function () {
register_rest_route( 'sacss/v1', '/latest', array(
'methods' => 'GET',
'callback' => function() {
return get_posts(
array('orderby' => 'rand' , 'posts_per_page' => -1));
}
) );
} );
静的ページで Vue.js を使い WordPress からデータを取得
● 静的 HTML に配置した Vue.js で HTML に展開する
<script>
new Vue({
el: '#latest',
data: {
items: []
},
created: function() {
this.$http.get('/wp-json/sacss/v1/latest', function (data) {
this.items = data;
})
}
})
</script>
WordPress テーマで Vue.js を使い WordPress からデータを取得
● functions.php で WordPress に REST API の口を作成する
add_action( 'rest_api_init', function () {
register_rest_route( 'sacss/v1', '/cat/(?P<term_id>\d+)', array(
'methods' => 'GET',
'args' => array(
'term_id' => array(
'default' => 1,
'sanitize_callback' => 'absint',
)
),
'callback' => function($request) {
return get_posts(array( 'cat' => $request->get_param('term_id'), 'posts_per_page' => -1));
}
) );
} );
WordPress テーマで Vue.js を使い WordPress からデータを取得
● WordPress テンプレートファイル
<ul>
<?php foreach(get_categories() as $cat) : ?>
<li>
<a v-on:click="get(<?php echo $cat->term_id; ?>)" href="#">
<?php echo esc_html($cat->name); ?>
</a>
</li>
<?php endforeach; ?>
</ul>
<tbody>
<tr v-for="item in items">
<td>{{item.post_title}}</td>
<td>{{item.post_content}}</td>
</tr>
</tbody>
WordPress テーマで Vue.js を使い WordPress からデータを取得
<script>
new Vue({
el: '#latest',
data: {
items: []
},
created: function(){
this.$http.get('/wp-json/sacss/v1/latest', function (data) {
this.items = data;
})
},
methods: {
get: function(term_id) {
this.$http.get('/wp-json/sacss/v1/cat/' + term_id, function (data) {
this.items = data;
})
}
}
});
</script>
まとめ
まとめ
● WordPress REST API は JSON 形式でコンテンツを取得できます。
● JSON 形式で取得したコンテンツは、リアクティブ系の JavaScript で宣言的に HTML に展開すると便利です。
● Vue.js は WordPress テーマなど CMS のテンプレートと組み合わせる場合に楽ができ、相性がいいです。
ご清聴ありがとうございました。