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

Transcript

1. None

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

3. ׬શʹҰக 1IPUPTIPQ
   4LFUDI ฐࣾϩΰ

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
    "QQT
    4DSJQU
    Λ༻͍ͯσʔλΛ+40/ԽͰ͖Δ

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

17. { "id": 41, "name": "Adobe Fonts" } "QQT
    4DSJQU
    Ͱ
    +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. ·ͱΊ ɾ৘ใ͸ εϓϨουγʔτͰҰݩ؅ཧ
    ɾεϓϨουγʔτͷσʔλ͸
 "QQT
    4DSJQU
    Ͱ
    +40/
    Խ
    ɾίʔυ͸
    &4
    ͱ
    4$44
    Ͱॻ͘
    

    ɾͰ΋ ։ൃ؀ڥߏங͸ αϘΔ
    ɾશϖʔδΛ ੩తʹ഑ஔ͢Δ

31. ී௨ͷ͜ͱΛී௨ʹ͢ΔͨΊͷ/VYU ɾ
    +40/͔Β ϖʔδΛ ੜ੒Ͱ͖Δ
    ɾ
    ςϯϓϨʔτ͸ ୭Ͱ΋ॻ͚Δ
    ɾ
    ίϯϙʔωϯτͷ ࠶ར༻͕ Մೳ
    

    ɾ
    ౰ͨΓલͷ ։ൃ؀ڥ͕ఏڙ͞ΕΔ
    ɾ
    nuxt generate ίϚϯυͰ

    
    ੩తʹϑΝΠϧ͕ग़ྗ͞ΕΔ

32. /VYU ී௨ 

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

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

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