Data APIを活用したWEBサイト構築手法

Transcript

1. ʢۚʣ %BUB
   "1*Λ׆༻ͨ͠8&#αΠτߏஙख๏ ʲ.5౦ژʳ%BUB
   "1*
   
2. Who are you MyProfile : { Name : ‘ؔޱ ༐थ‘, Belongs : ‘גࣜձࣾHAMWORKS ϑϩϯτΤϯυΤϯδχΞ’, Live : ‘ࡳຈ’, Ages : [35, ‘೥உ’], HistoryMT : ’11೥’, FavoriteMTML : ‘<mt:SetVarTemplate></mt:SetVarTemplate>’, MyMTPlugins : [ ‘MarkdownItField’, ’NetlifyBuildHooks’, ‘DataAPIResponseOutput’], FavoriteMusic : ‘SIAM SHADE’, Hobby : ‘ԂܳɾDIY’, Hashtag : [‘#ԂδχΞ’, ‘#ԂܳΤϯδχΞ’] Book : ‘ϓϩϑΣογϣφϧWebϓϩάϥϛϯά Vue.js', WebSite : ‘https://www.redamoon.net/’, Social : { Github : ‘redamoon’, Twitter : ‘@redamoon’, Instagram : ‘@redamoon’ } }
3. Who are you Movable Typeͱͷग़ձ͍ ʙ ઌ૆͕ોͬͨ ʙ
4. Who are you js workshop sapporo ࡳຈͰJavaScriptʹϑΥʔΧεͨ͠ϋϯζΦϯܗࣜͰษڧձΛओ࠵ ※ෆఆظͰ͸͋Γ·͕͢ɺݱࡏ͸ίϩφӔͷͨΊΦϯϥΠϯʹͯ։࠵Λߦ͍ͬͯ·͢ɻ https://js-workshop-sapporo.connpass.com/
5. "HFOEB • ࡢࠓͷϑϩϯτΤϯυ։ൃࣄ৘ • MovableType ͷ Data APIʹ͍ͭͯ • Data API Λ׆༻ͨ͠ Jamstack ͳ։ൃϫʔΫϑϩʔ • ·ͱΊ
6. ࡢࠓͷϑϩϯτΤϯυ։ൃࣄ৘
7. ੈ͸
   +BWB4DSJQU5ZQF4DSJQU
   ઓࠃ࣌୅
8. React/Vue.js/Svelte ʢϑϨʔϜϫʔΫʣΛ༻͍ͨߏங΍TypeScriptͷ৘ใ͕ଟ͘ͳΓ·ͨ͠ɻ ·ͨɺHeadless CMS΍CI/ςετ/GitͳͲͷπʔϧ΋ॆ࣮ ੈ͸
   +BWB4DSJQU5ZQF4DSJQU
   ઓࠃ࣌୅ ͦͷഎܠʹʜ ɾECMAScriptͷຖ೥ߦ͏ػೳΞοϓσʔτ ɾϑϨʔϜϫʔΫͷػೳॆ࣮ ɾHeadless CMS ɾJamstackͱݺ͹ΕΔߏஙख๏ ※SSG/ISR ɾAPIͱදࣔͷ෼཭ ɾCI / ςετ / Git ɾTypeScriptΛ༻͍Δ͜ͱͰΑΓݎ࿚ͳίʔυ
9. &$."4DSJQUͷຖ೥ߦ͏ػೳΞοϓσʔτ ECMAScript͸Ecma Internationalͱ͍͏ஂମʹΑͬͯJavaScriptͷجຊ෦෼ͷ࢓༷ΛఆΊͯΔ ECMAScript ES2015͔Βຖ೥ΞοϓσʔτΛߦ͍ͬͯΔͨΊɺ ਺೥લʹ࣮૷͞Ε͍ͯͳ͔ͬͨػೳ͕࣮૷͞Ε͍ͯΔ https://www.ecma-international.org/news/ecma-international-approves-new-standards-4/ ઌ೔ES2021΋ਖ਼ࣜ࢓༷ʹͳΓ·ͨ͠
10. ϑϨʔϜϫʔΫͷػೳॆ࣮ ػೳڧԽ΍όάϑΟοΫε͕සൟʹߦΘΕ͍ͯΔ ΦʔϓϯιʔεͰͩΕͰ΋ར༻ՄೳͳͨΊ৘ใ΋ଟ͍ ΄͔ʹ΋ϑϨʔϜϫʔΫ͸ଟ਺ jQueryશ੝ظͷࠒ͕ջ͔͍͠
11. )FBEMFTT
    $.4 ࡢࠓɺٸ଎ʹಋೖࣄྫ͕ଟ͘ͳͬͨHeadless CMS ैདྷͷCMSʹ͸ඞͣ͋ΔςϯϓϨʔτͱ͍ͬͨ֓೦͕ͳ͘ɺఏڙ͞ΕΔͷ͸ొ࿥ͨ͠σʔλͷAPIͷΈ
12. +BNTUBDLͱݺ͹ΕΔߏஙख๏
    ˞44(*43 APIͷૄ௨ΛϏϧυ࣌ʹͷΈݶఆͰɺ੩తͳHTMLΛ഑৴ɾΩϟογϡΛར༻ͨ͠ख๏
13. +BNTUBDLͱݺ͹ΕΔߏஙख๏
    ˞44(*43 ࠶ར༻ՄೳͳAPI ΫϥΠΞϯταΠυ JavaScript ࣄલʹϏϧυ͞Εͨ Markup APIͱදࣔΛ෼཭ͯ͠੩తʹॻ͖ग़͢ΞʔΩςΫνϟʢߏஙख๏ʣ
14. "1*ͱදࣔͷ෼཭ CMSαʔό WEBαʔό Database API Template CMS Image/File CSS JavaScript HTML ैདྷͷCMSߏ੒ CMS؅ཧ͍ͯ͠ΔςϯϓϨʔτ࢖͍ɺWebαʔό΁഑৴/ಉҰᝑମͷυΩϡϝϯτϧʔτͰ؅ཧ
15. "1*ͱදࣔͷ෼཭ Headless CMS Storage/Vercel etc API CMS Image/File CSS JavaScript HTML Headless CMSߏ੒ σʔλΛCMSͰ؅ཧ͠ߋ৽͝ͱʹCI্ͰϏϧυΛߦ͍ϗεςΟϯάઌͱͯ͠S3΍VercelΛར༻ Git/CI Template (static generator)
16. $*
    
    ςετ
    
    (JU CIʢܧଓతΠϯςάϨʔγϣϯʣ ιϑτ΢ΣΞ։ൃʹ͓͍ͯ୹ظؒͰ඼࣭؅ཧΛߦ͏ख๏Ͱ ςετ΍ϏϧυͳͲଟ͘ͷ࡞ۀΛࣗಈԽͯ͘͠Ε·͢ɻ Circle CI / droneͱ͍ͬͨαʔϏεʙΠϯετʔϧܕ·Ͱଟ਺
17. $*
    
    ςετ
    
    (JU ୯ମςετɾE2EςετͷࣗಈԽ
18. $*
    
    ςετ
    
    (JU GitͰιʔείʔυͷόʔδϣϯ؅ཧ ϓϧϦΫΤετͳͲΛߦ͍ɺػೳ֦ுͳͲΘ͔Γ΍͘͢ӡ༻
19. 5ZQF4DSJQUΛ༻͍Δ͜ͱͰΑΓݎ࿚ͳίʔυ TypeScriptͰJavaScriptʹ͸ͳ͍ܕͷ͋Δݎ࿚ͳίʔυΛߏங
20. +40/৭෇͚܎ͷϑϩϯτΤϯυΤϯδχΞͩͬͨͷʹʜ
21. ϑϩϯτΤϯυ΍Δ͜ͱଟ͗͢͡Όͳ͍ʁ
    ͜ΕҎ֎΋·ͩ͋Γ·͕͢ʜ ※࡞ըɿฐࣾ௕ᖒ࡞ @nagasawaaaa
22. ΍Δ͜ͱ͕ଟ͍ɾ৘ใ͕ૣ͍ϑϩϯτΤϯυ
    Ͱ΋൧৯΂͍ͯͨ͘Ίʹ௥͍͔ͬͯͳ͚Ε͹͍͚ͳ͍ɻ
23. ͋Εʁ.PWBCMF
    5ZQF
    ʹ΋
    %BUB
    "1*͋Δ͔Β
    )FBEMFTT
    $.4ߏ੒Ͱ΍͍͚ͬͯΔΜ͡Όͳ͍ʁ
24. Movable Type͸ϋΠΤϯυσϕϩούʔʹ͍͓ۙ٬༷ʹར༻͍͖͍ͯͨͩͨ͠ͱࢥ͍ͬͯ·͢͠ɺ ֎෦APIͷմͷΑ͏ʹ͍ͨ͠Ͱ͢ɻ Ϣʔβʔͱͯ͠΋ɺMovable Typeͷ֦ு΍ϓϥάΠϯπʔϧΛ࡞ΔͳͲɺػೳ௥ՃΛ͢Δ͜ͱΛָ ͠Ήਓ͕ଟ͍Ͱ͢ɻ γοΫεɾΞύʔτ CTO ฏా େ࣏ ࢀߟϦϯΫɿhttps://enterprise.watch.impress.co.jp/cda/web2/2006/01/06/6940.html هࣄɿ2006೥
25. ೥ɾɾɾɾ
    $.4͸"1*ͷմʹͳͬͯɺ$.4
    
    ʓʓͷ࿈ܞͳ࣌୅ ※ฏా͞Μ͸ɺλΠϜτϥϕϥʔͳͷ͔ͳɾɾɾ 🤔
26. ࣋ͬͯΔ஌ࣝʢ.PWBCMF5ZQFʣΛ׆͔ͭͭ͠ɺ
    ࠓͷτϨϯυʹ߹Θ͍͖͍ͤͯͨ
    ΤϯδχΞر๬ 🙏
27. .PWBCMF5ZQF
    ͷ
    %BUB
    "1*ʹ͍ͭͯ
28. %BUB
    "1*ͱ͸ʁ
29. %BUB
    "1*ͱ͸ʁ APIʢWebAPIʣͱ͸ʁ Application Programming InterfaceͷུʹͳΓ·͢ɻ ΞϓϦέʔγϣϯΛϓϩάϥϜ͢ΔͨΊʹͭͳ͙ͨΊͷ΋ͷͰɺଞͷϓϩάϥϜ͔Βऔಘ/ߋ৽Λߦ͑Δ
30. • 2013೥Movable Type 6͔Β౥ࡌ͞Εͨػೳ • REST/JSONํࣜͰσʔλߋ৽ɾ࡟আɾऔಘ͕Մೳ • WebαΠτҎ֎Ͱͷσʔλ׆༻͕Մೳ %BUB
    "1*ͱ͸ʁ https://www.movabletype.jp/developers/data-api/v4-reference.html
31. %BUB
    "1*ͱ͸ʁ https://my.XXX.com/[mt_directory]/mt-data-api.cgi/v4/sites/[site_id]/entries ※Movable Type؅ཧը໘ͰData APIΛ༗ޮ 1. ϒϥ΢β΍ΫϥΠΞϯτιϑτͰΤϯυϙΠϯτΛୟ͘ 2. Movable TypeͰొ࿥ͨ͠σʔλͷϨεϙϯεΛऔಘ ※GETͷ৔߹
32. %BUB
    "1*ͱ͸ʁ https://my.XXX.com/[mt_directory]/mt-data-api.cgi/v4/sites/[siteid]/entries [mt_directory]ɿMovable Typeຊମ͕Πϯετʔϧ͞Ε͍ͯΔύε [siteid]ɿ؅ཧը໘ͷαΠτʹΞΫηεͨ͠ࡍɺURLʹ෇༩͞Ε͍ͯΔύϥϝʔλͷblog_idΛࢀর ΤϯυϙΠϯτɿهࣄҰཡͷऔಘྫ
33. %BUB
    "1*ͱ͸ʁ https://my.XXX.com/[mt_directory]/mt-data-api.cgi/v4/sites/[siteid]/categories/ [category_id]/entries ΤϯυϙΠϯτɿಛఆͷΧςΰϦIDͰهࣄҰཡΛऔಘ͢Δ ಛఆͷΧςΰϦͷΈͷهࣄҰཡΛநग़
34. %BUB
    "1*ͱ͸ʁ https://my.XXX.com/[mt_directory]/mt-data-api.cgi/v4/sites/[siteid]/ contentTypes/[content_type_id]/data ΤϯυϙΠϯτɿίϯςϯπλΠϓͷσʔλҰཡऔಘ ίϯςϯπλΠϓͷσʔλҰཡΛநग़
35. %BUB
    "1*ͱ͸ʁ https://my.XXX.com/[mt_directory]/mt-data-api.cgi/v4/sites/[siteid]/ contentTypes/[content_type_id]/data/[content_id]fileds?limit=1&fields=data ΤϯυϙΠϯτɿύϥϝʔλ͋Γ ಛఆͷίϯςϯπλΠϓͷσʔλΛࢦఆ׌ͭ݅਺1݅ͱಛఆͷϑΟʔϧυΛநग़
36. %BUB
    "1*ͱ͸ʁ Data APIΤϯυϙΠϯτͷ໰୊ ɾMovable Type ͷઃܭ্ IDϕʔεͷίϯςϯπ؅ཧͷͨΊΤϯυϙΠϯτͷΞΫηεํ๏͸ID͕ඞཁ ɾIDΛௐ΂Δखஈ͸ɺ؅ཧը໘ʹΞΫηεͯ͠URLΛࢀর͠ͳ͚Ε͹ͳΒͳ͍ ɾϏϧυ͢ΔࡍʹIDΛؚΊͨύεੜ੒࣌͸จࣈྻʹม׵͕ඞཁ
37. ϚϧνϑΟʔϧυͱ.5ϒϩοΫΤσΟλҧ͍
38. ϚϧνϑΟʔϧυͱ.5ϒϩοΫΤσΟλҧ͍ ʲؾʹͳΔʳϒϩοΫΤσΟλͱϚϧνϑΟʔϧυͷ ΤϯυϙΠϯτͷอଘσʔλ͸ʁ
39. ϚϧνϑΟʔϧυ bit-part੡ϓϥάΠϯ MTAppjQueryͷػೳͷҰͭ طଘϑΟʔϧυʹuser.jsͰఆٛͨ͠ϑΟʔϧυΛఆٛͯ͠ར༻ ΧελϚΠζ͸ɺuser.jsͰߦ͏ ϚϧνϑΟʔϧυͱ.5ϒϩοΫΤσΟλҧ͍ MTϒϩοΫΤσΟλ γοΫεɾΞύʔτ੡ϓϥάΠϯ ෳ਺ߦςΩετɾຊจͷϑΥʔϚοτͰϒϩοΫΛੵΈ্͛Δ ΧελϚΠζ͸؅ཧը໘ͷઃఆϑΟʔϧυ͔Βߦ͏
40. จࣈྻ͚ͩͲJSON ϚϧνϑΟʔϧυ ※දࣔͤ͞Δʹ͸ JSON.parse()
41. HTMLσʔλͩͬͨ… MTϒϩοΫΤσΟλ ※ݩͷϑΟʔϧυ͕ෳ਺ߦςΩετͷ࢓༷ͷͨΊ ※ͤΊͯจࣈྻͰ΋JSONͰ΄͍͠ɾɾɾئ͍
42. ϚϧνϑΟʔϧυ ΧελϜϑΟʔϧυدΓ WebαΠτΛૢ࡞͢ΔΑΓ͸ϑΟʔϧυΛૢ࡞͢Δײ֮ ςϯϓϨʔτͰ؅ཧ͢ΔͨΊϦϏδϣϯ͸͋Δ ΧελϚΠζ͸JSྗ͕ٻΊΒΕΔ APIͷ஋͸ɺJSONͷจࣈྻ ϚϧνϑΟʔϧυͱ.5ϒϩοΫΤσΟλҧ͍ MTϒϩοΫΤσΟλ ϏδϡΞϧΤσΟλدΓ ؅ཧը໘্Ͱ͸͋Δ͕ɺWebαΠτΛૢ࡞͢Δײ֮ GUIͰΧελϚΠζՄೳ ΧελϚΠζ͸Մೳ͕ͩϦϏδϣϯ͕ͳ͍ ΧελϜίʔυ͸ॻ͚Δ APIͷ஋͸ɺHTMLσʔλ ϊʔίʔυʹ͍ۙ
43. ྫʣϚϧνϑΟʔϧυ ϚϧνϑΟʔϧυͱ.5ϒϩοΫΤσΟλҧ͍ ※αϯϓϧίʔυͷͨΊίʔυతʹ͸ΑΖ͘͠ͳ͍
44. ྫʣMTϒϩοΫΤσΟλ ϚϧνϑΟʔϧυͱ.5ϒϩοΫΤσΟλҧ͍ ※αϯϓϧίʔυͷͨΊίʔυతʹ͸ΑΖ͘͠ͳ͍
45. ϚϧνϑΟʔϧυ Viewଆ΋ίʔυͰ؅ཧ͍ͨ͠৔߹ React΍VueͳͲͷίϯϙʔωϯτϕʔεͰ։ൃͰ͖Δ ελΠϧ΍HTMLͷมߋཤྺΛอ࣋Ͱ͖ΔʢGitʣ ϑΟʔϧυ୯ҐͰ୯ମςετՄೳ ϑΟʔϧυ୯ҐͰܕఆ͕ٛͰ͖Δ ίʔυ͕ෳࡶʹͳΔͨΊJSྗ͕ࢼ͞ΕΔ ඇΤϯδχΞ͕ͬ͘͞ͱϑΟʔϧυΛ௥ՃͰ͖ͳ͍ ϚϧνϑΟʔϧυͱ.5ϒϩοΫΤσΟλҧ͍ MTϒϩοΫΤσΟλ ඇΤϯδχΞͰ΋ͬ͘͞ͱ࡞Γ͍ͨ৔߹ ͢ͰʹͰ͖͍ͯΔϑΟʔϧυΛGUIͰ༻ҙͰ͖Δ ඇΤϯδχΞͰ΋ΧελϚΠζ͸Մೳ MTλάͰͦͷ··ग़ྗͰ͖Δ ϑϨʔϜϫʔΫͰ΋ͦͷ··஋ग़ྗͰදࣔՄೳ ελΠϧ΍HTML͕MTʹґଘ͢Δ ϑΟʔϧυ୯ҐͰͷ୯ମςετ͸೉͍͠ ϚϧνϑΟʔϧυͱMTϒϩοΫΤσΟλͷ࢖͍෼͚
46. +40/৭෇͚܎ͱͯ͠͸
    จࣈྻͰ΋+40/ͷܗͰ΄͍͠ɾɾɾ ※ϑϨʔϜϫʔΫͷίϯϙʔωϯτΛར༻͍ͨ͠ر๬
47. %BUB
    "1*͕ར༻Ͱ͖Ε͹
    ࠓͷαΠτΛ+BNTUBDLԽՄೳͰ͸ʁͱ͍͏ൃ૝ʹͳΔ
    ˞୤.5.-
48. ୤
    .5.-
49. .5.-ͷݺٵ ※َ໓ͷਕΑΓ MTMLྺ11೥ɺଉΛٵ͏ײ֮ͰMTML͸ॻ͚Δɻશूத… ͨͿΜࡹϊܕ͘Β͍͸͍͚Δ͸ͣ… 🤪
50. ୤
    .5.- MTMLͰͷ؅ཧɾ࣮૷ํ๏ • MTMLςϯϓϨʔτΛGitͰ؅ཧ • Docker؀ڥΛ༻ҙͯ͠ɺϩʔΧϧ؀ڥͰςϯϓϨʔτͷ࣮૷ • ຊ൪ɾεςʔδϯάɾϩʔΧϧ؀ڥ͝ͱʹMovable TypeΛ༻ҙ • ຊ൪σϓϩΠ͸खݩͷMTMLΛ؅ཧը໘΁ίϐʔ&ϖʔετͯ͠࠶ߏங • ϩʔΧϧ؀ڥͷڞ༗͸SQLͷμϯϓσʔλͱग़ྗͨ͠ΞηοτΛzipͰڞ༗ɾɾɾ
51. ςϯϓϨσϓϩΠ͢Δ·Ͱϑϩʔ͕खಈɻ
    (JUΛ׆༻Ͱ͖ͯͳ͍ӡ༻ɾɾɾ
52. ୤
    .5.-
53. ୤
    .5.- SetVarTemplateͰม਺Λఆٛ͢Δ
54. ୤
    .5.- ςϯϓϨʔτϞδϡʔϧͰSetVarTemplateΛಡΈࠐΉ VarఆٛͰݺͼग़͢
55. ୤
    .5.- Ҿ਺ʹ౉ͨ݁͠Ռ͕HTMLͱͯ͠ग़ྗ͞ΕΔ
56. ݟ௨͕͠Αͯ͘ɺ࢖͍ճͤΔ͔Β͍͍ΑͶʁ
    ͱࢥ͚ͬͯͨͲ໰୊͸͋Δɾɾɾ
57. ୤
    .5.- ։ൃϑϩʔɾӡ༻ͷ໰୊఺ • ςϯϓϨʔτ͕Movable Typeʹґଘ͍ͯ͠ΔͨΊɺDB͚͕ͩຊ౰ͷ࠷৽ɾɾɾ • ؅ཧը໘͔ΒςϯϓϨฤूՄೳͳͷͰɺඇΤϯδχΞ͕मਖ਼΋Մೳɾɾɾ • յΕ͔ͯΒ࿈བྷ͖ͯɺ࠷৽ͷίʔυΛ؅ཧը໘͔Βίϐʔ&ϖʔετͯ͠ϦϙδτϦʹϚʔδ • ϦϏδϣϯ͔Β௥ͬͯࠩ෼Λ֬ೝ͢Δʢϒϥϯν͝ͱʹςϯϓϨʔτ։ൃ͕Ͱ͖ͳ͍ʣ • MTML͸Τϥʔݕ஌ʹऑ͍ ※λΠϙͯ͠΋ग़ྗͰ͖Δ • ౉ͤΔ஋ʹܕ৘ใΛ͚ͭΕͳ͍ͨΊɺҙਤ͠ͳ͍ڍಈ͕ग़Δ͜ͱ͕͋Δ • ิ׬͕ͳ͍ͨΊɺͲͷϞδϡʔϧ͕ݺͼग़͔͢͸ςϯϓϨϞδϡʔϧ͔Βࢀর • ৘ใ͕ݹ͍ͨΊɺӡ༻Ͱ஁͑ͨ஌ݟͷΈ͔͠ͳ͍ʢڞ༗ͣ͠Β͍ʣ • ෳࡶʹ࡞Γ͗ͯ͢ɺҾ͖ܧ͗ઌ͔Βຖճ࿈བྷ͕དྷΔʢୈࡾऀ͕ಡΊͳ͍ʣ 😵 😵 😴
58. ※࡞ըɿฐࣾ௕ᖒ࡞ @nagasawaaaa ݟ௨͠Α͘ߏஙͨ͠ͷʹӡ༻͠ΜͲ͍ɻ
    ͡ΌʔͲ͏͢Ε͹ɾɾɾ
59. σʔλͱςϯϓϨʔτͷ෼཭͕ඞཁ 🤔
60. σʔλͱςϯϓϨʔτͷ෼཭ ։ൃɾӡ༻ͷݟ௚͢͠Δ఺ • ςϯϓϨʔτ͸Movable Typeʹґଘͤͨ͘͞ͳ͍ • ͔ͳΒͣGit -> CIΛ௨ͯࣗ͠ಈԽ͍ͨ͠ • खݩͷίʔυ࠷৽ԽͷίϐʔΞϯυϖʔετෆཁʹ͍ͨ͠ • ϏϧυલʹΤϥʔΛݕ஌͍ͨ͠ • ొ࿥͞ΕΔ஋ͷܕ৘ใ΍ίʔυ্ͷܕ৘ใΛ΋࣮ͨͤͯ૷தͷૣظΤϥʔΛݕ஌͍ͨ͠ • ΤσΟλ্Ͱͷิ׬͕΄͍͠ • ૺ۰͢ΔΤϥʔΛ͙͙͚ͬͨͩͰղফͰ͖Δ͘Β͍ͷ৘ใྔ͕΄͍͠ • MTMLͰ࡞ΒΕͨΦϨΦϨυΩϡϝϯτ୤٫͍ͨ͠
61. %BUB
    "1*
    Λ׆༻ͨ͠
    +BNTUBDL
    ͷ։ൃϫʔΫϑϩʔ
62. %BUB
    "1*
    Λ׆༻ͨ͠
    +BNTUBDL
    ͷ։ൃϫʔΫϑϩʔ JamstackͷߏஙϙΠϯτ • جຊతʹαʔόϨεͳӡ༻Λҙࣝ͢ΔͨΊMTΫϥ΢υΛ࠾༻ • Ϗϧυ࣌ʹData APIΛݺͼग़͢ඞཁʢWebhookʣαʔόϨεߏ੒͸AWSΛ࠾༻ • ςϯϓϨʔτ͸Next.jsʢReactϕʔεʣΛ࠾༻ʢ΋ͪΖΜVueͳͲଞͷπʔϧ΋Մೳʣ • DockerͷMovable Type͸ෆཁʢMTΫϥ΢υͷData APIΛࢀর৘ใͱͯ͠࢖͏ʣ • Ξηοτؔ࿈͸Ϗϧυ࣌S3ͳͲ΁഑৴ʢϩʔΧϧͷࢀর͸MTΫϥ΢υͷΞηοτURLʣ • ImgixͳͲͷݕ౼΋ඞཁʢWebPͳͲʣ
63. %BUB
    "1*
    Λ׆༻ͨ͠
    +BNTUBDL
    ͷ։ൃϫʔΫϑϩʔ Asset Contents ※Webhook༻ϓϥάΠϯඞཁ ίϯςϯπ؅ཧऀ ςϯϓϨʔτ؅ཧʢΤϯδχΞʣ API Gateway هࣄɾΧςΰϦɾมߋɾ࡟আ Webhook URL (API Gateway΁ΤϯυϙΠϯτ΁ϦΫΤετ) Lambda Web؂ࢹʢSentryͰϑϩϯτΛ؂ࢹʣ issueԽ CIىಈ Asset -> S3 CloudFront S3 HTML CSS JavaScript Image/File ίʔυσϓϩΠ ※ςετΛ௨Βͳ͍ͱσϓϩΠ͠ͳ͍ Git push Drone ʢςετ/Ϗϧυʣ PRͷϚʔδࣦഊ
64. %BUB
    "1*
    Λ׆༻ͨ͠
    +BNTUBDL
    ͷ։ൃϫʔΫϑϩʔ ϝϦοτ • αʔόϨεߏ੒͢Δ͜ͱͰαʔόӡ༻ෆཁʢίϯςϯπ؅ཧऀ͸ීஈͷར༻ͱมΘΒͳ͍ʣ • ैདྷͷ࠶ߏஙಉ༷ʹ੩తͰ͋Δ • SSG / CDNΛར༻͢Δ͜ͱͰίϯςϯπͷϖʔδεϐʔυ΋վળ͞ΕΔ • ϒϥϯν͝ͱʹςϯϓϨʔτΛ։ൃͰ͖ΔͨΊɺϦϦʔε୯ҐͰෆཁͳ࡞ۀʢίϐϖʣΛࣗಈԽ • ༷ʑͳαʔϏεΛ૊Έ߹ΘͤΔ͜ͱ͕Ͱ͖ΔͨΊςϯϓϨʔτͷ֦ுੑ͕ߴ͍ • JavaScript/TypeScriptΛར༻͢Δ͜ͱͰίʔυ͕ݎ࿚׌ͭΞαΠϯઌ͕૿͑Δ • React/VueͳͲͷϑϨʔϜϫʔΫΛར༻͢ΔͨΊΦϨΦϨυΩϡϝϯτ͸ෆཁ • ςϯϓϨʔτͷ෼཭͢Δ͜ͱͰɺґଘ͕ղফ͞Ε໰୊͕Ͳ͜ʹ͋Δͷ͔௥͍΍͍͢
65. %BUB
    "1*
    Λ׆༻ͨ͠
    +BNTUBDL
    ͷ։ൃϫʔΫϑϩʔ σϝϦοτ • αʔόϨεߏ੒ͷΞʔΩςΫνϟઃܭͱ࣮૷͕Ͱ͖ΔΤϯδχΞ͕ඞཁ • αʔϏεར༻͕ଟ͍ͨΊɺো֐͸ඞͣى͖Δ • Gitͷૢ࡞पΓͷཧղ͕ඞཁʢඇΤϯδχΞ޲͚ʣ • JavaScript/TypeScript/React/VueͳͲͷ஌͕ࣝඞཁ • ར༻͢ΔαʔϏε΍Ϋϥ΢υͷ஌͕ࣝඞཁ • Movable Typeͷߋ৽λΠϛϯάͷͨΊͷWebhookϓϥάΠϯ͕ඞཁ • ΤϯυϙΠϯτ͕idϕʔεͷͨΊ؅ཧը໘͔Βࢀর͢Δ͔͠ͳ͍ ※ͦ͏͍͏ϓϥάΠϯ࡞Δʁ • Data APIࣗମ͸ॏ͍ͨɻͦͷ··Ͱ͸ϨϯμϦϯά͕஗͍ʢϩʔΧϧʹอଘ͢Δख๏΋औΕΔʣ
66. ·ͱΊ
67. ·ͱΊ .5.-Ͱ࡞ΒΕͯͨطଘαΠτ͸ͨ͘͞Μ͋Δ
68. ·ͱΊ +BNTUBDL͸ϋʔυϧ͕ߴ͍ɻ
    ͍··Ͱͷ.5.-ख๏Ͱ΋େৎ෉ʂ
    Ͱ΋+4Ͱ͖ΔͳΒνϟϨϯδͯ͠Έ͍ͯͩ͘͞ʂ
69. ·ͱΊ • Data APIΛ׆༻͢Δ͜ͱͰ࠶ߏஙෆཁ • MTΫϥ΢υΛ׆༻͢Δ͜ͱͰαʔό؅ཧ͕ෆཁɾϦεΫ෼ࢄՄೳ • Jamstackߏ੒ʹ͢Δ͜ͱͰදࣔͷ୯ମςετ͕͠΍͍͢ʢΤϯδχΞϥΠΫʣ※γφϦΦςετՄ • ैདྷͷΤσΟλฤू -> ؅ཧը໘΁ίϐϖෆཁ • TypeScriptΛར༻͢Ε͹ɺ͞Βʹܕ҆શͳίʔυͱσόοάʢίʔυ׬݁ʣ͕Ͱ͖Δ • ैདྷͷςϯϓϨʔτࠩ෼໰୊΋ղফ͞ΕΔʢඇΤϯδχΞ͕؅ཧը໘͔Βউखʹमਖ਼͢Δ໰୊ʣ • MTML஌Βͳ͍ΤϯδχΞͰ΋࣮૷Մೳ
70. ·ͱΊ Ұͭͷઃܭख๏ͱͯ͠ɺ.PWBCMF
    5ZQF
    Λ)FBEMFTT
    $.4ͱͯ͠
    ࢖ͬͯΈΔ͸͍͔͕Ͱ͠ΐ͏͔ɻ
71. ʲࠂ஌ʳ https://cssnite.doorkeeper.jp/events/121999 Coder’s High - HAMWORKS Special 7݄14೔ʢਫʣ CSS Nite ొஃ༧ఆ
72. 5IBOL
    ZPV • https://www.movabletype.jp/developers/ data-api/v4-reference.html • https://github.com/ • https://bitbucket.org/ • https://about.gitlab.com/ • https://ja.reactjs.org/ • https://jp.vuejs.org • https://svelte.dev/ • https://microcms.io/ • https://www.contentful.com/ • https://graphcms.com/ • https://jamstack.org/ • https://www.drone.io/ • https://circleci.com/docs/ja/ • https://jestjs.io/ja/ • https://www.cypress.io/ • https://playwright.dev/ • https://www.typescriptlang.org/ • https://sentry.io/