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

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

WORDCAMP US参加レポート ~という名のWP REST APIの話~

WORDBENCH京都12月

WORDCAMP US2015/12/04~12/06

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

WordBench京都12月

WORDCAMP US2015私的サマリー

▸わぷー人気過ぎ

▸WordPress.com API

▸WP REST API

▸WP REST API

http://WordPress.com

GLOBAL WAPUU

わぷー人気出過ぎ

WORDBENCH京都12月テキスト

わぷーってなに？▸ 日本語版公式キャラクター

▸ カネウチカズコさんによるデザイン

▸ GPL v2で利用可能

▸ ご当地わぷーが沢山いる

▸ 2014年末頃から海外でブームに

▸ （ボールは齧ってるらしい）

https://ja.wordpress.org/about-wp-ja/wapuu/


http://jawordpressorg.github.io/wapuu/


GitHubに世界中のわぷーが登録されている

https://github.com/jawordpressorg/wapuu


突如現れたファンサイト

http://wapuu.jp/

http://wapuu.jp/


スペースわぷー

http://wapuu.amimoto-ami.com/

http://wapuu.amimoto-ami.com/

WordPress.com API

すべてはここからはじまった


CALYPSO


CALYPSO

▸ React + WordPress.com API

▸WordPressのダッシュボードアプリ

▸ UIはWordPress.com風

▸ https://developer.wordpress.com/calypso/

▸ https://github.com/Automattic/wp-calypso



https://developer.wordpress.com/calypso/

https://github.com/Automattic/wp-calypso

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


WORDPRESS.COM REST API

▸WordPress.comのAPI

▸ JetPackやCalypsoで使用

▸ .orgで使うにはJetPackが必要

▸WP REST APIとは別物なので要注意

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



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


WP REST APIと混同すると辛くなる

▸WP REST APIと.com APIは別物

▸WP REST APIもv1とv2は別物

▸「WP API」という別物のプラグインもある

▸試す時には「どれを使うのか」を確認しよう！


プラグイン対応表

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/

４年以上メンテなし

WP-APIついにコア実装


ここで書くネタ▸ WP APIとは？ WordPressのコア部分のAPI

▸ プラグインで開発されていて、今はVersion2

▸ WP4.2に入ると言われてから約1年、ついにコア実装

▸ OmEmbedで使われてる、camp.orgはv１カスタマイズ

▸ ただし自分で使うにはプラグイン必要よ

▸ V1とV2の違いを一部紹介（フック・エンドポイント）

http://camp.org


WP REST APIとは？

▸ WordPressのコア部分のAPI

▸ 投稿 / 固定ページ / メディア / ユーザー / etc..

▸ WordPress4.2でコアに入ると言われてから約１年

▸ WP4.4で一部機能がコアに実装

▸ 全機能を使うにはプラグインが必要


WordPress4.4 コアに実装されたREST API

▸ oEmbedを実装するためのAPI

▸ 今まで話題になっていたAPIエンドポイントは入ってない

▸ ただしフックなどは追加されているので

　オリジナルのエンドポイントを追加することは可能


WordPress4.4 コアで使えるエンドポイント

▸ /wp-json/

▸ WP APIに関する各種情報をとれるエンドポイント

▸ /wp-json/oembed/1.0

▸ oEmbed用APIに関する情報をとれるエンドポイント

▸ /wp-json/oembed/1.0/embed

▸ oEmbedで実際に使われているエンドポイント

oEmbedしか使えない


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/

ドキュメント読むのめんどくさい

Hidetaka Okamoto


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

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


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": {


エンドポイントの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": {


GETで使えるクエリとその説明


curlとjq使えるといろいろ捗る


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から記事データを５件取得



oEmbedのAPIをAjaxで呼び出す



oEmbedのAPIをAjaxで呼び出す



oEmbedのAPIでとれたHTMLを挿入する

https://feelingrestful.com/

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

で、WP REST APIとやらはどう使えと？

Someone



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


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 なので要注意


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書ければ公式ディレクトリにテーマをあげれるように


WP REST API × APPLICATION

▸WP REST APIを使ったアプリケーション

▸ユーザー・投稿・メディアなどを管理

▸WordPress をアプリケーションFW化する

http://www.happytables.com/

https://nomadbase.io/


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-alexa-skill-as-a-lambda-function

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


ここで書くネタ▸ WordCamp USのセッションから活用アイディアを紹介

▸ テーマに使う　　_s+backbone / React 他GitHubサンプル

▸ プラグインとして使う　検索・関連記事

▸ 管理画面に使う　OAuth認証、HappyTable

▸ あぷりけーしょん　nomadobase、

▸ Internet Of Things　Alexa,littlebits,IFTTT

まとめさらばPHP・・・？

LEARN JAVASCRIPT DEEPLY.

Matt Mullenweg


だけど、

PHPは無くならない


WP REST APIは万能薬ではない

▸WP REST APIでは取れないデータも多い

▸メニュー・ウィジェット・基本設定etc..

▸ APIをいっぱい使う=サーバー負荷上がる

▸レガシーブラウザの悪夢

▸ APIのカスタマイズ＝PHPを書く


WordPress関数との協力プレイ

▸APIで取れないものはPHPで

▸APIでとれるものはJavaScript

▸サーバーとブラウザでの処理の分散

▸遅延読み込みや仮想DOMの活用


管理画面の設定を活かす▸ get_options()でデータ取得

▸ HTMLのdata属性に出力

▸ JSで取得してAPI処理に利用

▸ http://wp-kyoto.net/wp-rest-api-get-posts-per-page/

WebComponent というまだ見ぬ未来


WEBCOMPONENT+WP REST API

▸ HTMLの要素を「パーツ化」して独自タグにできる

▸ うまく使えばJavaScriptすらほとんど書かずに済む

▸ フロントエンドをComponent化

▸ Componentを仕様に合わせて並べていく

▸ あとはWP REST APIからデータを流し込むだけ

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

時間が余ったら US参加組を巻き込ます

Hidetaka Okamoto


Engineering

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