Getting Started JAMstack Based WordPress / wordcamp-osaka-2019

Getting Started JAMstack Based WordPress / wordcamp-osaka-2019

WordCamp Osaka 2019のスライドです。

75486cbfd37125f121cf4a6c5614601c?s=128

Hidetaka Okamoto

December 07, 2019
Tweet

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 #
  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
  3. None
  4. A g e n d a • What’s about JAMstack?

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

    • Why using it? • How to create • pros and cons
  6. h t t p s : / / j a

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

    a m s t a c k . o rg /
  8. J A M s t a c k ͷ ߏ

    ੒ ཁ ૉ • JavaScript
 HTTP ϦΫΤετ/ϨεϙϯεͷΑ͏ͳμΠφϛοΫͳॲཧ͸ɺ
 ׬શʹΫϥΠΞϯτ্Ͱ࣮ߦ͞ΕΔΑ͏ʹ͢ΔɻʢϑϨʔϜϫʔΫ΍όχϥͳͲ͸໰Θͳ͍ʣ • API
 શͯͷαʔόαΠυॲཧɺDBॲཧ͸ HTTPS Ͱ ΞΫηεͰ͖Δ࠶ར༻Մೳͳ Web API ʹ͢ Δɻ
 ΧελϜϝΠυͰ΋ɺαʔυύʔςΟʔͰ΋໰Θͳ͍ɻ • Markup
 ςϯϓϨʔτ༻ͷϚʔΫΞοϓ = HTML ͸ɺαΠτδΣωϨʔλ(= SSG) ΍ Ϗϧυπʔϧ Ͱɺ
 σϓϩΠ࣌ʹࣄલϏϧυ͠ੜ੒͍ͯ͠Δ ඞཁ(should) ͕͋Δɻ
  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) ͕͋Δɻ
  10. J A M s t a c k ʮ Ͱ

    ͸ ͳ ͍ ʯ έ ʔε
  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
  12. ͭ · Γ Ͳ ͏ ͍ ͏ ͜ ͱ ʁ

  13. ࠓ ͷ ٕ ज़ Ͱ ͜ Ε Λ ໨ ࢦ

    ͢ h t t p : / / a b e h i ro s h i . l a . c o o c a n . j p /
  14. J A M s t a c k ͸ ࣄ

    લ ੜ ੒ ͠ ͨ H T M L Λ ഑ ৴ ͢ Δ • WPςʔϚ͕Markup / MySQL DB͕APIʹ૬౰ • MarkupʹAPIͷσʔλΛϚʔδͯ͠HTMLΛੜ੒͠ɺެ։ • ੜ੒ࡁΈHTMLʢ+ը૾ͳͲʣͷΈΛϢʔβʔʹ഑৴ • Ѩ෦׮ͷϗʔϜϖʔδͷΑ͏ͳ଎౓ / Մ༻ੑΛ໨ࢦ͢
  15. A g e n d a • What’s about JAMstack?

    • Why using it? • How to create • pros and cons
  16. J A M s t a c k ͳ α

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

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

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

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

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

    • Why using it? • How to create • pros and cons
  22. J A M s t a c k ͳ α

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

    Π τ ʹ ͢ Δ ํ ๏ • APIαʔόʔͱͯ͠ͷWordPressηοτΞοϓ • J(avascript)ͱM(arkup)ͷٕज़બఆ • JAM • ӡ༻ͷϫʔΫϑϩʔ੔උ
  24. Wo rd P re s s Λ A P I

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

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

    •ແ ྉ ͔ Β ར ༻ Մ ೳ •W P A P I + . c o m A P I •্ Ґ ϓ ϥϯ Ҏ ֎ ͸ 
 ϓ ϥ άΠ ϯ / ς ʔϚ ʹ ੍ ݶ ͋ Γ
  28. •S h i f t e r •G a t

    s b y α ϙ ʔ τ •৽ ண ౤ ߘ ͷ J S O N ग़ ྗ ΋
  29. ϫ ʔ Ϋ γ ϣ οϓ ࢿ ྉ ͸ G

    i t H u b ʹ ެ ։ த https://bit.ly/2OIbsji
  30. J A M s t a c k ͳ α

    Π τ ʹ ͢ Δ ํ ๏ • APIαʔόʔͱͯ͠ͷWordPressηοτΞοϓ • J(avascript)ͱM(arkup)ͷٕज़બఆ • JAM • ӡ༻ͷϫʔΫϑϩʔ੔උ
  31. h t t p s : / / w w

    w. s t a t i c g e n . c o m /
  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 / ਎ۙͳཔΕΔਓͳͲͰબఆ͢Ε͹Α͍
  33. J A M s t a c k ͳ α

    Π τ ʹ ͢ Δ ํ ๏ • APIαʔόʔͱͯ͠ͷWordPressηοτΞοϓ • J(avascript)ͱM(arkup)ͷٕज़બఆ • JAM • ӡ༻ͷϫʔΫϑϩʔ੔උ
  34. J M ʹ A ͷ σ ʔ λ Λ ྲྀ

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

  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 Λ 
 α ʔόʔ ʹ Ξ οϓ ϩ ʔ υ
  37. Π ϯ ϙ ʔ τ ઃ ఆ • Gatsby͕Πϯϙʔτ͢Δର৅Λࢦఆ •

    gatsby-source-wordpressϓϥάΠϯ • υϝΠϯ΍ೝূɾACFͳͲΛઃఆ
  38. G r a p h Q L Ͱ Π ϯ

    ϙ ʔ τ • औಘ͍ͨ͠σʔλ͚ͩΛࢦఆ • GraphQLεΩʔϚ͸
 GatbyϓϥάΠϯ࣍ୈ • ΫΤϦͯ͠ಛఆίϯςϯπऔಘ౳΋
  39. M A R K U P • Plugin+GraphQLͰσʔλΠϯϙʔτ • ReactͷJSXͰHTMLΛදݱ

    • Gatsbyͷίϯϙʔωϯτ΋ར༻Մೳ • HTMLԽ͢ΔͷͰSFC૝ఆ͕ແ೉
  40. J A M s t a c k ͳ α

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

    Γ Ͳ ͜ Ζ ɿ ߋ ৽ ͷ ൓ ө ํ ๏ • “WordPress্ͷߋ৽” ≠ “αΠτͷߋ৽” • JAMstack͸HTMLͷϏϧυ͕ඞཁʹͳΔ • Netlify / AWS Amplify / CircleCI / etcͰϏϧυ -> ެ։ • WordPress͔ΒϏϧυ࣮ߦΛࢦࣔ͢Δඞཁ͕͋Δ
  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/
  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 ͷ Ϗ ϧ υ ࣮ ߦ •ϑ ο Ϋ Λ ࢖ ͬͯ 
 Χ ε λ ϚΠ ζ Մ ೳ
  44. ެ ։ લ ͷ ν Σ ο Ϋ ʹ ͭ

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

    ։ ͢ Δ ͔ બ ΂ Δ ( N e t l i f y )
  46. A g e n d a • What’s about JAMstack?

    • Why using it? • How to create • pros and cons
  47. J A M s t a c k ͳ α

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

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

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

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

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

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

    rd P re s s Λ ͭ ͔ ͏ ΂ ͖ ͳ ͷ ͔ ʁ
  55. W P Ϣʔ βʔ ͕ ຊ ౰ ʹ ཉ ͠

    ͍ ΋ ͷ
  56. Wo rd P re s s ͷ ؅ ཧ ը

    ໘ Λ ࢖ ͍ ͨ ͍ • ΞΫηγϏϦςΟ΍ଟݴޠʹ΋ରԠ • ϓϥάΠϯΛར༻֦ͨ͠ு΍ΧελϚΠζ͕༰қ • ੈքதͰ΋ͬͱ΋࢖͍ํ͕஌ΒΕ͍ͯΔ • ͢Ͱʹ͜ΕͰՔಇ͍ͯ͠Δέʔε΋গͳ͘ͳ͍
  57. ϑ ϩ ϯ τ Τ ϯ υ ͱ Ξ ϓ

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

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

    “The future will be better tomorrow.”
  60. #wcOsaka #GetShifter https://getshifter.io/