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にした自社サイトを Grids...
Search
Fumito Abe / necco
January 30, 2020
Programming
0
1k
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
1k
デザイン制作会社からみたShifter導入事例〜ミキハウスさんに取材に行ってきた話〜
abefumito
2
1.3k
小さな制作会社が小さくはじめるブランドづくり #sacss SaCSS Special25 : BRANDING SPECIAL(SaCSS vol.108)
abefumito
4
950
地方イベントでの 県外集客成功事例
abefumito
0
1.6k
WordPressとWooCommerce+Stripeで作る、グッズ・記事販売ができるECサイトの話 / jp-stripes-connect-2019-0321-abe
abefumito
0
3.2k
neccoチームのタスク管理 / CaT vol.5
abefumito
0
1.5k
Other Decks in Programming
See All in Programming
TypeScript LSP の今までとこれから
quramy
1
440
ワイがおすすめする新潟の食 / 20250530phpconf-niigata-eve
kasacchiful
0
290
テスト分析入門/Test Analysis Tutorial
goyoki
13
2.8k
Rails産でないDBを Railsに引っ越すHACK - Omotesando.rb #110
lnit
1
150
Passkeys for Java Developers
ynojima
2
770
プロダクト開発でも使おう 関数のオーバーロード
yoiwamoto
0
120
「兵法」から見る質とスピード
ickx
0
240
がんばりすぎないコーディングルール運用術
tsukakei
1
210
レガシーシステムの機能調査・開発におけるAI利活用
takuya_ohtonari
0
360
REST API設計の実践 – ベストプラクティスとその落とし穴
kentaroutakeda
2
350
Javaのルールをねじ曲げろ!禁断の操作とその代償から学ぶメタプログラミング入門 / A Guide to Metaprogramming: Lessons from Forbidden Techniques and Their Price
nrslib
2
1.9k
try-catchを使わないエラーハンドリング!? PHPでResult型の考え方を取り入れてみよう
kajitack
3
450
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.4k
Practical Orchestrator
shlominoach
188
11k
Into the Great Unknown - MozCon
thekraken
39
1.8k
Music & Morning Musume
bryan
47
6.6k
Unsuck your backbone
ammeep
671
58k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Rails Girls Zürich Keynote
gr2m
94
13k
Facilitating Awesome Meetings
lara
54
6.4k
The Cost Of JavaScript in 2023
addyosmani
49
8.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
The Cult of Friendly URLs
andyhume
78
6.4k
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! ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ