Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WordPress(Shifter)を Headless CMSにした自社サイトを GridsomeとNetlifyで作ってる話 / WordPress Shifter Gridsome Netlify
Search
Fumito Abe / necco
January 30, 2020
Programming
0
910
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
Shifter(WordPress)を Headless CMSにした自社サイトを GridsomeとNetlifyで作ってる話 - Shifter Meetup Vol.8 / shifter-headlesscms-gridsome-netlify
abefumito
0
880
デザイン制作会社からみたShifter導入事例〜ミキハウスさんに取材に行ってきた話〜
abefumito
2
1.1k
小さな制作会社が小さくはじめるブランドづくり #sacss SaCSS Special25 : BRANDING SPECIAL(SaCSS vol.108)
abefumito
4
910
地方イベントでの 県外集客成功事例
abefumito
0
1.5k
WordPressとWooCommerce+Stripeで作る、グッズ・記事販売ができるECサイトの話 / jp-stripes-connect-2019-0321-abe
abefumito
0
2.8k
neccoチームのタスク管理 / CaT vol.5
abefumito
0
1.3k
Other Decks in Programming
See All in Programming
CSC307 Lecture 07
javiergs
PRO
0
220
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
今こそ始める、CDKコンストラクトライブラリ開発 ― 入門から実践まで
tmokmss
1
930
CSC307 Lecture 13
javiergs
PRO
0
150
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
Android開発者のための Kotlin Multiplatform入門
ntaro
0
190
CSC307 Lecture 09
javiergs
PRO
1
500
Trial
cairolibrary720
1
130
CSC307 Lecture 10
javiergs
PRO
0
310
スクラムマスターって孤独じゃないですか?
yoshitaroyoyo
1
140
Featured
See All Featured
Clear Off the Table
cherdarchuk
89
320k
The Invisible Customer
myddelton
117
13k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Building an army of robots
kneath
301
42k
Teambox: Starting and Learning
jrom
130
8.6k
Designing with Data
zakiwarfel
96
5k
GitHub's CSS Performance
jonrohan
1026
450k
Being A Developer After 40
akosma
72
580k
In The Pink: A Labor of Love
frogandcode
139
22k
Ruby is Unlike a Banana
tanoku
96
10k
How GitHub Uses GitHub to Build GitHub
holman
471
290k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
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! ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ