$30 off During Our Annual Pro Sale. View Details »

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. 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