OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法
-
Upload
hiromasa-tanaka -
Category
Technology
-
view
6.113 -
download
1
Transcript of OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法
WordPress 4.4 から追加された REST API は、JavaScript(JSON) によるコンテンツ出力ができる新機能です。
静的な HTML への動的コンテンツの埋め込みや、非同期な検索処理、コンテンツリポジトリとしての活用など、WordPress がさらにいろいろな場面に応用できる、期待の API となっています。
本セミナーでは、REST API の使い方と勘所を紹介します。
WordBench札幌(田中広将)
はじめに
WordPressとの出会い
2005年にブログを始めようとレンタルサーバに WordPress を導入したのが最初です。
その頃は、WordPress 1.2 でしたが、テーマはもとより固定ページや、ファイルのアップロード機能はありませんでした。
日本ではまだ WordPress でつくられたサイトは、ほぼ個人ブログで数百くらいだったと思います。
※
WordPressとの出会い
しかしながら、1.2 の時点で既に現在のプラグインシステム(add_filter、add_action)は確立されており、本体のプログラムに手を入れずに動作を変えられる動きに面白さを感じ、WordPressの活用方法を書いたブログを運営しておりました。
おそらく日本で最初期に属する WordPress プラグインの作者です。 (最近はつくっていませんが、現在でも過去に作ったプラグインを使われているサイトを見ることができて嬉しく思っています)
※
WordPress REST API とは
WordPress REST API は、JavaScript(JSON) を経由して WordPress へのデータアクセスを行うことが出来ます。
WordPress REST API を活用することで、WordPress のサイト制作において、一般的なテンプレートファイル・タグを利用してのテーマ製作に加え、JavaScriptによるデータ取得を用いたサイト構成をとれるようになります。
過去にもいくつかのプラグインで実現していたものがありましたが、これらの手法が WordPress 4.4 から標準になった形です。
REST API の活用範囲
静的サイト(.html だけで構成されているサイト)への WordPress 記事の埋め込み。
WordPress の検索ページなどで AJAX 手法を使った、画面遷移のないインターフェースの構築。
画面遷移後の画像の遅延ロード。
SPA(シングルページアプリケーション)への応用。
WordPressをスマートフォンアプリなどのコンテンツデータベースとして利用する。
等々...
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リンク埋め込み(oembed)」のインターフェースとして利用されています。(後述します)
REST API のエンドポイント
WordPress 4.4 以上のサイトでは以下の URL で REST API の「エンドポイント」を知ることが出来ます。
http://example.com/wp-json/
REST API のエンドポイント
エンドポイントは JavaScript がアクセスし情報を操作するための URL の名前です。
基本的にひとつの URL に対してひとつの機能を割当、操作をしていきます。
もし WordPress サイトをお持ちの方はぜひアクセスしてみてください。
なお、REST API アクセスには、パーマリンクの設定が必要になりますので、初期導入直後の WordPress では、規定のエンドポイントにはアクセスできません。(パーマリンクの生成から .htaccess を作成してください)
REST API のエンドポイント
この情報を元にさらに「endpoint」を辿っていき、以下の URL にアクセスしてみます。
http://example.com/wp-json/oembed/1.0/embed
WP REST API プラグインはコアに内蔵された REST API インターフェースを使って、WordPress の全ての機能を REST アクセスできことを目指して作成されているプラグインです。
また、REST API にアクセスする JavaScript ライブラリ(backbone.js ベース)も準備されています。
API ドキュメントに従いリクエストを構成することで、WordPress のすべての情報の取得、更新を行うことができます。(更新系などのセキュリティーは OAuth により確保されます)
自分で API を設計できるぶん、要件にあった動作が簡単に実装ができるハズです。
数行のコードで REST API のエンドポイントがつくれますので、応用範囲が広いです。
将来、「WP REST API」プラグインを利用する場合も、まったく同じ仕組みで動作していますので、理解がしやすくなると思います。
まだ「WP REST API」プラグイン 2.0 はベータ扱いです。
本日は「WP REST API」プラグインを使わずに、WordPress の REST API を活用する方法をご紹介していきます。
WordPress 側の REST API の構成
データ取得用の REST API のエンドポイントを作成します。
rest_api_init フックのタイミングで、register_rest_route を行ってエンドポイントを設定します。
その callback 関数内で取得したいデータを return するだけで完成です。
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)); } ) ); } );
WordPress 側の REST API の構成
callback では返却したいデータを、通常の WordPress の関数(get_posts や WPQuery オブジェクトを使って取得します。
return でオブジェクトや配列を返却すると、自動で JSON 形式に変換されます。
テーマを有効にするとエンドポイントが作成されたことが分かります。
最新から3件のデータが JSON 形式で返却されます。
ここでは解説ソースを極力短くするため、表示に不要なデータも返却しています。
このソースのままでは、パスワードなど不要なデータも返却されてしまうことに注意してください。
本来は必要なデータのみを組み立てて return します!
フロントエンド側のプログラミング
WordPress 側に REST API のデータ取得用のエンドポイントができましたので、これを静的サイト側の JavaScript から取得し、表示してみます。
JavaScript には、REST API で取得した JSON を HTML にレンダリングすることに長けている、便利なライブラリが多数あります。(React.js、Mithril.js、Angular.js …)
今回は、WordPress との親和性と学習コストの低さを考慮し「Vue.js」を用いてみます。
Vue.js を使う
Vue.js はデータバインディングを基本とした「モダンな Web インタフェース向けのリアクティブコンポーネント」JavaScript ライブラリです。
特徴は、既存の HTML をほとんど壊さないような設計になっており、コーディングされた HTML に対していくつかの目印をつけるだけで、JSON データを挿入できるようになっています。
このため、静的 HTML はもちろん、WordPress テーマの PHP を含むテンプレートファイル内で利用する場合も、簡単に導入することができます。
リアクティブとは
HTML に対して表示を司る CSS を定義するのと非常によく似ています。
入力となる JSON に対する HTML を定義(バインディング)してあげます。
CSS と同じように、変数(状態)を持たないため、簡潔でわかりすい記述となります。
既存のプログラミング言語よりも、CSS ができる方のほうが、考え方としては理解しやすいかもしれません。
リアクティブプログラミングは、入力に対して出力を「定義」するタイプのプログラミングスタイルです。
例えば 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; }
入力に対する表示の定義(奇数行に色を塗れ)
例えば HTML と CSS の関係
結果
入力の HTML の行数が変わったとしても、定義通り色が塗られる(リアクティブ!)
CSS にループや変数の考え方はない。一般的なプログラミング言語で考えれば、行数を取得してループを回し、奇数行であれば色を塗るような処理となるが、CSS ではたった3行の「定義」により実現できる。
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 をコーディングします。
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 に配置すればよいかの目印をつけます。
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 と関係ない世界でテストデータをバインドしてみます。
Ajaxを利用してWordPressのREST APIから 取得したデータを出力
data(items) をダミーデータから空に変更し、Vue.js の created イベントをきっかけに、WordPress で作成した REST API のエンドポイントにアクセスし、data(items) に格納します。
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>
利用例2 画面遷移のない検索結果出力
利用例1 では静的サイトを用いて WordPress のデータの出力を行いましたが、利用例2では WordPress 自身のテンプレートファイル内で REST API を動作させてみます。
カテゴリーリンクを選択後、画面遷移無しで記事の一覧を出力するというサンプルを作成してみます。
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 ライブラリを読み込んでおきます。
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 ではカテゴリ一覧を出力するようにしておきます。
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(抜粋)
<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 に渡します。
WordPress 上に引数を受ける エンドポイントを作成する
エンドポイントの「(?P\d+)」形式で値の取得を行います。
args 配列で取得する値とそのバリデーション(数値チェック)を行います。
callback では $request->get_param(‘term_id’) 形式で 値を取得し、データを取り出し返却します。
<?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
<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 に指定
REST API 活用時の注意点
REST API はサイトの HTML によらず、JSON 形式で任意の情報が取得可能です。
形式的に取得されたくないデータを公開してしまうことがないよう、注意深く API を設計してください。
今回のサンプルでは解説ソースを短くするため、$post のデータをそのまま公開してしまっていますが、必ず必要な情報に絞ったデータを返却してください。
REST API 活用時の注意点
SEO
JavaScript で出力された HTML は一般的に検索エンジンに取得されにくいとされています。(おそらく…)
検索エンジンによっては適切に取得できるようですが、主要なコンテンツに活用する場合は、調査、考慮の上使用してください。
WordBench 札幌について
WordBench 札幌はその中の札幌地区を担当しているコミュニティとなります。
一応、WordBench 札幌の主催となっているわたくしが、隠れキャラであるため活発に活動しておりません。
現在は、年に一度の本日と、年に一度あるかないかの勉強会が晴れ舞台となっています。
ぜひ勉強会や交流会などを主催してみたい、という方がいらっしゃいましたら、サイトの方から募集をかけてみてください。
※
※