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
1.1k
デザイン制作会社からみたShifter導入事例〜ミキハウスさんに取材に行ってきた話〜
abefumito
2
1.3k
小さな制作会社が小さくはじめるブランドづくり #sacss SaCSS Special25 : BRANDING SPECIAL(SaCSS vol.108)
abefumito
4
960
地方イベントでの 県外集客成功事例
abefumito
0
1.7k
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
スプリントレビューを効果的にするために
miholovesq
9
1.6k
少人数でも回る! DevinとPlaybookで支える運用改善
ishikawa_pro
1
150
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
shinyorke
PRO
0
230
経験がないことを言い訳にしない、 AI時代の他領域への染み出し方
parayama0625
0
130
Semantic Machine Intelligence for Vision, Language, and Actions
keio_smilab
PRO
2
390
大規模組織にAIエージェントを迅速に導入するためのセキュリティの勘所 / AI agents for large-scale organizations
i35_267
6
220
OpenTelemetry の Log を使いこなそう
biwashi
4
980
地図と生成AI
nakasho
0
690
claude codeでPrompt Engineering
iori0311
0
430
CSPヘッダー導入で実現するWebサイトの多層防御:今すぐ試せる設定例と運用知見
llamakko
1
180
AI エンジニアの立場からみた、AI コーディング時代の開発の品質向上の取り組みと妄想
soh9834
6
240
AI工学特論: MLOps・継続的評価
asei
10
1.5k
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
337
57k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Music & Morning Musume
bryan
46
6.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
370
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Code Review Best Practice
trishagee
69
19k
What's in a price? How to price your products and services
michaelherold
246
12k
RailsConf 2023
tenderlove
30
1.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
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! ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ