WordBench京都１２月、WordCampUSからのWP REST APIな話
391 Views
December 20, 15
スライド概要
WordCamp USでREST APIの話が多かった印象なので、REST APIの話をしました。
Developer
関連スライド
各ページのテキスト
WORDBENCH京都12月 WORDCAMP US参加レポート
WORDBENCH京都12月 WORDCAMP US参加レポート ~という名のWP REST APIの話~
2015/12/04~12/06 WORDCAMP US
実はあんまり セッション聞いてない
WordBench京都12月 WORDCAMP US2015私的サマリー ▸わぷー人気過ぎ ▸WordPress.com API ▸WP REST API ▸WP REST API
わぷー人気出過ぎ GLOBAL WAPUU
WORDBENCH京都12月テキスト わぷーってなに？ ▸ 日本語版公式キャラクター ▸ カネウチカズコさんによるデザイン ▸ GPL v2で利用可能 ▸ ご当地わぷーが沢山いる ▸ 2014年末頃から海外でブームに ▸ （ボールは齧ってるらしい） https://ja.wordpress.org/about-wp-ja/wapuu/
WordBench京都12月 http://jawordpressorg.github.io/wapuu/
WordBench京都12月 GitHubに世界中のわぷーが登録されている https://github.com/jawordpressorg/wapuu
WordBench京都12月 突如現れたファンサイト http://wapuu.jp/
WordBench京都12月 スペースわぷー http://wapuu.amimoto-ami.com/
すべては ここからはじまった WordPress.com API
CALYPSO
WordBench京都12月 CALYPSO ▸ React + WordPress.com API ▸ WordPressのダッシュボードアプリ ▸ UIはWordPress.com風 ▸ https://developer.wordpress.com/calypso/ ▸ https://github.com/Automattic/wp-calypso
https://developer.wordpress.com/docs/api/
WordBench京都12月 WORDPRESS.COM REST API ▸ WordPress.comのAPI ▸ JetPackやCalypsoで使用 ▸ .orgで使うにはJetPackが必要 ▸ WP REST APIとは別物なので要注意 ▸ https://developer.wordpress.com/docs/api/
WordBench京都12月 WP REST APIと混同すると辛くなる ▸ WP REST APIと.com APIは別物 ▸ WP REST APIもv1とv2は別物 ▸ 「WP API」という別物のプラグインもある ▸ 試す時には「どれを使うのか」を確認しよう！
WordBench京都12月 プラグイン対応表 API名 プラグイン名 URL .com API JetPack https://wordpress.org/ plugins/jetpack/ 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/ WP API https://wordpress.org/ plugins/wp-api/ WP API 備考 .comアカウント 必須 一部コア実装 (WP4.4~) ４年以上 メンテなし
ついにコア実装 WP-API
WordBench京都12月 ここで書くネタ ▸ WP APIとは？ WordPressのコア部分のAPI ▸ プラグインで開発されていて、今はVersion2 ▸ WP4.2に入ると言われてから約1年、ついにコア実装 ▸ OmEmbedで使われてる、camp.orgはv１カスタマイズ ▸ ただし自分で使うにはプラグイン必要よ ▸ V1とV2の違いを一部紹介（フック・エンドポイント）
WordBench京都12月 WP REST APIとは？ ▸ WordPressのコア部分のAPI ▸ 投稿 / 固定ページ / メディア / ユーザー / etc.. ▸ WordPress4.2でコアに入ると言われてから約１年 ▸ WP4.4で一部機能がコアに実装 ▸ 全機能を使うにはプラグインが必要
WordBench京都12月 WordPress4.4 コアに実装されたREST API ▸ oEmbedを実装するためのAPI ▸ 今まで話題になっていたAPIエンドポイントは入ってない ▸ ただしフックなどは追加されているので オリジナルのエンドポイントを追加することは可能
WordBench京都12月 WordPress4.4 コアで使えるエンドポイント ▸ /wp-json/ ▸ WP APIに関する各種情報をとれるエンドポイント ▸ /wp-json/oembed/1.0 ▸ oEmbed用APIに関する情報をとれるエンドポイント ▸ /wp-json/oembed/1.0/embed ▸ oEmbedで実際に使われているエンドポイント
oEmbedしか 使えない
WordBench京都12月 WP REST API v2を入れると使えるエンドポイント（一部） ▸ /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 ：ユーザー
使える メソッドなど
http://v2.wp-api.org/
WordBench京都12月 ドキュメント読むの めんどくさい Hidetaka Okamoto
そんな時の ルートエンドポイント
curl -X GET \ http://example.com/wp-json/wp/v2/ \ | jq .
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": {
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": {
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": {
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": {
curlとjq使えると いろいろ捗る
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');
});
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から記事データを５件取得
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で呼び出す
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で呼び出す
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://feelingrestful.com/
結局どう使うのさ？ WP-API
WordBench京都12月 で、WP REST APIとやらは どう使えと？ Someone
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
WordBench京都12月 WP REST API × PLUGINS ▸ WP REST APIを使ったプラグイン ▸ 非同期検索 ▸ 記事埋め込みショートコード ▸ ユーザー登録・コメント投稿機能
https://wordpress.org/plugins/wp-search-live/
http://wp-kyoto.net/using-wp-api-shortcode-wbnara/
WP REST API v1 なので要注意
WordBench京都12月 WP REST API × THEMES ▸ WP REST API を使ったWordPressテーマ ▸ WP REST API v2必須のテーマは公式OK ▸ Reactやbackboneでテーマを作る？ ▸ PHPなしでテーマ作成も可能
wptavern.com/anadama-an-example-wordpress-recipe-theme-based-on-react
http://media-assembly-kit.com/ja/
https://github.com/Automattic/Picard
PHP苦手でもJS書ければ 公式ディレクトリに テーマをあげれるように
WordBench京都12月 WP REST API × APPLICATION ▸ WP REST APIを使ったアプリケーション ▸ ユーザー・投稿・メディアなどを管理 ▸ WordPress をアプリケーションFW化する
http://www.happytables.com/
https://nomadbase.io/
WordBench京都12月 WP REST API × IOT ▸ Internet Of Things(モノのインターネット) ▸ マイコンからWP REST APIを使用する ▸ 「GUIすら存在しないWordPress」
https://ja.wordpress.org/plugins/littlebits/
https://ja.wordpress.org/plugins/littlebits/
WordPressの リアルダッシュボード
他Webサービスから WordPressを更新
https://developer.amazon.com/appsandservices/solutions/alexa/alexa-skills-kit/docs/developing-an-alexaskill-as-a-lambda-function
音声入力から AWS経由で WodPressを操作
WordBench京都12月 ここで書くネタ ▸ WordCamp USのセッションから活用アイディアを紹介 ▸ テーマに使う _s+backbone / React 他GitHubサンプル ▸ プラグインとして使う 検索・関連記事 ▸ 管理画面に使う OAuth認証、HappyTable ▸ あぷりけーしょん nomadobase、 ▸ Internet Of Things Alexa,littlebits,IFTTT
さらばPHP・・・？ まとめ
WordBench京都12月 LEARN JAVASCRIPT DEEPLY. Matt Mullenweg
だけど、
PHPは 無くならない
WordBench京都12月 WP REST APIは万能薬ではない ▸ WP REST APIでは取れないデータも多い ▸ メニュー・ウィジェット・基本設定etc.. ▸ APIをいっぱい使う=サーバー負荷上がる ▸ レガシーブラウザの悪夢 ▸ APIのカスタマイズ＝PHPを書く
WordBench京都12月 WordPress関数との協力プレイ ▸ APIで取れないものはPHPで ▸ APIでとれるものはJavaScript ▸ サーバーとブラウザでの処理の分散 ▸ 遅延読み込みや仮想DOMの活用
WordBench京都12月 管理画面の設定を活かす ▸ get_options()でデータ取得 ▸ HTMLのdata属性に出力 ▸ JSで取得してAPI処理に利用 ▸ http://wp-kyoto.net/wp-rest-api-get-posts-per-page/
WebComponent というまだ見ぬ未来
WordBench京都12月 WEBCOMPONENT+WP REST API ▸ HTMLの要素を「パーツ化」して独自タグにできる ▸ うまく使えばJavaScriptすらほとんど書かずに済む ▸ フロントエンドをComponent化 ▸ Componentを仕様に合わせて並べていく ▸ あとはWP REST APIからデータを流し込むだけ
なんて将来が きたらいいよね
WordBench京都12月 時間が余ったら US参加組を巻き込ます Hidetaka Okamoto