WordCamp USでREST APIの話が多かった印象なので、REST APIの話をしました。

1. WORDCAMP US参加レポート
WORDBENCH京都12月

2. WORDCAMP US参加レポート
~という名のWP REST APIの話~
WORDBENCH京都12月

3. WORDCAMP US
2015/12/04~12/06

4. 実はあんまり
セッション聞いてない

6. WordBench京都12月
WORDCAMP US2015私的サマリー
▸わぷー人気過ぎ
▸WordPress.com API
▸WP REST API
▸WP REST API

7. GLOBAL
WAPUU
わぷー人気出過ぎ

8. WORDBENCH京都12月テキスト
わぷーってなに？
▸ 日本語版公式キャラクター
▸ カネウチカズコさんによるデザイン
▸ GPL v2で利用可能
▸ ご当地わぷーが沢山いる
▸ 2014年末頃から海外でブームに
▸ （ボールは齧ってるらしい）
https://ja.wordpress.org/about-wp-ja/wapuu/

9. WordBench京都12月
http://jawordpressorg.github.io/wapuu/

10. WordBench京都12月
GitHubに世界中のわぷーが登録されている
https://github.com/jawordpressorg/wapuu

11. WordBench京都12月
突如現れたファンサイト
http://wapuu.jp/

13. WordBench京都12月
スペースわぷー
http://wapuu.amimoto-ami.com/

15. WordPress.com
API
すべては
ここからはじまった

16. CALYPSO

18. WordBench京都12月
CALYPSO
▸ React + WordPress.com API
▸ WordPressのダッシュボードアプリ
▸ UIはWordPress.com風
▸ https://developer.wordpress.com/calypso/
▸ https://github.com/Automattic/wp-calypso

20. https://developer.wordpress.com/docs/api/

21. WordBench京都12月
WORDPRESS.COM REST API
▸ WordPress.comのAPI
▸ JetPackやCalypsoで使用
▸ .orgで使うにはJetPackが必要
▸ WP REST APIとは別物なので要注意
▸ https://developer.wordpress.com/docs/api/

22. WordBench京都12月
WP REST APIと混同すると辛くなる
▸ WP REST APIと.com APIは別物
▸ WP REST APIもv1とv2は別物
▸ 「WP API」という別物のプラグインもある
▸ 試す時には「どれを使うのか」を確認しよう！

23. WordBench京都12月
プラグイン対応表
API名 プラグイン名 URL 備考
.com API JetPack
https://wordpress.org/
plugins/jetpack/
.comアカウント
必須
WP REST
API v1
WP REST API
(WP API)
https://wordpress.org/
plugins/json-rest-api/
WP REST
API v2
WordPress REST
API (Version 2)
https://wordpress.org/
plugins/rest-api/
一部コア実装
(WP4.4~)
WP API WP API
https://wordpress.org/
plugins/wp-api/
４年以上
メンテなし

24. WP-API
ついにコア実装

25. WordBench京都12月
ここで書くネタ
▸ WP APIとは？ WordPressのコア部分のAPI
▸ プラグインで開発されていて、今はVersion2
▸ WP4.2に入ると言われてから約1年、ついにコア実装
▸ OmEmbedで使われてる、camp.orgはv１カスタマイズ
▸ ただし自分で使うにはプラグイン必要よ
▸ V1とV2の違いを一部紹介（フック・エンドポイント）

26. WordBench京都12月
WP REST APIとは？
▸ WordPressのコア部分のAPI
▸ 投稿 / 固定ページ / メディア / ユーザー / etc..
▸ WordPress4.2でコアに入ると言われてから約１年
▸ WP4.4で一部機能がコアに実装
▸ 全機能を使うにはプラグインが必要

27. WordBench京都12月
WordPress4.4 コアに実装されたREST API
▸ oEmbedを実装するためのAPI
▸ 今まで話題になっていたAPIエンドポイントは入ってない
▸ ただしフックなどは追加されているので
オリジナルのエンドポイントを追加することは可能

28. WordBench京都12月
WordPress4.4 コアで使えるエンドポイント
▸ /wp-json/
▸ WP APIに関する各種情報をとれるエンドポイント
▸ /wp-json/oembed/1.0
▸ oEmbed用APIに関する情報をとれるエンドポイント
▸ /wp-json/oembed/1.0/embed
▸ oEmbedで実際に使われているエンドポイント

29. oEmbedしか
使えない

30. WordBench京都12月
WPRESTAPIv2を入れると使えるエンドポイント（一部）
▸ /wp-json/wp/v2/ ：ルート情報
▸ /wp-json/wp/v2/categories ：カテゴリ
▸ /wp-json/wp/v2/media ：メディア
▸ /wp-json/wp/v2/pages ：固定ページ
▸ /wp-json/wp/v2/posts ：投稿
▸ /wp-json/wp/v2/tags ：タグ
▸ /wp-json/wp/v2/taxonomies ：タクソノミー
▸ /wp-json/wp/v2/users ：ユーザー

31. 使える
メソッドなど

32. http://v2.wp-api.org/

33. ドキュメント読むの
めんどくさい
Hidetaka Okamoto
WordBench京都12月

34. そんな時の
ルートエンドポイント

35. curl -X GET
http://example.com/wp-json/wp/v2/
| jq .

37. WordBench京都12月
WordPress4.4 コアで使えるエンドポイント
"/wp/v2/comments": {
"namespace": "wp/v2",
"methods": [ "GET", "POST" ],
"endpoints": [
{
"methods": [ "GET" ],
"args": {
"context": {
"required": false,
"default": "view",
"enum": [ "view", "embed", "edit" ],
"description": "Scope under which the request is made; determines fields present
in response."
},
"page": {

38. WordBench京都12月
エンドポイントのURL
"/wp/v2/comments": {
"namespace": "wp/v2",
"methods": [ "GET", "POST" ],
"endpoints": [
{
"methods": [ "GET" ],
"args": {
"context": {
"required": false,
"default": "view",
"enum": [ "view", "embed", "edit" ],
"description": "Scope under which the request is made; determines fields present
in response."
},
"page": {

39. WordBench京都12月
このエンドポイントで使えるメソッド
"/wp/v2/comments": {
"namespace": "wp/v2",
"methods": [ "GET", "POST" ],
"endpoints": [
{
"methods": [ "GET" ],
"args": {
"context": {
"required": false,
"default": "view",
"enum": [ "view", "embed", "edit" ],
"description": "Scope under which the request is made; determines fields present
in response."
},
"page": {

40. WordBench京都12月
GETで使えるクエリとその説明
"/wp/v2/comments": {
"namespace": "wp/v2",
"methods": [ "GET", "POST" ],
"endpoints": [
{
"methods": [ "GET" ],
"args": {
"context": {
"required": false,
"default": "view",
"enum": [ "view", "embed", "edit" ],
"description": "Scope under which the request is made; determines fields present
in response."
},
"page": {

41. curlとjq使えると
いろいろ る

43. WordBench京都12月
var url = 'http://wp-kyoto.net/wp-json/';
$.ajax({
url: url + ‘wp/v2/posts', type:’GET’, dataType: 'json',
data : { filter: { s: ‘wp-api', posts_per_page: 5 }
},
timeout:10000,
}).done(function(datas) {
for (var i = datas.length - 1; i >= 0; i--) {
var post_url = datas[i]['link'];
$.ajax({
url: url + 'oembed/1.0/embed?url='+ post_url,
type:’GET', dataType: ‘json', timeout:10000,
}).done(function(data) {$('#ajax').append(data['html']);
}).fail(function(data) { $('#ajax').append('fail');});
}
}).fail(function(datas) {
$('#ajax').append('fail');
});

44. WordBench京都12月
var url = 'http://wp-kyoto.net/wp-json/';
$.ajax({
url: url + ‘wp/v2/posts', type:’GET’, dataType: 'json',
data : { filter: { s: ‘wp-api', posts_per_page: 5 }
},
timeout:10000,
}).done(function(datas) {
for (var i = datas.length - 1; i >= 0; i--) {
var post_url = datas[i]['link'];
$.ajax({
url: url + 'oembed/1.0/embed?url='+ post_url,
type:’GET', dataType: ‘json', timeout:10000,
}).done(function(data) {$('#ajax').append(data['html']);
}).fail(function(data) { $('#ajax').append('fail');});
}
}).fail(function(datas) {
$('#ajax').append('fail');
});
POSTSを取得するAPIから記事データを５件取得

45. WordBench京都12月
var url = 'http://wp-kyoto.net/wp-json/';
$.ajax({
url: url + ‘wp/v2/posts', type:’GET’, dataType: 'json',
data : { filter: { s: ‘wp-api', posts_per_page: 5 }
},
timeout:10000,
}).done(function(datas) {
for (var i = datas.length - 1; i >= 0; i--) {
var post_url = datas[i]['link'];
$.ajax({
url: url + 'oembed/1.0/embed?url='+ post_url,
type:’GET', dataType: ‘json', timeout:10000,
}).done(function(data) {$('#ajax').append(data['html']);
}).fail(function(data) { $('#ajax').append('fail');});
}
}).fail(function(datas) {
$('#ajax').append('fail');
});
oEmbedのAPIをAjaxで呼び出す

46. WordBench京都12月
var url = 'http://wp-kyoto.net/wp-json/';
$.ajax({
url: url + ‘wp/v2/posts', type:’GET’, dataType: 'json',
data : { filter: { s: ‘wp-api', posts_per_page: 5 }
},
timeout:10000,
}).done(function(datas) {
for (var i = datas.length - 1; i >= 0; i--) {
var post_url = datas[i]['link'];
$.ajax({
url: url + 'oembed/1.0/embed?url='+ post_url,
type:’GET', dataType: ‘json', timeout:10000,
}).done(function(data) {$('#ajax').append(data['html']);
}).fail(function(data) { $('#ajax').append('fail');});
}
}).fail(function(datas) {
$('#ajax').append('fail');
});
oEmbedのAPIをAjaxで呼び出す

47. WordBench京都12月
var url = 'http://wp-kyoto.net/wp-json/';
$.ajax({
url: url + ‘wp/v2/posts', type:’GET’, dataType: 'json',
data : { filter: { s: ‘wp-api', posts_per_page: 5 }
},
timeout:10000,
}).done(function(datas) {
for (var i = datas.length - 1; i >= 0; i--) {
var post_url = datas[i]['link'];
$.ajax({
url: url + 'oembed/1.0/embed?url='+ post_url,
type:’GET', dataType: ‘json', timeout:10000,
}).done(function(data) {$('#ajax').append(data['html']);
}).fail(function(data) { $('#ajax').append('fail');});
}
}).fail(function(datas) {
$('#ajax').append('fail');
});
oEmbedのAPIでとれたHTMLを挿入する

48. https://feelingrestful.com/

53. WP-API
結局どう使うのさ？

54. で、WP REST APIとやらは
どう使えと？
Someone
WordBench京都12月

55. WordBench京都12月
WP REST API × SOMETHING
▸ WP REST API × Plugins
▸ WP REST API × Themes
▸ WP REST API × Application
▸ WP REST API × Other API
▸ WP REST API × Internet Of Things

56. WordBench京都12月
WP REST API × PLUGINS
▸ WP REST APIを使ったプラグイン
▸ 非同期検索
▸ 記事埋め込みショートコード
▸ ユーザー登録・コメント投稿機能

57. https://wordpress.org/plugins/wp-search-live/

58. http://wp-kyoto.net/using-wp-api-shortcode-wbnara/

60. WP REST API v1
なので要注意

61. WordBench京都12月
WP REST API × THEMES
▸ WP REST API を使ったWordPressテーマ
▸ WP REST API v2必須のテーマは公式OK
▸ Reactやbackboneでテーマを作る？
▸ PHPなしでテーマ作成も可能

62. wptavern.com/anadama-an-example-wordpress-recipe-theme-based-on-react

63. http://media-assembly-kit.com/ja/

64. https://github.com/Automattic/Picard

65. PHP苦手でもJS書ければ
公式ディレクトリに
テーマをあげれるように

66. WordBench京都12月
WP REST API × APPLICATION
▸ WP REST APIを使ったアプリケーション
▸ ユーザー・投稿・メディアなどを管理
▸ WordPress をアプリケーションFW化する

68. http://www.happytables.com/

69. https://nomadbase.io/

70. WordBench京都12月
WP REST API × IOT
▸ Internet Of Things(モノのインターネット)
▸ マイコンからWP REST APIを使用する
▸ 「GUIすら存在しないWordPress」

71. https://ja.wordpress.org/plugins/littlebits/

72. https://ja.wordpress.org/plugins/littlebits/

74. WordPressの
リアルダッシュボード

77. 他Webサービスから
WordPressを更新

79. https://developer.amazon.com/appsandservices/solutions/alexa/alexa-skills-kit/docs/developing-an-alexa-
skill-as-a-lambda-function

80. 音声入力から
AWS経由で
WodPressを操作

85. WordBench京都12月
ここで書くネタ
▸ WordCamp USのセッションから活用アイディアを紹介
▸ テーマに使う _s+backbone / React 他GitHubサンプル
▸ プラグインとして使う 検索・関連記事
▸ 管理画面に使う OAuth認証、HappyTable
▸ あぷりけーしょん nomadobase、
▸ Internet Of Things Alexa,littlebits,IFTTT

86. まとめ
さらばPHP・・・？

87. LEARN JAVASCRIPT DEEPLY.
Matt Mullenweg
WordBench京都12月

88. だけど、

89. PHPは
無くならない

90. WordBench京都12月
WP REST APIは万能薬ではない
▸ WP REST APIでは取れないデータも多い
▸ メニュー・ウィジェット・基本設定etc..
▸ APIをいっぱい使う=サーバー負荷上がる
▸ レガシーブラウザの悪夢
▸ APIのカスタマイズ＝PHPを書く

91. WordBench京都12月
WordPress関数との協力プレイ
▸ APIで取れないものはPHPで
▸ APIでとれるものはJavaScript
▸ サーバーとブラウザでの処理の分散
▸ 遅延読み込みや仮想DOMの活用

92. WordBench京都12月
管理画面の設定を活かす
▸ get_options()でデータ取得
▸ HTMLのdata属性に出力
▸ JSで取得してAPI処理に利用
▸ http://wp-kyoto.net/wp-rest-api-get-posts-per-page/

93. WebComponent
というまだ見ぬ未来

94. WordBench京都12月
WEBCOMPONENT+WP REST API
▸ HTMLの要素を「パーツ化」して独自タグにできる
▸ うまく使えばJavaScriptすらほとんど書かずに済む
▸ フロントエンドをComponent化
▸ Componentを仕様に合わせて並べていく
▸ あとはWP REST APIからデータを流し込むだけ

95. なんて将来が
きたらいいよね

99. 時間が余ったら
US参加組を巻き込ます
Hidetaka Okamoto
WordBench京都12月