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

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

Transcript

1. View Slide

2. Ta l k a b o u t …
   • WP REST APIͱ͸ʁ
   • WP REST APIΛ࢖ͬͨϑϩϯτΤϯυߏங
   • WP REST APIͰมΘΔ͜ͱ
   

   View Slide

3. H i d e t a k a
   O k a m o t o
   • AMIMOTO ( Digitalcube )
   • WordBenchژ౎ϞσϨʔλ
   • ೔ຊޠϑΥʔϥϜϦΤκϯ
   

   View Slide

4. http://www.amazon.co.jp/dp/B01K3QZRIK
   

   View Slide

5. Ta l k a b o u t …
   • WP REST APIͱ͸ʁ
   • WP REST APIΛ࢖ͬͨϑϩϯτΤϯυߏங
   • WP REST APIͰมΘΔ͜ͱ
   

   View Slide

6. View Slide

7. W P R E S T A P I ( Ve r s i o n 2 )
   • WordPressͷσʔλΛJSONͰऔಘͰ͖ΔAPI
   • WordPress4.4ͰҰ෦ػೳ͕ίΞ࣮૷ࡁΈ
   • ίΞ౷߹ʹ޲͚ͯ։ൃਐߦத
   • ϓϥάΠϯ΍ίʔυ௥ՃʹΑΔػೳ֦ு΋Մೳ
   

   View Slide

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 .
   

   View Slide

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
   

   View Slide

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 ͷ ه ࣄ ʹ ί ϝ ϯ τ Λ ౤ ߘ
    

    View Slide

11. W P R E S T A P I υ Ω ϡ ϝ ϯ ς ʔ γ ϣ ϯ
    ʢ ೔ ຊ ޠ ൛ ʣ
    http://ja.wp-api.org/
    

    View Slide

12. Ta l k a b o u t …
    • WP REST APIͱ͸ʁ
    • WP REST APIΛ࢖ͬͨϑϩϯτΤϯυߏங
    • WP REST APIͰมΘΔ͜ͱ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. ผ ͷ Wo rd P re s s αΠ τ ͷ ه ࣄ Λ औ ಘ ͢ Δ
    $url = ‘http://example.com/wp-json/wp/v2/posts';
    $posts = wp_remote_get( $url );
    foreach ( $posts as $post ) {
    echo esc_html( $post[‘title’][‘rendered’] );
    }
    

    View Slide

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

    View Slide

18. http://ogijima-library.or.jp/
    

    View Slide

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

    View Slide

20. i o n i c + w p - a n g u l a r j s
    
    
    
    
    
    
    
    
    https://github.com/ogijima-library/app/blob/master/www/templates/posts.html
    

    View Slide

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

    View Slide

22. U n i v e r s a l J a v a S c r i p t
    

    View Slide

23. ϑ ϩ ϯ τ Τ ϯ υ ͔ Β
    ό ο Ϋ Τ ϯ υ · Ͱ
    ͢΂ ͯ J a v a S c r i p t Ͱ ߏ ங ͢ Δ
    

    View Slide

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
    

    View Slide

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 . .
    ͩ ͍ ͨ ͍ ͷ ͜ ͱ ͕ Ͱ ͖ Δ Α ͏ ʹ ͳ Δ
    

    View Slide

26. h t t p s : / / u s t w o . c o m /
    

    View Slide

27. View Slide

28. w p - k y o t o
    • αʔόʔɿExpress ( JS )
    • ϨϯμϦϯάɿReact ( JS )
    • APIॲཧܥ౳ɿRedux ( JS )
    http://dev.wp-kyoto.net/
    

    View Slide

29. • ExpressͰϦΫΤετॲཧΛఆٛ
    • Fetch API͕APIͱ࿈ܞ͢Δ
    • ReduxͰσʔλॲཧΛఆٛ
    • ReactͰදࣔ͢Δ಺༰Λఆٛ
    

    View Slide

30. Ta l k a b o u t …
    • WP REST APIͱ͸ʁ
    • WP REST APIΛ࢖ͬͨϑϩϯτΤϯυߏங
    • WP REST APIͰมΘΔ͜ͱ
    

    View Slide

31. Wo rd P re s s ʹ
    न Θ Ε ͳ ͍ w e b ੍ ࡞
    

    View Slide

32. Ի ੠
    

    View Slide

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ͷ࿈ܞ
    

    View Slide

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 …
    

    View Slide

35. Wo rd P re s s
    a s a
    M i c ro s e r v i c e
    

    View Slide

36. ݕ ࡧ ͸ E l a s t i c s e a rc h
    Ϛʔ έ ςΟ ϯ ά ͸ M a u t i c
    +BWB4DSJQU
    )5.-
    "1* "1* "1*
    

    View Slide

37. R e u s a b l e
    C o n t e n t
    

    View Slide

38. ࠓ · Ͱ ͸ ഔ ମ ຖ ʹ
    ί ϯ ς ϯ π Λ ߋ ৽ ͯ͠ ͍ ͨ
    

    View Slide

39. ί ϯ ς ϯ π ͸ Wo rd P re s s ʹ
    A P I ͔ Β ί ϯ ς ϯ π Λ ར ༻ ͢ Δ
    

    View Slide

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
    

    View Slide

41. ࠓ · Ͱ ௨ Γ ͷ ࡞ Γ ํ ͕
    ͳ ͘ ͳ Δ Θ ͚ Ͱ ͸ ͳ ͍
    

    View Slide

42. http://www.vektor-inc.co.jp/
    

    View Slide

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

    View Slide

44. T h a n k s !
    • WP REST APIͱ͸ʁ
    • WP REST APIΛ࢖ͬͨϑϩϯτΤϯυߏங
    • WP REST APIͰมΘΔ͜ͱ
    ੍࡞ɾஶ࡞
    Ί૊
    ऴ
    

    View Slide