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
フロントエンジニアの戦闘力をエンパワメントするheadlessCMSという選択肢
Search
Takuya Takeda
November 18, 2023
1
47
フロントエンジニアの戦闘力をエンパワメントするheadlessCMSという選択肢
Takuya Takeda
November 18, 2023
Tweet
Share
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Producing Creativity
orderedlist
PRO
344
40k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
How to Ace a Technical Interview
jacobian
276
23k
Code Reviewing Like a Champion
maltzj
521
39k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Adopting Sorbet at Scale
ufuk
74
9.2k
A designer walks into a library…
pauljervisheath
205
24k
Git: the NoSQL Database
bkeepers
PRO
427
65k
Building an army of robots
kneath
303
45k
Transcript
2023/11/18 ϑϩϯτΤϯυΧϯϑΝϨϯεԭೄ2023 ϑϩϯτΤϯδχΞͷઓಆྗΛΤϯύϫ ϝϯτ͢ΔheadlessCMSͱ͍͏બࢶ
ϓϩϑΟʔϧ Name: Take • ԭೄݝࡏॅͷWebܥΤϯδχΞ • Ԭࢁݝग़ • ࠓϋϚ͍ͬͯΔͷ •
ౡݝ ҆ܳߴాࢢ ࢢٞձ • Twitter • @taketaku123 ΊΜͦʔΕͰ͍͟͝·͢ɻ
͜Μͳํʹ͚ͯ • WebαΠτʹɺཧ͞ΕͨίϯςϯπΛຒΊࠐΈ͍ͨ • ϑϩϯτΤϯυΤϯδχΞ • ӡ༻୲ऀ • Headless CMSΛͬͨ͜ͱ͕ͳ͍
ྫ͑ɺ͜Μͳͷ • Web ϖʔδͷϝλσʔλ • SEOOGP • ͓ΒͤɺهࣄɺFAQ(Α͋͘Δ࣭) • Topϖʔδͷจݴը૾
• ଟݴޠରԠ
WebαΠτΛߏங͢Δͱ͖ͷ ͜Μͳ՝ • ؆୯ʹσʔλϕʔεͱϞσϧΛఆٛͯ͠ɺαʔϏεӡ༻ऀʹσʔλೖ ྗͯ͠Β͍ɺͦͷσʔλΛऔಘͯ͠ɺWebαΠτʹө͍ͤͨ͞ • ਓҝతͳϛε͕ى͜Βͳ͍༷ʹɺೖྗʹ੍ݶΛઃ͚͍ͨ • ຊ൪༻͚ͩ͡Όͳ͘ɺݕূ༻ߟྀ͍ͨ͠ •
GraphQLͰσʔλΛऔಘ͍ͨ͠ • ͦΜͳʹ͓͔͚ۚ࣌ؒͨ͘ͳ͍
WebαΠτΛߏங͢Δͱ͖ͷ ͍ΖΜͳղܾ๏ • ϑϧεΫϥον։ൃ • ϊʔίʔυαʔϏε • Studio/Webflow/Notion • ϩʔίʔυαʔϏε
• Google Spreads Sheet ʴ Google App Script(GAS) • Airtable • Headless CMS ← ࠓճͪ͜Β
Headless CMSͱ
Headless CMSͱ APIΛհͯ͠ར༻Ͱ͖Δ ίϯςϯπཧγεςϜ
σʔλϕʔε ཧը໘ CMS ίϯςϯπཧऀ API
Headless CMSͷجຊػೳ ίΞͱͳΔ3ͭͷػೳ 1. Ϟσϧɾςʔϒϧઃܭ 2. σʔλೖྗ 3. ΫϥΠΞϯτΞϓϦ ͷΈࠐΈ
Headless CMSͷجຊػೳ ίΞͱͳΔ3ͭͷػೳ 1. Ϟσϧɾςʔϒϧઃܭ 2. σʔλೖྗ 3. ΫϥΠΞϯτΞϓϦ ͷΈࠐΈ
Headless CMSͷجຊػೳ 1. Ϟσϧઃܭɾςʔϒϧఆٛ - σʔλΛҙຯͷ͋Δ୯Ґʹ͢Δ͜ͱ͕Ͱ͖Δɻ (Contentful / visual modelertorͷػೳΑΓ)
CMSͷجຊػೳ 1. Ϟσϧઃܭɾςʔϒϧఆٛ - σʔλϑΟʔϧυ • Text/Number/Boolean • Media(Իɾը૾ɾಈը)
CMSͷجຊػೳ 1. Ϟσϧઃܭɾςʔϒϧఆٛ - σʔλϑΟʔϧυ • Text/Number/Boolean • Media(Իɾը૾ɾಈը) •
Rich Text (micro CMSΑΓ)
CMSͷجຊػೳ 1. Ϟσϧઃܭɾςʔϒϧఆٛ - σʔλϑΟʔϧυ • Text/Number/Boolean • Media(Իɾը૾ɾಈը) •
Rich Text • ؔ࿈͚(has_many, has_one, polymorphic)
Headless CMSͷجຊػೳ ίΞͱͳΔ3ͭͷػೳ 1. Ϟσϧɾςʔϒϧઃܭ 2. σʔλೖྗ 3. ΫϥΠΞϯτΞϓϦ ͷΈࠐΈ
Headless CMSͷجຊػೳ 2. σʔλೖྗ - ϞσϧఆٛΛݩʹσʔλΛೖྗͰ͖Δ ೖྗ੍ݶ • ඞਢೖྗ •
ϢχʔΫ੍ • ύλʔϯϚονϯά ͳͲ (Contentful ΑΓ)
Headless CMSͷجຊػೳ ίΞͱͳΔ3ͭͷػೳ 1. Ϟσϧɾςʔϒϧઃܭ 2. σʔλೖྗ 3. ΫϥΠΞϯτΞϓϦ ͷΈࠐΈ
Headless CMSͷઆ໌ 3. ΫϥΠΞϯτΞϓϦͷΈࠐΈ • ։ൃऀϑΝʔετʹαʔϏε͕ઃܭ͞Ε͍ͯΔ • REST API͚ͩͰͳ͘ɺGraphQlఏڙ͞Ε͍ͯΔ߹͕ଟ͍ •
SDKଟ͘ͷαʔϏεͰఏڙ͞Ε͍ͯΔ • ๛ͳΠϕϯτΛτϦΨʔʹWebhookΛઃ͚Δ͜ͱ͕Ͱ͖Δ • ։ൃڥɺݕূɺຊ൪༻ͳͲ։ൃͷ͕͢͠͞ߟྀ͞Ε͍ͯΔ • ແྉͷൣғͰग़དྷΔ͜ͱ͕ଟ͍ • SSG(Static Site Generation)ͱ૬ੑ͕Α͍
Headless CMSͲΜͳ࣌ʹ͑Δʁ(ࣄྫ)
Headless CMSͲΜͳ࣌ʹ͑Δʁ ΑΓෳࡶͳࣄྫ: 20Ҏ্ͷϩʔΧϧαΠτྔ࢈ཧγεςϜ ํαΠτA ʴಠࣗUI ϑΝΫτϦʔ ڞ௨UIίϯϙʔωϯτ Headless CMSʹΑΔ
ίϯςϯπ੍ޚ ํαΠτB ʴಠࣗUI ํαΠτC ʴಠࣗUI ํαΠτD ʴಠࣗUI Genenrate ෳͷαΠτʹލΔ ίϯςϯπͷจݴมߋ UIͷදࣔඇදࣔॱ൪ͷ੍ޚ
Headless CMS Ұཡ • Contentful • micro CMS ɾɾɾຊ •
hygraph • Kurokoɾɾɾຊ ͳͲ
͑ΔλΠϛϯά͕͋ͬͨΒͥͻͬͯΈ ͍ͯͩ͘͞