Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WordPress Frontend Development With WP API

WordPress Frontend Development With WP API

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

75486cbfd37125f121cf4a6c5614601c?s=128

Hidetaka Okamoto
PRO

August 28, 2016
Tweet

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. গ ͠Ͱ ΋ ࣦ ഊ ͢ Δ ͱ

  12. None
  13. Wo rd P re s s ͷ ஌ ࣝ Λ

    ࠷ খ ݶ ʹ Wo rd P re s s αΠ τ Λ ࡞ Γ ͨ ͍
  14. None
  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
  31. None
  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. ୈ Ұ ੈ ୅

  38. None
  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੍࡞ͷબ୒ࢶ͕૿͑Δ͜ͱ͸ ѱ͍͜ͱͰ͸ͳ͍ ͸ͣ

  79. None
  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 ੍࡞ɾஶ࡞ Ί૊ ऴ