WordPress Frontend Development With WP API

グランフロントエンド大阪2016資料です。 #frontkansai

Transcript

1. Wo rd P re s s D e v e l o p m e n t W i t h W P A P I G R A N D F R O N T E N D O S A K A 2 0 1 6
2. WordPressͰ࡞ΒΕͨwebαΠτ੍࡞ʹɺ WordPressͷ஌ࣝ͸ඞཁͳ͘ͳΔ͔΋͠Εͳ͍
3. H i d e t a k a O k a m o t o • Digitalcube developer • WordBenchژ౎ϞσϨʔλ • WP/React/AWS SDK/Alexa • ͨ·ʹଠޑ୲͍ͰདྷΔਓ
4. https://2016.tokyo.wordcamp.org/
5. Ta l k a b o u t … • ैདྷͷWordPressαΠτߏங • WP REST APIͱ͸ʁ • WP REST APIͰαΠτΛߏங͢Δ • Conclusion
6. Ta l k a b o u t … • ैདྷͷWordPressαΠτߏங • WP REST APIͱ͸ʁ • WP REST APIͰαΠτΛߏங͢Δ • Conclusion
7. ʮ Wo rd P re s s Ͱ αΠ τ ࡞ ͬͯ ʯ ͱ ݴ Θ Ε ͨ Β • σβΠϯ࡞੒ • HTML / CSS / JS ͰϑϩϯτΛ࡞੒ • PHP / WordPressؔ਺ͷ૊ΈࠐΈ • WordPressϓϥάΠϯɾςʔϚͷͭͳ͗͜Έ • ಈ࡞֬ೝ → ೲ඼
8. ʮ Wo rd P re s s Ͱ αΠ τ ࡞ ͬͯ ʯ ͱ ݴ Θ Ε ͨ Β • σβΠϯ࡞੒ • HTML / CSS / JS ͰϑϩϯτΛ࡞੒ • PHP / WordPressؔ਺ͷ૊ΈࠐΈ • WordPressϓϥάΠϯɾςʔϚͷͭͳ͗͜Έ • ಈ࡞֬ೝ → ೲ඼
9. Wo rd P re s s Ͱ ͸ P H P Λ ஌ Β ͳ ͍ ͱ ɺ ϑ ϩ ϯ τ Τ ϯ υ ͸ ࡞ Ε ͳ ͍ ͷ ͔
10. ֮ ͑Δ ඞ ཁ ͷ ͋ Δ Wo rd P re s s ͷ ΋ Ζ ΋ Ζ • WordPressςʔϚ • WordPressϓϥάΠϯ • WordPressؔ਺ • ϑΟϧλʔϑοΫɾΞΫγϣϯϑοΫ • WordPressͷϧʔςΟϯάγεςϜ
11. গ ͠Ͱ ΋ ࣦ ഊ ͢ Δ ͱ
13. Wo rd P re s s ͷ ஌ ࣝ Λ ࠷ খ ݶ ʹ Wo rd P re s s αΠ τ Λ ࡞ Γ ͨ ͍
15. W P R E S T A P I ϕʔε ͩ ͱ ɾ ɾ ɾ • σβΠϯ࡞੒ • HTML / CSS / JS ͰϑϩϯτΛ࡞੒ • WP REST APIͷ४උʢΤϯυϙΠϯτ֦ுͳͲʣ • WP REST APIͱϑϩϯτΤϯυͷͭͳ͗͜Έ • ಈ࡞֬ೝ → ೲ඼ ό ο Ϋ Τ ϯ υ ͱ ϑ ϩ ϯ τ Τ ϯ υ Λ ෼ ཭ ͯ͠ ߏ ங Ͱ ͖ Δ
16. Ta l k a b o u t … • ैདྷͷWordPressαΠτߏங • WP REST APIͱ͸ʁ • WP REST APIͰαΠτΛߏங͢Δ • Conclusion
17. W P R E S T A P I ( Ve r s i o n 2 ) • WordPressͷσʔλΛJSONͰऔಘͰ͖ΔAPI • WordPress4.4ͰҰ෦ػೳ͕ίΞ࣮૷ࡁΈ • WordPress4.7ͰίΞ౷߹ʹ޲͚ͯ։ൃਐߦத • ϓϥάΠϯ΍ίʔυ௥ՃʹΑΔػೳ֦ு΋Մೳ
18. $ 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 .
19. / 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
20. 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 ͷ ه ࣄ ʹ ί ϝ ϯ τ Λ ౤ ߘ
21. W P R E S T A P I υ Ω ϡ ϝ ϯ ς ʔ γ ϣ ϯ ʢ ೔ ຊ ޠ ൛ ʣ http://ja.wp-api.org/
22. Ta l k a b o u t … • ैདྷͷWordPressαΠτߏங • WP REST APIͱ͸ʁ • WP REST APIͰαΠτΛߏங͢Δ • Conclusion
23. Ϋ ϥ Π Ξ ϯ τ ϥ Π ϒ ϥ Ϧ
24. 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/ Wo rd P re s s ί Ξ ʹ i n c l u d e ͞ Εͯ ͍ Δ ͷ Ͱ ؆ ୯ ʹ ݺ ͼ ग़ ͤ Δ
25. 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 P ro m i s e ΋ ࢖ ͑Δ ൚ ༻ త ͳ ϥ Π ϒ ϥ Ϧ
26. 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 Wo rd P re s s ς ʔ Ϛ ϥ ΠΫ ʹ ί ʔ τ ͕ ه ड़ Ͱ ͖ Δ
27. 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 J S ΋ Ϡ μ ʂ ͬͯ ਓ ͸ ͥ ͻ
28. ࣄ ྫ
29. h t t p s : / / u s t w o . c o m /
30. 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. http://ogijima-library.or.jp/
33. https://github.com/ogijima-library/app
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. ࡞ ͬͯ Έ ͨ
37. ୈ Ұ ੈ ୅
39. https://github.com/hideokamoto/react-wordpress-template/tree/dev
40. ਏ ͔ ͬ ͨ
41. Ͳ ͜ ʹ π ϥ ͞ Λ ײ ͡ ͨ ͔ʁ • SSRαϘͬͨ݁ՌɺSEOͱOGP͕ࢮ͵ • WordPressͷػೳ͕͍Ζ͍Ζ࢖͑ͳ͍ • ʮࠓ·Ͱ௨ΓͰ͑͑΍Μʯͱ͍͏ؾ࣋ͪͱͷಆ͍
42. ݁ ہ P H P ࢖ ͬ ͨ
43. 2 0 1 6 ೥ 3 ݄ ϑ ϩ ϯ τ Τ ϯ υ Χ ϯ ϑ Ν Ϩϯε ؔ ੢ https://speakerdeck.com/hideokamoto/nophpdewordpresssaitowozuo-routositarafei-chang-nixin-katutahua
44. ͳ ͥ ͔ ม ଶ ѻ ͍ ͞ Ε Δ
45. Ϧ ϕ ϯ δ
46. http://dev.wp-kyoto.net/
47. શ ෦ J a v a S c r i p t
48. • αʔόʔɿExpress ( JS ) • ϨϯμϦϯάɿReact ( JS ) • APIॲཧܥ౳ɿRedux ( JS )
49. ι ʔε ί ʔ υ 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
50. C O D E
51. Ϛ α Χ Ϧ ͸ G i t H u b ͷ i s s u e ͔ η ο γ ϣ ϯ ޙ ݸ ਓ త ʹ ͓ ئ ͍ ͠ · ͢
52. ج ຊ ͸ R e a c t
53. M e t a ৘ ใ ͸ R e a c t H e l m e t
54. U R L ઃ ఆ ͸ R e a c t R o u t e r
55. F e t c h A P I Ͱ W P A P I ʹ
56. F e t c h ͠ ͨ ৘ ใ ͸ R e d u x ΁
57. R e d u x ͔ Β R e a c t ͷ S t a t e ΁
58. R e a c t ͸ s t a t e ͔ Β ஋ Λ औ Δ ͩ ͚
59. • ReactͰදࣔ͢Δ಺༰Λఆٛ • ReduxͰσʔλॲཧΛఆٛ • ExpressͰϦΫΤετॲཧΛఆٛ • Fetch API͕APIͱ࿈ܞ͢Δ
60. ΍ ͬͯ Έ ͨ ײ ૝
61. ඇ ৗ ʹ ͭ Β ͍
62. ͳ ͥ ϑϧ J S + W P R E S T A P I ͸ ਏ ͔ ͬ ͨ ͷ ͔ ं ྠ ͷ ࠶ ։ ൃ
63. ͳ ͥ ϑϧ J S + W P R E S T A P I ͸ ਏ ͔ ͬ ͨ ͷ ͔ PHP / WordPressؔ਺Ͱ౰ͨΓલͷΑ͏ʹͰ͖Δ͜ͱΛɺ ͢΂ͯJavaScriptͰ࡞Γͳ͓͢ඞཁ͕͋ͬͨɻ
64. ྫ ͑ ͹ 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' );
65. R e a c t ͩ ͱ ͜͏ ͳ Δ
66. ͢ Ͱ ʹ Wo rd P re s s ։ ൃ Ͱ ͖ Δ ਓ ʹ ͸ ɺ ं ྠ ͷ ࠶ ։ ൃ ײ ͕ ১ ͑ ͳ ͍ ͔ ΋
67. Ta l k a b o u t … • ैདྷͷWordPressαΠτߏங • WP REST APIͱ͸ʁ • WP REST APIͰαΠτΛߏங͢Δ • Conclusion
68. 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 ͸ Ί ͬ ͪ Ό ศ ར
69. Wo rd P re s s ؔ ਺ Λ ֮ ͑ ͳ ͘ ͯ ΋ W P R E S T A P I ͷ ί ʔϧ ͷ ࢓ ํ ͕ Θ ͔ Ε ͹ ɺ Wo rd P re s s ͷ αΠ τ Λ ߏ ங Ͱ ͖ Δ
70. ࠓ · Ͱ ͷ ࡞ Γ ํ ͱ W P R E S T A P I Ͱ ͷ ࡞ Γ ํ Ͳ ͬ ͪ Λ બ Ϳ ΂ ͖ ʁ
71. έ ʔε όΠέ ʔε
72. Ҋ ݅ ʹ Ԡ ͡ ͯ W P A P I ͷ ى ༻ Λ ݕ ౼ ͢ Δ • ωΠςΟϒΞϓϦ౳ɺΦϜχνϟωϧʹల։͢ΔϝσΟΞ • JavaScriptͰͷ։ൃ͕ಘҙͳΤϯδχΞ͕ଟ͍νʔϜͰͷ։ൃ • WordPressςʔϚ࡞ऀͱ͔͕͍ΔνʔϜͰͷ։ൃ • ςʔϚ΍ϓϥάΠϯͷઃఆ͚ͩͰย෇͘Ҋ݅ ै དྷ ͷ ߏ ங ํ ๏ ͕ ޮ ཰ త ͳ έ ʔε ͷ ྫ W P R E S T A P I ͕ ׆ ༂ ͢ Δ έ ʔε ͷ ྫ
73. http://www.vektor-inc.co.jp/
74. W P R E S T A P I ͳ Β ֶ श ί ε τ ͸ Լ ͕ Δ ͷ ͔ʁ
75. ͍ · · Ͱ ͷ Wo rd P re s s ߏ ங • PHP / WordPressؔ਺ • MySQL • HTML • JavaScript • CSS W P R E S T A P I Λ ࢖ ͬ ͨ ߏ ங • HTML • JavaScript • CSS
76. ͍ · · Ͱ ͷ Wo rd P re s s ߏ ங • PHP / WordPressؔ਺ • MySQL • HTML • JavaScript • CSS W P R E S T A P I Λ ࢖ ͬ ͨ ߏ ங • HTML •JavaScript • CSS
77. ֮ ͑Δ ͜ ͱ ͕ ݮ ͬ ͨ Θ ͚ Ͱ ͸ ͳ ͍ • React • AngularJS / Angular2 • Riot • Vue • Meteor • Service Worker • Express • ES6 • babel • flux • Redux • etc…
78. web੍࡞ͷબ୒ࢶ͕૿͑Δ͜ͱ͸ ѱ͍͜ͱͰ͸ͳ͍ ͸ͣ
80. Wo rd P re s s D e v e l o p m e n t W i t h W P A P I G R A N D F R O N T E N D O S A K A 2 0 1 6 ੍࡞ɾஶ࡞ Ί૊ ऴ