More Related Content
Similar to WordPress REST API とリアクティブプログラミング (20)
WordPress REST API とリアクティブプログラミング
- 7. WP REST API の歴史
● WordPress REST API は、バージョン 4.4 からコア実装
された、コンテンツの内容を JSON(JavaScript)形式で
返すための仕組みです。
● 従来、WordPress においてコンテンツを出力するために
「テーマ」を用いていましたが、REST API の追加により、
新しい出力先が追加された形です。
● WordPress 4.7(近日リリース)ではさらに、標準的な API
も実装され、複雑な抽出操作も、ドキュメントに従い簡単に
取り扱えるようになります。
- 8. WordPress REST API の活用
● WordPress REST API は「エンドポイント(URL)」
に対して JavaScript などから REST リクエストを行
うことで、コンテンツの内容を取得できます。
●
エンドポイントは自分で設計し拡張することができま
す。
- 9. WordPress REST API の活用
REST API を活用すると、WordPress で次のようなこ
とが実現可能です。
– 静的サイトへの WordPress コンテンツの記載(本日紹介)
– 画面遷移のない検索の実装(本日紹介)
– ニュースサイトで見られるような、コンテンツの遅延ロード
– バックエンドのコンテンツリポジトリとしての WordPress の
活用
– 等々...
- 10. WordPress REST API を体験する
WordPress サイトの URL のおしりに /wp-json/ を付与し
てみてください。
/wp-json/
サイトが持っている「エンドポイント」が確認できるエンドポ
イントです。
- 11. WordPress REST API を体験する
その情報を元にさらにエンドポイントをたどります。
/wp-json/oembed/1.0/embed/
指定した URL の投稿の抜粋が JSON 形式が取得できます。
- 12. WP REST API と JavaScript の関係
● 静的サイトや WordPress テーマが、WordPress REST
API を通じてコンテンツを取得するために、JavaScript
を使います。
● JavaScript から AJAX を用いて「エンドポイント」に対し
て REST リクエストを行い、戻された JSON 形式を入
力とし、HTML に展開するのが大きな流れになります。
● 閲覧している人の操作に応じて、REST のリクエストを
変化させ、必要な情報を取得します。(条件付き検索な
どで活用できます)
- 13. WP REST API と JavaScript の関係
これらを従来のプログラミング手法で実装すると、
煩雑な処理がたくさんでてきます。
そこで登場してきたのが「リアクティブ」系と言われる
JavaScript ライブラリです。
- 15. 従来のプログラミング手法を使った
REST API 活用の際の課題点
● ある操作の後は、この HTML タグがあるので削除する・・・
● ある操作の後は、この HTML タグがないので追加する・・・
●
ひとつの操作だけではなく、前回、前々回…、いろいろなパターンで変
化していく HTML の状態をすべて把握して、プログラミングしなけれ
ばならないのため、特定の操作順に対する考慮不足といった不具合
も起きやすいです。
このような課題に対応すべく登場したのが、
JavaScript のリアクティブ系のライブラリになります。
- 20. プログラミングの例
(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
- 21. プログラミングの例
(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);
}
}
- 25. CSS で FizzBuzz 問題
●
問題
1から順に数を表示するプログラムを書け。
ただし3の倍数のときは数の代わりに「Fizz」と、
5の倍数のときは「Buzz」と表示し、
3と5両方の倍数の場合には「FizzBuzz」と表示す
ること。
- 27. 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;
}
- 28. CSSで FizzBuzz 問題・回答
● 入力(HTML)を与えれば「宣言」通りオートマティッ
クに表示が変わる。
●
これがリアクティブな動きです。
● というわけで、JavaScript リアクティブ系プログラミ
ングも、従来なプログラミングに慣れている方より、
最初から CSS などで宣言的コーディングをしてい
る方のほうが、とっつきやすいかもしれません。
- 32. Vue.js でできること
● Vue.js は JavaScript のリアクティブ系ライブラリの
ひとつです。
● 今日の Vue.js の任務は JSON を入力とし HTML
をリアクティブに変化させることです。
● WordPress REST API で取得した JSON を
HTML に展開する宣言します(データバインディン
グ)
● 宣言さえ完了すれば、取得した JSON データによっ
て勝手に画面が書き換わるイメージです。
- 33. Vue.js の特徴
● Vue.js は通常 HTML に付与された属性を手がか
りに、JavaScript と HTML を結びます。
● このため、既存の HTML や WordPress テーマ
(CMS)と相性が良いです。
- 34. Vue.js の特徴
● 多くのリアクティブ系の JS ライブラリは、コンポーネントの考え方のもと、処理したい
HTML を JavaScript ファイル側に持たせます。
● WordPress を始めとした多くの CMS では、テーマとなるファイルをその CMS で処
理して HTML を生成するため、 .js ファイルに HTML が移動すると、結構つらいです。
var Hello = React.createClass({
render: function() {
return (
<div>Hello {this.props.name}</div>
);
}
})
- 35. 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>
- 37. 静的ページで 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));
}
) );
} );
- 38. 静的ページで 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>
- 39. 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));
}
) );
} );
- 40. 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>
- 41. 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>
- 43. まとめ
● WordPress REST API は JSON 形式でコンテン
ツを取得できます。
● JSON 形式で取得したコンテンツは、リアクティブ
系の JavaScript で宣言的に HTML に展開すると
便利です。
● Vue.js は WordPress テーマなど CMS のテンプ
レートと組み合わせる場合に楽ができ、相性がいい
です。