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
Nuxt.jsによるAdobe MAX Japan 2018公式Webサイト制作の舞台裏
Search
KIMURA Tetsuro
November 30, 2018
Programming
11
3.7k
Nuxt.jsによるAdobe MAX Japan 2018公式Webサイト制作の舞台裏
2018/11/30 DIST.24 「Re: Adobe MAX Japan 2018」
KIMURA Tetsuro
November 30, 2018
Tweet
Share
More Decks by KIMURA Tetsuro
See All by KIMURA Tetsuro
SVG makes your components to testable
haribote
3
2.1k
Other Decks in Programming
See All in Programming
バイブコーディング × 設計思考
nogu66
0
120
What's new in Adaptive Android development
fornewid
0
140
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
1
290
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
870
新しいモバイルアプリ勉強会(仮)について
uetyo
1
260
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
130
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
310
Claude Code と OpenAI o3 で メタデータ情報を作る
laket
0
130
Webinar: AI-Powered Development: Transformiere deinen Workflow mit Coding Tools und MCP Servern
danielsogl
0
140
生成AI、実際どう? - ニーリーの場合
nealle
0
140
LLMは麻雀を知らなすぎるから俺が教育してやる
po3rin
3
2.2k
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
3
920
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Thoughts on Productivity
jonyablonski
69
4.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Six Lessons from altMBA
skipperchong
28
4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
560
Gamification - CAS2011
davidbonilla
81
5.4k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
KATA
mclloyd
32
14k
Transcript
None
ଜ࿕ ϑϩϯτΤϯυΤϯδχΞ ͖ͳ"EPCF ٶా༏ر σβΠφʔ ͖ͳ"EPCF
શʹҰக 1IPUPTIPQ4LFUDI ฐࣾϩΰ
͛͢ʔී௨ͷΛ͠·͢ɻ
͓͓·͔ͳશମ૾
None
IUUQTNBYKBQBOBEPCFDPN
ཁ݅ w ηογϣϯΛҰཡ͢Δ w ొஃऀΛҰཡ͢Δ w ηογϣϯɾొஃऀ͝ͱʹ ݸผͷϖʔδΛઃ͚Δ w ใཧͷ؆ུԽ
w ී௨ͷϨϯλϧαʔόʔʹϗεςΟϯά
5IFී௨
ηογϣϯใ w࣌ؒͱॴ wδϟϯϧͱ༻ΞϓϦ wλΠτϧ wొஃऀ ʢৄࡉϖʔδϦϯΫʣ
w֓ཁɾରऀɾϨϕϧ wਃ͠ࠐΈϖʔδͷϦϯΫʢϘπʣ ηογϣϯɿ݅ τοϓϖʔδͷҰཡʹܝࡌ
ొஃऀใ wϓϩϑΟʔϧࣸਅ w໊લͱݞॻ͖ wհจ w୲ηογϣϯʢৄࡉϖʔδϦϯΫʣ ొஃऀɿ໊ τοϓϖʔδͷҰཡʹܝࡌ
؆қαΠτϚοϓ
ಉ͡ใΛ܁Γฦ͠༻͍Δ
ใཧͷ؆ུԽͱσʔλιʔεͷ౷߹
ใཧͷ؆ུԽͱσʔλιʔεͷ౷߹ w ใΛ+40/Խ͢Δ͜ͱͰ࠶ར༻͍ͨ͠ w εϓϨουγʔτͳΒʜ w ୭Ͱɾ͍ͭͰɾͲ͜Ͱ ใΛ؆୯ʹฤूͰ͖Δ w "QQT4DSJQUΛ༻͍ͯσʔλΛ+40/ԽͰ͖Δ
ओͨΔγʔτͭ TFTTJPOTશηογϣϯͷใ TQFBLFSTશొஃऀͷใ TMPUT։࠵ͷϚελʔ BQQT༻ΞϓϦέʔγϣϯͷϚελʔ
{ "id": 41, "name": "Adobe Fonts" } "QQT4DSJQUͰ+40/ʹՃ { "id":
2298, "title": "WebϑΥϯτΛ120%ʙ", "slot": 4, "place": "Magenta (Annex)", "type": "Session", "category": "web", "summary": "ଟ࠼ͳॻମΛWeb্Ͱʙ", "levels": [ false, true, false ], "price": 0, "isFullBooked": false, "speakers": [ 31 ], "targets": "WebσβΠφʔɺUI/UXσβΠφʔ", "apps": [ 11, 41 ] } TFTTJPOT<> { "id": 31, "name": "দా थ ࢯ", "kana": "·ͭͩ", "image": "ʙ.jpg", "company": "גࣜձࣾ·΅Ζ͠", "class": "CCOɾσβΠφʔ", "summary": "<p>ήʔϜۀքʹͯʙ</p>" } TQFBLFST<> { "id": 4, "day": 1, "name": "Breakout sessions + Workshop", "from": "16:25", "to": "17:15" } TMPUT<> BQQT<>
σʔλ༻ҙͰ͖ͨ ͋ͱͲ͏ͬͯྲྀ͠ࠐΉ͔
ํ๏৭ʑ 1VH <%= EJS %> ςϯϓϨʔτΤϯδϯ ελςΟοΫαΠτδΣωϨʔλʔ /VYU 41"ϑϨʔϜϫʔΫʁ
ελςΟοΫαΠτδΣωϨʔλʔ 1VH <%= EJS %> ςϯϓϨʔτΤϯδϯ )5.-ઐͷํʑ ελςΟοΫαΠτδΣωϨʔλʔ /VYU 41"ϑϨʔϜϫʔΫʁ
ελςΟοΫαΠτδΣωϨʔλʔ ͖ͳਓ͖ͳʙͭ 1VH <%= EJS %> ςϯϓϨʔτΤϯδϯ ελςΟοΫαΠτδΣωϨʔλʔ /VYU 41"ϑϨʔϜϫʔΫʁ
/VYU ͑ɺ41"ϑϨʔϜϫʔΫʁ 1VH <%= EJS %> ςϯϓϨʔτΤϯδϯ ελςΟοΫαΠτδΣωϨʔλʔ
վΊ·ͯ͠/VYUͱ ɾ 7VFKTΛ֦ுͨ͠ϑϨʔϜϫʔΫ ɾ XFCQBDL #BCFM ɾ 41"࡞ͬͨΓɺ 443ͤͨ͞Γ
ɾ࣮ ੩తαΠτ࡞ΕΔ IUUQTOVYUKTPSH
ςϯϓϨʔτ୭Ͱॻ͚Δ <template> <div class="l-child"> <Modal...> <template slot="heading"...> <div class="p-session-detail"> <div
class="__meta"...> <div class="__heading"> <h3 :id="`session-${id}-title`" v-html="formattedTitle" /> <p v-if="price > 0" class="__price"> <strong>༗ྉ {{ price | commaSeparatedNumbers }}ԁ</strong> </p> </div> <div class="__description"> <p class="__summary" v-html="formattedSummary" /> <ul class="__speakers"> <li v-for="(speaker, i) in speakers" :key="speaker.id"> <nuxt-link :to="`/speakers/${speaker.id}`"...> </li> </ul> </div> <div class="__scope"...> <div class="__commands"...> </div> </Modal> </div> </template>
ίϯϙʔωϯτͷ࠶ར༻͕Մೳ <SessionItem v-for="session in slot.sessions" :key="session.id" v-bind="session" /> <VividButton tag="a"
:href="LINK_TO_LOG_IN" target="_blank" pill outline white ><strong>ࢀՃऀϩάΠϯ</strong></VividButton> <VividButton tag="a" :href="LINK_REGIST_WITH_ADOBE_ID" target="_blank" pill white ><strong>ࢹௌొ</strong></VividButton>
ڥߏஙʹ·ͳ͍ ɾXFCQBDLͰ ݁(VMQ ෆཁ ɾ+4 &4 Ͱॻ͚Δ ɾελΠϧ MFTT4BTT4UZMVTͰॻ͚Δ ɾ
ϛχϑΝΠɾ ίʔυׂͬͪΓ ɾը૾Λ #BTFͰΤϯίʔυͯ͘͠ΕΔ ɾ ϧʔςΟϯάϑΝΠϧΛஔ͚ͩ͘
੩తαΠτੜίϚϯυ nuxt generate
ϧʔτ͝ͱʹ)5.-Λग़ྗ \^ +40/ ϧʔςΟϯά ▪ /pages ├┬ /index ││
│├┬ /sessions ││└─ _id.vue ││ │└┬ /speakers │ └─ _id.vue │ └ index.vue )5.-ग़ྗ ▪ /dist ├┬ /sessions │├┬ /2272 ││└─ index.html │├┬ /2273 ││└─ index.html │└┬ /2274 │ └─ index.html ├┬ /speakers │├┬ /0 ││└─ index.html │├┬ /1 ││└─ index.html │└┬ /2 │ └─ index.html └ index.html ಈతϧʔτͷҾ͖ͯ // nuxt.config.js module.exports = { generate: { routes() { return fetchMasterData() .then(({ sessions, speakers }) => { const map = (dir, id) => `${dir}/${id}` return sessions .map(({ id }) => map('/sessions', id)) .concat( speakers .map(({ id }) => map('/speakers', id)) ) }) } } }
αʔόʔΛબͳ͍ ɾશϖʔδͷ )5.- ϑΝΠϧ͕ ࣮ࡏ͢Δ ɾ41"443ʹඞཁͳ όοΫΤϯυ࣮͕ ෆཁ ɾͲΜͳΣϒαʔόʔʹஔ͚Δ
·ͱΊ ɾใ εϓϨουγʔτͰҰݩཧ ɾεϓϨουγʔτͷσʔλ "QQT4DSJQUͰ +40/Խ ɾίʔυ &4 ͱ 4$44Ͱॻ͘
ɾͰ ։ൃڥߏங αϘΔ ɾશϖʔδΛ ੩తʹஔ͢Δ
ී௨ͷ͜ͱΛී௨ʹ͢ΔͨΊͷ/VYU ɾ +40/͔Β ϖʔδΛ ੜͰ͖Δ ɾςϯϓϨʔτ ୭Ͱॻ͚Δ ɾίϯϙʔωϯτͷ ࠶ར༻͕ Մೳ
ɾͨΓલͷ ։ൃڥ͕ఏڙ͞ΕΔ ɾnuxt generate ίϚϯυͰ ੩తʹϑΝΠϧ͕ग़ྗ͞ΕΔ
/VYU ී௨
ٻਓͷ͓Βͤ ɾΤϯδχΞ ɾσΟϨΫλʔ ɾϚʔέλʔ ී௨ΛΞοϓσʔτͰ͖Δํɺ Ұॹʹಇ͖·ͤΜ͔ʁ IUUQTXXXXBOUFEMZDPNDPNQBOJFTNBCPSPTIJ
+4ษڧձɺͬͯ·͢ ʮͪΌΜͱॻ͘+4ʯ IUUQTNBCPSPTIJDPOOQBTTDPNFWFOU ʮ܅ΑɺଵଦͨΕʯʢԾʣ ʢԾʣ
͋Γ͕ͱ͏͍͟͝·ͨ͠ ྑ͍͓Λ