WP REST API + React / AngularJSで はじめるWebアプリケーション

WordBench京都&ng-kyoto Meetup 2016/10 スライド

Transcript

1. W P R E S T A P I + R e a c t / A n g u l a r J S Ͱ ͸ ͡ Ί Δ We b Ξ ϓ Ϧ έ ʔ γ ϣ ϯ Wo rd B e n c h ژ ౎ & n g - k y o t o M e e t u p 2 0 1 6 / 1 0
2. J a v a S c r i p t ֮ ͑Δ ͱ ɺ w e b ੍ ࡞ ͷ Ҿ ͖ ग़ ͠ ͕ ͬ͢ ͝ ͍ ૿ ͑Δ Α
3. H i d e t a k a O k a m o t o • AMIMOTO ( Digitalcube ) • WordBenchژ౎ϞσϨʔλ • ೔ຊޠϑΥʔϥϜϦΤκϯ
5. http://www.amazon.co.jp/dp/B01K3QZRIK
6. Ξ δΣ ϯ μ • WP REST APIͷ͓͞Β͍ • React ΍ AngularJS Ͱ͍Ζ͍Ζ΍ͬͯΈΑ͏ • JavaScript + WP REST APIͰ޿͕Δweb੍࡞
7. Ξ δΣ ϯ μ • WP REST APIͷ͓͞Β͍ • React ΍ AngularJS Ͱ͍Ζ͍Ζ΍ͬͯΈΑ͏ • JavaScript + WP REST APIͰ޿͕Δweb੍࡞
9. W P R E S T A P I ( Ve r s i o n 2 ) • WordPressͷσʔλΛJSONͰऔಘͰ͖ΔAPI • WordPress4.4ͰҰ෦ػೳ͕ίΞ࣮૷ࡁΈ • ίΞ౷߹ʹ޲͚ͯ։ൃਐߦத • ϓϥάΠϯ΍ίʔυ௥ՃʹΑΔػೳ֦ு΋Մೳ
10. $ 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 .
11. / 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
12. 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 ͷ ه ࣄ ʹ ί ϝ ϯ τ Λ ౤ ߘ
13. W P R E S T A P I υ Ω ϡ ϝ ϯ ς ʔ γ ϣ ϯ ʢ ೔ ຊ ޠ ൛ ʣ Λ P R ग़ ͯ͠ ϝ ϯ ς ͠ Α ͏ http://ja.wp-api.org/
14. Ξ δΣ ϯ μ • WP REST APIͷ͓͞Β͍ • React ΍ AngularJS Ͱ͍Ζ͍Ζ΍ͬͯΈΑ͏ • JavaScript + WP REST APIͰ޿͕Δweb੍࡞
15. W P - A n g u l a r J S h t t p s : / / g i t h u b . c o m / m i y a 0 0 0 1 / w p - a n g u l a r j s
16. W P - A n g u l a r J S <have-posts api-root="http://example.com/wp-json/wp/v2" post-type="posts" per-page="5"> <the-post-thumbnail></the-post-thumbnail> <h1 class=“entry-title"> <the-title href=“#/posts/:id"></the-title> </h1> </have-posts>
17. W P - A n g u l a r J S ͳ Β ɺ ς ϯ ϓ Ϩ ʔ τ λ ά ϥ ΠΫ ͳ Ϛʔ Ϋ Ξ οϓ ͕ Մ ೳ <?php if ( have_posts() ) { while ( have_posts() ) { the_post();?> <?php the_post_thumbnail(); ?> <h1 class=“entry-title”><?php the_title(); ?> </h1> <?php } // end while } // end if
18. W P - A n g u l a r J S ͳ Β ɺ ς ϯ ϓ Ϩ ʔ τ λ ά ϥ ΠΫ ͳ Ϛʔ Ϋ Ξ οϓ ͕ Մ ೳ <have-posts api-root="http://example.com/wp-json/wp/v2" post-type="posts" per-page="5"> <the-post-thumbnail></the-post-thumbnail> <h1 class=“entry-title"> <the-title href=“#/posts/:id"></the-title> </h1> </have-posts>
19. W P - A n g u l a r J S ͷ A P I <have-posts> <the-title> <the-content> <the-post-thumbnail> <the-id> <the-excerpt> <the-date>
20. ϧ ʔϓ ͸ < h a v e - p o s t s > ύ ϥϝ ʔ λ σ ϑ Υϧ τ આ ໌ a p i - ro o t A P I ͷ U R L Λ ࢦ ఆ p o s t - t y p e ౤ ߘ λ Π ϓ Λ ࢦ ఆ p e r- p a g e 1 0 औ ಘ ͢ Δ ه ࣄ ݅ ਺ o ff s e t 0 εΩ οϓ ͢ Δ ه ࣄ ݅ ਺ p o s t - i d ه ࣄ I D Λ ࢦ ఆ f i l t e r W P _ Q u e r y ϥ ΠΫ ͳ Ϋ Τ Ϧ
21. e x a m p l e . c o m ͷ p o s t ౤ ߘ λ Π ϓ Ͱɺ Χ ς ΰ Ϧ I D 1 2 3 ͷ ه ࣄ Λ ঢ ॱ Ͱ औ ಘ ͢ Δ <have-posts api-root=“http://example.com" post-type="posts" filter="{ order: 'ASC', cat: 123 }">
22. e x a m p l e . c o m ͷ p o s t ౤ ߘ λ Π ϓ Ͱɺ ه ࣄ I D 1 2 3 ͷ ه ࣄ Λ औ ಘ ͢ Δ <have-posts api-root=“http://example.com" post-type="posts" post-id="123">
23. W P - A N G U L A R J S Ͱ Ϟ όΠϧΞ ϓ Ϧ Λ ࡞ Δ
24. Wo rd P re s s + W P - A P I + I o n i c F r a m e w o r k h t t p s : / / g i t h u b . c o m / m i y a 0 0 0 1 / i o n i c - s t a r t e r- w o rd p re s s
25. Wo rd P re s s + W P - A P I + I o n i c F r a m e w o r k • WP AngularJS • Cordova • ionic
26. Wo rd P re s s + W P - A P I + I o n i c F r a m e w o r k $ npm install -g ionic cordova ios-sim
27. Wo rd P re s s + W P - A P I + I o n i c F r a m e w o r k $ ionic start myApp https://github.com/miya0001/ionic- starter-wordpress $ cd myApp $ ionic platform add ios $ ionic platform add android
28. $ v i m m y A p p / w w w / j s / a p p . j s .constant( 'config', { api: 'http://example.com/wp-json/wp/v2' } )
29. 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
30. Wo rd P re s s + W P - A P I + I o n i c F r a m e w o r k $ ionic emulate ios or $ ionic serve
31. http://ogijima-library.or.jp/
32. https://github.com/ogijima-library/app
33. R e a c t ν ϡ ʔ τ Ϧ Ξϧ Ͱ W P R E S T A P I https://facebook.github.io/react/docs/tutorial.html
34. C o m m e n t B o x ͷ u r l Λ W P ɹ A P I ʹ ReactDOM.render( - <CommentBox url="/api/comments" pollInterval={2000} />, + <CommentBox url="http://api.wp-app.org/wp-json/ wp/v2/comments" pollInterval={2000} />, document.getElementById('content') );
35. C o m m e n t ͷ M a r k d o w n ର Ԡ Λ Φ ϑ ʹ var Comment = React.createClass({ rawMarkup: function() { - var md = new Remarkable(); - var rawMarkup = md.render(this.props.children.toString()); - return { __html: rawMarkup }; + return { __html: this.props.children.toString()}; },
36. C o m m e n t L i s t Λ W P A P I ର Ԡ render: function() { var commentNodes = this.props.data.map(function(comment) { return ( - <Comment author={comment.author} key={comment.id}> - {comment.text} + <Comment author={comment.author_name} key={comment.id}> + {comment.content.rendered} </Comment> ); });
37. C o m m e n t ౤ ߘ ͸ ͜ Μ ͳ ײ ͡ Ͱ P O S T ͢ Δ $.ajax({ url: this.props.url, dataType: 'json', type: 'POST', data: { id: POST_ID, author: "AUTHOR_NAME", content: "YOUR COMMENT" },
39. Ξ δΣ ϯ μ • WP REST APIͷ͓͞Β͍ • React ΍ AngularJS Ͱ͍Ζ͍Ζ΍ͬͯΈΑ͏ • JavaScript + WP REST APIͰ޿͕Δweb੍࡞
40. Wo rd P re s s ʹ न Θ Ε ͳ ͍ w e b ੍ ࡞
41. Ի ੠
42. 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ͷ࿈ܞ
43. A M I M O T O ε ϙ ϯ α ʔϒʔε ແ ਓ Խ ܭ ը
44. 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 …
45. https://blog.wordpress.tv/2016/10/07/amazon-alexa-wp-rest-api-gui-less-wordpress-application/
46. Wo rd P re s s a s a M i c ro s e r v i c e
47. ݕ ࡧ ͸ E l a s t i c s e a rc h Ϛʔ έ ςΟ ϯ ά ͸ M a u t i c +BWB4DSJQU )5.- "1* "1* "1*
48. S PA ͷ ί ϯ ς ϯ π ෦ ෼ Λ Wo rd P re s s Ͱ ؅ ཧ ͢ Δ +BWB4DSJQU )5.- Ϣʔβʔೝূ "1* ίϯςϯπ͸
    81
    "1*
    ͔Β
51. R e u s a b l e C o n t e n t
52. ࠓ · Ͱ ͸ ഔ ମ ຖ ʹ ί ϯ ς ϯ π Λ ߋ ৽ ͯ͠ ͍ ͨ
53. ί ϯ ς ϯ π ͸ Wo rd P re s s ʹ A P I ͔ Β ί ϯ ς ϯ π Λ ར ༻ ͢ Δ
54. 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
55. ࠓ · Ͱ ௨ Γ ͷ ࡞ Γ ํ ͕ ͳ ͘ ͳ Δ Θ ͚ Ͱ ͸ ͳ ͍
56. http://www.vektor-inc.co.jp/
57. Ҋ ݅ ʹ Ԡ ͡ ͯ W P A P I ͷ ى ༻ Λ ݕ ౼ ͢ Δ • ϞόΠϧΞϓϦ౳ɺΦϜχνϟωϧʹల։͢ΔϝσΟΞ • JavaScriptͰͷ։ൃ͕ಘҙͳΤϯδχΞ͕ଟ͍νʔϜͰͷ։ൃ • ςʔϚ΍ϓϥάΠϯͷઃఆ͚ͩͰย෇͘Ҋ݅ • WordPressςʔϚ࡞ऀͱ͔͕͍ΔνʔϜͰͷ։ൃ ै དྷ ͷ ߏ ங ํ ๏ ͕ ޮ ཰ త ͳ έ ʔε ͷ ྫ W P R E S T A P I ͕ ׆ ༂ ͢ Δ έ ʔε ͷ ྫ
58. Ξ δΣ ϯ μ • WP REST APIͷ͓͞Β͍ • React ΍ AngularJS Ͱ͍Ζ͍Ζ΍ͬͯΈΑ͏ • JavaScript + WP REST APIͰ޿͕Δweb੍࡞ ੍࡞ɾஶ࡞ Ί૊ ऴ