WordBench京都12月、WordCampUSからのWP REST APIな話

369 Views

December 20, 15

スライド概要

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

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

2015/12/04~12/06 WORDCAMP US

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/ 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~) 4年以上 メンテなし

24.

ついにコア実装 WP-API

25.

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

26.

WordBench京都12月 WP REST APIとは? ▸ WordPressのコア部分のAPI ▸ 投稿 / 固定ページ / メディア / ユーザー / etc.. ▸ WordPress4.2でコアに入ると言われてから約1年 ▸ 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月 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 :ユーザー

31.

使える メソッドなど

32.

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

33.

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

34.

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

35.

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

37.
[beta]
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.
[beta]
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.
[beta]
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.
[beta]
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.
[beta]
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.
[beta]
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から記事データを5件取得

45.
[beta]
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.
[beta]
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.
[beta]
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.

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

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-alexaskill-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.

WordBench京都12月 LEARN JAVASCRIPT DEEPLY. Matt Mullenweg

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.

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