フロントエンドエンジニアのためのWP REST API + JavaScriptによるWordPressサイト構築 岡本 秀高

WordCamp Tokyo 2016 セッションスライドです。

Transcript

2. Ta l k a b o u t … • WP REST APIͱ͸ʁ • WP REST APIΛ࢖ͬͨϑϩϯτΤϯυߏங • WP REST APIͰมΘΔ͜ͱ
3. H i d e t a k a O k a m o t o • AMIMOTO ( Digitalcube ) • WordBenchژ౎ϞσϨʔλ • ೔ຊޠϑΥʔϥϜϦΤκϯ
4. http://www.amazon.co.jp/dp/B01K3QZRIK
5. Ta l k a b o u t … • WP REST APIͱ͸ʁ • WP REST APIΛ࢖ͬͨϑϩϯτΤϯυߏங • WP REST APIͰมΘΔ͜ͱ
7. W P R E S T A P I ( Ve r s i o n 2 ) • WordPressͷσʔλΛJSONͰऔಘͰ͖ΔAPI • WordPress4.4ͰҰ෦ػೳ͕ίΞ࣮૷ࡁΈ • ίΞ౷߹ʹ޲͚ͯ։ൃਐߦத • ϓϥάΠϯ΍ίʔυ௥ՃʹΑΔػೳ֦ு΋Մೳ
8. $ c u r l h t t p : / / w p - k y o t o . n e t / w p - j s o n / w p / v 2 / p o s t s | j q .
9. / w p - j s o n / w p / v 2 / : o b j e c t / : i d • ౤ߘͷҰཡΛऔಘ GET /wp-json/wp/v2/ posts • ID͕123ͷݻఆϖʔδΛऔಘ GET /wp-json/wp/v2/ pages/123
10. G E T w p - j s o n / p o s t s ? f i l t e r [ s ] = w o rd p re s s ɹ ɹ ʮ Wo rd P re s s ʯ Λ ؚ Ή ౤ ߘ Λ औ ಘ P O S T w p - j s o n / c o m m e n t s / 1 2 3 - d “ c o n t e n t = c o m m e n t ” ɹ ɹ I D : 1 2 3 ͷ ه ࣄ ʹ ί ϝ ϯ τ Λ ౤ ߘ
11. W P R E S T A P I υ Ω ϡ ϝ ϯ ς ʔ γ ϣ ϯ ʢ ೔ ຊ ޠ ൛ ʣ http://ja.wp-api.org/
12. Ta l k a b o u t … • WP REST APIͱ͸ʁ • WP REST APIΛ࢖ͬͨϑϩϯτΤϯυߏங • WP REST APIͰมΘΔ͜ͱ
13. W P R E S T A P I Λ ࢖ ͬ ͨ ϑ ϩ ϯ τ Τ ϯ υ ߏ ங • Connect multiple api ɹ • Mobile Application ɹ • Universal JavaScript ɹ
14. W P R E S T A P I Λ ࢖ ͬ ͨ ϑ ϩ ϯ τ Τ ϯ υ ߏ ங • Connect multiple api ɹˠෳ਺ͷWordPressΛAPIͰ࿈ܞͤ͞Δ • Mobile Application →ϞόΠϧΞϓϦ͔ΒAPIΛݺͼग़͢ • Universal JavaScript →ϑϩϯτ͢΂ͯΛJavaScriptͰߏங͢Δ
15. W P R E S T A P I Λ ࢖ ͬ ͨ ϑ ϩ ϯ τ Τ ϯ υ ߏ ங • Connect multiple api ɹˠෳ਺ͷWordPressΛAPIͰ࿈ܞͤ͞Δ • Mobile Application →ϞόΠϧΞϓϦ͔ΒAPIΛݺͼग़͢ • Universal JavaScript →ϑϩϯτ͢΂ͯΛJavaScriptͰߏங͢Δ
16. ผ ͷ Wo rd P re s s αΠ τ ͷ ه ࣄ Λ औ ಘ ͢ Δ <?php $url = ‘http://example.com/wp-json/wp/v2/posts'; $posts = wp_remote_get( $url ); foreach ( $posts as $post ) { echo esc_html( $post[‘title’][‘rendered’] ); }
17. W P R E S T A P I Λ ࢖ ͬ ͨ ϑ ϩ ϯ τ Τ ϯ υ ߏ ங • Connect multiple api ɹˠෳ਺ͷWordPressΛAPIͰ࿈ܞͤ͞Δ • Mobile Application →ϞόΠϧΞϓϦ͔ΒAPIΛݺͼग़͢ • Universal JavaScript →ϑϩϯτ͢΂ͯΛJavaScriptͰߏங͢Δ
18. http://ogijima-library.or.jp/
19. https://github.com/ogijima-library/app
20. i o n i c + w p - a n g u l a r j s <ion-view title="͓஌Βͤ"><ion-content> <have-posts api-root="{{ apiRoot }}" post-type="posts" offset="0" per-page="5"> <the-post-thumbnail href="#/app/posts/:id" size=“post-thumbnail”> </the-post-thumbnail> <h2 class="entry-title"><the-title href="#/app/posts/:id"></the-title></h1> <the-date format="yyyy/MM/dd"></the-date> </have-posts> </ion-content></ion-view> https://github.com/ogijima-library/app/blob/master/www/templates/posts.html
21. W P R E S T A P I Λ ࢖ ͬ ͨ ϑ ϩ ϯ τ Τ ϯ υ ߏ ங • Connect multiple api ɹˠෳ਺ͷWordPressΛAPIͰ࿈ܞͤ͞Δ • Mobile Application →ϞόΠϧΞϓϦ͔ΒAPIΛݺͼग़͢ • Universal JavaScript →ϑϩϯτ͢΂ͯΛJavaScriptͰߏங͢Δ
22. U n i v e r s a l J a v a S c r i p t
23. ϑ ϩ ϯ τ Τ ϯ υ ͔ Β ό ο Ϋ Τ ϯ υ · Ͱ ͢΂ ͯ J a v a S c r i p t Ͱ ߏ ங ͢ Δ
24. U N I V E R S A L J AVA S C R I P T • API௨৴ɿFetch API / SuperAgent / jQuery / Angular • αʔόʔɿExpress • ϨϯμϦϯάɿReact / Angular / Riot / View.js / jQuery • ΠϕϯτॲཧɿRedux / Angular / jQuery • ϞόΠϧΞϓϦɿionic / Cordova / React Native
25. J a v a S c r i p t ͕ ѻ ͑ Ε ͹ ɺ • w e b s i t e • w e b A p p • M o b i l e A p p • I o T • e t c . . ͩ ͍ ͨ ͍ ͷ ͜ ͱ ͕ Ͱ ͖ Δ Α ͏ ʹ ͳ Δ
26. h t t p s : / / u s t w o . c o m /
28. w p - k y o t o • αʔόʔɿExpress ( JS ) • ϨϯμϦϯάɿReact ( JS ) • APIॲཧܥ౳ɿRedux ( JS ) http://dev.wp-kyoto.net/
29. • ExpressͰϦΫΤετॲཧΛఆٛ • Fetch API͕APIͱ࿈ܞ͢Δ • ReduxͰσʔλॲཧΛఆٛ • ReactͰදࣔ͢Δ಺༰Λఆٛ
30. Ta l k a b o u t … • WP REST APIͱ͸ʁ • WP REST APIΛ࢖ͬͨϑϩϯτΤϯυߏங • WP REST APIͰมΘΔ͜ͱ
31. Wo rd P re s s ʹ न Θ Ε ͳ ͍ w e b ੍ ࡞
32. Ի ੠
33. h t t p s : / / a m i m o t o - a m i . c o m / a m i m o t o - n i n j a / Ի੠ೝࣝαʔϏεͱWordPressͷ࿈ܞ
34. A u d i o C a p t u re A u d i o P l a y b a c k Yo u r C o d e W P R E S T A P I W h a t i s Wo rd p re s s ? Wo rd P re s s i s …
35. Wo rd P re s s a s a M i c ro s e r v i c e
36. ݕ ࡧ ͸ E l a s t i c s e a rc h Ϛʔ έ ςΟ ϯ ά ͸ M a u t i c +BWB4DSJQU )5.- "1* "1* "1*
37. R e u s a b l e C o n t e n t
38. ࠓ · Ͱ ͸ ഔ ମ ຖ ʹ ί ϯ ς ϯ π Λ ߋ ৽ ͯ͠ ͍ ͨ
39. ί ϯ ς ϯ π ͸ Wo rd P re s s ʹ A P I ͔ Β ί ϯ ς ϯ π Λ ར ༻ ͢ Δ
40. I n t e l l i g e n t C o n t e n t https://www.amazon.co.jp/dp/B01698YCF0
41. ࠓ · Ͱ ௨ Γ ͷ ࡞ Γ ํ ͕ ͳ ͘ ͳ Δ Θ ͚ Ͱ ͸ ͳ ͍
42. http://www.vektor-inc.co.jp/
43. Ҋ ݅ ʹ Ԡ ͡ ͯ W P A P I ͷ ى ༻ Λ ݕ ౼ ͢ Δ • ϞόΠϧΞϓϦ౳ɺΦϜχνϟωϧʹల։͢ΔϝσΟΞ • JavaScriptͰͷ։ൃ͕ಘҙͳΤϯδχΞ͕ଟ͍νʔϜͰͷ։ൃ • ςʔϚ΍ϓϥάΠϯͷઃఆ͚ͩͰย෇͘Ҋ݅ • WordPressςʔϚ࡞ऀͱ͔͕͍ΔνʔϜͰͷ։ൃ ै དྷ ͷ ߏ ங ํ ๏ ͕ ޮ ཰ త ͳ έ ʔε ͷ ྫ W P R E S T A P I ͕ ׆ ༂ ͢ Δ έ ʔε ͷ ྫ
44. T h a n k s ! • WP REST APIͱ͸ʁ • WP REST APIΛ࢖ͬͨϑϩϯτΤϯυߏங • WP REST APIͰมΘΔ͜ͱ ੍࡞ɾஶ࡞ Ί૊ ऴ