OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法
•
7 likes•16,264 views
OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法のスライドです。
Recommended
More Related Content
What's hot
What's hot (20)
Similar to OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法
Similar to OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法 (20)
Recently uploaded
Recently uploaded (9)
OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法
- 2. WordPress 4.4 から追加された REST API は、 JavaScript(JSON) によるコンテンツ出力ができる新機能 です。 静的な HTML への動的コンテンツの埋め込みや、非同期な 検索処理、コンテンツリポジトリとしての活用など、 WordPress がさらにいろいろな場面に応用できる、期待の API となっています。 本セミナーでは、REST API の使い方と勘所を紹介します。 WordBench札幌（田中広将） はじめに
- 4. OSC2010
- 5. OSC2011
- 6. OSC2012
- 7. OSC2013
- 8. OSC2014
- 9. OSC2015
- 10. WordPressとの出会い 2005年にブログを始めようとレンタルサーバに WordPress を導入したのが最初です。 その頃は、WordPress 1.2 でしたが、テーマはもと より固定ページや、ファイルのアップロード機能は ありませんでした。 日本ではまだ WordPress でつくられたサイトは、 ほぼ個人ブログで数百くらいだったと思います。 ※
- 11. WordPressとの出会い しかしながら、1.2 の時点で既に現在のプラグイン システム(add_filter、add_action）は確立されて おり、本体のプログラムに手を入れずに動作を変え られる動きに面白さを感じ、WordPressの活用方法 を書いたブログを運営しておりました。 おそらく日本で最初期に属する WordPress プラ グインの作者です。 （最近はつくっていませんが、現在でも過去に作っ たプラグインを使われているサイトを見ることが できて嬉しく思っています） ※
- 13. 懐かしの WordPress 2.0 時点の管理画面です。 （ご存じの方いらっしゃいますか？） なんとビジュアルエディタもなく、画像の挿入もプラグインを使うなどして一苦労でした。
- 16. WordPress REST API とは WordPress REST API は、JavaScript(JSON) を経由 して WordPress へのデータアクセスを行うことが 出来ます。 WordPress REST API を活用することで、WordPress のサイト制作において、一般的なテンプレートファ イル・タグを利用してのテーマ製作に加え、 JavaScriptによるデータ取得を用いたサイト構成を とれるようになります。 過去にもいくつかのプラグインで実現していたもの がありましたが、これらの手法が WordPress 4.4 から標準になった形です。
- 17. REST API の活用範囲 静的サイト（.html だけで構成されているサイト） への WordPress 記事の埋め込み。 WordPress の検索ページなどで AJAX 手法を使った、 画面遷移のないインターフェースの構築。 画面遷移後の画像の遅延ロード。 SPA（シングルページアプリケーション）への応用。 WordPressをスマートフォンアプリなどのコンテン ツデータベースとして利用する。 等々...
- 19. REST API の活用範囲 本日は以下のふたつの手法を、サンプルを紹介しな がら解説していきたいと思います。 静的サイトへの記事の埋め込み （全部 WordPress にする必要のないサイトへの部分 適用） 画面遷移のない検索結果出力 （ユーザビリティーの向上）
- 20. REST API の活用範囲 WordPress の REST 用 API はうまく設計されており、 難しい部分はありませんので、ぜひ活用していただ ければと思います。 テーマ内の functions.php に10行ほど付け足す だけで動作させることができます。 ※
- 21. WP REST API プラグインとの関係 WordPress REST API を紹介する前に、若干混乱しま すので「WP REST API」プラグインについて先に解説 します。 v2.wp-api.org
- 22. WP REST API プラグインとの関係 WordPress 4.4 から REST API を使うための基盤が WordPress のコアに入りました。このため「WP REST API」プラグインを導入することなしに、REST API は利用可能です。
- 23. WP REST API プラグインとの関係 WordPress 4.4 未満では以下のソースファイルが 「WP REST API」プラグインに含まれおり、 WordPress 4.4 からコアにマージされた形になって います。 マージされたのは、 REST API の基盤部 分ですが、コアの中 では唯一「WordPress リンク埋め込み (oembed)」のインター フェースとして利用 されています。（後 述します）
- 24. REST API のエンドポイント WordPress 4.4 以上のサイトでは以下の URL で REST API の「エンドポイント」を知ることが出来ま す。 http://example.com/wp-json/
- 25. REST API のエンドポイント エンドポイントは JavaScript がアクセスし情報を 操作するための URL の名前です。 基本的にひとつの URL に対してひとつの機能を割 当、操作をしていきます。 もし WordPress サイトをお持ちの方はぜひアクセ スしてみてください。 なお、REST API アクセスには、パーマリンクの設 定が必要になりますので、初期導入直後の WordPress では、規定のエンドポイントにはアクセ スできません。（パーマリンクの生成から .htaccess を作成してください）
- 27. REST API のエンドポイント この情報を元にさらに「endpoint」を辿っていき、 以下の URL にアクセスしてみます。 http://example.com/wp-json/oembed/1.0/embed
- 29. REST API のエンドポイント 「パラメータ不足」となっていますが、この URL に 対して適切な引数を与えてやることで、WordPress から情報を取得できるのが REST API です。
- 30. REST API のエンドポイント このエンドポイントは現在唯一コアに内蔵されてい る REST API 「WordPressリンク埋め込み(oembed)」 になります。
- 34. WP REST API プラグインはコアに内蔵された REST API インターフェースを使って、WordPress の全て の機能を REST アクセスできことを目指して作成さ れているプラグインです。 また、REST API にアクセスする JavaScript ライブ ラリ（backbone.js ベース）も準備されています。 API ドキュメントに従いリクエストを構成すること で、WordPress のすべての情報の取得、更新を行う ことができます。（更新系などのセキュリティーは OAuth により確保されます）
- 36. 自分で API を設計できるぶん、要件にあった動作 が簡単に実装ができるハズです。 数行のコードで REST API のエンドポイントがつく れますので、応用範囲が広いです。 将来、「WP REST API」プラグインを利用する場合 も、まったく同じ仕組みで動作していますので、理 解がしやすくなると思います。 まだ「WP REST API」プラグイン 2.0 はベータ扱いです。 本日は「WP REST API」プラグインを使わずに、WordPress の REST API を活用する方法をご紹介していきます。
- 38. WordPress 側の REST API の構成 データ取得用の REST API のエンドポイントを作成 します。 rest_api_init フックのタイミングで、 register_rest_route を行ってエンドポイントを設 定します。 その callback 関数内で取得したいデータを return するだけで完成です。
- 40. WordPress テーマのソースコード style.css /* Theme Name: osc2016do */
- 42. 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)); } ) ); } );
- 43. WordPress 側の REST API の構成 callback では返却したいデータを、通常の WordPress の関数(get_posts や WPQuery オブジェ クトを使って取得します。 return でオブジェクトや配列を返却すると、自動 で JSON 形式に変換されます。 テーマを有効にするとエンドポイントが作成された ことが分かります。
- 47. 最新から3件のデータが JSON 形式で返却されます。 ここでは解説ソースを極力短くするため、表示に不 要なデータも返却しています。 このソースのままでは、パスワードなど不要なデー タも返却されてしまうことに注意してください。 本来は必要なデータのみを組み立てて return しま す！
- 48. フロントエンド側のプログラミング WordPress 側に REST API のデータ取得用のエンド ポイントができましたので、これを静的サイト側の JavaScript から取得し、表示してみます。 JavaScript には、REST API で取得した JSON を HTML にレンダリングすることに長けている、便利 なライブラリが多数あります。（React.js、 Mithril.js、Angular.js …） 今回は、WordPress との親和性と学習コストの低さ を考慮し「Vue.js」を用いてみます。
- 50. Vue.js を使う Vue.js はデータバインディングを基本とした「モ ダンな Web インタフェース向けのリアクティブコ ンポーネント」JavaScript ライブラリです。 特徴は、既存の HTML をほとんど壊さないような設 計になっており、コーディングされた HTML に対し ていくつかの目印をつけるだけで、JSON データを 挿入できるようになっています。 このため、静的 HTML はもちろん、WordPress テー マの PHP を含むテンプレートファイル内で利用す る場合も、簡単に導入することができます。
- 51. リアクティブとは HTML に対して表示を司る CSS を定義するのと非常に よく似ています。 入力となる JSON に対する HTML を定義（バインディ ング）してあげます。 CSS と同じように、変数（状態）を持たないため、簡 潔でわかりすい記述となります。 既存のプログラミング言語よりも、CSS ができる方の ほうが、考え方としては理解しやすいかもしれません。 リアクティブプログラミングは、入力に対して出力を 「定義」するタイプのプログラミングスタイルです。
- 52. 例えば 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; } 入力に対する表示の定義（奇数行に色を塗れ）
- 53. 例えば HTML と CSS の関係 結果 入力の HTML の行数が変わったとしても、定義通り 色が塗られる（リアクティブ!） CSS にループや変数の考え方はない。一般的なプロ グラミング言語で考えれば、行数を取得してループ を回し、奇数行であれば色を塗るような処理となる が、CSS ではたった3行の「定義」により実現できる。
- 54. Vue.js を使う Vue.js でも同じような理屈で、入力となる JSON データに対して HTML がどうなればいいかを「定義」 していきます。
- 55. 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 をコーディングします。
- 56. Vue.js をつかった静的 HTML の作成
- 57. 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 に配置すれ ばよいかの目印をつけます。
- 58. 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 と関係ない世界でテスト データをバインドしてみます。
- 59. Vue.js をつかった静的 HTML の作成
- 60. Ajaxを利用してWordPressのREST APIから 取得したデータを出力 data(items) をダミーデータから空に変更し、 Vue.js の created イベントをきっかけに、 WordPress で作成した REST API のエンドポイント にアクセスし、data(items) に格納します。
- 61. 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>
- 62. Ajaxを利用してWordPressのREST APIから 取得したデータを出力 REST API のエンドポイントから最新3件の記事が取 得され、HTML に展開されました。
- 63. 利用例2 画面遷移のない検索結果出力 利用例1 では静的サイトを用いて WordPress のデー タの出力を行いましたが、利用例2では WordPress 自身のテンプレートファイル内で REST API を動作 させてみます。 カテゴリーリンクを選択後、画面遷移無しで記事の 一覧を出力するというサンプルを作成してみます。
- 64. WordPress テーマの準備 今回の例ではまずフロント側を先につくってみます。 まずは通常の WordPress テーマファイルを準備します。
- 65. 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 ライ ブラリを読み込んでおきます。
- 66. 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 ではカテゴリ一覧を出力するようにして おきます。
- 67. 結果
- 69. 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（抜粋）
- 70. <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 に渡しま す。
- 71. WordPress 上に引数を受ける エンドポイントを作成する エンドポイントの「(?Pd+)」形式で値の取得を行 います。 args 配列で取得する値とそのバリデーション(数 値チェック)を行います。 callback では $request->get_param(‘term_id’) 形式で 値を取得し、データを取り出し返却します。
- 72. <?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
- 73. <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 に指定
- 74. 結果
- 75. REST API 活用時の注意点
- 76. REST API 活用時の注意点 REST API はサイトの HTML によらず、JSON 形式で 任意の情報が取得可能です。 形式的に取得されたくないデータを公開してしま うことがないよう、注意深く API を設計してくだ さい。 今回のサンプルでは解説ソースを短くするため、 $post のデータをそのまま公開してしまっていま すが、必ず必要な情報に絞ったデータを返却して ください。
- 77. REST API 活用時の注意点 SEO JavaScript で出力された HTML は一般的に検索エ ンジンに取得されにくいとされています。（おそ らく…） 検索エンジンによっては適切に取得できるようで すが、主要なコンテンツに活用する場合は、調査、 考慮の上使用してください。
- 78. WordBench 札幌について WordPress の地域コミュニティが WordBench です。
- 80. WordBench 札幌について WordBench 札幌はその中の札幌地区を担当してい るコミュニティとなります。 一応、WordBench 札幌の主催となっているわたく しが、隠れキャラであるため活発に活動しており ません。 現在は、年に一度の本日と、年に一度あるかな いかの勉強会が晴れ舞台となっています。 ぜひ勉強会や交流会などを主催してみたい、と いう方がいらっしゃいましたら、サイトの方か ら募集をかけてみてください。 ※ ※
- 81. ご清聴ありがとうございました