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

フロントエンドエンジニアのためのWP REST API + JavaScriptによるWordPressサイト構築 岡本 秀高

フロントエンドエンジニアのためのWP REST API + JavaScriptによるWordPressサイト構築 岡本 秀高

WordCamp Tokyo 2016 セッションスライドです。

75486cbfd37125f121cf4a6c5614601c?s=128

Hidetaka Okamoto
PRO

September 17, 2016
Tweet

Transcript

  1. None
  2. Ta l k a b o u t … •

    WP REST APIͱ͸ʁ • WP REST APIΛ࢖ͬͨϑϩϯτΤϯυߏங • WP REST APIͰมΘΔ͜ͱ
  3. H i d e t a k a O k

    a m o t o • AMIMOTO ( Digitalcube ) • WordBenchژ౎ϞσϨʔλ • ೔ຊޠϑΥʔϥϜϦΤκϯ
  4. http://www.amazon.co.jp/dp/B01K3QZRIK

  5. Ta l k a b o u t … •

    WP REST APIͱ͸ʁ • WP REST APIΛ࢖ͬͨϑϩϯτΤϯυߏங • WP REST APIͰมΘΔ͜ͱ
  6. None
  7. W P R E S T A P I (

    Ve r s i o n 2 ) • WordPressͷσʔλΛJSONͰऔಘͰ͖ΔAPI • WordPress4.4ͰҰ෦ػೳ͕ίΞ࣮૷ࡁΈ • ίΞ౷߹ʹ޲͚ͯ։ൃਐߦத • ϓϥάΠϯ΍ίʔυ௥ՃʹΑΔػೳ֦ு΋Մೳ
  8. $ 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 .
  9. / 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
  10. 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 ͷ ه ࣄ ʹ ί ϝ ϯ τ Λ ౤ ߘ
  11. W P R E S T A P I υ

    Ω ϡ ϝ ϯ ς ʔ γ ϣ ϯ ʢ ೔ ຊ ޠ ൛ ʣ http://ja.wp-api.org/
  12. Ta l k a b o u t … •

    WP REST APIͱ͸ʁ • WP REST APIΛ࢖ͬͨϑϩϯτΤϯυߏங • WP REST APIͰมΘΔ͜ͱ
  13. W P R E S T A P I Λ

    ࢖ ͬ ͨ ϑ ϩ ϯ τ Τ ϯ υ ߏ ங • Connect multiple api ɹ • Mobile Application ɹ • Universal JavaScript ɹ
  14. W P R E S T A P I Λ

    ࢖ ͬ ͨ ϑ ϩ ϯ τ Τ ϯ υ ߏ ங • Connect multiple api ɹˠෳ਺ͷWordPressΛAPIͰ࿈ܞͤ͞Δ • Mobile Application →ϞόΠϧΞϓϦ͔ΒAPIΛݺͼग़͢ • Universal JavaScript →ϑϩϯτ͢΂ͯΛJavaScriptͰߏங͢Δ
  15. W P R E S T A P I Λ

    ࢖ ͬ ͨ ϑ ϩ ϯ τ Τ ϯ υ ߏ ங • Connect multiple api ɹˠෳ਺ͷWordPressΛAPIͰ࿈ܞͤ͞Δ • Mobile Application →ϞόΠϧΞϓϦ͔ΒAPIΛݺͼग़͢ • Universal JavaScript →ϑϩϯτ͢΂ͯΛJavaScriptͰߏங͢Δ
  16. ผ ͷ Wo rd P re s s αΠ τ

    ͷ ه ࣄ Λ औ ಘ ͢ Δ <?php $url = ‘http://example.com/wp-json/wp/v2/posts'; $posts = wp_remote_get( $url ); foreach ( $posts as $post ) { echo esc_html( $post[‘title’][‘rendered’] ); }
  17. W P R E S T A P I Λ

    ࢖ ͬ ͨ ϑ ϩ ϯ τ Τ ϯ υ ߏ ங • Connect multiple api ɹˠෳ਺ͷWordPressΛAPIͰ࿈ܞͤ͞Δ • Mobile Application →ϞόΠϧΞϓϦ͔ΒAPIΛݺͼग़͢ • Universal JavaScript →ϑϩϯτ͢΂ͯΛJavaScriptͰߏங͢Δ
  18. http://ogijima-library.or.jp/

  19. https://github.com/ogijima-library/app

  20. i o n i c + w p - a

    n g u l a r j s <ion-view title="͓஌Βͤ"><ion-content> <have-posts api-root="{{ apiRoot }}" post-type="posts" offset="0" per-page="5"> <the-post-thumbnail href="#/app/posts/:id" size=“post-thumbnail”> </the-post-thumbnail> <h2 class="entry-title"><the-title href="#/app/posts/:id"></the-title></h1> <the-date format="yyyy/MM/dd"></the-date> </have-posts> </ion-content></ion-view> https://github.com/ogijima-library/app/blob/master/www/templates/posts.html
  21. W P R E S T A P I Λ

    ࢖ ͬ ͨ ϑ ϩ ϯ τ Τ ϯ υ ߏ ங • Connect multiple api ɹˠෳ਺ͷWordPressΛAPIͰ࿈ܞͤ͞Δ • Mobile Application →ϞόΠϧΞϓϦ͔ΒAPIΛݺͼग़͢ • Universal JavaScript →ϑϩϯτ͢΂ͯΛJavaScriptͰߏங͢Δ
  22. U n i v e r s a l J

    a v a S c r i p t
  23. ϑ ϩ ϯ τ Τ ϯ υ ͔ Β ό

    ο Ϋ Τ ϯ υ · Ͱ ͢΂ ͯ J a v a S c r i p t Ͱ ߏ ங ͢ Δ
  24. 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
  25. J a v a S c r i p t

    ͕ ѻ ͑ Ε ͹ ɺ • w e b s i t e • w e b A p p • M o b i l e A p p • I o T • e t c . . ͩ ͍ ͨ ͍ ͷ ͜ ͱ ͕ Ͱ ͖ Δ Α ͏ ʹ ͳ Δ
  26. h t t p s : / / u s

    t w o . c o m /
  27. None
  28. w p - k y o t o • αʔόʔɿExpress

    ( JS ) • ϨϯμϦϯάɿReact ( JS ) • APIॲཧܥ౳ɿRedux ( JS ) http://dev.wp-kyoto.net/
  29. • ExpressͰϦΫΤετॲཧΛఆٛ • Fetch API͕APIͱ࿈ܞ͢Δ • ReduxͰσʔλॲཧΛఆٛ • ReactͰදࣔ͢Δ಺༰Λఆٛ

  30. Ta l k a b o u t … •

    WP REST APIͱ͸ʁ • WP REST APIΛ࢖ͬͨϑϩϯτΤϯυߏங • WP REST APIͰมΘΔ͜ͱ
  31. Wo rd P re s s ʹ न Θ Ε

    ͳ ͍ w e b ੍ ࡞
  32. Ի ੠

  33. 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 / Ի੠ೝࣝαʔϏεͱWordPressͷ࿈ܞ
  34. 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 …
  35. Wo rd P re s s a s a M

    i c ro s e r v i c e
  36. ݕ ࡧ ͸ E l a s t i c

    s e a rc h Ϛʔ έ ςΟ ϯ ά ͸ M a u t i c +BWB4DSJQU )5.- "1* "1* "1*
  37. R e u s a b l e C o

    n t e n t
  38. ࠓ · Ͱ ͸ ഔ ମ ຖ ʹ ί ϯ

    ς ϯ π Λ ߋ ৽ ͯ͠ ͍ ͨ
  39. ί ϯ ς ϯ π ͸ Wo rd P re

    s s ʹ A P I ͔ Β ί ϯ ς ϯ π Λ ར ༻ ͢ Δ
  40. I n t e l l i g e n

    t C o n t e n t https://www.amazon.co.jp/dp/B01698YCF0
  41. ࠓ · Ͱ ௨ Γ ͷ ࡞ Γ ํ ͕

    ͳ ͘ ͳ Δ Θ ͚ Ͱ ͸ ͳ ͍
  42. http://www.vektor-inc.co.jp/

  43. Ҋ ݅ ʹ Ԡ ͡ ͯ W P A P

    I ͷ ى ༻ Λ ݕ ౼ ͢ Δ • ϞόΠϧΞϓϦ౳ɺΦϜχνϟωϧʹల։͢ΔϝσΟΞ • JavaScriptͰͷ։ൃ͕ಘҙͳΤϯδχΞ͕ଟ͍νʔϜͰͷ։ൃ • ςʔϚ΍ϓϥάΠϯͷઃఆ͚ͩͰย෇͘Ҋ݅ • WordPressςʔϚ࡞ऀͱ͔͕͍ΔνʔϜͰͷ։ൃ ै དྷ ͷ ߏ ங ํ ๏ ͕ ޮ ཰ త ͳ έ ʔε ͷ ྫ W P R E S T A P I ͕ ׆ ༂ ͢ Δ έ ʔε ͷ ྫ
  44. T h a n k s ! • WP REST

    APIͱ͸ʁ • WP REST APIΛ࢖ͬͨϑϩϯτΤϯυߏங • WP REST APIͰมΘΔ͜ͱ ੍࡞ɾஶ࡞ Ί૊ ऴ