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

Getting Started JAMstack Based WordPress / wordcamp-osaka-2019

Getting Started JAMstack Based WordPress / wordcamp-osaka-2019

WordCamp Osaka 2019のスライドです。

Hidetaka Okamoto
PRO

December 07, 2019
Tweet

More Decks by Hidetaka Okamoto

Other Decks in Programming

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