フロントエンジニアの戦闘力をエンパワメントするheadlessCMSという選択肢

Transcript

1. 2023/11/18 ϑϩϯτΤϯυΧϯϑΝϨϯεԭೄ2023 ϑϩϯτΤϯδχΞͷઓಆྗΛΤϯύϫ ϝϯτ͢ΔheadlessCMSͱ͍͏બ୒ࢶ
2. ϓϩϑΟʔϧ Name: Take • ԭೄݝࡏॅͷWebܥΤϯδχΞ • Ԭࢁݝग़਎ • ࠓϋϚ͍ͬͯΔ΋ͷ͸ • ޿ౡݝ ҆ܳߴాࢢ ࢢٞձ • Twitter • @taketaku123 ΊΜͦʔΕͰ͍͟͝·͢ɻ
3. ͜Μͳํʹ޲͚ͯ • WebαΠτʹɺ؅ཧ͞ΕͨίϯςϯπΛຒΊࠐΈ͍ͨ • ϑϩϯτΤϯυΤϯδχΞ • ӡ༻୲౰ऀ • Headless CMSΛ࢖ͬͨ͜ͱ͕ͳ͍
4. ྫ͑͹ɺ͜Μͳ΋ͷ • Web ϖʔδͷϝλσʔλ • SEO΍OGP • ͓஌ΒͤɺهࣄɺFAQ(Α͋͘Δ࣭໰) • Topϖʔδͷจݴ΍ը૾ • ଟݴޠରԠ
5. WebαΠτΛߏங͢Δͱ͖ͷ ͜Μͳ՝୊ • ؆୯ʹσʔλϕʔεͱϞσϧΛఆٛͯ͠ɺαʔϏεӡ༻ऀʹσʔλೖ ྗͯ͠΋Β͍ɺͦͷσʔλΛऔಘͯ͠ɺWebαΠτʹ൓ө͍ͤͨ͞ • ਓҝతͳϛε͕ى͜Βͳ͍༷ʹɺೖྗʹ੍ݶΛઃ͚͍ͨ • ຊ൪༻͚ͩ͡Όͳ͘ɺݕূ༻΋ߟྀ͍ͨ͠ • GraphQLͰσʔλΛऔಘ͍ͨ͠ • ͦΜͳʹ͓ۚ΋࣌ؒ΋͔͚ͨ͘ͳ͍
6. WebαΠτΛߏங͢Δͱ͖ͷ ͍ΖΜͳղܾ๏ • ϑϧεΫϥον։ൃ • ϊʔίʔυαʔϏε • Studio/Webflow/Notion • ϩʔίʔυαʔϏε • Google Spreads Sheet ʴ Google App Script(GAS) • Airtable • Headless CMS ← ࠓճ͸ͪ͜Β
7. Headless CMSͱ͸
8. Headless CMSͱ͸ APIΛհͯ͠ར༻Ͱ͖Δ ίϯςϯπ؅ཧγεςϜ
9. σʔλϕʔε ؅ཧը໘ CMS ίϯςϯπ؅ཧऀ API
10. Headless CMSͷجຊػೳ ίΞͱͳΔ3ͭͷػೳ 1. Ϟσϧɾςʔϒϧઃܭ 2. σʔλೖྗ 3. ΫϥΠΞϯτΞϓϦ΁ ͷ૊ΈࠐΈ
11. Headless CMSͷجຊػೳ ίΞͱͳΔ3ͭͷػೳ 1. Ϟσϧɾςʔϒϧઃܭ 2. σʔλೖྗ 3. ΫϥΠΞϯτΞϓϦ΁ ͷ૊ΈࠐΈ
12. Headless CMSͷجຊػೳ 1. Ϟσϧઃܭɾςʔϒϧఆٛ - σʔλΛҙຯͷ͋Δ୯Ґʹ͢Δ͜ͱ͕Ͱ͖Δɻ (Contentful / visual modelertorͷػೳΑΓ)
13. CMSͷجຊػೳ 1. Ϟσϧઃܭɾςʔϒϧఆٛ - σʔλϑΟʔϧυ • Text/Number/Boolean • Media(Ի੠ɾը૾ɾಈը)
14. CMSͷجຊػೳ 1. Ϟσϧઃܭɾςʔϒϧఆٛ - σʔλϑΟʔϧυ • Text/Number/Boolean • Media(Ի੠ɾը૾ɾಈը) • Rich Text (micro CMSΑΓ)
15. CMSͷجຊػೳ 1. Ϟσϧઃܭɾςʔϒϧఆٛ - σʔλϑΟʔϧυ • Text/Number/Boolean • Media(Ի੠ɾը૾ɾಈը) • Rich Text • ؔ࿈෇͚(has_many, has_one, polymorphic)
16. Headless CMSͷجຊػೳ ίΞͱͳΔ3ͭͷػೳ 1. Ϟσϧɾςʔϒϧઃܭ 2. σʔλೖྗ 3. ΫϥΠΞϯτΞϓϦ΁ ͷ૊ΈࠐΈ
17. Headless CMSͷجຊػೳ 2. σʔλೖྗ - ϞσϧఆٛΛݩʹσʔλΛೖྗͰ͖Δ ೖྗ੍ݶ • ඞਢೖྗ • ϢχʔΫ੍໿ • ύλʔϯϚονϯά ͳͲ (Contentful ΑΓ)
18. Headless CMSͷجຊػೳ ίΞͱͳΔ3ͭͷػೳ 1. Ϟσϧɾςʔϒϧઃܭ 2. σʔλೖྗ 3. ΫϥΠΞϯτΞϓϦ΁ ͷ૊ΈࠐΈ
19. Headless CMSͷઆ໌ 3. ΫϥΠΞϯτΞϓϦ΁ͷ૊ΈࠐΈ • ։ൃऀϑΝʔετʹαʔϏε͕ઃܭ͞Ε͍ͯΔ • REST API͚ͩͰͳ͘ɺGraphQl΋ఏڙ͞Ε͍ͯΔ৔߹͕ଟ͍ • SDK΋ଟ͘ͷαʔϏεͰఏڙ͞Ε͍ͯΔ • ๛෋ͳΠϕϯτΛτϦΨʔʹWebhookΛઃ͚Δ͜ͱ͕Ͱ͖Δ • ։ൃ؀ڥɺݕূɺຊ൪༻ͳͲ։ൃͷ͠΍͕͢͞ߟྀ͞Ε͍ͯΔ • ແྉͷൣғͰग़དྷΔ͜ͱ͕ଟ͍ • SSG(Static Site Generation)ͱ૬ੑ͕Α͍
20. Headless CMS͸ͲΜͳ࣌ʹ࢖͑Δʁ(ࣄྫ)
21. Headless CMS͸ͲΜͳ࣌ʹ࢖͑Δʁ ΑΓෳࡶͳࣄྫ: 20Ҏ্ͷϩʔΧϧαΠτྔ࢈؅ཧγεςϜ ஍ํαΠτA ʴಠࣗUI ϑΝΫτϦʔ ڞ௨UIίϯϙʔωϯτ Headless CMSʹΑΔ ίϯςϯπ੍ޚ ஍ํαΠτB ʴಠࣗUI ஍ํαΠτC ʴಠࣗUI ஍ํαΠτD ʴಠࣗUI Genenrate ෳ਺ͷαΠτʹލΔ ίϯςϯπͷจݴมߋ UIͷදࣔඇදࣔ΍ॱ൪ͷ੍ޚ
22. Headless CMS Ұཡ • Contentful • micro CMS ɾɾɾ೔ຊ੡ • hygraph • Kurokoɾɾɾ೔ຊ੡ ͳͲ
23. ࢖͑ΔλΠϛϯά͕͋ͬͨΒͥͻ࢖ͬͯΈ ͍ͯͩ͘͞