Developing with WordPress, The JAMstack way.

Slide 1

Slide 1 text

Ώ Δ ΍ ͔ ͳ ߹ ಉ W E B ษ ڧ ձ D e v e l o p i n g w i t h W o r d P r e s s , T h e J A M s t a c k w a y . #JP_Getshifter - WordPressͱJAMstackͰ޿͕ΔϑϩϯτΤϯυΤϯδχΞͷՄೳੑʹ͍ͭͯ -

Slide 2

Slide 2 text

#JP_Getshifter Shifter ͱ͸?

Slide 3

Slide 3 text

୭΋͕࢖͍׳ΕͨWordPressαΠτΛ อकෆཁͳελςΟοΫαΠτʹม׵͠  CDNͰެ։Ͱ͖ΔʮSaaSʯͰ͢ Shifter ͱ͸ʁ #JP_Getshifter

Slide 4

Slide 4 text

#JP_Getshifter

Slide 5

Slide 5 text

#JP_Getshifter WordPress ͱ͸?

Slide 6

Slide 6 text

M o s t p o p u l a r c o n t e n t m a n a g e m e n t s y s t e m s   s i n c e 1 D e c e m b e r 2 0 1 9 Usage Change Since 1 December 2019 Market Share Change Since 1 December 2019 1.WordPress 35.4% 0.3% 62.2% 0.4% 2.Joomla 2.6% -0.1% 4.6% -0.1% 3.Shopify 1.9% 0.1% 3.4% -0.2% #JP_Getshifter https://w3techs.com/

Slide 7

Slide 7 text

– ๭ α Π τ ੍ ࡞ ୅ ཧ ళ ͷ ੠ “ϝϯςφϯε΍ηΩϡϦςΟ͕໰୊ࢹ͞ΕΔ͕…  ։ൃऀͷϦιʔε΍ϊ΢ϋ΢ɺΤϯυ͔Βͷೲظ΍ίετΛߟ͑Δͱ… #JP_Getshifter

Slide 8

Slide 8 text

– ๭ ৘ ใ γε ςϜ ୲ ౰ ऀ ͷ ੠ “৘ใγε෦໳ͷࢹ఺Ͱ͸ϝϯςφϯε/ӡ༻͕ͭΒ͍͚Ͳ…  ୭Ͱ΋ίϯςϯπͷߋ৽͕Ͱ͖Δπʔϧ͸ඞཁ #JP_Getshifter

Slide 9

Slide 9 text

D X   ʢ D e v e l o p e r E x p e r i e n c e ʣ U X   ʢ U s e r E x p e r i e n c e ʣ #JP_Getshifter

Slide 10

Slide 10 text

– ๭ ϑ ϩ ϯ τ Τ ϯ δχ Ξ ͷ ੠ “WordPressҊ݅͸࢓ࣄͱͯ͠͸҆ఆ͍ͯ͠Δ͚Ͳ Ϟμϯͳٕज़Λ͔ͭͬͨWeb։ൃ΋͍ͨ͠ͳ͊ #JP_Getshifter

Slide 11

Slide 11 text

W o r d P r e s s α Π τ ͷ վ ͟Μ ඃ ֐ ͸ 1 5 0 ສ ݅ ௒ ʹ   ʮ ࠷ ѱ ڃ ͷ ੬ ऑ ੑ ʯ #JP_Getshifter

Slide 12

Slide 12 text

ɾ W o r d P r e s s C o r e ͷ Ξ οϓ σ ʔ τ ͕ ස ൟ ͢ ͗ ͯ େ ม   ɾ W o r d P r e s s P l u g i n ͷ ੬ ऑ ੑ ͕ ා ͍   ɾ W o r d P r e s s T h e m e s ͕ ෳ ࡶ Ͱ ࡞ ੒ ऀ ͠ ͔ ϝ ϯ ς ෆ ೳ ʹ ͳ Δ ɾ ί ϯ ς ϯ π ؅ ཧ ऀ ͱ W e b ։ ൃ ऀ ͷ ϫ ʔ Ϋ ϑ ϩ ʔ Λ ͖ Ε ͍ ʹ ෼ ཭ Ͱ ͖ ͳ ͍   ɾ ͦ ΋ ͦ ΋ … α ʔό ؅ ཧ ΍ P H P ΍ M y S Q L ͳ Ͳͷ ϛ υϧ ΢ Σ Ξ ͷ ؅ ཧ ͕ ͠ Μ Ͳ ͍ #JP_Getshifter

Slide 13

Slide 13 text

U X   ʢ U s e r E x p e r i e n c e ʣ D X   ʢ D e v e l o p e r E x p e r i e n c e ʣ #JP_Getshifter

Slide 14

Slide 14 text

ό ϥ ϯε ͷ ྑ ͍ બ ୒ ࢶ ͕ ཉ ͠ ͍ ! U X   ʢ U s e r E x p e r i e n c e ʣ D X   ʢ D e v e l o p e r E x p e r i e n c e ʣ #JP_Getshifter

Slide 15

Slide 15 text

#JP_Getshifter

Slide 16

Slide 16 text

#JP_Getshifter

Slide 17

Slide 17 text

#JP_Getshifter [ M i c r o S e r v i c e s ] [ M o n o l i t h i c ]

Slide 18

Slide 18 text

#JP_Getshifter

Slide 19

Slide 19 text

#JP_Getshifter

Slide 20

Slide 20 text

#JP_Getshifter

Slide 21

Slide 21 text

#JP_Getshifter

Slide 22

Slide 22 text

What’s the difference? Dynamic WordPress ! #JP_Getshifter

Slide 23

Slide 23 text

What’s the difference? Static WordPress ! #JP_Getshifter

Slide 24

Slide 24 text

#JP_Getshifter

Slide 25

Slide 25 text

S H I F T W O R D P R E S S T O S E R V E R L E S S

Slide 26

Slide 26 text

W o r d P r e s s ͷ ։ ൃ ͱ ӡ ༻ ମ ݧ Λ J A M s t a c k ϥ ΠΫ ʹ S h i f t ͢ Δ ɻ #JP_Getshifter

Slide 27

Slide 27 text

M a n a g e d H o s t i n g C D N B u i l d T o o l   ( S S G ) ➕ ➕ S a a S #JP_Getshifter

Slide 28

Slide 28 text

1.ϑϧϚωʔδυͷ WordPress ϗεςΟϯά  αʔόͷܖ໿ɾOS/ϛυϧ΢ΣΞͷઃఆ࡞ۀ͕ෆཁ  αʔόɾOS/ϛυϧ΢ΣΞͷϝϯςφϯεɾ؅ཧ͕ෆཁ  WordPressͷΠϯετʔϧ࡞ۀ͕ෆཁ  WordPressͷΞοϓσʔτ࡞ۀ͕ෆཁ 2.WordPress ʹಛԽͨ͠ SSGʢελςΟοΫαΠτδΣωϨʔλʔʣ  ୭΋͕࢖͍׳ΕͨWordPressμογϡϘʔυͰهࣄͷฤू͕Մೳ  WordPress Themes Ͱ։ൃ͕Մೳ  WordPress Plugins Λར༻Մೳ ※Ұ෦৚݅͋Γ 3.CDN ʹΑΔίϯςϯπ഑৴  ௒ߴ଎Ͱͷίϯςϯπ഑৴  ηΩϡΞ  ແݶͷεέʔϦϯά  ߴධՁͷSEOείΞʢWeb Performanceʣ #JP_Getshifter

Slide 29

Slide 29 text

#JP_Getshifter Shifter Showcase

Slide 30

Slide 30 text

#JP_Getshifter https://mikihouse-baby.mikihouse.com/

Slide 31

Slide 31 text

ShifterΛ࢖ͬͨଟݴޠαΠτԽ Ͱ࡞ۀͷ࣌ؒͱख͕ؒ൒෼ҎԼʹ    https://www.digitalcube.jp/ shiftercase/10626/ #JP_Getshifter

Slide 32

Slide 32 text

#JP_Getshifter https://event.businessinsider.jp/

Slide 33

Slide 33 text

#JP_Getshifter https://conference.mashingup.jp/

Slide 34

Slide 34 text

ShifterʹΑΔ՝୊ղܾʹΑΓɺ ຊདྷͷۀ຿ʹ஫ྗ͠ʮຊ࣭తͳΫϦ ΤΠςΟϒΛݟ௚ͤΔʯମ੍ʹ    https://www.digitalcube.jp/ shiftercase/10978/ #JP_Getshifter

Slide 35

Slide 35 text

#JP_Getshifter https://soracom.jp/

Slide 36

Slide 36 text

#JP_Getshifter https://smarthr.co.jp/

Slide 37

Slide 37 text

S h i f t e r ͷ Ϣ ʔεέ ʔε     Q . S h i f t e r ͸ W o r d P r e s s ͷ ۜ ͷ ஄ ؙ ʹ ͳ Γ · ͢ ͔ʁ   A . ࢒ ೦ ͳ ͕ Β ೉ ͠ ͍Ͱ ͢ɻ     - ࠷ ద ͳ έ ʔε ɿ   Πϕ ϯ τ ɾ Ω ϟϯϖʔϯ ɾ ϥ ϯ σΟ ϯ άϖʔ δ ɾ ί ʔ ϙ Ϩ ʔ ταΠ τ ͳ Ͳ - ෆ ޲ ͖ ͳ έ ʔε ɿ ί ϯ ς ϯ π ͷ ߋ ৽ ͕ ස ൟ ɾ ଟ ਓ ਺ Ͱ ར ༻ ͢ Δ ϝ σΟΞ ɾ ձ һ αΠ τ ͳ Ͳ #JP_Getshifter

Slide 38

Slide 38 text

https://smarthr.co.jp/ #JP_Getshifter https://showcase.getshifter.io/

Slide 39

Slide 39 text

W o r d P r e s s T h e m e s ͬͯ   P H P Ͱ ։ ൃ ͳ Μ ͩ Α Ͷ … #JP_Getshifter

Slide 40

Slide 40 text

H e a d l e s s W o r d P r e s s w i t h J A M s t a c k #JP_Getshifter

Slide 41

Slide 41 text

H o w i t w o r k s ? #JP_Getshifter

Slide 42

Slide 42 text

#JP_Getshifter https://www.getshifter.io/build-and-deploy-gatsby-sites-using-wordpress-shifter-netlify-and-github-actions/

Slide 43

Slide 43 text

#JP_Getshifter https://www.wpgraphql.com/

Slide 44

Slide 44 text

#JP_Getshifter

Slide 45

Slide 45 text

#JP_Getshifter https://github.com/wp-graphql/gatsby-wpgraphql-blog-example

Slide 46

Slide 46 text

/gatsby-config.js #JP_Getshifter

Slide 47

Slide 47 text

/.github/workflows/main.yml #JP_Getshifter

Slide 48

Slide 48 text

#JP_Getshifter

Slide 49

Slide 49 text

#JP_Getshifter

Slide 50

Slide 50 text

#JP_Getshifter https://www.getshifter.io/build-and-deploy-gatsby-sites-using-wordpress-shifter-netlify-and-github-actions/

Slide 51

Slide 51 text

https://getshifter.io/ Don’t waste another minute. Sign up for Shifter and let us do the heavy lifting.