WP REST API + Universal JSで WordPressサイトを作ってみた

WordBench男木島夏合宿 セッションスライドです。

Transcript

1. W P R E S T A P I + U n i v e r s a l J S Ͱ Wo rd P re s s αΠ τ Λ ࡞ ͬͯ Έ ͨ Wo rd B e n c h உ ໦ ౡ Ն ߹ ॓
2. 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 • ࠓே্཮
3. https://2016.tokyo.wordcamp.org/
4. http://www.amazon.co.jp/dp/B01K3QZRIK
5. U n i v e r s a l J a v a S c r i p t
6. ϑ ϩ ϯ τ Τ ϯ υ ͔ Β ό ο Ϋ Τ ϯ υ · Ͱ ͢΂ ͯ J a v a S c r i p t Ͱ ߏ ங ͢ Δ
7. 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
8. J a v a S c r i p t ͕ ѻ ͑ Ε ͹ ɺ • w e b s i t e • w e b A p p • N a t i v e A p p • I o T • e t c . . ͩ ͍ ͨ ͍ ͷ ͜ ͱ ͕ Ͱ ͖ Δ Α ͏ ʹ ͳ Δ
9. ࣮ ࡍ ʹ ΍ ͬͯ Έ ͨ
10. w p - k y o t o • αʔόʔɿExpress ( JS ) • ϨϯμϦϯάɿReact ( JS ) • APIॲཧܥ౳ɿRedux ( JS ) http://dev.wp-kyoto.net/
11. ι ʔε ί ʔ υ h t t p s : / / g i t h u b . c o m / h i d e o k a m o t o / w p - k y o t o . n e t
12. C O D E
13. ج ຊ ͸ R e a c t
14. M e t a ৘ ใ ͸ R e a c t H e l m e t
15. U R L ઃ ఆ ͸ R e a c t R o u t e r
16. F e t c h A P I Ͱ W P A P I ʹ
17. F e t c h ͠ ͨ ৘ ใ ͸ R e d u x ΁
18. R e d u x ͔ Β R e a c t ͷ S t a t e ΁
19. R e d u x ͔ Β R e a c t ͷ S t a t e ΁
20. R e a c t ͸ s t a t e ͔ Β ஋ Λ औ Δ ͩ ͚
21. • ReactͰදࣔ͢Δ಺༰Λఆٛ • ReduxͰσʔλॲཧΛఆٛ • ExpressͰϦΫΤετॲཧΛఆٛ • Fetch API͕APIͱ࿈ܞ͢Δ
22. ΍ ͬͯ Έ ͨ ײ ૝
23. ඇ ৗ ʹ ͭ Β ͍
24. ͳ ͥ ϑϧ J S + W P R E S T A P I ͸ ਏ ͔ ͬ ͨ ͷ ͔ ं ྠ ͷ ࠶ ։ ൃ
25. ͳ ͥ ϑϧ J S + W P R E S T A P I ͸ ਏ ͔ ͬ ͨ ͷ ͔ PHP / WordPressؔ਺Ͱ౰ͨΓલͷΑ͏ʹͰ͖Δ͜ͱΛɺ ͢΂ͯJavaScriptͰ࡞Γͳ͓͢ඞཁ͕͋ͬͨɻ
26. ྫ ͑ ͹ M E TA λ ά <?php wp_head(); function wpdocs_theme_name_scripts() { wp_enqueue_style( 'style-name', get_stylesheet_uri() ); wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
27. R e a c t ͩ ͱ ͜͏ ͳ Δ
28. ͢ Ͱ ʹ Wo rd P re s s ։ ൃ Ͱ ͖ Δ ਓ ʹ ͸ ɺ ं ྠ ͷ ࠶ ։ ൃ ײ ͕ ১ ͑ ͳ ͍ ͔ ΋
29. J a v a S c r i p t ։ ൃ ϝ Π ϯ ͷ ਓ ͕ ৽ ͠ ͘ Wo rd P re s s αΠ τ ߏ ங ࢝ Ί Δ ਓ ʹ ͸ ɺ W P R E S T A P I ͸ ଟ ෼ ͢ ͝ ͘ ศ ར
30. Wo rd P re s s ؔ ਺ Λ ֮ ͑ ͳ ͘ ͯ ΋ W P R E S T A P I ͷ ί ʔϧ ͷ ࢓ ํ ͕ Θ ͔ Ε ͹ ɺ Wo rd P re s s ͷ αΠ τ Λ ߏ ங Ͱ ͖ Δ
31. Wo rd P re s s ։ ൃ ϝ Π ϯ Ͱ ΍ ͬͯ Δ ਓ ͸ W P R E S T A P I Λ Ͳ ͏ ͭ ͔ ͏ ʁ
32. Ҋ ݅ ʹ Ԡ ͡ ͯ W P A P I ͷ ى ༻ Λ ݕ ౼ ͢ Δ • ωΠςΟϒΞϓϦ౳ɺΦϜχνϟωϧʹల։͢ΔϝσΟΞ • ෳࡶͳϥΠλʔ؅ཧ͕ٻΊΒΕΔwebαΠτ • খن໛ϒϩάαΠτͷߏங • ୹ೲظɾ௿ίετͰߏங͢Δඞཁ͕͋ΔҊ݅ ै དྷ ͷ ߏ ங ํ ๏ ͕ ޮ ཰ త ͳ έ ʔε ͷ ྫ W P R E S T A P I ͕ ׆ ༂ ͢ Δ έ ʔε ͷ ྫ
33. Wo rd P re s s a s a M i c ro s e r i c e +BWB4DSJQU )5.- "1* "1* "1*
34. ݕ ࡧ ͸ E l a s t i c s e a rc h Ϛʔ έ ςΟ ϯ ά ͸ M a u t i c +BWB4DSJQU )5.- "1* "1* "1*
35. 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 / Ի੠ೝࣝαʔϏεͱͷ࿈ܞ
36. 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 …
37. 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Λ༻͍ͨ ωΠςΟϒΞϓϦ
39. http://ogijima-library.or.jp/
40. https://github.com/ogijima-library/app
41. Ϋ ϥ Π Ξ ϯ τ ϥ Π ϒ ϥ Ϧ
42. 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/
43. 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
44. 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
45. 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
46. 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
47. · ͱ Ί
48. ͍ · · Ͱ ͷ Wo rd P re s s ߏ ங • PHP / WordPressؔ਺ • MySQL • HTML • JavaScript • CSS W P R E S T A P I Λ ࢖ ͬ ͨ ߏ ங • HTML • JavaScript • CSS
49. WordPressͰ࡞ΒΕͨwebαΠτ੍࡞ʹɺ WordPressͷ஌ࣝ͸ඞཁͳ͘ͳΔ͔΋͠Εͳ͍
50. ͨͩɺ
51. ֮ ͑Δ ͜ ͱ ͕ ݮ ͬ ͨ Θ ͚ Ͱ ͸ ͳ ͍ • React • AngularJS / Angular2 • Riot • Vue • Meteor • Service Worker • Express • ES6 • babel • flux • Redux • fetch API
52. ͦΕͰ΋
53. web੍࡞ͷબ୒ࢶ͕૿͑Δ͜ͱ͸ ѱ͍͜ͱͰ͸ͳ͍ ͸ͣ