WordBench東京 3月ハンズオン

Transcript

1. How do you like
   “WP REST API” ?
   WordBench౦ژ(2016/03/21)
   

   View Slide

2. ࠓ೔
   ࿩͢͜ͱ
   

   View Slide

3. ࠓ೔࿩͢͜ͱ
   ▸ WP REST API͕
   Ͳ͏࢖ΘΕ͍ͯΔ͔
   ▸ WP REST APIͷ
   ؆୯ͳ࢖͍ํ
   ▸ WP REST APIΛ
   ࢖ͬͯΈͯײͨ͜͡ͱ
   WordBenchεϥΠυ
   

   View Slide

4. ࠓ೔
   ࿩͞ͳ͍͜ͱ
   

   View Slide

5. ࠓ೔࿩͞ͳ͍͜ͱ
   ▸REST APIʹ͍ͭͯ
   ▸React΍JavaScriptͷ࢖͍ํ
   ▸ WP REST APIͰͷςʔϚͷ࡞Γํ
   WordBenchεϥΠυ
   

   View Slide

6. PROFILE
   

   View Slide

7. HIDE(Ԭຊलߴʣ
   ▸ σδλϧΩϡʔϒ ΤϯδχΞ
   ▸ WordBenchژ౎ϞσϨʔλ
   ▸ ଠޑͷਓ
   ▸ ཉ͍͠΋ͷϦετˣ
   ▸ http://www.amazon.co.jp/registry/
   wishlist/1UYH9PSDMB3FZ
   WordBenchεϥΠυ
   

   View Slide

8. HIDE(Ԭຊलߴʣ
   ▸ σδλϧΩϡʔϒ ΤϯδχΞ
   ▸ WordBenchژ౎ϞσϨʔλ
   ▸ଠޑͷਓ
   ▸ ཉ͍͠΋ͷϦετˣ
   ▸ http://www.amazon.co.jp/registry/
   wishlist/1UYH9PSDMB3FZ
   WordBenchεϥΠυ
   

   View Slide

9. HIDE(Ԭຊलߴʣ
   ▸ σδλϧΩϡʔϒ ΤϯδχΞ
   ▸ WordBenchژ౎ϞσϨʔλ
   ▸ଠޑͷਓˠ
   ▸ ཉ͍͠΋ͷϦετˣ
   ▸ http://www.amazon.co.jp/registry/
   wishlist/1UYH9PSDMB3FZ
   WordBenchεϥΠυ
   

   View Slide

10. http://arikingokb.wix.com/okstra-orchestra#!tour/c9a0
    http://hide-wadaiko-school.com/
    

    View Slide

11. View Slide

12. REACT + WP REST APIͰ
    ςʔϚ࡞ͬͨ
    

    View Slide

13. https://github.com/hideokamoto/react-wordpress-template/tree/dev
    

    View Slide

14. https://speakerdeck.com/hideokamoto/nophpdewordpresssaitowozuo-routositarafei-chang-nixin-katutahua
    

    View Slide

15. WordBenchεϥΠυ
    LTͨ͠Β
    มଶѻ͍
    ͞Εͨ݅
    https://www.facebook.com/webdirectors.manual/posts/
    997661930309250?fref=nf
    

    View Slide

16. ͸͍
    

    View Slide

17. ͦ΋ͦ΋
    WP REST APIͬͯʁ
    

    View Slide

18. WordPressίΞͱ
    RESTfulʹ௨৴Ͱ͖Δ
    API
    →WP REST API
    

    View Slide

19. ͦ͏͍͏΋ͷͩͱ
    ࢥ͍ͬͯͩ͘͞
    

    View Slide

20. WP REST APIͬͯ
    Ͳ͏࢖ΘΕͯΔͷʁ
    

    View Slide

21. WordBench Tokyo
    WP REST APIͷ࢖͍ํ͋Ε͜Ε
    ▸ ϦΞϧλΠϜϑΟʔυʢNYTIMESʣ
    ▸ ΠϯλϥΫςΟϒͳݕࡧϑΥʔϜʢwp-kyotoʣ
    ▸ ֎෦͔Βͷهࣄ࡞੒ʢWIREDʣ
    ▸ ֎෦͔ΒͷαΠτ؅ཧʢWP-CLI / WordPress.comʣ
    ▸ ΞϓϦ΁ͷల։ʢNomadbaseʣ
    

    View Slide

22. WordBench Tokyo
    WP REST APIͷ࢖͍ํ͋Ε͜Ε
    ▸ϦΞϧλΠϜϑΟʔυʢNYTIMESʣ
    ▸ ΠϯλϥΫςΟϒͳݕࡧϑΥʔϜʢwp-kyotoʣ
    ▸ ֎෦͔Βͷهࣄ࡞੒ʢWIREDʣ
    ▸ ֎෦͔ΒͷαΠτ؅ཧʢWP-CLI / WordPress.comʣ
    ▸ ΞϓϦ΁ͷల։ʢNomadbaseʣ
    

    View Slide

23. View Slide

24. http://www.nytimes.com/live/amtrak-train-derails-in-philadelphia/
    

    View Slide

25. http://www.slideshare.net/ScottTaylor1/a-day-of-rest
    

    View Slide

26. View Slide

27. React
    

    View Slide

28. WordBench Tokyo
    WP REST APIͷ࢖͍ํ͋Ε͜Ε
    ▸ ϦΞϧλΠϜϑΟʔυʢNYTIMESʣ
    ▸ ΠϯλϥΫςΟϒͳݕࡧϑΥʔϜ(wp-kyoto)
    ▸ ֎෦͔Βͷهࣄ࡞੒ʢWIREDʣ
    ▸ ֎෦͔ΒͷαΠτ؅ཧʢWP-CLI / WordPress.comʣ
    ▸ ΞϓϦ΁ͷల։ʢNomadbaseʣ
    

    View Slide

29. View Slide

30. View Slide

31. WordBench Tokyo
    WP REST APIͷ࢖͍ํ͋Ε͜Ε
    ▸ ϦΞϧλΠϜϑΟʔυʢNYTIMESʣ
    ▸ ΠϯλϥΫςΟϒͳݕࡧϑΥʔϜʢwp-kyotoʣ
    ▸ ֎෦͔Βͷهࣄ࡞੒ʢWIREDʣ
    ▸ ֎෦͔ΒͷαΠτ؅ཧʢWP-CLI / WordPress.comʣ
    ▸ ΞϓϦ΁ͷల։ʢNomadbaseʣ
    

    View Slide

32. http://www.wired.com/2016/02/new-hampshire-primary-liveblog-all-eyes-on-trump-bernie/
    

    View Slide

33. http://www.slideshare.net/kvignos/wired-and-the-wp-rest-api
    

    View Slide

34. https://wordpress.org/plugins/invitations-for-slack/
    

    View Slide

35. WordBench Tokyo
    WP REST APIͷ࢖͍ํ͋Ε͜Ε
    ▸ ϦΞϧλΠϜϑΟʔυʢNYTIMESʣ
    ▸ ΠϯλϥΫςΟϒͳݕࡧϑΥʔϜʢwp-kyotoʣ
    ▸ ֎෦͔Βͷهࣄ࡞੒ʢWIREDʣ
    ▸ ֎෦͔ΒͷαΠτ؅ཧ(WP-CLI / WordPress.com)
    ▸ ΞϓϦ΁ͷల։ʢNomadbaseʣ
    

    View Slide

36. http://wp-cli.org/blog/restful-wp-cli-update-2.html
    

    View Slide

37. http://wp-cli.org/blog/restful-wp-cli-update-2.html
    

    View Slide

38. http://blog.handbuilt.co/2016/01/28/feelingrestful-a-more-restful-wp-cli/
    

    View Slide

39. http://blog.handbuilt.co/2016/01/28/feelingrestful-a-more-restful-wp-cli/
    

    View Slide

40. https://developer.wordpress.com/calypso/
    

    View Slide

41. https://wordpress.org/plugins/woomage/
    

    View Slide

42. https://hmn.md/uploads/2016/01/Talking-to-25-of-the-Web-1.pdf
    

    View Slide

43. https://github.com/serverless/serverless
    https://www.meteor.com/
    http://electron.atom.io/
    

    View Slide

44. WordBench Tokyo
    WP REST APIͷ࢖͍ํ͋Ε͜Ε
    ▸ ϦΞϧλΠϜϑΟʔυʢNYTIMESʣ
    ▸ ΠϯλϥΫςΟϒͳݕࡧϑΥʔϜʢwp-kyotoʣ
    ▸ ֎෦͔Βͷهࣄ࡞੒ʢWIREDʣ
    ▸ ֎෦͔ΒͷαΠτ؅ཧʢWP-CLI / WordPress.comʣ
    ▸ ΞϓϦ΁ͷల։ʢNomadbaseʣ
    

    View Slide

45. View Slide

46. https://hmn.md/uploads/2016/01/Talking-to-25-of-the-Web-1.pdf
    

    View Slide

47. https://facebook.github.io/react-native/
    

    View Slide

48. ͸͍
    

    View Slide

49. ૣ͘WP REST API
    ৮ͬͯΈ͍ͨʂ
    ͬͯͳΓ·ͨ͠ʁ
    

    View Slide

50. WP REST APIΛ
    ࣮ࡍʹ৮ͬͯΈΑ͏
    

    View Slide

51. ΨΠυ
    http://bit.ly/1PkuaUt
    

    View Slide

52. http://example.com/
    wp-json/
    oembed/1.0/embed?
    http://example.com/
    embed-blog-posts
    

    View Slide

53. ϋϯζΦϯͷ͓໿ଋ
    ▸ JavaScript͸͙͢ʹյΕΔ΋ͷͱߟ͑Δ
    ▸ ಈ͔ͳ͘ͳͬͯ΋߄ͯͳ͍
    ▸ ·ͣ͸શ֯εϖʔεɾߦ຤ͷʮ;ʯͦͯ͠ด͡๨ΕΛٙ͏
    ▸ ճઢ͕ࠞࡶ͍ͯ͠Δ৔߹΋͋ΔͷͰযΒͳ͍
    ▸ APIΫΤϦ͸WP REST API Console΍curl + jqͰࣄલʹνΣοΫ
    ▸ ׬੒඼͕͋ΔʢʹՈͰ΋෮शՄೳʣͷͰࣄނͬͯ΋ٽ͔ͳ͍
    WordBench Tokyo
    

    View Slide

54. ϓϥάΠϯΛ
    Πϯετʔϧ͢Δ
    

    View Slide

55. Πϯετʔϧ͢Δ΋ͷΛؒҧ͑ͳ͍
    API໊ ϓϥάΠϯ໊ URL උߟ
    WP REST
    API v1
    WP REST API
    (WP API)
    https://wordpress.org/
    plugins/json-rest-api/
    v2͕ࢮ͵
    WP REST
    API v2
    WordPress REST
    API (Version 2)
    https://wordpress.org/
    plugins/rest-api/
    Ұ෦ίΞ࣮૷
    (WP4.4~)
    WP API WP API https://wordpress.org/
    plugins/wp-api/
    ̐೥Ҏ্
    ϝϯςͳ͠
    WordBench Tokyo
    

    View Slide

56. Πϯετʔϧ͢Δ΋ͷΛؒҧ͑ͳ͍
    API໊ ϓϥάΠϯ໊ URL උߟ
    WP REST
    API v1
    WP REST API
    (WP API)
    https://wordpress.org/
    plugins/json-rest-api/
    v2͕ࢮ͵
    WP REST
    API v2
    WordPress REST
    API (Version 2)
    https://wordpress.org/
    plugins/rest-api/
    Ұ෦ίΞ࣮૷
    (WP4.4~)
    WP API WP API https://wordpress.org/
    plugins/wp-api/
    ̐೥Ҏ্
    ϝϯςͳ͠
    WordBench Tokyo
    

    View Slide

57. Πϯετʔϧͯ͠
    ༗ޮԽ͢Δ͚ͩ
    

    View Slide

58. O K ?
    

    View Slide

59. ·ͣ͸
    APIΛୟ͍ͯΈ·͠ΐ͏
    

    View Slide

60. ศརͳ
    ϓϥάΠϯ
    

    View Slide

61. https://wordpress.org/plugins/rest-api-console/
    

    View Slide

62. APIϦΫΤετͷ݁Ռ͕දࣔ͞ΕΔ
    

    View Slide

63. ศར
    

    View Slide

64. ͨͩ͠
    

    View Slide

65. ͪΐͬͱ
    όάͬͯΔ
    

    View Slide

66. https://wordpress.org/support/topic/requests-fail-due-to-extra-slash?replies=3
    

    View Slide

67. ͷͰ
    

    View Slide

68. ZIPͰDLͯ͠
    Ξοϓϩʔυ
    

    View Slide

69. http://bit.ly/1RmBxvW
    ↑ZIP΁ͷϦϯΫ
    

    View Slide

70. View Slide

71. View Slide

72. Ξοϓϩʔυ
    

    View Slide

73. ༗ޮԽ
    

    View Slide

74. REST API COSOLE
    Λ࢖ͬͯΈΔ
    

    View Slide

75. View Slide

76. View Slide

77. ʮGET /wp/v2/postsʯΛબ୒
    

    View Slide

78. APIϦΫΤετͷ݁Ռ͕දࣔ͞ΕΔ
    

    View Slide

79. ΫϦοΫ͢Δͱৄࡉ͕ݟΕ·͢
    

    View Slide

80. ΫΤϦΛ
    ͚ͭͯݕࡧ͢Δ
    

    View Slide

81. ʮper_page=XXʯͰ݅਺੍ޚ
    

    View Slide

82. ʮsearch=XXʯͰݕࡧ
    

    View Slide

83. ʮfilter[XXXX]=XXʯͰWP_QueryͷΫΤϦ
    

    View Slide

84. http://v2.wp-api.org/reference/posts/
    

    View Slide

85. ଞͷσʔλΛ
    औಘ͢Δ
    

    View Slide

86. GET /wp/v2/media
    

    View Slide

87. GET /wp/v2/categories
    

    View Slide

88. GET /wp/v2/users
    

    View Slide

89. ֦ுϓϥάΠϯͷAPI΋࢖͑Δ
    

    View Slide

90. ͍Ζ͍Ζ
    σʔλΛऔಘ
    ͯ͠ΈΑ͏
    

    View Slide

91. O K ?
    

    View Slide

92. jQueryΛ࢖ͬͯ
    ͍Ζ͍Ζ΍ͬͯΈΔ
    

    View Slide

93. WordBench Tokyo
    ࠓճͷϋϯζΦϯͰ΍Δ͜ͱ
    ▸ ϒϩάΧʔυʢoEmbedʣΛ(WPͷ֎Ͱ)දࣔ͢Δ
    ▸ ΪϟϥϦʔΛ(WPͷ֎Ͱ)දࣔ͢Δ
    ▸ ίϝϯτϑΥʔϜΛ࡞੒ͯ͠ίϝϯτΛ౤ߘ͢Δ
    ▸ ʢ෺଍Γͳ͍ਓ޲͚ͷ௥Ճͷ͓୊΋͋Γ·͢ʣ
    

    View Slide

94. ϩʔΧϧ؀ڥ
    ࢖͏৔߹ͷHTML਽ܗ
    http://bit.ly/1pUIkai
    

    View Slide

95. ެ։؀ڥ
    ࢖͏৔߹ͷHTML਽ܗ
    http://bit.ly/1Rt1D6S
    

    View Slide

96. ϒϩάΧʔυΛ
    දࣔ͢Δ
    

    View Slide

97. View Slide

98. API:
    http://example.com/wp-json/oembed/1.0/embed?
    Query:
    http://example.com/embed-blog-posts
    

    View Slide

99. ΨΠυ
    http://bit.ly/1PkuaUt
    

    View Slide

100. ࣍ߦ͖·͢
     

     View Slide

101. ΪϟϥϦʔΛ
     දࣔ͢Δ
     

     View Slide

102. View Slide

103. API:
     http://example.com/wp-json/wp/v2/media?
     Query:
     http://bit.ly/1UtTMX0 ࢀর
     

     View Slide

104. ͕࣍ϥετ
     

     View Slide

105. ίϝϯτΛ
     ౤ߘ͢Δ
     

     View Slide

106. View Slide

107. API:
     http://example.com/wp-json/wp/v2/comments?
     Query:
     http://bit.ly/1LyREdV ࢀর
     

     View Slide

108. ͓ർΕ༷
     Ͱͨ͠
     

     View Slide

109. WP REST API৮ͬͯ
     ײͨ͜͡ͱ
     

     View Slide

110. WP REST APIຊମͰࠔͬͨ͜ͱ
     ▸ ΢ΟδΣοτͱϝχϡʔ͕࢖͑ͳ͍
     ▸ ࣄނΔϓϥάΠϯ͕গͳ͔Βͣ͋Δ
     ▸ ϓϨϏϡʔػೳ΋࢖͑ͳ͍
     ▸ headλάͷॲཧͰ͑Β͍໨ʹ͋͏
     WordBench Tokyo
     

     View Slide

111. http://v2.wp-api.org/guide/plugins/
     

     View Slide

112. http://v2.wp-api.org/guide/plugins/
     

     View Slide

113. http://v2.wp-api.org/guide/plugins/
     

     View Slide

114. ·ͱΊ
     

     View Slide

115. WordBench Tokyo
     ·ͱΊ
     ▸ WP REST API͸·ͩ·ͩൃల్্
     ▸ ͱ͸͍͑ؾ͕͚ͭ͹ελϯμʔυԽͦ͠͏
     ▸ ࢮͳͳ͍ൣғͰ๯ݥ͓͍ͯͯ͠ଛ͸͠ͳ͍ʢ͸ͣʣ
     ▸ ΋ͬͱREST APIͷهࣄ΍ίʔυΛʂ
     

     View Slide