1. WordPress JSON REST API
∼さらばPHP - 大阪編∼
五十嵐和恵 Kazue IGARASHI

2. Who am I ?
• 五十嵐和恵 - Kazue IGARASHI
• 通称おかん
• @gatespace_k
• http://gatespace.jp/
WordCamp Kansai 2014 with Matt

3. デジタルキューブ
My job : Code Wrangler / Frontend Engineer
• https://www.digitalcube.jp/
• WordPress
CodePoet Directory コンサルタント
• Amazon Web Services
アドバンスド コンサルティング
パートナー
• 分散型ワークスタイル
• 営業ゼロ。100%インバウンド
• WordPress on AWS
大規模ウェブメディア など

4. WordPressとの関わり
• _s (Underscores)
http://underscores.me/
• Contributor
• WordPress日本語フォーラム
http://ja.forums.wordpress.org
• 世話役
• WordBench仙台
http://wordbench.org/groups/
sendai/
• モデレーター

5. 網元起動隊
https://www.facebook.com/
GHOSTINTHEAMIMOTO
網元起動隊 奥の細道
網元起動隊 in サンフランシスコ網元起動隊 沖縄班

6. WP REST API
http://wp-api.org/

7. WP REST API
• HTTP REST API を介して WordPressのデータにアクセス！
• JSONPにも対応
• WordPressのクエリが使える！
• 将来的にWordPressコア部分に実装予定（2015年以内？）
• 現時点ではプラグインで提供（1.2.2, 2.0b2）
• WP REST API (WP API) https://wordpress.org/plugins/json-rest-api/
• エンドポイントを拡張可能

8. WP REST API の可能性

9. データを見てみる（Demo）
• ルートデータ
http://example.com/wp-json/
• 投稿リスト（デフォルト）
http://example.com/wp-json/posts/
• 個別の投稿
http://example.com/wp-json/posts/<ID>
Tips : ブラウザでも表示できますが見づらいので、
コマンドラインで jq を入れると幸せになれます

10. 投稿をHTMLで表示してみる
（Demo）
• HTML + JavaScript（jQuery + Ajax）
$.ajax({
type: 'GET',
url: 'http://example.com/wp-json/posts/<ID>/?_jsonp=?',
dataType: 'jsonp'
}).done(function(data, status, xhr) {
// 取得したデータの加工や表示処理
console.log( 'Done' );
}).fail(function(xhr, status, error) {
// エラー処理
console.log( 'Error' );
});

11. Media Assembly Kit
http://media-assembly-kit.com/ja/

12. 制作者にとってのメリット
• 制作に関して WordPress に関する知識やPHPに関する
知識は不要

13. Webサイト運営者のメリット
• テクニカルサポート
サーバー＋ミドルウェアアップデート＋WordPressアッ
プデート
• 記事の更新や複数投稿者の管理など、運用に集中できる

14. API仕様やデモテンプレートはGitHubで公開
http://megumiteam.github.io/media-assembly-kit/

15. http://ja.demo.media-assembly-kit.com/
http://ja.demo.media-assembly-kit.com/mak-simple/
デモサイト

16. 事例
AppWoman
http://appwoman.jp/

17. Thanks !