Getting Started JAMstack Based WordPress / wordcamp-osaka-2019

by Hidetaka Okamoto

Slide 1

Slide 1 text

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 #

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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) ͕͋Δɻ

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

ͭ · Γ Ͳ ͏ ͍ ͏ ͜ ͱ ʁ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Ϧ μΠ Ϩ Ϋ τ ͷ ྫ 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(); } } }

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

•Wo rd P re s s . c o m •ແ ྉ ͔ Β ར ༻ Մ ೳ •W P A P I + . c o m A P I •্ Ґ ϓ ϥϯ Ҏ ֎ ͸   ϓ ϥ άΠ ϯ / ς ʔϚ ʹ ੍ ݶ ͋ Γ

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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 / ਎ۙͳཔΕΔਓͳͲͰબఆ͢Ε͹Α͍

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

G a t s b y ͷ ৔ ߹

Slide 36

Slide 36 text

•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 Λ   α ʔόʔ ʹ Ξ οϓ ϩ ʔ υ

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

G r a p h Q L Ͱ Π ϯ ϙ ʔ τ • औಘ͍ͨ͠σʔλ͚ͩΛࢦఆ • GraphQLεΩʔϚ͸  GatbyϓϥάΠϯ࣍ୈ • ΫΤϦͯ͠ಛఆίϯςϯπऔಘ౳΋

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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/

Slide 43

Slide 43 text

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 ͷ Ϗ ϧ υ ࣮ ߦ •ϑ ο Ϋ Λ ࢖ ͬͯ   Χ ε λ ϚΠ ζ Մ ೳ

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

W P Ϣʔ βʔ ͕ ຊ ౰ ʹ ཉ ͠ ͍ ΋ ͷ

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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