Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
WordPress(Shifter)を Headless CMSにした自社サイトを GridsomeとNetlifyで作ってる話 / WordPress Shifter Gridsome Netlify
Fumito Abe / necco
January 30, 2020
Programming
0
430
WordPress(Shifter)を Headless CMSにした自社サイトを GridsomeとNetlifyで作ってる話 / WordPress Shifter Gridsome Netlify
Fumito Abe / necco
January 30, 2020
Tweet
Share
More Decks by Fumito Abe / necco
See All by Fumito Abe / necco
abefumito
0
240
abefumito
2
380
abefumito
4
780
abefumito
0
980
abefumito
0
1.7k
abefumito
0
750
Other Decks in Programming
See All in Programming
manfredsteyer
PRO
0
160
manfredsteyer
PRO
0
240
ntaro
0
170
hayasshi
1
100
minamijoyo
3
520
ybrliiu
0
110
mihyaeru21
0
370
mizotake
2
330
aftiopk
0
140
takapdayon
0
180
kawaji_scratch
0
120
coa00
2
180
Featured
See All Featured
hatefulcrawdad
257
17k
pedronauck
652
110k
maggiecrowley
10
510
mojombo
359
62k
productmarketing
6
720
sstephenson
145
12k
mongodb
23
3.9k
tmm1
61
9.5k
moore
125
21k
reverentgeek
27
2k
marktimemedia
7
400
michaelherold
225
8.5k
Transcript
#1 Fumito Abe 2020.01.30 at Shibuya, Tokyo JAMSTACK Meetup WordPressʢShifterʣ
Λ Headless CMSʹͨࣗࣾ͠αΠτΛ GridsomeͱNetlifyͰ࡞ͬͯΔ
NJDSP$.4͞Μओ࠵ͷ.FFUVQͰ 8PSE1SFTTΛ)FBEMFTT $.4ʹͯ͢͠Έ·ͤΜʂ
ࣗݾհ About us 1
ΫϦΤΠςΟϒσΟϨΫλʔσβΠϯΤϯδχΞ Ѩ෦จਓ ౦ژࡏॅ౦ژग़ 201610݄ʹגࣜձࣾneccoΛۀɻ 4ظɺࣾһ5໊ Πϯλʔϯ2໊ɻ 20196݄౦ژΦϑΟεΛ։ઃ ೣ2ඖͱੜ׆ɻ ओʹϒϥϯυσβΠϯ੍࡞શମͷσΟϨΫγϣϯ͔Βઓུɺ 69ɾใઃܭɺ6*σβΠϯɺϑϩϯτΤϯυ࣮Λ୲ɻ
גࣜձࣾnecco @abefumito ɾWordCampͷొஃ2ճ ɾJAWS-UG Tohokuॴଐ ɾJP_Stripes AkitaӡӦ 2ճͦΖͦΖ ɾCSS Nite LP 64ొஃ දऔక
None
None
None
None
None
None
About Company ձࣾհ ϒϥϯυͮ͘Γͷ͓ख͍Λىʹ σβΠϯɹͱɹΣϒαΠτɹΛ ͍ͭͬͯ͘·͢
necco Members ϝϯόʔߏ ɾσΟϨΫλʔˍσβΠϯΤϯδχΞ ɾΤσΟλʔˍϑΥτάϥϑΝʔ ɾσβΠφʔ ɾΤϯδχΞ ɾΤϯδχΞࣾ֎ύʔτφʔ 1໊ 1໊
2໊ʢ Πϯλʔϯ1໊ʣ 2໊ 2໊
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
͝Γ͝Γͷ ΤϯδχΞͰͳ͍ͱ ࢥ͍·͢ɻ
https://riotz.works/articles/lulzneko/2019/12/24/first-website- with-shifter-webhooks-and-gridsome-on-netlify/ https://github.com/torounit/gridsome-shifter
None
None
None
None
None
None
None
Jamstack?
None
େ͖ͳಈ͖Λײ͡Δʂ໘നΣϒαΠτʹʂ ৽͍ٕ͠ज़ࣗͰࢼͯ͠νʔϜʹڞ༗ ͬͺΓಡΈࠐΈ͍ɺ҆શʁ WordPress + αͰ։ൃͷ෯Λ͍͛ͨ ৭ʑΈ߹ΘͤΔͷ͕͖ 1 2 3
4 5
Կ͕ྑ͘ͳΓͦ͏ʁ Jamstackʹ͢Δͱnecco
ίϯςϯπͱϑϩϯτ։ൃͷશ ϝϯόʔ͕ͲΜͲΜߋ৽ͯ͠ͳ͠ʂ ΤσΟλʔͱͯ͠ͷWordPressͦͷ·· ϩʔΧϧຊ൪ίϯςϯπৗʹಉظ JSSPAͷ։ൃٕज़্ʁ 1 2 3 4 5
Gridsome ͬͯΔਓʙʁ
Shifter ͬͯΔํʙʁ
γεςϜߏ
Webhooks→Import Headless CMS Vue.js Framework Build & Hosting Data Source
→
None
None
VueϕʔεΛͬͯΈ͍ͨʂ GraphQL? ྑ͍ײ͡ʹྑ͍Β͍͠w PWAͱ͔Serverless Appsͱ͔ʹઓ͍ͨ͠ʂ ·ͩ୭ͬͯͳͦ͞͏ʂ ίϛϡχςΟυϦϒϯˍৗʹվળ͕ 1 2 3
4 5
None
None
4IJGUFSͷத
ࣗಈͰWPΛ࠷৽ʹͯ͘͠ΕΔ Media CDNͰը૾Λϗετ Ϣʔβʔ͕ඞཁͳ͚࣌ͩWPىಈˠ҆શ WordPressϓϥάΠϯ͑Δ ίϛϡχςΟυϦϒϯˍৗʹվળ͕ 1 2 3 4
5
None
WebhooksͰ81 Shifter)Λσʔλιʔεʹʂ GridsomeΛShifter Webhooks͔ΒࣗಈϏϧυ 1 2
None
https://www.getshifter.io/build-and-deploy-gatsby-sites-using-wordpress-shifter-netlify-and-github-actions/
ShifterͷWordPressελʔτͯ͠ ͍Ζ͍Ζ63-ͱ͔ௐͯ͘͠Εͯ 3VO#VJMEͯ͘͠Εͯ ੩తϑΝΠϧΛ/FUMJGZ 8PSE1SFTTΛࢭΊͯ͘ΕΔ 1 2 3 4 5
GitlabͰϚʔδͨ͠Β ShifterΛىͯ͜͠ ݱσʔλιʔεͰ ϏϧυˍσϓϩΠͯ͘͠ΕΔ
Webhooks→Import Headless CMS Vue.js Framework Build & Hosting Data Source
→
͓ΘΓʹ
None
None
JAMstack JamstackͱҰ୯ޠʹʁ ˣ
ݴ༿͕ఆண͢Δͱ ͞Βʹ৳ͼΔ͔ʁ
https://riotz.works/articles/lulzneko/2019/12/24/first-website- with-shifter-webhooks-and-gridsome-on-netlify/ https://github.com/torounit/gridsome-shifter
Ҿ͖ଓ͖ ։ൃָ͠ΜͰ ެ։·Ͱ͕ΜΓ·͢ʂ
None
Thank you! ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ