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
Movable Type を Headless CMS として活用した Jamstack開発手法
Search
redamoon
November 13, 2021
0
170
Movable Type を Headless CMS として活用した Jamstack開発手法
2021年11月13日(土)にオンライン開催されたMTDDC Meetup TOKYO 2021のセッション資料です。
redamoon
November 13, 2021
Tweet
Share
More Decks by redamoon
See All by redamoon
MTDDCMeetupTokyo_2023_LT.pdf
redamoon
0
150
Supabase + Nuxt3 の実装素振りで チャットアプリを作ってみた
redamoon
1
350
Data APIを活用したWEBサイト構築手法
redamoon
1
59
sacss110_pdf.pdf
redamoon
1
120
Vue meet up sapporo Vue + Storybook導入について
redamoon
0
56
Movable Type 7を触ってみた
redamoon
0
230
HTML・CMSから考えるコンポーネント化について
redamoon
1
380
おれの使うさいきょうえでぃた
redamoon
0
200
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Git: the NoSQL Database
bkeepers
PRO
430
65k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Practical Orchestrator
shlominoach
188
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
A better future with KSS
kneath
239
17k
Making Projects Easy
brettharned
116
6.2k
Adopting Sorbet at Scale
ufuk
77
9.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Transcript
ʢʣ .PWBCMF5ZQFΛ)FBEMFTT$.4 ͱͯ͠׆༻ͨ͠+BNTUBDL։ൃख๏ .5%%$.FFUVQ5PLZP
Pro fi le ؔޱ ༐थ גࣜձࣾHAMWORKS ϑϩϯτΤϯυΤϯδχΞ ͖ͳMTMLɿ<mt:SetVarTemplate> झຯɿԂܳɾDIY ϋογϡλάɿ#ԂδχΞ,
#ԂܳΤϯδχΞ ஶॻɿϓϩϑΣογϣφϧWebϓϩάϥϛϯά Vue.js MySiteɿhttps://www.redamoon.net/ Twitterɿ@redamoon
Movable Typeͱͷग़ձ͍ ʙ ઌฦΓΛΔ ʙ
"HFOEB • Headless CMS ͱ Jamstack ͱʁ • Movable Type
ͷ Data APIͱʁ • ੩తαΠτδΣωϨʔλͷར༻ • MTMLͷ՝ͱ • Data API Λ׆༻ͨ͠ Jamstack ͷ։ൃϫʔΫϑϩʔ • ࣄྫհ
)FBEMFTT$.4ͱ+BNTUBDLͱʁ
)FBEMFTT$.4 ࡢࠓɺHeadless CMSͱ͍͏σʔλͷཧΛAPIͷΈఏڙ͢ΔαʔϏε͕૿͖͑ͯͨɻ ैདྷͷCMSʹ͋ͬͨςϯϓϨʔτͱݺΕΔ෦͕ͳ͘ɺσʔλͷΈΛཧͰ͖ΔCMSɻ
ࠃΘͣ͞Ε͍ͯΔ ※GoogleτϨϯυ
)FBEMFTT$.4"1*ͱදࣔͷ CMSαʔό WEBαʔό Database API Template CMS Image/File CSS JavaScript
HTML ैདྷͷCMSߏ CMSཧ͍ͯ͠ΔςϯϓϨʔτ͍ɺWebαʔό৴/ಉҰᝑମͷυΩϡϝϯτϧʔτͰཧ
)FBEMFTT$.4"1*ͱදࣔͷ Headless CMS Ampliy / Vercel etc API CMS Image/File
CSS JavaScript HTML σʔλΛCMSͰཧ͠ߋ৽͝ͱʹCI্ͰϏϧυΛߦ͍ϗεςΟϯάઌͱͯ͠S3VercelΛར༻ Git/CI Template (static generator)
+BNTUBDLͱ APIใΛϏϧυ࣌ͷΈʹݶఆ͠ɺ ੩తͳHTMLΛ৴ɾΩϟογϡΛར༻ͨ͠ख๏ https://speakerdeck.com/biilmann/the-jam-stack
ఏএ͔Βঃʑʹೝࣝ͞Ε࢝Ί͍ͯΔ ※GoogleτϨϯυ
࠶ར༻ՄೳͳAPI ΫϥΠΞϯταΠυ JavaScript ࣄલʹϏϧυ͞Εͨ Markup APIͱදࣔΛͯ͠੩తʹॻ͖ग़͢ΞʔΩςΫνϟ
σΧοϓϦϯάɺγεςϜ·ͨαʔϏεؒͷ໌֬ͳΛ࡞͢ΔϓϩηεͰ͢ɻαΠτͷӡ ӦʹඞཁͳαʔϏεΛ͢Δ͜ͱͰɺ֤ίϯϙʔωϯτύʔπͷਪ͕༰қʹͳΓɺݸผʹަ ·ͨΞοϓάϨʔυͰ͖ɺ৫·ͨαʔυύʔςΟͱͯ͠ઐεϖγϟϦετͷݖݶΛࢦఆ Ͱ͖·͢ɻ Decoupling
ࡢࠓɺ+BNTUBDL͕ࠃͰ͞Ε͍ͯΔͷɺ ʑਐԽ͠ଓ͚Δ+BWB4DSJQUϑϨʔϜϫʔΫͷԸܙ͕େ͖͍
ࡢࠓͷϑϩϯτ։ൃࣄ
React/Vue.js/Svelte Λ༻ͨ͠ߏங TypeScript ʹؔ͢Δใ͕ଟ͍ɻ Headless CMS CI/ςετ/Git ͳͲ։ൃڥʑมԽ͍ͯ͠Δ
ͦͷഎܠʹʜ ɾECMAScriptͷػೳΞοϓσʔτ ɾJavaScriptϑϨʔϜϫʔΫͷػೳॆ࣮ ɾHeadless CMS ɾJamstackͱݺΕΔߏஙख๏ ɾCI / ςετ /
Git ɾTypeScriptͷར༻
ϑϩϯτΤϯυΔ͜ͱଟ͗͢͡Όͳ͍ʁ ※࡞ըɿฐࣾᖒ࡞ @nagasawaaaa
.PWBCMF5ZQFʹ%BUB"1*͋Δ͔Β )FBEMFTT$.4ߏͰ͍͚ͬͯΔΜ͡Όͳ͍ʁ
Movable TypeϋΠΤϯυσϕϩούʔʹ͍͓ۙ٬༷ʹར༻͍͖͍ͯͨͩͨ͠ͱࢥ͍ͬͯ·͢͠ɺ ֎෦APIͷմͷΑ͏ʹ͍ͨ͠Ͱ͢ɻ Ϣʔβʔͱͯ͠ɺMovable Typeͷ֦ுϓϥάΠϯπʔϧΛ࡞ΔͳͲɺػೳՃΛ͢Δ͜ͱΛָ ͠Ήਓ͕ଟ͍Ͱ͢ɻ γοΫεɾΞύʔτ CTO ฏా େ࣏
ࢀߟϦϯΫɿhttps://enterprise.watch.impress.co.jp/cda/web2/2006/01/06/6940.html هࣄɿ2006
.PWBCMF5ZQFͷ%BUB"1*ͱʁ
%BUB"1*ͱʁ
• Movable Type 6͔Βࡌ͞Εͨػೳ • REST/JSONํࣜͰσʔλߋ৽ɾআɾऔಘ͕Մೳ • WebαΠτҎ֎Ͱͷσʔλ׆༻͕Մೳ %BUB"1*ͱʁ https://www.movabletype.jp/developers/data-api/v4-reference.html
%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ͷ߹
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Λࢀর ▪ΤϯυϙΠϯτɿهࣄҰཡͷऔಘྫ
੩తαΠτδΣωϨʔλͷར༻
੩తαΠτδΣωϨʔλͱʁ HTMLΛੜ͢ΔͨΊͷπʔϧ Jamstack ߏͰߦ͏߹ɺHTMLΛϏϧυ࣌ʹ༻͍ΒΕΔ
React Vue.js ͳͲͷ JavaScriptͷϑϨʔϜϫʔΫΛ͏ར https://ja.reactjs.org/ https://jp.vuejs.org/
React
Vue.js
3FBDU7VFKTͳͲͷϑϨʔϜϫʔΫΛ͏ར • ίϛϡχςΟ͕׆ൃɾࠃΘͣίϯτϦϏϡʔλʔ͕ଟ • Weeklyμϯϩʔυ͕ଟ͍ • ϑϩϯτΤϯυͷݟ issue ͷΓऔΓ͕ଟ͍ •
ಠࣗϑϨʔϜϫʔΫΑΓ։ൃίετ͑ΒΕΔʢυΩϡϝϯτ͕͋ΔͨΊʣ • ίʔυϑΥʔϚοτͷॆ࣮ • LintʹΑΔૣظΤϥʔݕ͍͢͠ • ςετίʔυΛॻ͖͍͢ڥ • StoryBookͳͲͷπʔϧΛར༻͢Δ͜ͱͰσβΠϯγεςϜͱ࿈ܞ͕औΓ͍͢
/FYUKT
React ͕ಉࠝ͞Ε͍ͯΔϑϨʔϜϫʔΫ ։ൃݩ Vercelࣾ https://nextjs.org/
/FYUKTΛར༻͢Δཧ༝ • ϑϨʔϜϫʔΫͱͯ͠ͷػೳ͕ॆ࣮͍ͯ͠Δ • ࠃΘͣ෯͍ใྔ • ͙͢ʹ࢝ΊΒΕΔ։ൃڥߏஙʢSSG / SSR /
SPA etcʣ • Preview Mode ͕ ࡌ͞ΕͯΔ • TypeScript ͷੑ͕ߴ͍ • ࠃใ૿͖͑ͯͨ
.5.-ͷ՝ͱ
MTMLͰͷཧɾ࣮ํ๏ • MTMLςϯϓϨʔτΛGitͰཧ • DockerڥΛ༻ҙͯ͠ɺϩʔΧϧڥͰςϯϓϨʔτͷ࣮ • ຊ൪ɾεςʔδϯά͝ͱʹMovable TypeΛ༻ҙ • σϓϩΠखݩͷMTMLΛཧը໘ίϐϖͯ͠࠶ߏங
• ϩʔΧϧڥͷڞ༗ɺSQLμϯϓͱग़ྗͨ͠ΞηοτΛGitܦ༝ͰόοΫΞοϓ
ςϯϓϨσϓϩΠ͢Δ·Ͱϑϩʔ͕खಈɻ (JUΛ׆༻Ͱ͖ͯͳ͍ӡ༻ɾɾɾ
Primary
ݟ௨͕͠Αͯ͘ɺ͍ճͤΔ͔Β͍͍ΑͶʁ ͱࢥ͚ͬͯͨͲ͋Δɾɾɾ
։ൃϑϩʔɾӡ༻ͷ • DBʹڍ͕ͬͯΔςϯϓϨʔτ͕ຊͷ࠷৽ɾɾɾ • ཧը໘͔ΒςϯϓϨฤूՄೳͳͷͰɺඇΤϯδχΞ͕मਖ਼Մೳɾɾɾ • ςϯϓϨʔτ͕յΕ͔ͯΒ࿈བྷ͕དྷΔͨΊϦϏδϣϯΛ͏ͷ͕େม • खݩͷίʔυͱຊ൪ίʔυͱͷࠩ •
Τϥʔݕʹऑ͍ ※λΠϙͯ͠Τϥʔݕ͞Εͳ͍ • ϞσΟϑΝΠΞʹఆٛͰ͖ΔܕఆٛͰ͖ͳ͍ͨΊɺҙਤ͠ͳ͍ڍಈ͕ى͖Δ • ίʔυิ͕ͳ͍ͨΊɺͲͷϞδϡʔϧ͕ݺͼग़͔͢ςϯϓϨϞδϡʔϧ͔Βࢀর • ෳࡶʹ࡞Γ͗ͯ͢ɺҾ͖ܧ͗ઌ͔Βຖճ࿈བྷ͕དྷΔʢୈࡾऀ͕ಡΊͳ͍ʣ 😵 😵 😴
※࡞ըɿฐࣾᖒ࡞ @nagasawaaaa ݟ௨͠Α͘ߏஙͨ͠ͷʹӡ༻͠ΜͲ͍ɻ ͡ΌʔͲ͏͢Εɾɾɾ
σʔλͱςϯϓϨʔτͷ ։ൃɾӡ༻ͷݟ͢͠Δ ※ݸਓతͳҙݟ • ςϯϓϨʔτMovable Typeʹґଘͤͨ͘͞ͳ͍ • Git -> CIΛ௨ͯࣗ͠ಈԽ͍ͨ͠
• खݩͷίʔυ࠷৽ԽͷίϐʔΞϯυϖʔετෆཁʹ͍ͨ͠ • ϏϧυલʹΤϥʔΛݕ͍ͨ͠ • ࣮தͷૣظΤϥʔΛݕ͍ͨ͠ • ΤσΟλ্Ͱͷิ͕΄͍͠ • MTMLͰ࡞ΒΕͨΦϨΦϨυΩϡϝϯτ٫͍ͨ͠
%BUB"1*Λ׆༻ͨ͠+BNTUBDLͷ։ൃϫʔΫϑϩʔ
%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 / ςετͳͲ͕ؒʹڬ·Δ
%BUB"1*Λ׆༻ͨ͠+BNTUBDLͷ։ൃϫʔΫϑϩʔ JamstackͷߏஙϙΠϯτ • MTΫϥυΛ࠾༻ • αʔόϨεӡ༻ʹ͢ΔͨΊϗεςΟϯάઌAWSVercelͳͲΛ࠾༻ • ςϯϓϨʔτNext.jsΛ࠾༻ ※ଞͷπʔϧͰՄ •
Ξηοτؔ࿈S3ʹ৴͘͠ຊମͷMTCloudFrontΛט·ͤͯυϝΠϯͷӅṭ • هࣄͷϓϨϏϡʔΛՄೳʹ͢Δ
%BUB"1*Λ׆༻ͨ͠+BNTUBDLͷ։ൃϫʔΫϑϩʔ ϝϦοτ • αʔόϨεߏʹ͢Εαʔόӡ༻ෆཁ • ैདྷͷ࠶ߏஙಉ༷ʹ੩తͰ͋Δ • CDNΛར༻͢Δ͜ͱͰϖʔδεϐʔυͷվળՄೳ • ϒϥϯν͝ͱͷ։ൃͱϏϧυͷࣗಈԽ͕Մೳ
• ςϯϓϨʔτͷ֦ுੑ͕ߴ͍ • CMSʹϩοΫΠϯ͞Εͳ͍ͨΊΞαΠϯઌ͕૿͑Δ • ΦϨΦϨυΩϡϝϯτෆཁ • ʹΑΔґଘ͕ղফ͞ΕɺΛՄࢹԽͰ͖Δ
%BUB"1*Λ׆༻ͨ͠+BNTUBDLͷ։ൃϫʔΫϑϩʔ σϝϦοτ • αʔόϨεߏͷΞʔΩςΫνϟઃܭ͕ඞཁ • αʔϏεࢄʹΑΔো • Gitૢ࡞ͷཧղ͕ඞཁʢඇΤϯδχΞ͚ʣ • JavaScript/TypeScript/React/VueͳͲͷ͕ࣝඞཁ
• αʔϏεΫϥυͷ͕ࣝඞཁ • WebhookϓϥάΠϯ͕ඞཁʢMovable Type ͷ֦ுʣ
%BUB"1*Λ׆༻ͨ͠+BNTUBDLͷ։ൃϫʔΫϑϩʔ Data APIΤϯυϙΠϯτͷ ɾBlog_idϕʔεͷऔಘʹͳΔͨΊΤϯυϙΠϯτͷΞΫηεํ๏ID͕ඞཁ ɾIDʢαΠτίϯςϯπσʔλ͝ͱʣΛௐΔखஈɺཧը໘ͷURL͔Β͔͠Θ͔Βͳ͍ ɾϏϧυ࣌ʹIDΛؚΊͨύεੜ࣌จࣈྻʹม͢Δඞཁ͕͋Δ ɾίϯςϯπσʔλʹؔ࿈͞ΕΔΧςΰϦηοτը૾ϑΟʔϧυͷใ͕ID͔͠ͳ͍ ɾίϯςϯπσʔλͰΧςΰϦʹଐͨ͠σʔλσʔλͷҰཡ͕औಘͰ͖ͳ͍ ɾίϯςϯπσʔλͷΤϯυϙΠϯτʹϑΟϧλʔ͕ͳ͍ͨΊɺશ෦औಘͯ͠ϑϩϯτͰՃ͕ඞཁ
ࣄྫհ
Movable Type Knowledge https://www.movabletype-knowledge.tech/
Asset Contents ίϯςϯπཧऀ ςϯϓϨʔτཧʢΤϯδχΞʣ هࣄͷߋ৽ͰσϓϩΠ ϓϨϏϡʔͰNext.jsͷPreview Mode ىಈ main ϒϥϯνʹ
push͢Δ͜ͱͰσϓϩΠ
Vercel Delpoy Hooks
Vercel Delpoy Hooks ݱࡏɺهࣄͷσϓϩΠɾϓϨϏϡʔ·Ͱ࣮த https://github.com/redamoon/mt-plugin-VercelDeployHooks
هࣄͷσϓϩΠ
Dynamic Routes https://nextjs.org/docs/routing/dynamic-routes
[id].tsx ͕ಈతରϑΝΠϧ
getStaticPaths
getStaticProps
هࣄͷϓϨϏϡʔ
)FBEMFTT$.4ͷ՝ɺϓϨϏϡʔΛͲ͏࣮ݱ͢Δ͔ɻ
Preview Mode https://nextjs.org/docs/advanced-features/preview-mode
هࣄͷϓϨϏϡʔະެ։هࣄͰࢀরͰ͖Δඞཁ͕͋Δ
https://www.movabletype.jp/developers/data-api/quick-start/ ະެ։هࣄΛऔಘ͢ΔͨΊʹ τʔΫϯΛൃߦ͢Δ
None
setPreviewData ະެ։هࣄΛऔಘ https://domain.com/api/preview?path=[هࣄͷύε][هࣄID]&user=[MTͷϢʔβ໊]&pass=[Webύεϫʔυ]
setPreviewData ະެ։هࣄΛऔಘ https://domain.com/api/preview?path=[هࣄͷύε][هࣄID]&user=[MTͷϢʔβ໊]&pass=[Webύεϫʔυ]
·ͱΊ
·ͱΊ • JavaScriptΛར༻͢Δ͜ͱͰϞμϯͳ։ൃՄೳ • ཧը໘ςϯϓϨʔτͷίϐϖෆཁ • ैདྷͷςϯϓϨʔτࠩղফ͞ΕΔ • MTMLΒͳ͍ΤϯδχΞͰ࣮Մೳ
·ͱΊ +BNTUBDLϋʔυϧʢ։ൃڥʣ͕ߴ͍ɻ ͍··Ͱͷ.5.-ख๏Ͱେৎʂ ͰϞμϯͳ։ൃʹνϟϨϯδͯ͠ΈΔͷྑ͍͔͠Ε·ͤΜ