Web開発者のためのWP REST APIを用いたWordPressサイト開発

OSC Kyoto 2016 スライド

Transcript

1. We b ։ ൃ ऀ ͷ ͨ Ί ͷ W P R E S T A P I Λ ༻ ͍ ͨ Wo rd P re s s αΠ τ ։ ൃ O S C 2 0 1 6 K Y O T O 7 / 2 9 ( ۚ )
2. WordPressͰ࡞ΒΕͨwebαΠτ੍࡞ʹɺ WordPressͷ஌ࣝ͸ඞཁͳ͘ͳΔ͔΋͠Εͳ͍
3. Ta l k a b o u t … • ैདྷͷWordPressαΠτߏங • WP REST APIͱ͸ʁ • WP REST APIͰαΠτΛߏங͢Δ • Conclusion
4. H i d e t a k a O k a m o t o • Digitalcube developer • WordBenchژ౎ϞσϨʔλ WP REST API / WP - CLIɹɹ ίΞίϯτϦϏϡʔλʔ • WP/React/AWS SDK/Alexa
5. Ta l k a b o u t … • ैདྷͷWordPressαΠτߏங • WP REST APIͱ͸ʁ • WP REST APIͰαΠτΛߏங͢Δ • Conclusion
6. ʮ Wo rd P re s s Ͱ αΠ τ ࡞ ͬͯ ʯ ͱ ݴ Θ Ε ͨ Β • σβΠϯ࡞੒ • HTML / CSS / JS ͰϑϩϯτΛ࡞੒ • PHP / WordPressؔ਺ͷ૊ΈࠐΈ • WordPressϓϥάΠϯɾςʔϚͷͭͳ͗͜Έ • ಈ࡞֬ೝ → ೲ඼
7. ʮ Wo rd P re s s Ͱ αΠ τ ࡞ ͬͯ ʯ ͱ ݴ Θ Ε ͨ Β • σβΠϯ࡞੒ • HTML / CSS / JS ͰϑϩϯτΛ࡞੒ • PHP / WordPressؔ਺ͷ૊ΈࠐΈ • WordPressϓϥάΠϯɾςʔϚͷͭͳ͗͜Έ • ಈ࡞֬ೝ → ೲ඼
8. Wo rd P re s s Ͱ ͸ P H P Λ ஌ Β ͳ ͍ ͱ ɺ ϑ ϩ ϯ τ Τ ϯ υ ͸ ࡞ Ε ͳ ͍ ͷ ͔
9. ֮ ͑Δ ඞ ཁ ͷ ͋ Δ Wo rd P re s s ͷ ΋ Ζ ΋ Ζ • WordPressςʔϚ • WordPressϓϥάΠϯ • WordPressؔ਺ • ϑΟϧλʔϑοΫɾΞΫγϣϯϑοΫ • WordPressͷϧʔςΟϯάγεςϜ
10. গ ͠Ͱ ΋ ࣦ ഊ ͢ Δ ͱ
12. Wo rd P re s s ͷ ஌ ࣝ Λ ࠷ খ ݶ ʹ Wo rd P re s s αΠ τ Λ ࡞ Γ ͨ ͍
14. Ta l k a b o u t … • ैདྷͷWordPressαΠτߏங • WP REST APIͱ͸ʁ • WP REST APIͰαΠτΛߏங͢Δ • Conclusion
15. W P R E S T A P I ( Ve r s i o n 2 ) • WordPressͷσʔλΛJSONͰऔಘͰ͖ΔAPI • WordPress4.4ͰҰ෦ػೳ͕ίΞ࣮૷ࡁΈ • WordPress4.7ͰίΞ౷߹ʹ޲͚ͯ։ൃਐߦத • ϓϥάΠϯ΍ίʔυ௥ՃʹΑΔػೳ֦ு΋Մೳ
16. $ 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 .
17. / 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
18. 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 ͷ ه ࣄ ʹ ί ϝ ϯ τ Λ ౤ ߘ
19. W P R E S T A P I υ Ω ϡ ϝ ϯ ς ʔ γ ϣ ϯ ʢ ೔ ຊ ޠ ൛ ʣ http://ja.wp-api.org/
20. W P R E S T A P I Ͱ Կ ͕ Ͱ ͖ Δ ͷ ͔ʁ
21. W P R E S T A P I Ͱ ؆ ୯ ʹ ͳ Δ ͜ ͱ • ֎෦͔ΒͷWordPressͷίϯτϩʔϧ • ίϯςϯπ؅ཧը໘ͱϑϩϯτΤϯυͷ෼཭ • ͦͷଞͷαʔϏεͱͷ࿈ܞʢWP as a Microserviceʣ
22. W P R E S T A P I Ͱ ؆ ୯ ʹ ͳ Δ ͜ ͱ • ֎෦͔ΒͷWordPressͷίϯτϩʔϧ • ίϯςϯπ؅ཧը໘ͱϑϩϯτΤϯυͷ෼཭ • ͦͷଞͷαʔϏεͱͷ࿈ܞʢWP as a Microserviceʣ
23. http://www.slideshare.net/kvignos/wired-and-the-wp-rest-api
24. http://www.wired.com/2016/02/new-hampshire-primary-liveblog-all-eyes-on-trump-bernie/
25. https://developer.wordpress.com/calypso/
27. W P R E S T A P I Ͱ ؆ ୯ ʹ ͳ Δ ͜ ͱ • ֎෦͔ΒͷWordPressͷίϯτϩʔϧ • ίϯςϯπ؅ཧը໘ͱϑϩϯτΤϯυͷ෼཭ • ͦͷଞͷαʔϏεͱͷ࿈ܞʢWP as a Microserviceʣ
28. ϑ ϩ ϯ τ ͱ ؅ ཧ ը ໘ ͷ ෼ ཭ • ϑϩϯτΤϯυΛผαʔόɾผαʔϏεͰߏங • WordPressͷهࣄσʔλΛWP REST API͔Βऔಘ • ٕज़ɾϥΠϒϥϦʹґଘ͠ͳ͍αΠτߏங͕Մೳʹ
29. h t t p s : / / u s t w o . c o m /
31. h t t p s : / / g i t h u b . c o m / u s t w o / u s t w o . c o m - f ro n t e n d
32. W P R E S T A P I Ͱ ؆ ୯ ʹ ͳ Δ ͜ ͱ • ֎෦͔ΒͷWordPressͷίϯτϩʔϧ • ίϯςϯπ؅ཧը໘ͱϑϩϯτΤϯυͷ෼཭ • ͦͷଞͷαʔϏεͱͷ࿈ܞʢWP as a Microserviceʣ
33. ݕ ࡧ ͸ E l a s t i c s e a rc h Ϛʔ έ ςΟ ϯ ά ͸ M a u t i c +BWB4DSJQU )5.- "1* "1* "1*
34. 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 / Ի੠ೝࣝαʔϏεͱͷ࿈ܞ
35. 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 …
36. h t t p s : / / g i t h u b . c o m / w c - a p p / w c - a p p Cordova΍React NativeΛ༻͍ͨ ωΠςΟϒΞϓϦ
38. http://ogijima-library.or.jp/
39. https://github.com/ogijima-library/app
40. Ta l k a b o u t … • ैདྷͷWordPressαΠτߏங • WP REST APIͱ͸ʁ • WP REST APIͰαΠτΛߏங͢Δ • Conclusion
41. ج ຊ త ʹ ͸ W P R E S T A P I ͷ A P I Λ ί ʔϧ ͢ Δ ͩ ͚
42. G E T Ϧ Ϋ Τ ε τ Ҏ ֎ ͸ ೝ ূ ͕ ඞ ཁ • ެ։લɾԼॻ͖ঢ়ଶͷهࣄͷऔಘ • Ϣʔβʔ৘ใͷߋ৽ • هࣄɾϝσΟΞͷ౤ߘ • ΧςΰϦɾλάͷ௥Ճ etc.. • ೝূ͸Basicೝূ or OAuth1.0 or CookieೝূΛར༻ http://ja.wp-api.org/guide/authentication/
43. Ϋ ϥ Π Ξ ϯ τ ϥ Π ϒ ϥ Ϧ
44. b a c k b o n e . j s ʢ W P ʹ i n c l u d e ʣ <?php wp_enqueue_script( 'wp-api' ); // Create a new post var post = new wp.api.models.Posts( { title: 'This is a test post' } ); post.save(); J a v a S c r i p t Wo rd P re s s ( f u n c t i o n s . p h p ) http://ja.wp-api.org/extending/javascript-client/
45. n o d e - w p a p i ( s u p e r a g e n t ) $ npm install --save wpapi var WP = require( 'wpapi' ); var wp = new WP({ endpoint: ‘http://src.wordpress-develop.dev/wp-json' }); J a v a S c r i p t N P M https://github.com/WP-API/node-wpapi
46. n o d e - w p a p i Ͱ ه ࣄ Λ औ ಘ ͢ Δ wp.posts().get( function( err, data ) { if ( err ) { // handle err } do_something(); }); wp.posts().then( function( data ) { do_something(); }).catch(function( err ) { // handle error }); C a l l b a c k P ro m i s e
47. w p - a n g u l a r j s $ npm install wp-angularjs --save <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> J a v a S c r i p t N P M https://github.com/miya0001/wp-angularjs
48. R u b y ΍ G o l a n g ͳ Ͳ $ gem install wp-api-client R u b y ( h t t p s : / / g i t h u b . c o m / d u n c a n j b ro w n / w p - a p i - c l i e n t ) G o l a n g ( h t t p s : / / g i t h u b . c o m / s o g k o / g o - w o rd p re s s ) $ go get github.com/sogko/go-wordpress
49. α ϯ ϓϧΞ ϓ Ϧ έ ʔ γ ϣ ϯ
50. https://2016.kansai.wordcamp.org/
51. J S ϥ Π ϒ ϥ Ϧ ֤ छ Λ ࢖ ͬ ͨ α ϯ ϓϧΞ ϓ Ϧ $ git clone https://github.com/likr/wpapi-angular2-example.git A n g u l a r 2 R e a c t S PA w i t h E S 6 $ git clone -b es6/spa https://github.com/kamiyam/node-wp-api react-es6-spa-wp- api Vu e . j s $ git clone https://github.com/chatbox-inc/vue-wp-api R i o t . j s $ git https://github.com/potato4d/riot-wp-api
52. Ta l k a b o u t … • ैདྷͷWordPressαΠτߏங • WP REST APIͱ͸ʁ • WP REST APIͰαΠτΛߏங͢Δ • Conclusion
53. http://www.slideshare.net/naokomc/wordpress-54586946
54. ͍ · · Ͱ ͷ Wo rd P re s s ߏ ங • PHP / WordPressؔ਺ • MySQL • HTML • JavaScript • CSS W P R E S T A P I Λ ࢖ ͬ ͨ ߏ ங • HTML • JavaScript • CSS
55. WordPressͰ࡞ΒΕͨwebαΠτ੍࡞ʹɺ WordPressͷ஌ࣝ͸ඞཁͳ͘ͳΔ͔΋͠Εͳ͍
56. ͨͩɺ
57. ֮ ͑Δ ͜ ͱ ͕ ݮ ͬ ͨ Θ ͚ Ͱ ͸ ͳ ͍ • React • AngularJS / Angular2 • Riot • Vue • Meteor • Service Worker • Express • ES6 • babel • flux • Redux • fetch API
58. ͦΕͰ΋
59. web੍࡞ͷબ୒ࢶ͕૿͑Δ͜ͱ͸ ͖ͬͱѱ͍͜ͱͰ͸ͳ͍ͱࢥ͍·͢ɻ
60. Ta l k a b o u t … • ैདྷͷWordPressαΠτߏங • WP REST APIͱ͸ʁ • WP REST APIͰαΠτΛߏங͢Δ • Conclusion