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.5k
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
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
190
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
230
Macとオーディオ再生 2024/11/02
yusukeito
0
370
CSC509 Lecture 13
javiergs
PRO
0
110
Figma Dev Modeで変わる!Flutterの開発体験
watanave
0
140
ペアーズにおけるAmazon Bedrockを⽤いた障害対応⽀援 ⽣成AIツールの導⼊事例 @ 20241115配信AWSウェビナー登壇
fukubaka0825
6
2k
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
190
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
610
Jakarta EE meets AI
ivargrimstad
0
670
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
170
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
120
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
540
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
Docker and Python
trallard
40
3.1k
KATA
mclloyd
29
14k
A better future with KSS
kneath
238
17k
Gamification - CAS2011
davidbonilla
80
5k
What's in a price? How to price your products and services
michaelherold
243
12k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
Why Our Code Smells
bkeepers
PRO
334
57k
Writing Fast Ruby
sferik
627
61k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
Into the Great Unknown - MozCon
thekraken
32
1.5k
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 ʮ܅ΑɺଵଦͨΕʯʢԾʣ ʢԾʣ
͋Γ͕ͱ͏͍͟͝·ͨ͠ ྑ͍͓Λ