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

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

Transcript

1. View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. ͓͓·͔ͳશମ૾
   

   View Slide

6. View Slide

7. IUUQTNBYKBQBOBEPCFDPN
   

   View Slide

8. ཁ݅
   w ηογϣϯΛҰཡ͢Δ
   w ొஃऀΛҰཡ͢Δ
   w ηογϣϯɾొஃऀ͝ͱʹ

   ݸผͷϖʔδΛઃ͚Δ
   w ৘ใ؅ཧͷ؆ུԽ
   w ී௨ͷϨϯλϧαʔόʔʹϗεςΟϯά
   

   View Slide

9. 5IFී௨
   

   View Slide

10. ηογϣϯ৘ใ
    w࣌ؒͱ৔ॴ
    wδϟϯϧͱ࢖༻ΞϓϦ
    wλΠτϧ
    wొஃऀʢৄࡉϖʔδ΁ϦϯΫʣ
    
    w֓ཁɾର৅ऀɾϨϕϧ
    wਃ͠ࠐΈϖʔδ΁ͷϦϯΫʢϘπʣ
    ηογϣϯ਺ɿ݅
    τοϓϖʔδͷҰཡʹ΋ܝࡌ
    

    View Slide

11. ొஃऀ৘ใ
    wϓϩϑΟʔϧࣸਅ
    w໊લͱݞॻ͖
    w঺հจ
    w୲౰ηογϣϯʢৄࡉϖʔδ΁ϦϯΫʣ
    ొஃऀ਺ɿ໊
    τοϓϖʔδͷҰཡʹ΋ܝࡌ
    

    View Slide

12. ؆қαΠτϚοϓ
    

    View Slide

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

    View Slide

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

    View Slide

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

    ৘ใΛ؆୯ʹฤूͰ͖Δ
    w "QQT4DSJQUΛ༻͍ͯσʔλΛ+40/ԽͰ͖Δ
    

    View Slide

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

    View Slide

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": "ήʔϜۀքʹͯʙ"
    }
    TQFBLFST<>
    {
    "id": 4,
    "day": 1,
    "name": "Breakout sessions + Workshop",
    "from": "16:25",
    "to": "17:15"
    }
    TMPUT<>
    BQQT<>
    

    View Slide

18. σʔλ͸༻ҙͰ͖ͨ

    ͋ͱ͸Ͳ͏΍ͬͯྲྀ͠ࠐΉ͔
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

23. վΊ·ͯ͠/VYUͱ͸
    ɾ
    7VFKTΛ֦ுͨ͠ϑϨʔϜϫʔΫ
    ɾ
    XFCQBDL
    #BCFM
    ɾ
    41"࡞ͬͨΓɺ
    443ͤͨ͞Γ
    ɾ࣮͸
    ੩తαΠτ΋࡞ΕΔ
    IUUQTOVYUKTPSH
    

    View Slide

24. ςϯϓϨʔτ͸୭Ͱ΋ॻ͚Δ
    
    
    
    
    
    
    
    
    
    ༗ྉ {{ price | commaSeparatedNumbers }}ԁ
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    View Slide

25. ίϯϙʔωϯτͷ࠶ར༻͕Մೳ
    v-for="session in slot.sessions"
    :key="session.id"
    v-bind="session"
    />
    tag="a"
    :href="LINK_TO_LOG_IN"
    target="_blank"
    pill
    outline
    white
    >ࢀՃऀϩάΠϯ
    tag="a"
    :href="LINK_REGIST_WITH_ADOBE_ID"
    target="_blank"
    pill
    white
    >ࢹௌొ࿥
    

    View Slide

26. ؀ڥߏஙʹ೰·ͳ͍
    ɾXFCQBDLͰ
    ׬݁(VMQ
    ෆཁ
    ɾ+4͸
    &4Ͱॻ͚Δ
    ɾελΠϧ͸
    MFTT4BTT4UZMVTͰॻ͚Δ
    ɾ
    ϛχϑΝΠɾ
    ίʔυ෼ׂ΋͹ͬͪΓ
    ɾը૾Λ
    #BTFͰΤϯίʔυͯ͘͠ΕΔ
    ɾ
    ϧʔςΟϯά͸ϑΝΠϧΛஔ͚ͩ͘
    

    View Slide

27. ੩తαΠτੜ੒ίϚϯυ
    nuxt generate
    

    View Slide

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))
    )
    })
    }
    }
    }
    

    View Slide

29. αʔόʔΛબ͹ͳ͍
    ɾશϖʔδ෼ͷ

    )5.-
    ϑΝΠϧ͕
    ࣮ࡏ͢Δ
    ɾ41"΍443ʹඞཁͳ

    όοΫΤϯυ࣮૷͕
    ෆཁ
    ɾͲΜͳ΢Σϒαʔόʔʹ΋ஔ͚Δ
    

    View Slide

30. ·ͱΊ
    ɾ৘ใ͸
    εϓϨουγʔτͰҰݩ؅ཧ
    ɾεϓϨουγʔτͷσʔλ͸

    "QQT4DSJQUͰ
    +40/Խ
    ɾίʔυ͸
    &4ͱ
    4$44Ͱॻ͘
    ɾͰ΋
    ։ൃ؀ڥߏங͸
    αϘΔ
    ɾશϖʔδΛ
    ੩తʹ഑ஔ͢Δ
    

    View Slide

31. ී௨ͷ͜ͱΛී௨ʹ͢ΔͨΊͷ/VYU
    ɾ
    +40/͔Β
    ϖʔδΛ
    ੜ੒Ͱ͖Δ
    ɾςϯϓϨʔτ͸
    ୭Ͱ΋ॻ͚Δ
    ɾίϯϙʔωϯτͷ
    ࠶ར༻͕
    Մೳ
    ɾ౰ͨΓલͷ
    ։ൃ؀ڥ͕ఏڙ͞ΕΔ
    ɾnuxt generate ίϚϯυͰ

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

    View Slide

32. /VYU
    ී௨
    
    

    View Slide

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

    View Slide

34. +4ษڧձɺ΍ͬͯ·͢
    

    ʮͪΌΜͱॻ͘+4ʯ
    IUUQTNBCPSPTIJDPOOQBTTDPNFWFOU
    
    ʮ܅ΑɺଵଦͨΕʯʢԾʣ
    
    ʢԾʣ
    

    View Slide

35. ͋Γ͕ͱ͏͍͟͝·ͨ͠

    ྑ͍͓೥Λ
    

    View Slide