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

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

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

47e65331c5cefdea87eb05b0753456ce?s=128

KIMURA Tetsuro

November 30, 2018
Tweet

Transcript

  1. None
  2. ໦ଜ఩࿕ ϑϩϯτΤϯυΤϯδχΞ ޷͖ͳ"EPCF ٶా༏ر σβΠφʔ ޷͖ͳ"EPCF

  3. ׬શʹҰக 1IPUPTIPQ4LFUDI ฐࣾϩΰ

  4. ͛͢ʔී௨ͷ࿩Λ͠·͢ɻ

  5. ͓͓·͔ͳશମ૾

  6. None
  7. IUUQTNBYKBQBOBEPCFDPN

  8. ཁ݅ w ηογϣϯΛҰཡ͢Δ w ొஃऀΛҰཡ͢Δ w ηογϣϯɾొஃऀ͝ͱʹ
 ݸผͷϖʔδΛઃ͚Δ w ৘ใ؅ཧͷ؆ུԽ

    w ී௨ͷϨϯλϧαʔόʔʹϗεςΟϯά
  9. 5IFී௨

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

    w֓ཁɾର৅ऀɾϨϕϧ wਃ͠ࠐΈϖʔδ΁ͷϦϯΫʢϘπʣ ηογϣϯ਺ɿ݅ τοϓϖʔδͷҰཡʹ΋ܝࡌ
  11. ొஃऀ৘ใ wϓϩϑΟʔϧࣸਅ  w໊લͱݞॻ͖  w঺հจ w୲౰ηογϣϯʢৄࡉϖʔδ΁ϦϯΫʣ ొஃऀ਺ɿ໊ τοϓϖʔδͷҰཡʹ΋ܝࡌ

  12. ؆қαΠτϚοϓ

  13. ಉ͡৘ใΛ܁Γฦ͠༻͍Δ

  14. ৘ใ؅ཧͷ؆ུԽͱσʔλιʔεͷ౷߹

  15. ৘ใ؅ཧͷ؆ུԽͱσʔλιʔεͷ౷߹ w ৘ใΛ+40/Խ͢Δ͜ͱͰ࠶ར༻͍ͨ͠ w εϓϨουγʔτͳΒʜ w ୭Ͱ΋ɾ͍ͭͰ΋ɾͲ͜Ͱ΋
 ৘ใΛ؆୯ʹฤूͰ͖Δ w "QQT4DSJQUΛ༻͍ͯσʔλΛ+40/ԽͰ͖Δ

  16. ओͨΔγʔτ͸ͭ TFTTJPOTશηογϣϯͷ৘ใ TQFBLFSTશొஃऀͷ৘ใ TMPUT։࠵࿮ͷϚελʔ BQQT࢖༻ΞϓϦέʔγϣϯͷϚελʔ

  17. { "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<>
  18. σʔλ͸༻ҙͰ͖ͨ
 ͋ͱ͸Ͳ͏΍ͬͯྲྀ͠ࠐΉ͔

  19. ํ๏͸৭ʑ 1VH <%= EJS %> ςϯϓϨʔτΤϯδϯ ελςΟοΫαΠτδΣωϨʔλʔ /VYU 41"ϑϨʔϜϫʔΫʁ

  20. ελςΟοΫαΠτδΣωϨʔλʔ 1VH <%= EJS %> ςϯϓϨʔτΤϯδϯ )5.-ઐ໳ͷํʑ ελςΟοΫαΠτδΣωϨʔλʔ /VYU 41"ϑϨʔϜϫʔΫʁ

  21. ελςΟοΫαΠτδΣωϨʔλʔ ޷͖ͳਓ͸޷͖ͳ΍ʙͭ 1VH <%= EJS %> ςϯϓϨʔτΤϯδϯ ελςΟοΫαΠτδΣωϨʔλʔ /VYU 41"ϑϨʔϜϫʔΫʁ

  22. /VYU ͑ɺ41"ϑϨʔϜϫʔΫʁ 1VH <%= EJS %> ςϯϓϨʔτΤϯδϯ ελςΟοΫαΠτδΣωϨʔλʔ

  23. վΊ·ͯ͠/VYUͱ͸ ɾ 7VFKTΛ֦ுͨ͠ϑϨʔϜϫʔΫ ɾ XFCQBDL  #BCFM ɾ 41"࡞ͬͨΓɺ 443ͤͨ͞Γ

    ɾ࣮͸ ੩తαΠτ΋࡞ΕΔ IUUQTOVYUKTPSH
  24. ςϯϓϨʔτ͸୭Ͱ΋ॻ͚Δ <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>
  25. ίϯϙʔωϯτͷ࠶ར༻͕Մೳ <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>
  26. ؀ڥߏஙʹ೰·ͳ͍ ɾXFCQBDLͰ ׬݁(VMQ ෆཁ ɾ+4͸ &4 Ͱॻ͚Δ ɾελΠϧ͸ MFTT4BTT4UZMVTͰॻ͚Δ ɾ

    ϛχϑΝΠɾ ίʔυ෼ׂ΋͹ͬͪΓ ɾը૾Λ #BTFͰΤϯίʔυͯ͘͠ΕΔ ɾ ϧʔςΟϯά͸ϑΝΠϧΛஔ͚ͩ͘
  27. ੩తαΠτੜ੒ίϚϯυ nuxt generate

  28. ϧʔτ͝ͱʹ)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)) ) }) } } }
  29. αʔόʔΛબ͹ͳ͍ ɾશϖʔδ෼ͷ
 )5.- ϑΝΠϧ͕ ࣮ࡏ͢Δ ɾ41"΍443ʹඞཁͳ
 όοΫΤϯυ࣮૷͕ ෆཁ ɾͲΜͳ΢Σϒαʔόʔʹ΋ஔ͚Δ

  30. ·ͱΊ ɾ৘ใ͸ εϓϨουγʔτͰҰݩ؅ཧ ɾεϓϨουγʔτͷσʔλ͸
 "QQT4DSJQUͰ +40/Խ ɾίʔυ͸ &4 ͱ 4$44Ͱॻ͘

    ɾͰ΋ ։ൃ؀ڥߏங͸ αϘΔ ɾશϖʔδΛ ੩తʹ഑ஔ͢Δ
  31. ී௨ͷ͜ͱΛී௨ʹ͢ΔͨΊͷ/VYU ɾ +40/͔Β ϖʔδΛ ੜ੒Ͱ͖Δ ɾςϯϓϨʔτ͸ ୭Ͱ΋ॻ͚Δ ɾίϯϙʔωϯτͷ ࠶ར༻͕ Մೳ

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

  33. ٻਓͷ͓஌Βͤ ɾΤϯδχΞ ɾσΟϨΫλʔ ɾϚʔέλʔ ී௨ΛΞοϓσʔτͰ͖Δํɺ Ұॹʹಇ͖·ͤΜ͔ʁ IUUQTXXXXBOUFEMZDPNDPNQBOJFTNBCPSPTIJ

  34. +4ษڧձɺ΍ͬͯ·͢ 
 ʮͪΌΜͱॻ͘+4ʯ IUUQTNBCPSPTIJDPOOQBTTDPNFWFOU  ʮ܅ΑɺଵଦͨΕʯʢԾʣ  ʢԾʣ

  35. ͋Γ͕ͱ͏͍͟͝·ͨ͠
 ྑ͍͓೥Λ