WordPress REST API とリアクティブプログラミング
5 likes2,190 views
WordPress REST API とリアクティブプログラミング - Sacss Special 08
![プログラミングの例
（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](https://image.slidesharecdn.com/sacss08-161204073200/85/WordPress-REST-API-20-320.jpg)
![CSSで FizzBuzz 問題?回答
<ol>
<li></li>
<li></li>
...[省略]...
<li></li>
<li></li>
</ol>](https://image.slidesharecdn.com/sacss08-161204073200/85/WordPress-REST-API-26-320.jpg)
![Vue.js を単体で使う（練習）
<script>
new Vue({
el: '#latest',
data: {
items: [
{
post_title: '佐賀県',
post_content : "佐賀市"
},
{
post_title: '岩手県',
post_content : "盛岡市"
},
]
}
});
</script>](https://image.slidesharecdn.com/sacss08-161204073200/85/WordPress-REST-API-36-320.jpg)
![静的ページで 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>](https://image.slidesharecdn.com/sacss08-161204073200/85/WordPress-REST-API-38-320.jpg)
![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>](https://image.slidesharecdn.com/sacss08-161204073200/85/WordPress-REST-API-41-320.jpg)
More Related Content
What's hot (20)
Similar to WordPress REST API とリアクティブプログラミング (20)
![[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://cdn.slidesharecdn.com/ss_thumbnails/net20122asp-netmvc4beta-120225025400-phpapp01-thumbnail.jpg?width=560&fit=bounds)
WordPress REST API とリアクティブプログラミング
- 1. WordPress REST API とリアクティブプログラミング SaCSS Special 08
- 2. 自己紹介 名前 田中 広将（ひろましゃ） 住所 札幌市 職業 SIer 所属のインフラエンジニア WordPress歴 2005年～ WordPress Bench 札幌 発起人（すいません…）
- 3. オープンソース活动
- 4. 本日の内容 本日は、WordPress 4.4 から実装された WordPress REST API と、 昨今定着してきた「リアクティブ」系 JavaScript ライブラリを組み合わせて、 ウェブサイトを構築する手法を 解説したいと思います
- 5. 本日の内容 1.WordPress REST API とは 2.リアクティブプログラミングとは 3.Vue.js と WordPress REST API を組合せた活用
- 6. 1. 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 ライブラリです。
- 14. 従来のプログラミング手法を使った REST API 活用の際の課題点 ● プログラマーは、ユーザの操作に応じて JSON を 取得し、DOM（HTML）を操作しコンテンツを整形し て出力するプログラムをかきます。 ● 現在画面に表示されている HTML ツリー状態 （ノード）を把握し、必要に応じて HTML タグの追加 や削除を行います。
- 15. 従来のプログラミング手法を使った REST API 活用の際の課題点 ● ある操作の後は、この HTML タグがあるので削除する??? ● ある操作の後は、この HTML タグがないので追加する??? ● ひとつの操作だけではなく、前回、前々回…、いろいろなパターンで変 化していく HTML の状態をすべて把握して、プログラミングしなけれ ばならないのため、特定の操作順に対する考慮不足といった不具合 も起きやすいです。 このような課題に対応すべく登場したのが、 JavaScript のリアクティブ系のライブラリになります。
- 17. プログラミングできる人 突然ですが問題です。 ● "プログラミングができる人"とはどのような人で しょう? ● 高度な CSS が記述できるのに、プログラミングが 苦手という事象が起きるのはなぜでしょう？
- 19. プログラミングの例 （FizzBuzz 問題） ● FizzBuzz 問題 プログラマーの基本的な素養をみるための、ごく簡 単な問題。
- 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); } }
- 22. 従来のプログラミングスタイル
- 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 などで宣言的コーディングをしてい る方のほうが、とっつきやすいかもしれません。
- 29. JavaScript を使ったリアクティブな例 ● この例は「時間」を入力として、キャラクターを動かす例 です。 http://pararaehon.com/ ● JavaScript で画面を書き換えるプログラムを簡潔にか こうとすると、リアクティブな宣言的プログラミングにたど りつくような気がします。
- 30. JavaScript を使ったリアクティブな例 hitsuji01: { image: 'images/page02/02_hitsuji01.png', update: function() { this.y = 600 + (1 - Math.exp(-6 * (this.tick / 60))) * -280; } },
- 31. 3. Vue.js と WP REST API を組み合せた活用
- 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>
- 36. Vue.js を単体で使う（練習） <script> new Vue({ el: '#latest', data: { items: [ { post_title: '佐賀県', post_content : "佐賀市" }, { post_title: '岩手県', post_content : "盛岡市" }, ] } }); </script>
- 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>
- 42. まとめ
- 43. まとめ ● WordPress REST API は JSON 形式でコンテン ツを取得できます。 ● JSON 形式で取得したコンテンツは、リアクティブ 系の JavaScript で宣言的に HTML に展開すると 便利です。 ● Vue.js は WordPress テーマなど CMS のテンプ レートと組み合わせる場合に楽ができ、相性がいい です。
- 44. ご清聴ありがとうございました。