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
970
地方イベントでの 県外集客成功事例
abefumito
0
1.7k
WordPressとWooCommerce+Stripeで作る、グッズ・記事販売ができるECサイトの話 / jp-stripes-connect-2019-0321-abe
abefumito
0
3.3k
neccoチームのタスク管理 / CaT vol.5
abefumito
0
1.6k
Other Decks in Technology
See All in Technology
Geospatialの世界最前線を探る [2025年版]
dayjournal
1
220
速習AGENTS.md:5分で精度を上げる "3ブロック" テンプレ
ismk
6
1.5k
ComposeではないコードをCompose化する case ビズリーチ / DroidKaigi 2025 koyasai
visional_engineering_and_design
0
110
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
200
Codexとも仲良く。CodeRabbit CLIの紹介
moongift
PRO
0
210
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
710
2025-10-09_プロジェクトマネージャーAIチャンス
taukami
0
140
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.5k
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
4
450
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
CoRL 2025 Survey
harukiabe
1
200
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
2
640
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
The Cost Of JavaScript in 2023
addyosmani
55
9k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Agile that works and the tools we love
rasmusluckow
331
21k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Speed Design
sergeychernyshev
32
1.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
GitHub's CSS Performance
jonrohan
1032
470k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Code Review Best Practice
trishagee
72
19k
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! ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ