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
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3k
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
220
CSC509 Lecture 01
javiergs
PRO
1
430
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
580
Let's Write a Train Tracking Algorithm
twocentstudios
0
220
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
380
ソフトウェア設計の実践的な考え方
masuda220
PRO
3
470
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
760
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
370
CSC509 Lecture 02
javiergs
PRO
0
400
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
23
12k
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
180
Featured
See All Featured
Being A Developer After 40
akosma
91
590k
Music & Morning Musume
bryan
46
6.8k
Side Projects
sachag
455
43k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Bash Introduction
62gerente
615
210k
Navigating Team Friction
lara
189
15k
The World Runs on Bad Software
bkeepers
PRO
71
11k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Building Adaptive Systems
keathley
43
2.8k
We Have a Design System, Now What?
morganepeng
53
7.8k
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 ʮ܅ΑɺଵଦͨΕʯʢԾʣ ʢԾʣ
͋Γ͕ͱ͏͍͟͝·ͨ͠ ྑ͍͓Λ