Getting Started JAMstack Based WordPress / wordcamp-osaka-2019

WordCamp Osaka 2019のスライドです。

Transcript

1. G e t t i n g S t a r t e d
   J A M s t a c k B a s e d Wo rd P re s s
   Wo rd C a m p O s a k a 2 0 1 9
   #
   

   View Slide

2. H i d e t a k a
   O k a m o t o
   • Digitalcube Co. Ltd.
   • Nishinomiya / Kobe
   • WordPress 4.7 / 5.0 / 5.3 Core
   contributor
   

   View Slide

3. View Slide

4. A g e n d a
   • What’s about JAMstack?
   • Why using it?
   • How to create
   • pros and cons
   

   View Slide

5. A g e n d a
   • What’s about JAMstack?
   • Why using it?
   • How to create
   • pros and cons
   

   View Slide

6. h t t p s : / / j a m s t a c k . o rg /
   

   View Slide

7. ߴ଎Ͱ҆શͳαΠτΛ࡞੒͢ΔΞʔΩςΫνϟ
   h t t p s : / / j a m s t a c k . o rg /
   

   View Slide

8. J A M s t a c k ͷ ߏ ੒ ཁ ૉ
   • JavaScript

   HTTP ϦΫΤετ/ϨεϙϯεͷΑ͏ͳμΠφϛοΫͳॲཧ͸ɺ

   ׬શʹΫϥΠΞϯτ্Ͱ࣮ߦ͞ΕΔΑ͏ʹ͢ΔɻʢϑϨʔϜϫʔΫ΍όχϥͳͲ͸໰Θͳ͍ʣ
   • API

   શͯͷαʔόαΠυॲཧɺDBॲཧ͸ HTTPS Ͱ ΞΫηεͰ͖Δ࠶ར༻Մೳͳ Web API ʹ͢
   Δɻ

   ΧελϜϝΠυͰ΋ɺαʔυύʔςΟʔͰ΋໰Θͳ͍ɻ
   • Markup

   ςϯϓϨʔτ༻ͷϚʔΫΞοϓ = HTML ͸ɺαΠτδΣωϨʔλ(= SSG) ΍ Ϗϧυπʔϧ Ͱɺ

   σϓϩΠ࣌ʹࣄલϏϧυ͠ੜ੒͍ͯ͠Δ ඞཁ(should) ͕͋Δɻ
   

   View Slide

9. J / A / M Ͱ ߏ ੒ ͞ Ε ͨ s t a c k - > J A M s t a c k
   • JavaScript

   HTTP ϦΫΤετ/ϨεϙϯεͷΑ͏ͳμΠφϛοΫͳॲཧ͸ɺ

   ׬શʹΫϥΠΞϯτ্Ͱ࣮ߦ͞ΕΔΑ͏ʹ͢ΔɻʢϑϨʔϜϫʔΫ΍όχϥͳͲ͸໰Θͳ͍ʣ
   • API

   શͯͷαʔόαΠυॲཧɺDBॲཧ͸ HTTPS Ͱ ΞΫηεͰ͖Δ࠶ར༻Մೳͳ Web API ʹ͢Δɻ

   ΧελϜϝΠυͰ΋ɺαʔυύʔςΟʔͰ΋໰Θͳ͍ɻ
   • Markup

   ςϯϓϨʔτ༻ͷϚʔΫΞοϓ = HTML ͸ɺαΠτδΣωϨʔλ(= SSG) ΍ Ϗϧυπʔϧ Ͱɺ

   σϓϩΠ࣌ʹࣄલϏϧυ͠ੜ੒͍ͯ͠Δ ඞཁ(should) ͕͋Δɻ
   

   View Slide

10. J A M s t a c k ʮ Ͱ ͸ ͳ ͍ ʯ έ ʔε
    

    View Slide

11. J A M s t a c k ʮ Ͱ ͸ ͳ ͍ ʯ έ ʔε
    • WordPress / DrupalͳͲͷαʔόʔαΠυͰॲཧ͞ΕΔCMS
    • Ruby / Node.jsͳͲͷόοΫΤϯυٕज़ʹґଘͨ͠webΞϓϦ
    • Isomorphic(Universal)ͳϨϯμϦϯάΛ࢖༻͢ΔSPA

    -> ΫϥΠΞϯτͱαʔόʔͰಉ͡ίʔυΛ࣮ߦ͢ΔSPA
    https://qiita.com/kyrieleison/items/4ac5bcc331aee6394440
    

    View Slide

12. ͭ · Γ Ͳ ͏ ͍ ͏ ͜ ͱ ʁ
    

    View Slide

13. ࠓ ͷ ٕ ज़ Ͱ ͜ Ε Λ ໨ ࢦ ͢
    h t t p : / / a b e h i ro s h i . l a . c o o c a n . j p /
    

    View Slide

14. J A M s t a c k ͸ ࣄ લ ੜ ੒ ͠ ͨ H T M L Λ ഑ ৴ ͢ Δ
    • WPςʔϚ͕Markup / MySQL DB͕APIʹ૬౰
    • MarkupʹAPIͷσʔλΛϚʔδͯ͠HTMLΛੜ੒͠ɺެ։
    • ੜ੒ࡁΈHTMLʢ+ը૾ͳͲʣͷΈΛϢʔβʔʹ഑৴
    • Ѩ෦׮ͷϗʔϜϖʔδͷΑ͏ͳ଎౓ / Մ༻ੑΛ໨ࢦ͢
    

    View Slide

15. A g e n d a
    • What’s about JAMstack?
    • Why using it?
    • How to create
    • pros and cons
    

    View Slide

16. J A M s t a c k ͳ α Π τ ʹ ͢ Δ ϝ Ϧ ο τ
    • ૣ͍
    • ڧ͍
    • ݻ͍
    • ָ
    

    View Slide

17. J A M s t a c k ͳ α Π τ ʹ ͢ Δ ϝ Ϧ ο τ
    • ૣ͍ɿ ੩తͳHTMLͰ഑৴͢ΔͷͰ”αʔόʔ to ϒϥ΢β”͕ߴ଎ʹ
    • ڧ͍ɿ
    • ݻ͍ɿ
    • ָɹɿ
    

    View Slide

18. J A M s t a c k ͳ α Π τ ʹ ͢ Δ ϝ Ϧ ο τ
    • ૣ͍ɿ ੩తͳHTMLͰ഑৴͢ΔͷͰ”αʔόʔ to ϒϥ΢β”͕ߴ଎ʹ
    • ڧ͍ɿαʔόʔͰHTMLΛ࡞Βͳ͍ͷͰɺෛՙ͕খ͘͞ͳΔ
    • ݻ͍ɿ
    • ָɹɿ
    

    View Slide

19. J A M s t a c k ͳ α Π τ ʹ ͢ Δ ϝ Ϧ ο τ
    • ૣ͍ɿ ੩తͳHTMLͰ഑৴͢ΔͷͰ”αʔόʔ to ϒϥ΢β”͕ߴ଎ʹ
    • ڧ͍ɿαʔόʔͰHTMLΛ࡞Βͳ͍ͷͰɺෛՙ͕খ͘͞ͳΔ
    • ݻ͍ɿDB / ॲཧܥ΁ͷΞΫηεܦ࿏ͷҰຊԽͰϦεΫΛہॴԽ
    • ָɹɿ
    

    View Slide

20. J A M s t a c k ͳ α Π τ ʹ ͢ Δ ϝ Ϧ ο τ
    • ૣ͍ɿ ੩తͳHTMLͰ഑৴͢ΔͷͰ”αʔόʔ to ϒϥ΢β”͕ߴ଎ʹ
    • ڧ͍ɿαʔόʔͰHTMLΛ࡞Βͳ͍ͷͰɺෛՙ͕খ͘͞ͳΔ
    • ݻ͍ɿDB / ॲཧܥ΁ͷΞΫηεܦ࿏ͷҰຊԽͰϦεΫΛہॴԽ
    • ָɹɿॲཧ / DB૚ͱϑϩϯτͷ෼཭ʹΑΔείʔϓͷ໌֬Խ
    

    View Slide

21. A g e n d a
    • What’s about JAMstack?
    • Why using it?
    • How to create
    • pros and cons
    

    View Slide

22. J A M s t a c k ͳ α Π τ ʹ ͢ Δ ํ ๏
    • APIαʔόʔͱͯ͠ͷWordPressηοτΞοϓ
    • J(avascript)ͱM(arkup)ͷٕज़બఆ
    • JAM
    • ӡ༻ͷϫʔΫϑϩʔ੔උ
    

    View Slide

23. J A M s t a c k ͳ α Π τ ʹ ͢ Δ ํ ๏
    • APIαʔόʔͱͯ͠ͷWordPressηοτΞοϓ
    • J(avascript)ͱM(arkup)ͷٕज़બఆ
    • JAM
    • ӡ༻ͷϫʔΫϑϩʔ੔උ
    

    View Slide

24. Wo rd P re s s Λ A P I α ʔ όʔ Խ ͢ Δ : S E O ฤ
    • WordPressଆͰ΋ίϯςϯπ͕ग़ྗ͞ΕΔ
    • ͦͷ··ͩͱॏෳίϯςϯπʹͳΔ͓ͦΕ͕͋Δ
    • ϩάΠϯ͍ͯ͠ͳ͍࣌͸ɺϑϩϯτͰ࢖͏ύεҎ֎301ϦμΠϨΫτ
    • canonical΍noindexͷઃఆ΋͓ͯ͘͠ͱϕλʔ
    

    View Slide

25. Ϧ μΠ Ϩ Ϋ τ ͷ ྫ
    add_action( 'init', 'redirect_to_spa' );
    function redirect_to_spa() {
    if ( ! is_user_logged_in() ) {
    $uri = $_SERVER[“REQUEST_URI”];
    // wp-admin / login / wp-content/ feedҎ֎ϦμΠϨΫτ
    if ( ! preg_match( '/^\/wp-login.php/', $uri ) && ! preg_match( '/^\/wp-admin/', $uri ) && ! preg_match( '/
    ^\/wp-json/', $uri ) && ! preg_match( '/^\/wp-content/', $uri ) && ! preg_match( '/^\/feed/', $uri ) ) {
    $url = 'https://wp-kyoto.net' . $uri;
    wp_redirect( $url, 301 );
    exit();
    }
    }
    }
    

    View Slide

26. Wo rd P re s s Λ A P I α ʔ όʔ Խ ͢ Δ : α ʔ όʔ ؅ ཧ ฤ
    • ͦ΋ͦ΋WordPressͷϝϯςφϯεΛͳ͍ͨ͘͠
    • ී௨ͷWordPressͷ··ͩͱ֤छߋ৽࡞ۀ͸࢒Δ
    • ࣗ෼Ͱϝϯς͠ͳͯ͘ࡁΉϑϧϚωʔδυܥαʔόʔΛݕ౼͢Δ
    • ؅ཧ͠ͳ͍෼ɺΧελϚΠζͷࣗ༝౓͕མͪΔՄೳੑ͸͋Δ
    

    View Slide

27. •Wo rd P re s s . c o m
    •ແ ྉ ͔ Β ར ༻ Մ ೳ
    •W P A P I + . c o m A P I
    •্ Ґ ϓ ϥϯ Ҏ ֎ ͸ 

    ϓ ϥ άΠ ϯ / ς ʔϚ ʹ
    ੍ ݶ ͋ Γ
    

    View Slide

28. •S h i f t e r
    •G a t s b y α ϙ ʔ τ
    •৽ ண ౤ ߘ ͷ J S O N ग़ ྗ ΋
    

    View Slide

29. ϫ ʔ Ϋ γ ϣ οϓ ࢿ ྉ ͸ G i t H u b ʹ ެ ։ த
    https://bit.ly/2OIbsji
    

    View Slide

30. J A M s t a c k ͳ α Π τ ʹ ͢ Δ ํ ๏
    • APIαʔόʔͱͯ͠ͷWordPressηοτΞοϓ
    • J(avascript)ͱM(arkup)ͷٕज़બఆ
    • JAM
    • ӡ༻ͷϫʔΫϑϩʔ੔උ
    

    View Slide

31. h t t p s : / / w w w. s t a t i c g e n . c o m /
    

    View Slide

32. J a v a S c r i p t Ͱ ϑ ϩ ϯ τ Τ ϯ υ Λ ࣮ ૷ ͢ Δ
    • ݱ࣌఺Ͱ͸React·ͨ͸Vue.js͕Α͘༻͍ΒΕΔ
    • ReactͰ͋Ε͹Next.js / Gatsby.jsΛ࢖ͬͯSSG͢Δ
    • Vue.jsͰ͋Ε͹Nuxt.js / GridsomeΛ࢖ͬͯSSG͢Δ
    • ਖ਼௚ͳΜͰ΋͍͍
    • ॻ͖ํ / API / ਎ۙͳཔΕΔਓͳͲͰબఆ͢Ε͹Α͍
    

    View Slide

33. J A M s t a c k ͳ α Π τ ʹ ͢ Δ ํ ๏
    • APIαʔόʔͱͯ͠ͷWordPressηοτΞοϓ
    • J(avascript)ͱM(arkup)ͷٕज़બఆ
    • JAM
    • ӡ༻ͷϫʔΫϑϩʔ੔උ
    

    View Slide

34. J M ʹ A ͷ σ ʔ λ Λ ྲྀ ͠ ࠐ Ή
    • Gridsome / GatsbyͳͲ͸GraphQLΛར༻͢Δ
    • FW͕Ϗϧυ࣌ʹAPIσʔλΛऔಘͯ͠಺෦ʹҰ࣌อଘ
    • GraphQLͷΫΤϦʹج͍ͮͯMarkupʹσʔλΛྲྀ͠ࠐΉ
    • WP / CSV / MarkdownͳͲෳ਺σʔλιʔεʹରԠ͢ΔͨΊͷ࢓༷
    

    View Slide

35. G a t s b y ͷ
    ৔ ߹
    

    View Slide

36. •R e a c t Ͱ M a r k u p ࣮ ૷
    •G a t s b y ͕ A P I ͔ Β 

    σ ʔ λ औ Γ ࠐ Έ
    •G r a p h Q L Ͱ σ ʔ λ Λ 

    M a r k u p ʹ Π ϯ ϙ ʔ τ
    •ੜ ੒ ͞ Ε ͨ H T M L Λ 

    α ʔόʔ ʹ Ξ οϓ ϩ ʔ υ
    

    View Slide

37. Π ϯ ϙ ʔ τ ઃ ఆ
    • Gatsby͕Πϯϙʔτ͢Δର৅Λࢦఆ
    • gatsby-source-wordpressϓϥάΠϯ
    • υϝΠϯ΍ೝূɾACFͳͲΛઃఆ
    

    View Slide

38. G r a p h Q L Ͱ Π ϯ ϙ ʔ
    τ
    • औಘ͍ͨ͠σʔλ͚ͩΛࢦఆ
    • GraphQLεΩʔϚ͸

    GatbyϓϥάΠϯ࣍ୈ
    • ΫΤϦͯ͠ಛఆίϯςϯπऔಘ౳΋
    

    View Slide

39. M A R K U P
    • Plugin+GraphQLͰσʔλΠϯϙʔτ
    • ReactͷJSXͰHTMLΛදݱ
    • Gatsbyͷίϯϙʔωϯτ΋ར༻Մೳ
    • HTMLԽ͢ΔͷͰSFC૝ఆ͕ແ೉
    

    View Slide

40. J A M s t a c k ͳ α Π τ ʹ ͢ Δ ํ ๏
    • APIαʔόʔͱͯ͠ͷWordPressηοτΞοϓ
    • J(avascript)ͱM(arkup)ͷٕज़બఆ
    • JAM
    • ӡ༻ͷϫʔΫϑϩʔ੔උ
    

    View Slide

41. J A M s t a c k ͷ ϋϚ Γ Ͳ ͜ Ζ ɿ ߋ ৽ ͷ ൓ ө ํ ๏
    • “WordPress্ͷߋ৽” ≠ “αΠτͷߋ৽”
    • JAMstack͸HTMLͷϏϧυ͕ඞཁʹͳΔ
    • Netlify / AWS Amplify / CircleCI / etcͰϏϧυ -> ެ։
    • WordPress͔ΒϏϧυ࣮ߦΛࢦࣔ͢Δඞཁ͕͋Δ
    

    View Slide

42. J A M s t a c k D e p l o y m e n t s
    https://wordpress.org/plugins/wp-jamstack-deployments/
    

    View Slide

43. J A M s t a c k D e p l o y m e n t s
    https://wordpress.org/plugins/wp-jamstack-deployments/
    •We b h o o k Λ ࢦ ఆ
    •ه ࣄ ߋ ৽ ͳ Ͳ Ͱ τ Ϧ Ψ ʔ
    •W P ଆ ͷ ߋ ৽ ࡞ ۀ Ͱ 

    J A M s t a c k ͷ Ϗ ϧ υ ࣮ ߦ
    •ϑ ο Ϋ Λ ࢖ ͬͯ 

    Χ ε λ ϚΠ ζ Մ ೳ
    

    View Slide

44. ެ ։ લ ͷ ν Σ ο Ϋ ʹ ͭ ͍ͯ
    • WPͷϓϨϏϡʔػೳ͸WPςʔϚͰදࣔ͞ΕΔ
    • JAMstackͷHTMLͰݟΔʹ͸Ϗϧυ͕ඞཁ
    • Netlify / AWS AmplifyͳͲͰϓϨϏϡʔϏϧυ or ϩʔΧϧϏϧυ
    • ެ։͢ΔϏϧυ͕બ΂ΔͷͰɺϩʔϧόοΫ͸༰қ
    

    View Slide

45. Ͳͷ Ϗ ϧ υ H T M L Λ ެ ։ ͢ Δ ͔ બ ΂ Δ ( N e t l i f y )
    

    View Slide

46. A g e n d a
    • What’s about JAMstack?
    • Why using it?
    • How to create
    • pros and cons
    

    View Slide

47. J A M s t a c k ͳ α Π τ ʹ ͢ Δ ϝ Ϧ ο τ
    • ૣ͍ɿ ੩తͳHTMLͰ഑৴͢ΔͷͰαʔόʔ -> ϒϥ΢β͕ߴ଎ʹ
    • ڧ͍ɿαʔόʔͰHTMLΛ࡞Βͳ͍ͷͰɺෛՙ͕খ͘͞ͳΔ
    • ݻ͍ɿDB / ॲཧܥ΁ͷΞΫηεܦ࿏ͷҰຊԽͰϦεΫΛہॴԽ
    • ָɹɿॲཧ / DB૚ͱϑϩϯτͷ෼཭ʹΑΔείʔϓͷ໌֬Խ
    

    View Slide

48. J A M s t a c k ͳ α Π τ ʹ ͢ Δ σϝ Ϧ ο τ
    ͍··ͰͷWordPressαΠτ੍࡞ͱ
    ·ͬͨ͘ҟͳΔϊ΢ϋ΢͕ඞཁʹͳΔ
    

    View Slide

49. J A M s t a c k ͳ α Π τ ʹ ͢ Δ σϝ Ϧ ο τ
    • WordPressςʔϚ͸࢖͑ͳ͍
    • ΢ΟδΣοτɾϝχϡʔͳͲ΋ͦͷ··Ͱ͸࢖͑ͳ͍
    • React / VueͳͲΛ࢖ͬͯࣗલͰUIΛߏங͢Δඞཁ͕͋Δ
    • ֤ϖʔδͷϧʔςΟϯά΋JavaScript + WP APIͰؤுΔ
    • ఆੴ΍ϋϯυϒοΫ͕·ͩଘࡏͤͣɺࢼߦࡨޡ͕ଟΊ
    

    View Slide

50. M a t t t o l d u s i t i n 2 0 1 6
    h t t p s : / / w w w. s l i d e s h a re . n e t / p h o t o m a t t / s t a t e - o f - t h e - w o rd - 2 0 1 6 / 4 4
    

    View Slide

51. J A M s t a c k ʹ ͢ Δ ͔ ɺ ͠ ͳ ͍ ͔
    • ৽͘͠खʹೖΕΔ΋ͷͱಉ͘͡Β͍ɺࣦ͏΋ͷ΋͋Δ
    • ࣦ͏΋ͷ < खʹೖΕΔ΋ͷͰ͋Δ͔Ͳ͏͔ʁ
    • JAMstackք۾ɾWPք۾ͷϙδγϣϯτʔΫʹৼΓճ͞Εͳ͍
    • JAMstack޲͚Ҋ݅ͱͦ͏Ͱͳ͍Ҋ݅ͷબผ؟͕ඞཁ
    

    View Slide

52. J A M s t a c k ͕ ޲ ͍ͯ ͍ ΔͰ ͋ Ζ ͏ Ҋ ݅ ͷ Ұ ྫ
    • ύϑΥʔϚϯε΍Մ༻ੑΛٻΊΒΕΔҊ݅
    • কདྷతʹผCMSʹҠߦ͢Δ͔΋͠Εͳ͍Ҋ݅
    • JSͰΠϯλϥΫςΟϒͳαΠτΛ࡞Γ͍ͨ
    • JSͰͷαΠτߏங / ӡ༻ϊ΢ϋ΢ͷํ͕ଟ͍νʔϜͰ͋Δ
    • WordPressͷϝϯςφϯεΛͨ͘͠ͳ͍
    

    View Slide

53. W P ୯ ମ Ͱ ͷ ӡ ༻ ͕ ޲ ͍ͯ ͍ ΔͰ ͋ Ζ ͏ Ҋ ݅
    • ϝϯςͰ͖Δମ੍͕Ͱ͖͕͍͋ͬͯͳ͍ʢ͕Μ͹Ζ͏ʣ
    • ίϯςϯπ͕ෆे෼ʢͪΌΜͱCMS࢖͔ͬͯΒʹ͠Α͏ʣ
    • ͜Ε͔ΒWordPress͸͡Ί·͢ʂʢ·ͣ͸جຊ͔Βʣ
    • ϓϥάΠϯ / ςʔϚΛ࢖ͬͯߏஙɾӡ༻͍ͨ͠
    

    View Slide

54. ͦ ΋ ͦ ΋
    ͦ ͜ · Ͱ ͯ͠ Wo rd P re s s Λ ͭ ͔ ͏ ΂ ͖ ͳ ͷ ͔ ʁ
    

    View Slide

55. W P Ϣʔ βʔ ͕ ຊ ౰ ʹ ཉ ͠ ͍ ΋ ͷ
    

    View Slide

56. Wo rd P re s s ͷ ؅ ཧ ը ໘ Λ ࢖ ͍ ͨ ͍
    • ΞΫηγϏϦςΟ΍ଟݴޠʹ΋ରԠ
    • ϓϥάΠϯΛར༻֦ͨ͠ு΍ΧελϚΠζ͕༰қ
    • ੈքதͰ΋ͬͱ΋࢖͍ํ͕஌ΒΕ͍ͯΔ
    • ͢Ͱʹ͜ΕͰՔಇ͍ͯ͠Δέʔε΋গͳ͘ͳ͍
    

    View Slide

57. ϑ ϩ ϯ τ Τ ϯ υ ͱ Ξ ϓ Ϧ έ ʔ γ ϣ ϯ ͷ ෼ ཭
    • ϑϩϯτΛWPʹറΒΕͣʹ࡞Γ͍ͨ -> JAMstack
    • API͕࢖͑ΔͳΒɺ؅ཧը໘͸ͳΜͰ΋ྑ͍
    • WordPress͸Content Managementʹूத
    • UI / UX͸JAMstackଆͰ؅ཧ͢Δ
    • WordPressͱJAMstack͸ڞଘؔ܎
    

    View Slide

58. C o n c l u s i o n
    • WP API & JAMstackͷొ৔ͰαΠτ੍࡞͕ଟ༷Խ
    • ཁ݅ʹԠͯ͡هࣄσʔλͷऔΓࠐΈํ / Ϗϧυํ๏Λબ୒͠Α͏
    • ߋ৽ / ੍࡞ / ؅ཧͷϑϩʔ͔ΒมΘΔՄೳੑ͕͋ΔͷͰ஫ҙ
    • ಛޮༀ / ۜͷ஄ؙͰ͸ͳ͍ͷͰɺ
    ໡৴͠ͳ͍
    

    View Slide

59. – D a n Q u a y l e
    “The future will be better tomorrow.”
    

    View Slide

60. #wcOsaka #GetShifter
    https://getshifter.io/
    

    View Slide