Movable Type を Headless CMS として活用した Jamstack開発手法

2021年11月13日（土）にオンライン開催されたMTDDC Meetup TOKYO 2021のセッション資料です。

Transcript

1. ʢ౔ʣ .PWBCMF
   5ZQF
   Λ
   )FBEMFTT
   $.4
   ͱͯ͠׆༻ͨ͠
   +BNTUBDL։ൃख๏ .5%%$
   .FFUVQ
   5PLZP
   
2. Pro fi le ؔޱ ༐थ גࣜձࣾHAMWORKS ϑϩϯτΤϯυΤϯδχΞ ޷͖ͳMTMLɿ<mt:SetVarTemplate> झຯɿԂܳɾDIY ϋογϡλάɿ#ԂδχΞ, #ԂܳΤϯδχΞ ஶॻɿϓϩϑΣογϣφϧWebϓϩάϥϛϯά Vue.js MySiteɿhttps://www.redamoon.net/ Twitterɿ@redamoon
3. Movable Typeͱͷग़ձ͍ ʙ ઌ૆ฦΓΛ஌Δ ʙ
4. "HFOEB • Headless CMS ͱ Jamstack ͱ͸ʁ • Movable Type ͷ Data APIͱ͸ʁ • ੩తαΠτδΣωϨʔλͷར༻ • MTMLͷ՝୊ͱ໰୊఺ • Data API Λ׆༻ͨ͠ Jamstack ͷ։ൃϫʔΫϑϩʔ • ࣄྫ঺հ
5. )FBEMFTT
   $.4
   ͱ
   +BNTUBDL
   ͱ͸ʁ
6. )FBEMFTT
   $.4 ࡢࠓɺHeadless CMSͱ͍͏σʔλͷ؅ཧΛAPIͷΈఏڙ͢ΔαʔϏε͕૿͖͑ͯͨɻ ैདྷͷCMSʹ͸͋ͬͨςϯϓϨʔτͱݺ͹ΕΔ෦෼͕ͳ͘ɺσʔλͷΈΛ؅ཧͰ͖ΔCMSɻ
7. ࠃ಺໰Θͣ஫໨͞Ε͍ͯΔ ※GoogleτϨϯυ
8. )FBEMFTT
   $.4
   
   "1*ͱදࣔͷ෼཭ CMSαʔό WEBαʔό Database API Template CMS Image/File CSS JavaScript HTML ैདྷͷCMSߏ੒ CMS؅ཧ͍ͯ͠ΔςϯϓϨʔτ࢖͍ɺWebαʔό΁഑৴/ಉҰᝑମͷυΩϡϝϯτϧʔτͰ؅ཧ
9. )FBEMFTT
   $.4
   
   "1*ͱදࣔͷ෼཭ Headless CMS Ampliy / Vercel etc API CMS Image/File CSS JavaScript HTML σʔλΛCMSͰ؅ཧ͠ߋ৽͝ͱʹCI্ͰϏϧυΛߦ͍ϗεςΟϯάઌͱͯ͠S3΍VercelΛར༻ Git/CI Template (static generator)
10. +BNTUBDL
    ͱ͸ API৘ใΛϏϧυ࣌ͷΈʹݶఆ͠ɺ ੩తͳHTMLΛ഑৴ɾΩϟογϡΛར༻ͨ͠ख๏ https://speakerdeck.com/biilmann/the-jam-stack
11. ఏএ͔Βঃʑʹೝࣝ͞Ε࢝Ί͍ͯΔ ※GoogleτϨϯυ
12. ࠶ར༻ՄೳͳAPI ΫϥΠΞϯταΠυ JavaScript ࣄલʹϏϧυ͞Εͨ Markup APIͱදࣔΛ෼཭ͯ͠੩తʹॻ͖ग़͢ΞʔΩςΫνϟ
13. σΧοϓϦϯά͸ɺγεςϜ·ͨ͸αʔϏεؒͷ໌֬ͳ෼཭Λ࡞੒͢ΔϓϩηεͰ͢ɻαΠτͷӡ ӦʹඞཁͳαʔϏεΛ෼཭͢Δ͜ͱͰɺ֤ίϯϙʔωϯτύʔπͷਪ࿦͕༰қʹͳΓɺݸผʹަ׵ ·ͨ͸ΞοϓάϨʔυͰ͖ɺ૊৫಺·ͨ͸αʔυύʔςΟͱͯ͠ઐ೚εϖγϟϦετͷݖݶΛࢦఆ Ͱ͖·͢ɻ Decoupling
14. ࡢࠓɺ+BNTUBDL
    ͕
    ࠃ಺Ͱ΋஫໨͞Ε͍ͯΔͷ͸ɺ
    ೔ʑਐԽ͠ଓ͚Δ
    +BWB4DSJQUϑϨʔϜϫʔΫͷԸܙ͕େ͖͍
15. ࡢࠓͷϑϩϯτ։ൃࣄ৘
16. React/Vue.js/Svelte Λ࢖༻ͨ͠ߏங΍ TypeScript ʹؔ͢Δ৘ใ͕ଟ͍ɻ Headless CMS ΍ CI/ςετ/Git ͳͲ։ൃ؀ڥ͸೔ʑมԽ͍ͯ͠Δ
17. ͦͷഎܠʹʜ ɾECMAScriptͷػೳΞοϓσʔτ ɾJavaScriptϑϨʔϜϫʔΫͷػೳॆ࣮ ɾHeadless CMS ɾJamstackͱݺ͹ΕΔߏஙख๏ ɾCI / ςετ / Git ɾTypeScriptͷར༻
18. ϑϩϯτΤϯυ΍Δ͜ͱଟ͗͢͡Όͳ͍ʁ ※࡞ըɿฐࣾ௕ᖒ࡞ @nagasawaaaa
19. .PWBCMF
    5ZQF
    ʹ΋
    %BUB
    "1*͋Δ͔Β
    )FBEMFTT
    $.4ߏ੒Ͱ΍͍͚ͬͯΔΜ͡Όͳ͍ʁ
20. Movable Type͸ϋΠΤϯυσϕϩούʔʹ͍͓ۙ٬༷ʹར༻͍͖͍ͯͨͩͨ͠ͱࢥ͍ͬͯ·͢͠ɺ ֎෦APIͷմͷΑ͏ʹ͍ͨ͠Ͱ͢ɻ Ϣʔβʔͱͯ͠΋ɺMovable Typeͷ֦ு΍ϓϥάΠϯπʔϧΛ࡞ΔͳͲɺػೳ௥ՃΛ͢Δ͜ͱΛָ ͠Ήਓ͕ଟ͍Ͱ͢ɻ γοΫεɾΞύʔτ CTO ฏా େ࣏ ࢀߟϦϯΫɿhttps://enterprise.watch.impress.co.jp/cda/web2/2006/01/06/6940.html هࣄɿ2006೥
21. .PWBCMF
    5ZQF
    ͷ
    %BUB
    "1*ͱ͸ʁ
22. %BUB
    "1*ͱ͸ʁ
23. • Movable Type 6͔Β౥ࡌ͞Εͨػೳ • REST/JSONํࣜͰσʔλߋ৽ɾ࡟আɾऔಘ͕Մೳ • WebαΠτҎ֎Ͱͷσʔλ׆༻͕Մೳ %BUB
    "1*ͱ͸ʁ https://www.movabletype.jp/developers/data-api/v4-reference.html
24. %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ͷ৔߹
25. https://my.XXX.com/[mt_directory]/mt-data-api.cgi/v4/sites/[siteid]/ contentTypes/[content_type_id]/data ▪ΤϯυϙΠϯτɿίϯςϯπλΠϓͷσʔλҰཡऔಘ ίϯςϯπλΠϓͷσʔλҰཡΛநग़ https://my.XXX.com/[mt_directory]/mt-data-api.cgi/v4/sites/[siteid]/entries [mt_directory]ɿMovable Typeຊମ͕Πϯετʔϧ͞Ε͍ͯΔύε [siteid]ɿ؅ཧը໘ͷαΠτʹΞΫηεͨ͠ࡍɺURLʹ෇༩͞Ε͍ͯΔύϥϝʔλͷblog_idΛࢀর ▪ΤϯυϙΠϯτɿهࣄҰཡͷऔಘྫ
26. ੩తαΠτδΣωϨʔλͷར༻
27. ੩తαΠτδΣωϨʔλͱ͸ʁ HTMLΛੜ੒͢ΔͨΊͷπʔϧ Jamstack ߏ੒Ͱߦ͏৔߹ɺHTMLΛϏϧυ࣌ʹ༻͍ΒΕΔ
28. React ΍ Vue.js ͳͲͷ JavaScriptͷϑϨʔϜϫʔΫΛ࢖͏ར఺ https://ja.reactjs.org/ https://jp.vuejs.org/
29. React
30. Vue.js
31. 3FBDU
    ΍
    7VFKT
    ͳͲͷϑϨʔϜϫʔΫΛ࢖͏ར఺ • ίϛϡχςΟ͕׆ൃɾࠃ಺໰ΘͣίϯτϦϏϡʔλʔ͕ଟ਺ • Weeklyμ΢ϯϩʔυ਺͕ଟ͍ • ϑϩϯτΤϯυͷ஌ݟ΍ issue ͷ΍ΓऔΓ͕ଟ͍ • ಠࣗϑϨʔϜϫʔΫΑΓ΋։ൃίετ͸཈͑ΒΕΔʢυΩϡϝϯτ͕͋ΔͨΊʣ • ίʔυϑΥʔϚοτͷॆ࣮ • LintʹΑΔૣظΤϥʔݕ஌͠΍͍͢ • ςετίʔυΛॻ͖΍͍͢؀ڥ • StoryBookͳͲͷπʔϧΛར༻͢Δ͜ͱͰσβΠϯγεςϜͱ࿈ܞ͕औΓ΍͍͢
32. /FYUKT
33. React ͕ಉࠝ͞Ε͍ͯΔϑϨʔϜϫʔΫ ։ൃݩ Vercelࣾ https://nextjs.org/
34. /FYUKT
    Λར༻͢Δཧ༝ • ϑϨʔϜϫʔΫͱͯ͠ͷػೳ͕ॆ࣮͍ͯ͠Δ • ࠃ಺໰Θͣ෯޿͍৘ใྔ • ͙͢ʹ࢝ΊΒΕΔ։ൃ؀ڥߏஙʢSSG / SSR / SPA etcʣ • Preview Mode ͕ ౥ࡌ͞ΕͯΔ • TypeScript ͷ਌࿨ੑ͕ߴ͍ • ࠃ಺৘ใ΋૿͖͑ͯͨ
35. .5.-ͷ՝୊ͱ໰୊఺
36. MTMLͰͷ؅ཧɾ࣮૷ํ๏ • MTMLςϯϓϨʔτΛGitͰ؅ཧ • Docker؀ڥΛ༻ҙͯ͠ɺϩʔΧϧ؀ڥͰςϯϓϨʔτͷ࣮૷ • ຊ൪ɾεςʔδϯά͝ͱʹMovable TypeΛ༻ҙ • σϓϩΠ͸खݩͷMTMLΛ؅ཧը໘΁ίϐϖͯ͠࠶ߏங • ϩʔΧϧ؀ڥͷڞ༗͸ɺSQLμϯϓͱग़ྗͨ͠ΞηοτΛGitܦ༝ͰόοΫΞοϓ
37. ςϯϓϨσϓϩΠ͢Δ·Ͱϑϩʔ͕खಈɻ
    (JUΛ׆༻Ͱ͖ͯͳ͍ӡ༻ɾɾɾ
38. Primary
39. ݟ௨͕͠Αͯ͘ɺ࢖͍ճͤΔ͔Β͍͍ΑͶʁ
    ͱࢥ͚ͬͯͨͲ໰୊͸͋Δɾɾɾ
40. ։ൃϑϩʔɾӡ༻ͷ໰୊఺ • DBʹڍ͕ͬͯΔςϯϓϨʔτ͕ຊ౰ͷ࠷৽ɾɾɾ • ؅ཧը໘͔ΒςϯϓϨฤूՄೳͳͷͰɺඇΤϯδχΞ͕मਖ਼Մೳɾɾɾ • ςϯϓϨʔτ͕յΕ͔ͯΒ࿈བྷ͕དྷΔͨΊϦϏδϣϯΛ௥͏ͷ͕େม • खݩͷίʔυͱຊ൪ίʔυͱͷࠩ෼ • Τϥʔݕ஌ʹऑ͍ ※λΠϙͯ͠΋Τϥʔ͸ݕ஌͞Εͳ͍ • ϞσΟϑΝΠΞʹఆٛͰ͖ΔܕఆٛͰ͖ͳ͍ͨΊɺҙਤ͠ͳ͍ڍಈ͕ى͖Δ • ίʔυิ׬͕ͳ͍ͨΊɺͲͷϞδϡʔϧ͕ݺͼग़͔͢͸ςϯϓϨϞδϡʔϧ͔Βࢀর • ෳࡶʹ࡞Γ͗ͯ͢ɺҾ͖ܧ͗ઌ͔Βຖճ࿈བྷ͕དྷΔʢୈࡾऀ͕ಡΊͳ͍ʣ 😵 😵 😴
41. ※࡞ըɿฐࣾ௕ᖒ࡞ @nagasawaaaa ݟ௨͠Α͘ߏஙͨ͠ͷʹӡ༻͠ΜͲ͍ɻ
    ͡ΌʔͲ͏͢Ε͹ɾɾɾ
42. σʔλͱςϯϓϨʔτͷ෼཭ ։ൃɾӡ༻ͷݟ௚͢͠Δ఺ ※ݸਓతͳҙݟ • ςϯϓϨʔτ͸Movable Typeʹґଘͤͨ͘͞ͳ͍ • Git -> CIΛ௨ͯࣗ͠ಈԽ͍ͨ͠ • खݩͷίʔυ࠷৽ԽͷίϐʔΞϯυϖʔετෆཁʹ͍ͨ͠ • ϏϧυલʹΤϥʔΛݕ஌͍ͨ͠ • ࣮૷தͷૣظΤϥʔΛݕ஌͍ͨ͠ • ΤσΟλ্Ͱͷิ׬͕΄͍͠ • MTMLͰ࡞ΒΕͨΦϨΦϨυΩϡϝϯτ୤٫͍ͨ͠
43. %BUB
    "1*
    Λ׆༻ͨ͠
    +BNTUBDL
    ͷ։ൃϫʔΫϑϩʔ
44. %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 etc ʢςετ/Ϗϧυʣ PRͷϚʔδࣦഊ ैདྷͷMTML͸ɺMT -> ϗεςΟϯάઌ ↓ Jamstack͸ɺMT -> Ϗϧυ / CI / ςετͳͲ͕ؒʹڬ·Δ
45. %BUB
    "1*
    Λ׆༻ͨ͠
    +BNTUBDL
    ͷ։ൃϫʔΫϑϩʔ JamstackͷߏஙϙΠϯτ • MTΫϥ΢υΛ࠾༻ • αʔόϨεӡ༻ʹ͢ΔͨΊϗεςΟϯάઌ͸AWS΍VercelͳͲΛ࠾༻ • ςϯϓϨʔτ͸Next.jsΛ࠾༻ ※ଞͷπʔϧͰ΋Մ • Ξηοτؔ࿈͸S3ʹ഑৴΋͘͠͸ຊମͷMT΁CloudFrontΛט·ͤͯυϝΠϯͷӅṭ • هࣄͷϓϨϏϡʔΛՄೳʹ͢Δ
46. %BUB
    "1*
    Λ׆༻ͨ͠
    +BNTUBDL
    ͷ։ൃϫʔΫϑϩʔ ϝϦοτ • αʔόϨεߏ੒ʹ͢Ε͹αʔόӡ༻ෆཁ • ैདྷͷ࠶ߏஙಉ༷ʹ੩తͰ͋Δ • CDNΛར༻͢Δ͜ͱͰϖʔδεϐʔυͷվળ΋Մೳ • ϒϥϯν͝ͱͷ։ൃͱϏϧυͷࣗಈԽ͕Մೳ • ςϯϓϨʔτͷ֦ுੑ͕ߴ͍ • CMSʹϩοΫΠϯ͞Εͳ͍ͨΊΞαΠϯઌ͕૿͑Δ • ΦϨΦϨυΩϡϝϯτ͸ෆཁ • ෼཭ʹΑΔґଘ͕ղফ͞Εɺ໰୊ΛՄࢹԽͰ͖Δ
47. %BUB
    "1*
    Λ׆༻ͨ͠
    +BNTUBDL
    ͷ։ൃϫʔΫϑϩʔ σϝϦοτ • αʔόϨεߏ੒ͷΞʔΩςΫνϟઃܭ͕ඞཁ • αʔϏε෼ࢄʹΑΔো֐ • Gitૢ࡞ͷཧղ͕ඞཁʢඇΤϯδχΞ޲͚ʣ • JavaScript/TypeScript/React/VueͳͲͷ஌͕ࣝඞཁ • αʔϏε΍Ϋϥ΢υͷ஌͕ࣝඞཁ • WebhookϓϥάΠϯ͕ඞཁʢMovable Type ͷ֦ுʣ
48. %BUB
    "1*
    Λ׆༻ͨ͠
    +BNTUBDL
    ͷ։ൃϫʔΫϑϩʔ Data APIΤϯυϙΠϯτͷ໰୊ ɾBlog_idϕʔεͷऔಘʹͳΔͨΊΤϯυϙΠϯτ΁ͷΞΫηεํ๏͸ID͕ඞཁ ɾIDʢαΠτ΍ίϯςϯπσʔλ͝ͱʣΛௐ΂Δखஈ͸ɺ؅ཧը໘ͷURL͔Β͔͠Θ͔Βͳ͍ ɾϏϧυ࣌ʹIDΛؚΊͨύεੜ੒࣌͸จࣈྻʹม׵͢Δඞཁ͕͋Δ ɾίϯςϯπσʔλʹؔ࿈͞ΕΔΧςΰϦηοτ΍ը૾ϑΟʔϧυͷ৘ใ͕ID͔͠ͳ͍ ɾίϯςϯπσʔλͰ͸ΧςΰϦʹଐͨ͠σʔλ΍೔෇σʔλͷҰཡ͕औಘͰ͖ͳ͍ ɾίϯςϯπσʔλͷΤϯυϙΠϯτʹϑΟϧλʔ͕ͳ͍ͨΊɺશ෦औಘͯ͠ϑϩϯτͰՃ޻͕ඞཁ
49. ࣄྫ঺հ
50. Movable Type Knowledge https://www.movabletype-knowledge.tech/
51. Asset Contents ίϯςϯπ؅ཧऀ ςϯϓϨʔτ؅ཧʢΤϯδχΞʣ هࣄͷߋ৽ͰσϓϩΠ ϓϨϏϡʔͰNext.jsͷPreview Mode ىಈ main ϒϥϯνʹ push͢Δ͜ͱͰσϓϩΠ
52. Vercel Delpoy Hooks
53. Vercel Delpoy Hooks ݱࡏɺهࣄͷσϓϩΠɾϓϨϏϡʔ·Ͱ࣮૷த https://github.com/redamoon/mt-plugin-VercelDeployHooks
54. هࣄͷσϓϩΠ
55. Dynamic Routes https://nextjs.org/docs/routing/dynamic-routes
56. [id].tsx ͕ಈతର৅ϑΝΠϧ
57. getStaticPaths
58. getStaticProps
59. هࣄͷϓϨϏϡʔ
60. )FBEMFTT
    $.4ͷ՝୊͸ɺϓϨϏϡʔΛͲ͏࣮ݱ͢Δ͔ɻ
61. Preview Mode https://nextjs.org/docs/advanced-features/preview-mode
62. هࣄͷϓϨϏϡʔ͸ະެ։هࣄͰ΋ࢀরͰ͖Δඞཁ͕͋Δ
63. https://www.movabletype.jp/developers/data-api/quick-start/ ະެ։هࣄΛऔಘ͢ΔͨΊʹ τʔΫϯΛൃߦ͢Δ
65. setPreviewData ະެ։هࣄΛऔಘ https://domain.com/api/preview?path=[هࣄͷύε][هࣄID]&user=[MTͷϢʔβ໊]&pass=[Webύεϫʔυ]
66. setPreviewData ະެ։هࣄΛऔಘ https://domain.com/api/preview?path=[هࣄͷύε][هࣄID]&user=[MTͷϢʔβ໊]&pass=[Webύεϫʔυ]
67. ·ͱΊ
68. ·ͱΊ • JavaScriptΛར༻͢Δ͜ͱͰϞμϯͳ։ൃՄೳ • ؅ཧը໘΁ςϯϓϨʔτͷίϐϖෆཁ • ैདྷͷςϯϓϨʔτࠩ෼໰୊΋ղফ͞ΕΔ • MTML஌Βͳ͍ΤϯδχΞͰ΋࣮૷Մೳ
69. ·ͱΊ +BNTUBDL͸ϋʔυϧʢ։ൃ؀ڥʣ͕ߴ͍ɻ
    ͍··Ͱͷ.5.-ख๏Ͱ΋େৎ෉ʂ
    Ͱ΋Ϟμϯͳ։ൃʹ΋νϟϨϯδͯ͠ΈΔͷ΋ྑ͍͔΋͠Ε·ͤΜ