Download to read offline
20150704cmsdou
- 1. WordPress JSON RESTAPI ∼さらば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.
- 6.
- 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.
- 12. 制作者にとってのメリット • 制作に関して WordPressに関する知識やPHPに関する 知識は不要
- 13.
- 14.
- 15.
- 16.
- 17.