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 #
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
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/