WordBench京都１２月、WordCampUSからのWP REST APIな話
2 likes1,583 views
WordCamp USでREST APIの話が多かった印象なので、REST APIの話をしました。
![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": {](https://image.slidesharecdn.com/wordbenchkyoto12-151220092010/85/WordBench-WordCampUS-WP-REST-API-37-320.jpg)
![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": {](https://image.slidesharecdn.com/wordbenchkyoto12-151220092010/85/WordBench-WordCampUS-WP-REST-API-38-320.jpg)
![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": {](https://image.slidesharecdn.com/wordbenchkyoto12-151220092010/85/WordBench-WordCampUS-WP-REST-API-39-320.jpg)
![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": {](https://image.slidesharecdn.com/wordbenchkyoto12-151220092010/85/WordBench-WordCampUS-WP-REST-API-40-320.jpg)
![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');
});](https://image.slidesharecdn.com/wordbenchkyoto12-151220092010/85/WordBench-WordCampUS-WP-REST-API-43-320.jpg)
![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から記事データを５件取得](https://image.slidesharecdn.com/wordbenchkyoto12-151220092010/85/WordBench-WordCampUS-WP-REST-API-44-320.jpg)
![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で呼び出す](https://image.slidesharecdn.com/wordbenchkyoto12-151220092010/85/WordBench-WordCampUS-WP-REST-API-45-320.jpg)
![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で呼び出す](https://image.slidesharecdn.com/wordbenchkyoto12-151220092010/85/WordBench-WordCampUS-WP-REST-API-46-320.jpg)
![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を挿入する](https://image.slidesharecdn.com/wordbenchkyoto12-151220092010/85/WordBench-WordCampUS-WP-REST-API-47-320.jpg)
WordBench京都１２月、WordCampUSからのWP REST APIな話
- 2. WORDCAMP US参加レポート ~という名のWP REST APIの話~ WORDBENCH京都12月
- 6. WordBench京都12月 WORDCAMP US2015私的サマリー ▸わぷー人気過ぎ ▸WordPress.com API ▸WP REST API ▸WP REST API
- 8. WORDBENCH京都12月テキスト わぷーってなに？ ▸ 日本語版公式キャラクター ▸ カネウチカズコさんによるデザイン ▸ GPL v2で利用可能 ▸ ご当地わぷーが沢山いる ▸ 2014年末頃から海外でブームに ▸ （ボールは齧ってるらしい） https://ja.wordpress.org/about-wp-ja/wapuu/
- 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
- 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. 使える メソッドなど
- 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": {
- 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を挿入する
- 53. WP-API 結局どう使うのさ？
- 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を使ったプラグイン ▸ 非同期検索 ▸ 記事埋め込みショートコード ▸ ユーザー登録・コメント投稿機能
- 60. WP REST API v1 なので要注意
- 61. WordBench京都12月 WP REST API × THEMES ▸ WP REST API を使ったWordPressテーマ ▸ WP REST API v2必須のテーマは公式OK ▸ Reactやbackboneでテーマを作る？ ▸ PHPなしでテーマ作成も可能
- 66. WordBench京都12月 WP REST API × APPLICATION ▸ WP REST APIを使ったアプリケーション ▸ ユーザー・投稿・メディアなどを管理 ▸ WordPress をアプリケーションFW化する
- 70. WordBench京都12月 WP REST API × IOT ▸ Internet Of Things(モノのインターネット) ▸ マイコンからWP REST APIを使用する ▸ 「GUIすら存在しないWordPress」
- 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/
- 94. WordBench京都12月 WEBCOMPONENT+WP REST API ▸ HTMLの要素を「パーツ化」して独自タグにできる ▸ うまく使えばJavaScriptすらほとんど書かずに済む ▸ フロントエンドをComponent化 ▸ Componentを仕様に合わせて並べていく ▸ あとはWP REST APIからデータを流し込むだけ
- 95. なんて将来が きたらいいよね