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

REST APIを活用した、

新しい

WordPressサイト製作手法

カリスマプログラマ　田中広将

WordPress 4.4 から追加された REST API は、JavaScript(JSON) によるコンテンツ出力ができる新機能です。

静的な HTML への動的コンテンツの埋め込みや、非同期な検索処理、コンテンツリポジトリとしての活用など、WordPress がさらにいろいろな場面に応用できる、期待の API となっています。

本セミナーでは、REST API の使い方と勘所を紹介します。

WordBench札幌（田中広将）

はじめに

自己紹介

名前●田中広将（ひろましゃ）

職業●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 を活用することで、WordPress のサイト制作において、一般的なテンプレートファイル・タグを利用してのテーマ製作に加え、JavaScriptによるデータ取得を用いたサイト構成をとれるようになります。

過去にもいくつかのプラグインで実現していたものがありましたが、これらの手法が WordPress 4.4 から標準になった形です。

REST API の活用範囲

静的サイト（.html だけで構成されているサイト）への WordPress 記事の埋め込み。

WordPress の検索ページなどで AJAX 手法を使った、画面遷移のないインターフェースの構築。

画面遷移後の画像の遅延ロード。

SPA（シングルページアプリケーション）への応用。

WordPressをスマートフォンアプリなどのコンテンツデータベースとして利用する。

等々...


本日は以下のふたつの手法を、サンプルを紹介しながら解説していきたいと思います。

静的サイトへの記事の埋め込み（全部 WordPress にする必要のないサイトへの部分適用）

画面遷移のない検索結果出力（ユーザビリティーの向上）


WordPress の REST 用 API はうまく設計されており、難しい部分はありませんので、ぜひ活用していただければと思います。

テーマ内の functions.php に10行ほど付け足すだけで動作させることができます。

※

WP REST API プラグインとの関係

WordPress REST API を紹介する前に、若干混乱しますので「WP REST API」プラグインについて先に解説します。

v2.wp-api.org


WordPress 4.4 から REST API を使うための基盤が WordPress のコアに入りました。このため「WP REST API」プラグインを導入することなしに、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/



エンドポイントは JavaScript がアクセスし情報を操作するための URL の名前です。

基本的にひとつの URL に対してひとつの機能を割当、操作をしていきます。

もし WordPress サイトをお持ちの方はぜひアクセスしてみてください。

なお、REST API アクセスには、パーマリンクの設定が必要になりますので、初期導入直後の WordPress では、規定のエンドポイントにはアクセスできません。（パーマリンクの生成から .htaccess を作成してください）




この情報を元にさらに「endpoint」を辿っていき、以下の URL にアクセスしてみます。

http://example.com/wp-json/oembed/1.0/embed





「パラメータ不足」となっていますが、この URL に対して適切な引数を与えてやることで、WordPress から情報を取得できるのが REST API です。


このエンドポイントは現在唯一コアに内蔵されている REST API 「WordPressリンク埋め込み(oembed)」になります。

http://another.maple4ever.net/archives/2244/

http://another.maple4ever.net/archives/2244/

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 を活用する方法をご紹介していきます。

利用例1 静的サイトへの記事の埋め込み

大きな静的（.htmlだけで構成されている）サイトで部分的に WordPress を利用したい時の

REST API 活用方法です。

WordPress 側の REST API の構成

データ取得用の REST API のエンドポイントを作成します。

rest_api_init フックのタイミングで、register_rest_route を行ってエンドポイントを設定します。

その callback 関数内で取得したいデータを return するだけで完成です。

WordPress テーマのソースコード

WordPress 側は真っ白なテーマを準備します。（たったこれだけです）


style.css

/* Theme Name: osc2016do */


index.php

// empty


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 形式に変換されます。

テーマを有効にするとエンドポイントが作成されたことが分かります。



WordPressで記事を作成します。

http://example.com/wp-json/osc2016do/v1/latest

最新から3件のデータが JSON 形式で返却されます。

ここでは解説ソースを極力短くするため、表示に不要なデータも返却しています。

このソースのままでは、パスワードなど不要なデータも返却されてしまうことに注意してください。

本来は必要なデータのみを組み立てて return します！

フロントエンド側のプログラミング

WordPress 側に REST API のデータ取得用のエンドポイントができましたので、これを静的サイト側の JavaScript から取得し、表示してみます。

JavaScript には、REST API で取得した JSON を HTML にレンダリングすることに長けている、便利なライブラリが多数あります。（React.js、Mithril.js、Angular.js …）

今回は、WordPress との親和性と学習コストの低さを考慮し「Vue.js」を用いてみます。

https://jp.vuejs.org/

https://jp.vuejs.org/

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 を使う

Vue.js でも同じような理屈で、入力となる JSON データに対して HTML がどうなればいいかを「定義」していきます。

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 をコーディングします。




<tbody id="latest"> <tr v-for="item in items"> <td>{{item.post_date}}</td> <td>{{item.post_title}}</td> </tr> </tbody>

次に Vue.js がデータをどのように 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) に格納します。


<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>

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_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 ではカテゴリ一覧を出力するようにしておきます。

結果

WordPress にカテゴリ分けした記事を作成します。

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 のデータをそのまま公開してしまっていますが、必ず必要な情報に絞ったデータを返却してください。


SEO

JavaScript で出力された HTML は一般的に検索エンジンに取得されにくいとされています。（おそらく…）

検索エンジンによっては適切に取得できるようですが、主要なコンテンツに活用する場合は、調査、考慮の上使用してください。

WordBench 札幌について

WordPress の地域コミュニティが WordBench です。

http://wordbench.org/groups/sapporo/

http://wordbench.org/groups/sapporo/

WordBench 札幌について

WordBench 札幌はその中の札幌地区を担当しているコミュニティとなります。

一応、WordBench 札幌の主催となっているわたくしが、隠れキャラであるため活発に活動しておりません。

現在は、年に一度の本日と、年に一度あるかないかの勉強会が晴れ舞台となっています。

ぜひ勉強会や交流会などを主催してみたい、という方がいらっしゃいましたら、サイトの方から募集をかけてみてください。

※

※

ご清聴ありがとうございました

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

Technology