Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
REST APIを活用した、
新しい
WordPressサイト製作手法
カリスマプログラマ 田中広将
WordPress 4.4 から追加された REST API は、
JavaScript(JSON) によるコンテンツ出力ができる新機能
です。
静的な HTML への動的コンテンツの埋め込みや、非同期な
検索処理、コンテンツリポジトリとしての...
自己紹介
名前●田中広将(ひろましゃ)
職業●SIer勤務のインフラエンジニア(札幌)
WordPress歴●2005年~
OSC北海道歴●2010年~
OSC2010
OSC2011
OSC2012
OSC2013
OSC2014
OSC2015
WordPressとの出会い
2005年にブログを始めようとレンタルサーバに
WordPress を導入したのが最初です。
その頃は、WordPress 1.2 でしたが、テーマはもと
より固定ページや、ファイルのアップロード機能は
ありません...
WordPressとの出会い
しかしながら、1.2 の時点で既に現在のプラグイン
システム(add_filter、add_action)は確立されて
おり、本体のプログラムに手を入れずに動作を変え
られる動きに面白さを感じ、WordPressの...
WordPressとの出会い
その後、日本で初めての WordPressの書籍を執筆し
たり、OSC北海道でのセミナーや勉強会を行うなど
して現在に至ります。
懐かしの WordPress 2.0 時点の管理画面です。
(ご存じの方いらっしゃいますか?)
なんとビジュアルエディタもなく、画像の挿入もプラグインを使うなどして一苦労でした。
札幌のWordPress地域コミュニティー、
WordBench札幌については最後にご紹介いたします。
WordPress REST API
WordPress REST API とは
WordPress REST API は、JavaScript(JSON) を経由
して WordPress へのデータアクセスを行うことが
出来ます。
WordPress REST API を活用す...
REST API の活用範囲
静的サイト(.html だけで構成されているサイト)
への WordPress 記事の埋め込み。
WordPress の検索ページなどで AJAX 手法を使った、
画面遷移のないインターフェースの構築。
画面遷移後...
REST API の活用範囲
本日は以下のふたつの手法を、サンプルを紹介しな
がら解説していきたいと思います。
静的サイトへの記事の埋め込み
(全部 WordPress にする必要のないサイトへの部分
適用)
画面遷移のない検索結果出力
(ユー...
REST API の活用範囲
WordPress の REST 用 API はうまく設計されており、
難しい部分はありませんので、ぜひ活用していただ
ければと思います。
テーマ内の functions.php に10行ほど付け足す
だけで動作さ...
WP REST API プラグインとの関係
WordPress REST API を紹介する前に、若干混乱しま
すので「WP REST API」プラグインについて先に解説
します。
v2.wp-api.org
WP REST API プラグインとの関係
WordPress 4.4 から REST API を使うための基盤が
WordPress のコアに入りました。このため「WP
REST API」プラグインを導入することなしに、REST
API は利...
WP REST API プラグインとの関係
WordPress 4.4 未満では以下のソースファイルが
「WP REST API」プラグインに含まれおり、
WordPress 4.4 からコアにマージされた形になって
います。
マージされたのは...
REST API のエンドポイント
WordPress 4.4 以上のサイトでは以下の URL で
REST API の「エンドポイント」を知ることが出来ま
す。
http://example.com/wp-json/
REST API のエンドポイント
エンドポイントは JavaScript がアクセスし情報を
操作するための URL の名前です。
基本的にひとつの URL に対してひとつの機能を割
当、操作をしていきます。
もし WordPress サイト...
http://example.com/wp-json/
REST API のエンドポイント
この情報を元にさらに「endpoint」を辿っていき、
以下の URL にアクセスしてみます。
http://example.com/wp-json/oembed/1.0/embed
http://example.com/wp-json/oembed/1.0/embed
REST API のエンドポイント
「パラメータ不足」となっていますが、この URL に
対して適切な引数を与えてやることで、WordPress
から情報を取得できるのが REST API です。
REST API のエンドポイント
このエンドポイントは現在唯一コアに内蔵されてい
る REST API 「WordPressリンク埋め込み(oembed)」
になります。
http://another.maple4ever.net/archives/2244/
WP REST API プラグインはコアに内蔵された REST
API インターフェースを使って、WordPress の全て
の機能を REST アクセスできことを目指して作成さ
れているプラグインです。
また、REST API にアクセスする...
自分で API を設計できるぶん、要件にあった動作
が簡単に実装ができるハズです。
数行のコードで REST API のエンドポイントがつく
れますので、応用範囲が広いです。
将来、「WP REST API」プラグインを利用する場合
も、まった...
利用例1
静的サイトへの記事の埋め込み
大きな静的(.htmlだけで構成されている)サイトで
部分的に WordPress を利用したい時の
REST API 活用方法です。
WordPress 側の REST API の構成
データ取得用の REST API のエンドポイントを作成
します。
rest_api_init フックのタイミングで、
register_rest_route を行ってエンドポイントを設
定し...
WordPress テーマのソースコード
WordPress 側は真っ白なテーマを準備します。
(たったこれだけです)
WordPress テーマのソースコード
style.css
/*
Theme Name: osc2016do
*/
WordPress テーマのソースコード
index.php
// empty
WordPress テーマのソースコード
functions.php
add_action( 'rest_api_init', function () {
register_rest_route( 'osc2016do/v1', '/lates...
WordPress 側の REST API の構成
callback では返却したいデータを、通常の
WordPress の関数(get_posts や WPQuery オブジェ
クトを使って取得します。
return でオブジェクトや配列を返...
http://example.com/wp-json/
WordPressで記事を作成します。
http://example.com/wp-json/osc2016do/v1/latest
最新から3件のデータが JSON 形式で返却されます。
ここでは解説ソースを極力短くするため、表示に不
要なデータも返却しています。
このソースのままでは、パスワードなど不要なデー
タも返却されてしまうことに注意してください。
本来は必要なデー...
フロントエンド側のプログラミング
WordPress 側に REST API のデータ取得用のエンド
ポイントができましたので、これを静的サイト側の
JavaScript から取得し、表示してみます。
JavaScript には、REST AP...
https://jp.vuejs.org/
Vue.js を使う
Vue.js はデータバインディングを基本とした「モ
ダンな Web インタフェース向けのリアクティブコ
ンポーネント」JavaScript ライブラリです。
特徴は、既存の HTML をほとんど壊さないような設
計になっ...
リアクティブとは
HTML に対して表示を司る CSS を定義するのと非常に
よく似ています。
入力となる JSON に対する HTML を定義(バインディ
ング)してあげます。
CSS と同じように、変数(状態)を持たないため、簡
潔でわかり...
例えば HTML と CSS の関係
入力となる HTML
<table>
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
<tr><td>test3</td></tr>
<tr><td>test...
例えば HTML と CSS の関係
結果
入力の HTML の行数が変わったとしても、定義通り
色が塗られる(リアクティブ!)
CSS にループや変数の考え方はない。一般的なプロ
グラミング言語で考えれば、行数を取得してループ
を回し、奇数行...
Vue.js を使う
Vue.js でも同じような理屈で、入力となる JSON
データに対して HTML がどうなればいいかを「定義」
していきます。
Vue.js をつかった静的 HTML の作成
index.html(抜粋)
<h1 class="page-header">WordPress REST API テスト</
h1>
<h2 class="sub-header">記事一覧</h...
Vue.js をつかった静的 HTML の作成
Vue.js をつかった静的 HTML の作成
index.html(抜粋)
<tbody id="latest">
<tr v-for="item in items">
<td>{{item.post_date}}</td>
<td>{{it...
index.html(抜粋)
<script src="./js/vue.js"></script>
<script src="./js/vue-resource.js"></script>
<script>
new Vue({
el: '#l...
Vue.js をつかった静的 HTML の作成
Ajaxを利用してWordPressのREST APIから
取得したデータを出力
data(items) をダミーデータから空に変更し、
Vue.js の created イベントをきっかけに、
WordPress で作成した REST API...
index.html(抜粋)
<script src="./js/vue.js"></script>
<script src="./js/vue-resource.js"></script>
<script>
new Vue({
el: '#l...
Ajaxを利用してWordPressのREST APIから
取得したデータを出力
REST API のエンドポイントから最新3件の記事が取
得され、HTML に展開されました。
利用例2
画面遷移のない検索結果出力
利用例1 では静的サイトを用いて WordPress のデー
タの出力を行いましたが、利用例2では WordPress
自身のテンプレートファイル内で REST API を動作
させてみます。
カテゴリーリ...
WordPress テーマの準備
今回の例ではまずフロント側を先につくってみます。
まずは通常の WordPress テーマファイルを準備します。
footer.php
<script src="<?php echo get_template_directory_uri(); ?>/
js/vue.js"></script>
<script src="<?php echo get_temp...
index.php
<h2 class="sub-header">記事一覧</h2>
<ul>
<?php foreach(get_categories() as $cat) : ?>
<li>
<a href="#">
<?php echo ...
結果
WordPress にカテゴリ分けした記事を作成します。
Vue.js のイベントハンドリング用の
マークとリクエストパラメータを
HTML に付与する
Vue.js の v-on:click 識別子に任意名の関数(get)
を登録し、カテゴリIDを渡します。
<div id="latest">
<u...
<script>
new Vue({
el: '#latest',
data: {
items: []
},
methods: {
get: function(term_id) {
this.$http.get('http://example....
WordPress 上に引数を受ける
エンドポイントを作成する
エンドポイントの「(?Pd+)」形式で値の取得を行
います。
args 配列で取得する値とそのバリデーション(数
値チェック)を行います。
callback では
$request...
<?php
add_action( 'rest_api_init', function () {
register_rest_route( 'osc2016do/v1', '/cat/(?P<term_id>d+)',
array(
'meth...
<script>
new Vue({
el: '#latest',
data: {
items: []
},
created: function() {
// 初期表示はカテゴリIDの1番とする
this.get(1);
},
methods:...
結果
REST API 活用時の注意点
REST API 活用時の注意点
REST API はサイトの HTML によらず、JSON 形式で
任意の情報が取得可能です。
形式的に取得されたくないデータを公開してしま
うことがないよう、注意深く API を設計してくだ
さい。
今回のサ...
REST API 活用時の注意点
SEO
JavaScript で出力された HTML は一般的に検索エ
ンジンに取得されにくいとされています。(おそ
らく…)
検索エンジンによっては適切に取得できるようで
すが、主要なコンテンツに活用する場合...
WordBench 札幌について
WordPress の地域コミュニティが WordBench です。
http://wordbench.org/groups/sapporo/
WordBench 札幌について
WordBench 札幌はその中の札幌地区を担当してい
るコミュニティとなります。
一応、WordBench 札幌の主催となっているわたく
しが、隠れキャラであるため活発に活動しており
ません。
現在は、年に一...
ご清聴ありがとうございました
OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法
OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法
OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法
OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法
Upcoming SlideShare
Loading in …5
×

OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法

15,135 views

Published on

OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法のスライドです。

Published in: Technology
  • Be the first to comment

OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法

  1. 1. REST APIを活用した、 新しい WordPressサイト製作手法 カリスマプログラマ 田中広将
  2. 2. WordPress 4.4 から追加された REST API は、 JavaScript(JSON) によるコンテンツ出力ができる新機能 です。 静的な HTML への動的コンテンツの埋め込みや、非同期な 検索処理、コンテンツリポジトリとしての活用など、 WordPress がさらにいろいろな場面に応用できる、期待の API となっています。 本セミナーでは、REST API の使い方と勘所を紹介します。 WordBench札幌(田中広将) はじめに
  3. 3. 自己紹介 名前●田中広将(ひろましゃ) 職業●SIer勤務のインフラエンジニア(札幌) WordPress歴●2005年~ OSC北海道歴●2010年~
  4. 4. OSC2010
  5. 5. OSC2011
  6. 6. OSC2012
  7. 7. OSC2013
  8. 8. OSC2014
  9. 9. OSC2015
  10. 10. WordPressとの出会い 2005年にブログを始めようとレンタルサーバに WordPress を導入したのが最初です。 その頃は、WordPress 1.2 でしたが、テーマはもと より固定ページや、ファイルのアップロード機能は ありませんでした。 日本ではまだ WordPress でつくられたサイトは、 ほぼ個人ブログで数百くらいだったと思います。 ※
  11. 11. WordPressとの出会い しかしながら、1.2 の時点で既に現在のプラグイン システム(add_filter、add_action)は確立されて おり、本体のプログラムに手を入れずに動作を変え られる動きに面白さを感じ、WordPressの活用方法 を書いたブログを運営しておりました。 おそらく日本で最初期に属する WordPress プラ グインの作者です。 (最近はつくっていませんが、現在でも過去に作っ たプラグインを使われているサイトを見ることが できて嬉しく思っています) ※
  12. 12. WordPressとの出会い その後、日本で初めての WordPressの書籍を執筆し たり、OSC北海道でのセミナーや勉強会を行うなど して現在に至ります。
  13. 13. 懐かしの WordPress 2.0 時点の管理画面です。 (ご存じの方いらっしゃいますか?) なんとビジュアルエディタもなく、画像の挿入もプラグインを使うなどして一苦労でした。
  14. 14. 札幌のWordPress地域コミュニティー、 WordBench札幌については最後にご紹介いたします。
  15. 15. WordPress REST API
  16. 16. WordPress REST API とは WordPress REST API は、JavaScript(JSON) を経由 して WordPress へのデータアクセスを行うことが 出来ます。 WordPress REST API を活用することで、WordPress のサイト制作において、一般的なテンプレートファ イル・タグを利用してのテーマ製作に加え、 JavaScriptによるデータ取得を用いたサイト構成を とれるようになります。 過去にもいくつかのプラグインで実現していたもの がありましたが、これらの手法が WordPress 4.4 から標準になった形です。
  17. 17. REST API の活用範囲 静的サイト(.html だけで構成されているサイト) への WordPress 記事の埋め込み。 WordPress の検索ページなどで AJAX 手法を使った、 画面遷移のないインターフェースの構築。 画面遷移後の画像の遅延ロード。 SPA(シングルページアプリケーション)への応用。 WordPressをスマートフォンアプリなどのコンテン ツデータベースとして利用する。 等々...
  18. 18. REST API の活用範囲 本日は以下のふたつの手法を、サンプルを紹介しな がら解説していきたいと思います。 静的サイトへの記事の埋め込み (全部 WordPress にする必要のないサイトへの部分 適用) 画面遷移のない検索結果出力 (ユーザビリティーの向上)
  19. 19. REST API の活用範囲 WordPress の REST 用 API はうまく設計されており、 難しい部分はありませんので、ぜひ活用していただ ければと思います。 テーマ内の functions.php に10行ほど付け足す だけで動作させることができます。 ※
  20. 20. WP REST API プラグインとの関係 WordPress REST API を紹介する前に、若干混乱しま すので「WP REST API」プラグインについて先に解説 します。 v2.wp-api.org
  21. 21. WP REST API プラグインとの関係 WordPress 4.4 から REST API を使うための基盤が WordPress のコアに入りました。このため「WP REST API」プラグインを導入することなしに、REST API は利用可能です。
  22. 22. WP REST API プラグインとの関係 WordPress 4.4 未満では以下のソースファイルが 「WP REST API」プラグインに含まれおり、 WordPress 4.4 からコアにマージされた形になって います。 マージされたのは、 REST API の基盤部 分ですが、コアの中 では唯一「WordPress リンク埋め込み (oembed)」のインター フェースとして利用 されています。(後 述します)
  23. 23. REST API のエンドポイント WordPress 4.4 以上のサイトでは以下の URL で REST API の「エンドポイント」を知ることが出来ま す。 http://example.com/wp-json/
  24. 24. REST API のエンドポイント エンドポイントは JavaScript がアクセスし情報を 操作するための URL の名前です。 基本的にひとつの URL に対してひとつの機能を割 当、操作をしていきます。 もし WordPress サイトをお持ちの方はぜひアクセ スしてみてください。 なお、REST API アクセスには、パーマリンクの設 定が必要になりますので、初期導入直後の WordPress では、規定のエンドポイントにはアクセ スできません。(パーマリンクの生成から .htaccess を作成してください)
  25. 25. http://example.com/wp-json/
  26. 26. REST API のエンドポイント この情報を元にさらに「endpoint」を辿っていき、 以下の URL にアクセスしてみます。 http://example.com/wp-json/oembed/1.0/embed
  27. 27. http://example.com/wp-json/oembed/1.0/embed
  28. 28. REST API のエンドポイント 「パラメータ不足」となっていますが、この URL に 対して適切な引数を与えてやることで、WordPress から情報を取得できるのが REST API です。
  29. 29. REST API のエンドポイント このエンドポイントは現在唯一コアに内蔵されてい る REST API 「WordPressリンク埋め込み(oembed)」 になります。
  30. 30. http://another.maple4ever.net/archives/2244/
  31. 31. WP REST API プラグインはコアに内蔵された REST API インターフェースを使って、WordPress の全て の機能を REST アクセスできことを目指して作成さ れているプラグインです。 また、REST API にアクセスする JavaScript ライブ ラリ(backbone.js ベース)も準備されています。 API ドキュメントに従いリクエストを構成すること で、WordPress のすべての情報の取得、更新を行う ことができます。(更新系などのセキュリティーは OAuth により確保されます)
  32. 32. 自分で API を設計できるぶん、要件にあった動作 が簡単に実装ができるハズです。 数行のコードで REST API のエンドポイントがつく れますので、応用範囲が広いです。 将来、「WP REST API」プラグインを利用する場合 も、まったく同じ仕組みで動作していますので、理 解がしやすくなると思います。 まだ「WP REST API」プラグイン 2.0 はベータ扱いです。 本日は「WP REST API」プラグインを使わずに、WordPress の REST API を活用する方法をご紹介していきます。
  33. 33. 利用例1 静的サイトへの記事の埋め込み 大きな静的(.htmlだけで構成されている)サイトで 部分的に WordPress を利用したい時の REST API 活用方法です。
  34. 34. WordPress 側の REST API の構成 データ取得用の REST API のエンドポイントを作成 します。 rest_api_init フックのタイミングで、 register_rest_route を行ってエンドポイントを設 定します。 その callback 関数内で取得したいデータを return するだけで完成です。
  35. 35. WordPress テーマのソースコード WordPress 側は真っ白なテーマを準備します。 (たったこれだけです)
  36. 36. WordPress テーマのソースコード style.css /* Theme Name: osc2016do */
  37. 37. WordPress テーマのソースコード index.php // empty
  38. 38. WordPress テーマのソースコード functions.php add_action( 'rest_api_init', function () { register_rest_route( 'osc2016do/v1', '/latest', array( 'methods' => 'GET', 'callback' => function() { // 投稿記事を5件返却 return get_posts(array('posts_per_page' => 3)); } ) ); } );
  39. 39. WordPress 側の REST API の構成 callback では返却したいデータを、通常の WordPress の関数(get_posts や WPQuery オブジェ クトを使って取得します。 return でオブジェクトや配列を返却すると、自動 で JSON 形式に変換されます。 テーマを有効にするとエンドポイントが作成された ことが分かります。
  40. 40. http://example.com/wp-json/
  41. 41. WordPressで記事を作成します。
  42. 42. http://example.com/wp-json/osc2016do/v1/latest
  43. 43. 最新から3件のデータが JSON 形式で返却されます。 ここでは解説ソースを極力短くするため、表示に不 要なデータも返却しています。 このソースのままでは、パスワードなど不要なデー タも返却されてしまうことに注意してください。 本来は必要なデータのみを組み立てて return しま す!
  44. 44. フロントエンド側のプログラミング WordPress 側に REST API のデータ取得用のエンド ポイントができましたので、これを静的サイト側の JavaScript から取得し、表示してみます。 JavaScript には、REST API で取得した JSON を HTML にレンダリングすることに長けている、便利 なライブラリが多数あります。(React.js、 Mithril.js、Angular.js …) 今回は、WordPress との親和性と学習コストの低さ を考慮し「Vue.js」を用いてみます。
  45. 45. https://jp.vuejs.org/
  46. 46. Vue.js を使う Vue.js はデータバインディングを基本とした「モ ダンな Web インタフェース向けのリアクティブコ ンポーネント」JavaScript ライブラリです。 特徴は、既存の HTML をほとんど壊さないような設 計になっており、コーディングされた HTML に対し ていくつかの目印をつけるだけで、JSON データを 挿入できるようになっています。 このため、静的 HTML はもちろん、WordPress テー マの PHP を含むテンプレートファイル内で利用す る場合も、簡単に導入することができます。
  47. 47. リアクティブとは HTML に対して表示を司る CSS を定義するのと非常に よく似ています。 入力となる JSON に対する HTML を定義(バインディ ング)してあげます。 CSS と同じように、変数(状態)を持たないため、簡 潔でわかりすい記述となります。 既存のプログラミング言語よりも、CSS ができる方の ほうが、考え方としては理解しやすいかもしれません。 リアクティブプログラミングは、入力に対して出力を 「定義」するタイプのプログラミングスタイルです。
  48. 48. 例えば HTML と CSS の関係 入力となる HTML <table> <tr><td>test1</td></tr> <tr><td>test2</td></tr> <tr><td>test3</td></tr> <tr><td>test4</td></tr> <tr><td>test5</td></tr> <tr><td>test6</td></tr> </table> tr:nth-child(odd) { background-color: blue; } 入力に対する表示の定義(奇数行に色を塗れ)
  49. 49. 例えば HTML と CSS の関係 結果 入力の HTML の行数が変わったとしても、定義通り 色が塗られる(リアクティブ!) CSS にループや変数の考え方はない。一般的なプロ グラミング言語で考えれば、行数を取得してループ を回し、奇数行であれば色を塗るような処理となる が、CSS ではたった3行の「定義」により実現できる。
  50. 50. Vue.js を使う Vue.js でも同じような理屈で、入力となる JSON データに対して HTML がどうなればいいかを「定義」 していきます。
  51. 51. Vue.js をつかった静的 HTML の作成 index.html(抜粋) <h1 class="page-header">WordPress REST API テスト</ h1> <h2 class="sub-header">記事一覧</h2> <div class="table-responsive"> <table class="table table-striped"> <thead> <tr> <th>日付</th> <th>タイトル</th> </tr> </thead> <tbody> <tr> <td>2016.06.18</td> <td>オープンソースカンファレンス北海道開催</td> </tr> </tbody> </table> </div> まずは通常の静的な HTML をコーディングします。
  52. 52. Vue.js をつかった静的 HTML の作成
  53. 53. Vue.js をつかった静的 HTML の作成 index.html(抜粋) <tbody id="latest"> <tr v-for="item in items"> <td>{{item.post_date}}</td> <td>{{item.post_title}}</td> </tr> </tbody> 次に Vue.js がデータをどのように HTML に配置すれ ばよいかの目印をつけます。
  54. 54. index.html(抜粋) <script src="./js/vue.js"></script> <script src="./js/vue-resource.js"></script> <script> new Vue({ el: '#latest', data: { items: [ { post_date: '2016-06-18 00:00:00', post_title : "オープンソースカンファレンス北海道1" }, { post_date: '2016-06-18 00:00:00', post_title : "オープンソースカンファレンス北海道2" }, ] } }) </script> Vue.js ライブラリを読み込み、 Vue.js でまずは WordPress と関係ない世界でテスト データをバインドしてみます。
  55. 55. Vue.js をつかった静的 HTML の作成
  56. 56. Ajaxを利用してWordPressのREST APIから 取得したデータを出力 data(items) をダミーデータから空に変更し、 Vue.js の created イベントをきっかけに、 WordPress で作成した REST API のエンドポイント にアクセスし、data(items) に格納します。
  57. 57. index.html(抜粋) <script src="./js/vue.js"></script> <script src="./js/vue-resource.js"></script> <script> new Vue({ el: '#latest', data: { items: [] }, created: function(){ this.$http.get('http://example.com/wp-json/ osc2016do/v1/latest', function(data) { this.items = data; }) } }) </script>
  58. 58. Ajaxを利用してWordPressのREST APIから 取得したデータを出力 REST API のエンドポイントから最新3件の記事が取 得され、HTML に展開されました。
  59. 59. 利用例2 画面遷移のない検索結果出力 利用例1 では静的サイトを用いて WordPress のデー タの出力を行いましたが、利用例2では WordPress 自身のテンプレートファイル内で REST API を動作 させてみます。 カテゴリーリンクを選択後、画面遷移無しで記事の 一覧を出力するというサンプルを作成してみます。
  60. 60. WordPress テーマの準備 今回の例ではまずフロント側を先につくってみます。 まずは通常の WordPress テーマファイルを準備します。
  61. 61. footer.php <script src="<?php echo get_template_directory_uri(); ?>/ js/vue.js"></script> <script src="<?php echo get_template_directory_uri(); ?>/ js/vue-resource.js"></script> </body> </html> footer.php では静的サイトと同様に Vue.js ライ ブラリを読み込んでおきます。
  62. 62. index.php <h2 class="sub-header">記事一覧</h2> <ul> <?php foreach(get_categories() as $cat) : ?> <li> <a href="#"> <?php echo esc_html($cat->name); ?> </a> </li> <?php endforeach; ?> </ul> <table> <!-- 省略 --> <tbody id="latest"> <tr v-for="item in items"> <td>{{item.post_date}}</td> <td>{{item.post_title}}</td> </tr> </tbody> </table> index.php ではカテゴリ一覧を出力するようにして おきます。
  63. 63. 結果
  64. 64. WordPress にカテゴリ分けした記事を作成します。
  65. 65. Vue.js のイベントハンドリング用の マークとリクエストパラメータを HTML に付与する Vue.js の v-on:click 識別子に任意名の関数(get) を登録し、カテゴリIDを渡します。 <div id="latest"> <ul class="nav nav-tabs"> <?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> <!-- 省略 --> </div> index.php(抜粋)
  66. 66. <script> new Vue({ el: '#latest', data: { items: [] }, methods: { get: function(term_id) { this.$http.get('http://example.com/wp-json/osc2016do/v1/ cat/' + term_id, function (data) { this.items = data; }) } } }); </script> Vue.js の定義を行う 先ほど HTML 上で v-on:click に指定した get 関数 を作成し、受けたカテゴリID を REST API に渡しま す。
  67. 67. WordPress 上に引数を受ける エンドポイントを作成する エンドポイントの「(?Pd+)」形式で値の取得を行 います。 args 配列で取得する値とそのバリデーション(数 値チェック)を行います。 callback では $request->get_param(‘term_id’) 形式で 値を取得し、データを取り出し返却します。
  68. 68. <?php add_action( 'rest_api_init', function () { register_rest_route( 'osc2016do/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'))); } ) ); } ); ?> functions.php
  69. 69. <script> new Vue({ el: '#latest', data: { items: [] }, created: function() { // 初期表示はカテゴリIDの1番とする this.get(1); }, methods: { get: function(term_id) { this.$http.get('http://example.com/wp-json/osc2016do/v1/ cat/' + term_id, function (data) { this.items = data; }) } } }); </script> Vue.jsで初期表示を担うcreatedからget関数を呼び出す カテゴリーリンク未クリック時の 初期表示を Vue.js に指定
  70. 70. 結果
  71. 71. REST API 活用時の注意点
  72. 72. REST API 活用時の注意点 REST API はサイトの HTML によらず、JSON 形式で 任意の情報が取得可能です。 形式的に取得されたくないデータを公開してしま うことがないよう、注意深く API を設計してくだ さい。 今回のサンプルでは解説ソースを短くするため、 $post のデータをそのまま公開してしまっていま すが、必ず必要な情報に絞ったデータを返却して ください。
  73. 73. REST API 活用時の注意点 SEO JavaScript で出力された HTML は一般的に検索エ ンジンに取得されにくいとされています。(おそ らく…) 検索エンジンによっては適切に取得できるようで すが、主要なコンテンツに活用する場合は、調査、 考慮の上使用してください。
  74. 74. WordBench 札幌について WordPress の地域コミュニティが WordBench です。
  75. 75. http://wordbench.org/groups/sapporo/
  76. 76. WordBench 札幌について WordBench 札幌はその中の札幌地区を担当してい るコミュニティとなります。 一応、WordBench 札幌の主催となっているわたく しが、隠れキャラであるため活発に活動しており ません。 現在は、年に一度の本日と、年に一度あるかな いかの勉強会が晴れ舞台となっています。 ぜひ勉強会や交流会などを主催してみたい、と いう方がいらっしゃいましたら、サイトの方か ら募集をかけてみてください。 ※ ※
  77. 77. ご清聴ありがとうございました

×