Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Nuxt.jsによるAdobe MAX Japan 2018公式Webサイト制作の舞台裏

Nuxt.jsによるAdobe MAX Japan 2018公式Webサイト制作の舞台裏

2018/11/30 DIST.24 「Re: Adobe MAX Japan 2018」

KIMURA Tetsuro

November 30, 2018
Tweet

More Decks by KIMURA Tetsuro

Other Decks in Programming

Transcript

  1. ηογϣϯ৘ใ w࣌ؒͱ৔ॴ  wδϟϯϧͱ࢖༻ΞϓϦ  wλΠτϧ  wొஃऀ ʢৄࡉϖʔδ΁ϦϯΫʣ 

    w֓ཁɾର৅ऀɾϨϕϧ wਃ͠ࠐΈϖʔδ΁ͷϦϯΫʢϘπʣ ηογϣϯ਺ɿ݅ τοϓϖʔδͷҰཡʹ΋ܝࡌ
  2. { "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<>
  3. ςϯϓϨʔτ͸୭Ͱ΋ॻ͚Δ <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>
  4. ίϯϙʔωϯτͷ࠶ར༻͕Մೳ <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>
  5. ؀ڥߏஙʹ೰·ͳ͍ ɾXFCQBDLͰ ׬݁(VMQ ෆཁ ɾ+4͸ &4 Ͱॻ͚Δ ɾελΠϧ͸ MFTT4BTT4UZMVTͰॻ͚Δ ɾ

    ϛχϑΝΠɾ ίʔυ෼ׂ΋͹ͬͪΓ ɾը૾Λ #BTFͰΤϯίʔυͯ͘͠ΕΔ ɾ ϧʔςΟϯά͸ϑΝΠϧΛஔ͚ͩ͘
  6. ϧʔτ͝ͱʹ)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)) ) }) } } }
  7. ී௨ͷ͜ͱΛී௨ʹ͢ΔͨΊͷ/VYU ɾ +40/͔Β ϖʔδΛ ੜ੒Ͱ͖Δ ɾςϯϓϨʔτ͸ ୭Ͱ΋ॻ͚Δ ɾίϯϙʔωϯτͷ ࠶ར༻͕ Մೳ

    ɾ౰ͨΓલͷ ։ൃ؀ڥ͕ఏڙ͞ΕΔ ɾnuxt generate ίϚϯυͰ
 ੩తʹϑΝΠϧ͕ग़ྗ͞ΕΔ