WordPress JSON REST API ～さらばPHP - 大阪編～

五十嵐和恵　Kazue IGARASHI

Who am I ?

• 五十嵐和恵 - Kazue IGARASHI

• 通称おかん

• @gatespace_k

• http://gatespace.jp/

WordCamp Kansai 2014 with Matt

デジタルキューブ My job : Code Wrangler / Frontend Engineer

• https://www.digitalcube.jp/

• WordPress CodePoet Directory コンサルタント

• Amazon Web Servicesアドバンスド コンサルティングパートナー

• 分散型ワークスタイル

• 営業ゼロ。100%インバウンド

• WordPress on AWS大規模ウェブメディア など

WordPressとの関わり• _s (Underscores)

http://underscores.me/

• Contributor

• WordPress日本語フォーラム http://ja.forums.wordpress.org

• 世話役

• WordBench仙台http://wordbench.org/groups/sendai/

• モデレーター

網元起動隊 https://www.facebook.com/

GHOSTINTHEAMIMOTO

網元起動隊 奥の細道

網元起動隊 in サンフランシスコ網元起動隊 沖縄班

WP REST APIhttp://wp-api.org/

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/

• エンドポイントを拡張可能

WP REST API の可能性

データを見てみる（Demo）

• ルートデータhttp://example.com/wp-json/

• 投稿リスト（デフォルト）http://example.com/wp-json/posts/

• 個別の投稿http://example.com/wp-json/posts/<ID>

Tips : ブラウザでも表示できますが見づらいので、コマンドラインで jq を入れると幸せになれます

投稿を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' ); });

Media Assembly Kithttp://media-assembly-kit.com/ja/

制作者にとってのメリット

• 制作に関して WordPress に関する知識やPHPに関する知識は不要

Webサイト運営者のメリット

• テクニカルサポート サーバー＋ミドルウェアアップデート＋WordPressアップデート

• 記事の更新や複数投稿者の管理など、運用に集中できる

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

http://ja.demo.media-assembly-kit.com/ http://ja.demo.media-assembly-kit.com/mak-simple/

デモサイト

事例AppWoman

http://appwoman.jp/

Thanks !