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

WordBench東京 3月ハンズオン

WordBench東京 3月ハンズオン

Hidetaka Okamoto
PRO

March 21, 2016
Tweet

More Decks by Hidetaka Okamoto

Other Decks in Programming

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