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
Shifter(WordPress)を Headless CMSにした自社サイトを Grids...
Search
Fumito Abe / necco
February 05, 2020
Technology
0
1k
Shifter(WordPress)を Headless CMSにした自社サイトを GridsomeとNetlifyで作ってる話 - Shifter Meetup Vol.8 / shifter-headlesscms-gridsome-netlify
Fumito Abe / necco
February 05, 2020
Tweet
Share
More Decks by Fumito Abe / necco
See All by Fumito Abe / necco
WordPress(Shifter)を Headless CMSにした自社サイトを GridsomeとNetlifyで作ってる話 / WordPress Shifter Gridsome Netlify
abefumito
0
1k
デザイン制作会社からみたShifter導入事例〜ミキハウスさんに取材に行ってきた話〜
abefumito
2
1.3k
小さな制作会社が小さくはじめるブランドづくり #sacss SaCSS Special25 : BRANDING SPECIAL(SaCSS vol.108)
abefumito
4
960
地方イベントでの 県外集客成功事例
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 Technology
See All in Technology
ゼロからはじめる採用広報
yutadayo
3
1k
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
shotatsuge
4
710
Contributing to Rails? Start with the Gems You Already Use
yahonda
2
120
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
180
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
6
600
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
3
210
Amplify Gen2から知るAWS CDK Toolkit Libraryの使い方/How to use the AWS CDK Toolkit Library as known from Amplify Gen2
fossamagna
0
150
AI エージェントと考え直すデータ基盤
na0
17
6.8k
ロールが細分化された組織でSREは何をするか?
tgidgd
1
160
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
270
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
4 Signs Your Business is Dying
shpigford
184
22k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
It's Worth the Effort
3n
185
28k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
GraphQLとの向き合い方2022年版
quramy
49
14k
Designing for Performance
lara
610
69k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
980
Automating Front-end Workflow
addyosmani
1370
200k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Transcript
Vol.8 Fumito Abe 2020.02.05 at Shibuya, Tokyo Shifter Meetup ShifterʢWordPressʣ
Λ Headless CMSʹͨࣗࣾ͠αΠτΛ GridsomeͱNetlifyͰ࡞ͬͯΔ
ࣗݾհ 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໊ 1໊ʢ
Πϯλʔϯ2໊ʣ 1໊ʢ ΞϧόΠτ1໊ʣ ߹ܭ໊ ळాΦϑΟε໊౦ژΦϑΟε໊
None
None
None
None
None
None
None
None
None
None
None
None
None
None
ຊ
Έͳ͞ΜͰ ͙͢࡞Ε·͢ʂ ࠓͷ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
ཧ
None
ݱ࣮
None
डୗ੍࡞ձࣾͰ ࣗࣾαΠτͪΌΜͱ ͯ͠Δਓଚܟ
γεςϜߏ
Webhooks→Import Headless CMS Vue.js Framework Build & Hosting Data Source
→
ېࢭࣄ߲
ͦͦ 4IJGUFS͚ͩͰ͍͍ΑͶʁ
Gridsome ͬͯΔਓʙʁ
(SJETPNFͬͯʁ
None
None
Vueϕʔεͷ'8ΛͬͯΈ͍ͨʂ ৽͍ٕ͠ज़ࣗͰࢼͯ͠νʔϜʹڞ༗ ੩త͔ͩΒͬͺΓಡΈࠐΈ͍ʂ WordPress + αͰ։ൃͷ෯Λ͍͛ͨ GraphQL? ྑ͍ײ͡ʹྑ͍Β͍͠w 1 2
3 4 5 ͳͥ8PSE1SFTTςʔϚͰͳ͘(SJETPNF
ίϯςϯπͱϑϩϯτ։ൃશ ϝϯόʔ͕ͲΜͲΜߋ৽ͯ͠ͳ͠ʂ ΤσΟλʔͱͯ͠ͷWordPressͦͷ·· ϩʔΧϧຊ൪ίϯςϯπৗʹಉظ JSSPAͷ։ൃٕज़্͕Ͱ͖Δ͔ʁ 1 2 3 4 5
ϑϩϯτ͕(SJETPNFͰ
ύϑΥʔϚϯεʁ
None
None
None
None
ͦͦ 4IJGUFS͚ͩͰ͍͍ΑͶʁ
4IJGUFSͰ ίϯςϯπΛߋ৽͠ ͨޙͷಈ͖ʁ
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
࠷ޙʹʂ 8PSE1SFTTςʔϚͷ ߹ͷσϓϩΠͰ ࣭͕͋Γ·͢ɻ
None
81ͷςʔϚ։ൃ࣌ͷ σϓϩΠͷࣗಈԽɾ ؆ུԽͰ͖·͔͢ʁ
None
Webhooks→Import Headless CMS Vue.js Framework Build & Hosting Data Source
→
TUZMFDTTͷόʔδϣϯΛΠϯΫϦϝϯτʢࣗಈՄʣ ݱࡏͷλάόʔδϣϯΛ֬ೝ (JUUBHMJTU HJUUBHYNBTUFS λά7FSੜ HJUQVTIPSJHJOY ࠷৽λάΛ164) ShifterͷWPμογϡϘʔυ͔ΒςʔϚߋ৽ 1 2
3 4 5 ݱঢ়ϦϞʔτϦϙδτϦͷ81ςʔϚΛ࠷৽ͰσϓϩΠ͢Δʹ
UBHQVTIͨ͠Βͦͷ··ɺࣗಈͰ 4IJGUFS্ཱ͕͕ͪΔ ࢦఆͨ͠όʔδϣϯΛऔಘͯ͠ల։ (FOFSBUF"SUJGBDU͢Δ ੩తϑΝΠϧΛσϓϩΠ͢Δ 1 2 3 4 5
͜͏ͳͬͯ΄͍͠
ͬͱ͍͏ͱͰ͖Ε
UBHͰ[JQϑΝΠϧͷੜΛ͠ͳ͍Ͱ (JUIVC্Ͱ13Λग़ͯ͠ .BTUFS#SBODIʹϚʔδͨ͠Β ࣗಈͰϚελʔͷ81ςʔϚ͕ө ͞Ε(FOFSBUF·ͰͰ͖·ͤΜ͔ʁ
ςʔϚ։ൃऀ͕4IJGUFSʹ ೖΒͳͯ͘࠷৽ͷςʔϚʹʂ (FOFSBUF͢Δඞཁ͕ͳ͘ͳΔ
%9%FWFMPQFS&YQFSJFODF͕ ര্͕Γʁ
Thank you! ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ