Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Shifter(WordPress)を Headless CMSにした自社サイトを Grids...
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Fumito Abe / necco
February 05, 2020
Technology
1.1k
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Shifter(WordPress)を Headless CMSにした自社サイトを GridsomeとNetlifyで作ってる話 - Shifter Meetup Vol.8 / shifter-headlesscms-gridsome-netlify
Fumito Abe / necco
February 05, 2020
Transcript
74 slides
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! ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
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.2k
デザイン制作会社からみたShifter導入事例〜ミキハウスさんに取材に行ってきた話〜
abefumito
2
1.5k
小さな制作会社が小さくはじめるブランドづくり #sacss SaCSS Special25 : BRANDING SPECIAL(SaCSS vol.108)
abefumito
4
1k
地方イベントでの 県外集客成功事例
abefumito
0
1.9k
WordPressとWooCommerce+Stripeで作る、グッズ・記事販売ができるECサイトの話 / jp-stripes-connect-2019-0321-abe
abefumito
0
3.8k
neccoチームのタスク管理 / CaT vol.5
abefumito
0
1.7k
Other Decks in Technology
See All in Technology
変更差分を読むために環境を整備しよう
pipepasta
1
330
人間+AIを「チーム」としてプロセスを再設計する
littlehands
4
2.9k
農夫は秘伝のタレを知らない - NOBODY KNOWS THE HIDDEN SOURCE - Kaggriculture 3rd Place Solution
masspeaks
0
330
Agent Harnessはどう作る?事例から学ぶAI Agentの設計思想
sergicalsix
0
310
SSFの現在地 ― CAEP/RISCからAI Identityへ
oidfj
0
440
さようならSSH鍵、こんにちはゼロトラスト ― AIフレンドリーで快適な自宅鯖SSH
atalie2m
2
350
Gov-JAWS#9 統合監視機能のマネージドサービス化+AIによる障害時自動調査
fj_yoshimura_kosuke
0
110
大江戸Ruby会議でデータベース クライアントの話をするのは 間違っているだろうか
yahonda
1
130
Kiro CLI 入門 (ターミナルと CI で使う) | 目指せ Kiro マスター 03
inariku
PRO
2
150
Bots in Kiro Crew (One point of contact for ongoing work) | Kiro: Zero to Hero 12
inariku
PRO
1
140
「AIチャットからもできないの?」と言われたら ~業務アプリをMCP対応するときの認証・認可の勘所
oidfj
0
330
Kiro Web 入門 (サインインから、頼み方、PR の受け取り、クラウドの決まりまで) | 目指せ Kiro マスター 04
inariku
PRO
2
120
Featured
See All Featured
The SEO Collaboration Effect
kristinabergwall1
1
620
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
28
3.8k
Done Done
chrislema
187
17k
Deep Space Network (abreviated)
tonyrice
0
420
Java REST API Framework Comparison - PWX 2021
mraible
34
9.8k
Faster Mobile Websites
deanohume
310
32k
Designing for Timeless Needs
cassininazir
1
560
Typedesign – Prime Four
hannesfritz
42
3.2k
[SF Ruby Conf 2025] Rails X
palkan
3
1.5k
Raft: Consensus for Rubyists
vanstee
143
7.9k
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
2
3k
Learning to Love Humans: Emotional Interface Design
aarron
275
41k