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

5 Points Of Customizing Vuetify

arm4
December 17, 2019

5 Points Of Customizing Vuetify

arm4

December 17, 2019
Tweet

More Decks by arm4

Other Decks in Technology

Transcript

  1. 7VFUJGZΛపఈతʹΧελϚΠζ͠
    ࣗࡏͳ6*Λ࡞Γ্͛Δ
    ͭͷϙΠϯτ
    2019.12.17 Yoko Hato
    @plumsa

    View full-size slide

  2. ࣗݾ঺հ
    גࣜձࣾϓϥϜβ
    13*.&03%&3ࣄۀ෦
    $50ࣄۀاըϦʔμʔ
    ോ༸ࢠ
    ௨শɿϥϥɾϕϧࢠ
    ໊͋ͩɿ՝୊ղܾ͓࢞͞Μ
    ೔ৗܥެࣜ5XJUUFSΛ΍͍ͬͯ·͢ɻ
    ՋͭͿ͍ͨ࣌͠ʹϑΥϩʔ͍ͯͩ͘͠͞ɻ
    ΑΖ͓͘͠ئ͍͠·͢ɻ
    @plumsa

    View full-size slide

  3. 13*.&03%&3ͷએ఻
    13*.&03%&3͸
    ৽͍͠Χλνͷडୗ։ൃαʔϏε
    IUUQTQSJNFPSEFSKQ
    ࢲ͕ͨͪಘҙͱ͢ΔγεςϜ͸ɺ
    Ϗδωε՝୊ʹ௚໘͍ͯ͠Δ͓٬༷ͷղܾࡦͱͳΔ
    ׬શΦʔμʔϝΠυͷۀ຿γεςϜͰ͢ɻ

    View full-size slide

  4. ษڧձͷએ఻
    13*.&03%&3Ͱ͸
    ִिͰٕज़ษڧձΛ։
    ࠵͍ͯ͠·͢ɻ
    ςʔϚ͋Γͷ
    ࢀՃऀશһͰखΛಈ͔
    ͠ͳ͕Βਐߦ͢ΔϞϒ
    ϓϩͷΑ͏ͳײ͡Ͱ
    ͢ɻ
    ࢒ΓΘ͔ͣʂ
    ઌண໊༷ʂʂ
    ͷ֬཰Ͱλίύʂ
    13*.&5&$)5"-,Ͱݕࡧ
    IUUQTQMVNTBDPOOQBTTDPNFWFOU

    View full-size slide

  5. 7VFUJGZΛపఈతʹΧελϚΠζ͢Δ
    ͭͷϙΠϯτ
    ίϯϙʔωϯτͷϓϩύςΟͷ࢓༷Λ

    ׬શʹཧղ͢Δ
    είʔϓ෇͖εϩοτ 4DPQFE4MPU
    Λ

    ׬શʹཧղ͢Δ
    ίϯϙʔωϯτͷΧελϜΠϕϯτΛ

    ׬શʹཧղ͢Δ
    TZODम০ࢠͱVQEBUFΛ׬શʹཧղ͢Δ
    WNPEFMΛ׬શʹཧղ͢Δ

    View full-size slide

  6. Point. 1
    ίϯϙʔωϯτͷϓϩύςΟ
    ͷ࢓༷Λ׬શʹཧղ͢Δ

    View full-size slide

  7. ίϯϙʔωϯτͷϓϩύςΟ QSPQT

    ʹ͸ܕͱσϑΥϧτ஋͕ઃఆͰ͖Δ
    w ࢦఆ͞ΕͨܕͰ͸ͳ͍஋ΛϓϩύςΟͰ౉͢ͱΤϥʔʹͳΔɻ
    EJTBCMFElจࣈͩΑzCPPMFBOʹจࣈྻΛ౉͍ͯ͠ΔͷͰΤϥʔ
    w WCJOEͰ౉͞ͳ͍৔߹ɺશͯ͸จࣈྻͱͯ͠౉͞ΕΔɻ

    EJTBCMFElGBMTFzlGBMTFzͱ͍͏ͨͩͷจࣈྻͷͨΊUSVFͱ൑ఆ͞ΕΔ্ʹΤϥʔ
    w ϓϩύςΟͷܕ͕CPPMFBOͷ৔߹ɺ஋ͳ͠Ͱهड़͢Δͱ஋USVFͱͳ
    ΔɻEJTBCMFEEJTBCMFElUSVFz͜͏ॻ͘ͷͱಉ͡
    w σϑΥϧτ஋͕͋ΓϓϩύςΟ͕౉͞Εͳ͍৔߹ɺ

    σϑΥϧτ஋Ͱίϯϙʔωϯτ͸ઃఆ͞ΕΔɻ

    υΩϡϝϯτʹهࡌ͞Ε͍ͯΔσϑΥϧτ஋ʹͳΔ
    w ม਺ͰσʔλΛ౉͢Α͏ͳಈతͳ஋Λ౉͢ࡍ͸ɺ

    ඞͣWCJOEΛ࢖༻͢Δɻ

    EJTBCMFElJT)PHFzWCJOE͠ͳ͍ͱzJT)PHFzͱ͍͏ͨͩͷจࣈྻʹͳΔ
    ҎԼͷ࢓༷͸جຊతʹॏཁʂ

    View full-size slide

  8. 7VFUJGZυΩϡϝϯτ
    ϓϩύςΟνΣοΫϙΠϯτ

    View full-size slide

  9. ίϯϙʔωϯτͷϧʔτཁૉʹ͸
    ࢖༻࣌ʹଐੑ DMBTT TUZMFͳͲ
    ͕ઃఆͰ͖Δ
    w ίϯϙʔωϯτͷϓϩύςΟͱͯ͠ఆٛ͞Ε͍ͯͳ͍ଐੑΛهड़ͨ͠৔
    ߹ɺϧʔτཁૉͷଐੑͱͯ͠௥Ճ͞ΕΔɻ

    ྫʣϧʔτཁૉ͕EJWͰυΩϡϝϯτʹهࡌͷͳ͍UBCJOEFYΛ௥Ճ͢Δ
    w ΋͠ϧʔτཁૉʹಉ͡ଐੑ͕ఆٛ͞Ε͍ͯΔ৔߹ɺίϯϙʔωϯτ࢖༻࣌
    ʹఆٛͨ͠΋ͷͰ্ॻ͖͞Εͯ͠·͏ɻ

    ྫʣWCUOͷUZQFlCVUUPOz͸UZQFlTVCNJUzʹͰ͖Δ
    w DMBTTͱTUZMF͸ಛผͰɺίϯϙʔωϯτ࢖༻࣌ʹఆٛͨ͠஋͕ϧʔτཁૉ
    ͷ஋ͱϚʔδ͞ΕΔɻ

    ίϯϙʔωϯτར༻࣌ʹDMBTT΍TUZMFΛϧʔτͷEJWͳͲʹ౰ͯΔ͜ͱ͕Ͱ͖Δɻ
    w WDPNCPCPYͷΑ͏ͳJOQVUܥίϯϙʔωϯτͰ͸ɺଐੑ͕௥Ճ͞ΕΔͷ͸
    ϧʔτཁૉͰ͸ͳ͘JOQVUཁૉͰ͋Δ৔߹͕͋Δɻৄ͘͠͸BUUSTͱ
    JOIFSJU"UUSTͰݕࡧɻWDPNCPCPYίϯϙʔωϯτʹDMBTTΛॻ͘ͱJOQVUཁૉʹ෇༩͞ΕΔɻ
    ҎԼͷ࢓༷ͷཧղ͸ΧελϚΠζ࣌ʹॏཁʂ

    View full-size slide

  10. Point. 2
    είʔϓ෇͖εϩοτ
    4DPQFE4MPU
    Λ

    ׬શʹཧղ͢Δ

    View full-size slide

  11. εϩοτΛ࢖͏ͱ
    ίϯϙʔωϯτͷதͷίϯςϯπΛ
    ࢖༻࣌ʹ޷͖ͳ΋ͷʹஔ͖׵͑Δ͜ͱ͕Ͱ͖Δ
    ΧελϚΠζʹ͸εϩοτ͕௒ॏཁʂ
    εϩοτͷ࢓༷ͷதͰ΋
    ίϯϙʔωϯτͷதͷσʔλΛ
    ར༻࣌ʢεϩοτίϯςϯπʣʹड͚౉ͤΔ
    είʔϓ෇͖εϩοτ 4DPQFE4MPU
    ͸
    ࢓༷Λཧղ͍ͯ͠ͳ͍ͱ্ख͘࢖͍͜ͳͤͳ͍ɻ
    υΩϡϝϯτͷݟຊίʔυͰ͸
    &4ͷΦϒδΣΫτͷ෼ׂ୅ೖ͕ଟ༻͞Ε͍ͯΔͷͰ
    &4ͷ࢓༷΋͔ͬ͠Γ಄ʹೖΕ͓ͯ͘͜ͱ͕ॏཁɻ
    IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC+BWB4DSJQU3FGFSFODF0QFSBUPST
    %FTUSVDUVSJOH@BTTJHONFOU0CKFDU@EFTUSVDUVSJOH

    View full-size slide

  12. 7VFUJGZυΩϡϝϯτ
    εϩοτνΣοΫϙΠϯτ

    View full-size slide

  13. ɹεϩοτΛ׬શʹཧղ͢ΔͨΊͷ
    ͓͢͢ΊεϥΠυ঺հ
    IUUQTTQFBLFSEFDLDPNGSPNBSNBCPVUBCTUSBDUDPNQPOFOU
    EFTJHOVTJOHTMPUTPGWVFEPUKT
    ஫໨

    View full-size slide

  14. Point. 3
    ίϯϙʔωϯτͷ
    ΧελϜΠϕϯτΛ

    ׬શʹཧղ͢Δ

    View full-size slide

  15. ίϯϙʔωϯτͰ@inputͷΑ͏ʹॻ͘΋ͷ͸ɺ
    IUNMཁૉͰϦοεϯͰ͖ΔΑ͏ͳ
    ωΠςΟϒͷΠϕϯτͰ͸ͳ͘ΧελϜΠϕϯτ
    FNJU bJOQVU`
    ͱͯ͠ίϯϙʔωϯτ࡞ऀ͕ΠϕϯτΛൃՐ
    ͤ͞޷͖ͳ஋Λૹ͍ͬͯΔ͚ͩɻ
    ΧελϜΠϕϯτͱωΠςΟϒΠϕϯτ͸ผ෺
    FUBSHFUWBMVFͷΑ͏ʹॻ͍ͯ΋஋͸औಘͰ͖ͳ͍ɻ
    FUBSHFUWBMVFͷΑ͏ʹॻ͚Δ΋ͷ͸ɺίϯϙʔωϯτ࡞ऀ
    ͕ωΠςΟϒΠϕϯτͷΦϒδΣΫτΛ
    ΧελϜΠϕϯτͰ౉͍ͯ͠Δɺ
    ΋͘͠͸ɺMJTUFOFSTϓϩύςΟΛ࢖ͬͯίϯϙʔωϯτ
    શͯͷΠϕϯτϦεφΛɺಛఆͷࢠཁૉʹඥ͚͍ͮͯΔɻ
    ྫʣWCUO͸υΩϡϝϯτͰ&WFOUλϒ͕ͳ͍͕DMJDLΠϕϯτͳͲͷ
    ωΠςΟϒΠϕϯτ͕ϦοεϯͰ͖Δɻ

    View full-size slide

  16. 7VFUJGZυΩϡϝϯτ
    ΧελϜΠϕϯτνΣοΫϙΠϯτ

    View full-size slide

  17. Point. 4
    TZODम০ࢠͱVQEBUFΛ
    ׬શʹཧղ͢Δ

    View full-size slide

  18. TZODम০ࢠͱ͸
    ಛఆͷϓϩύςΟʹ͓͍ͯٙࣅతʹ
    ૒ํ޲όΠϯσΟϯάΛ࣮ݱͤ͞ΔͨΊʹ࢖͏म০ࢠ
    ʹΘͱΓ͕ઌ͔ཛ͕ઌ͔ͷΑ͏ͳ୯ํ޲αΠΫϧΛ࡞Γɺ
    ٖࣅతʹɺ͔͋ͨ΋σʔλ͕ίϯϙʔωϯτ಺֎Ͱಉظ͍ͯ͠Δ͔ͷ
    Α͏ʹৼΔ෣ΘͤΔίϯϙʔωϯτઃܭςΫχοΫ
    ίϯϙʔωϯτར༻࣌ ίϯϙʔωϯτ಺Ͱ͸͜͏ॻ͔Ε͍ͯΔ

    View full-size slide

  19. 7VFUJGZυΩϡϝϯτ
    TZODVQEBUFΠϕϯτνΣοΫϙΠϯτ

    View full-size slide

  20. TZOD஫ҙ఺
    TZODΛ෇͚ͨ৔߹
    TFBSDIJOQVUTZODlTFBSDIbʂ`z
    ͷΑ͏ʹࣜʹ͢Δ͜ͱ͸Ͱ͖ͳ͍ͨΊ஫ҙ
    ࣜʹ͍ͨ͠৔߹͸
    !VQEBUFTFBSDIJOQVUΛ࢖͏ɻ

    View full-size slide

  21. Point. 5
    WNPEFMΛ׬શʹཧղ͢Δ

    View full-size slide

  22. WNPEFMͱ͸
    JOQVUཁૉʹ͓͍ͯٙࣅతʹ
    ૒ํ޲όΠϯσΟϯάΛ࣮ݱͤ͞ΔͨΊʹ࢖͏σΟϨΫςΟϒ
    JOQVUཁૉɺUFYUBSFBཁૉɺTFMFDUཁૉͰ࢖༻͢Δ͜ͱ͕Ͱ͖ɺ
    ό΢ϯυϓϩύςΟͱΠϕϯτ͸ҎԼͷ૊Έ߹ΘͤͰ͢ɻ
    JOQVUཁૉɺUFYUBSFBཁૉɹɹɹɿWBMVFɺJOQVUΠϕϯτɹɹɹ
    νΣοΫϘοΫεͱϥδΦϘλϯɿDIFDLFEɺDIBOHFΠϕϯτ
    TFMFDUཁૉɹɹɹɹɹɹɹɹɹɿWBMVFɺDIBOHFΠϕϯτ
    ͜Ε͸ɺ7VFUJGZͰ͸ͳ͘ɺ7VFͷ࢓༷ɻ
    JOQVUཁૉͷωΠςΟϒJOQVU
    Πϕϯτ͕ൃՐͨ͠Βɺ஋Λ
    EPDUJUMFʹ֨ೲ͢Δɻ

    Ͳ͔͜ͰEPDUJUMF͕ॻ͖׵
    ΘͬͨΒɺWBMVFʹόΠϯ
    υ͞Εͨ஋͕
    มΘΔɻ

    View full-size slide

  23. ʹΘͱΓ͕ઌ͔ཛ͕ઌ͔ͷΑ͏ͳ୯ํ޲αΠΫϧΛ࡞Γɺ
    ٖࣅతʹɺ͔͋ͨ΋σʔλ͕ίϯϙʔωϯτ಺֎Ͱಉظ͍ͯ͠Δ͔ͷ
    Α͏ʹৼΔ෣ΘͤΔίϯϙʔωϯτઃܭςΫχοΫ
    ίϯϙʔωϯτར༻࣌ ίϯϙʔωϯτ಺Ͱ͸͜͏ॻ͔Ε͍ͯΔ
    ίϯϙʔωϯτʹ͓͚ΔWNPEFMͱ͸
    ٙࣅతʹIUNMཁૉͰߦ͍ͬͯΔWNPEFMͷڍಈΛ
    ίϯϙʔωϯτͰ࣮ݱͤ͞ΔͨΊʹ࢖͏σΟϨΫςΟϒ

    View full-size slide

  24. ͓෼͔Γ
    ͍͚ͨͩͨͩΖ͏͔ʁ

    View full-size slide

  25. ίϯϙʔωϯτʹ͓͚ΔWNPEFMͱ͸ɺ
    TZODͱ΄΅ಉ͡ڍಈΛ͍ͯ͠Δ
    ίϯϙʔωϯτ࡞੒ऀ͕޷͖ͳΑ͏ʹ࡞ΕΔ
    WNPEFMͳͷͰ͋Γ
    ࢲ͕ͨͪΑ͘஌͍ͬͯΔWNPEFMͱ͸
    Α͘ࣅ͍ͯΔผ෺ɻ
    ͱࢥͬͨ΄͏͕͍͍ɻ

    View full-size slide

  26. WDIFDLCPYͷΑ͏ͳίϯϙʔ
    ωϯτͰ͸ɺWNPEFM͸ίϯ
    ϙʔωϯτͷ಺෦Ͱ͜ͷΑ͏
    ʹॻ͔Ε͓ͯΓɺ
    NPEFMΦϓγϣϯΛ࢖༻ͯ͠
    ίϯϙʔωϯτͰWNPEFM͕ࢦ
    ఆ͞Εͨͱ͖ʹ࢖༻͞ΕΔ
    ϓϩύςΟͱΠϕϯτΛ
    ΧελϚΠζ͍ͯ͠Δ͜ͱ͕
    ෼͔Δɻ
    WNPEFMͰมߋΛόΠϯυ͞ΕΔϓϩύςΟ͕
    JOQVUWBMVFͳͷ͸ɺ
    7VFͰ͸ͳ͘ɺ7VFUJGZͷ࢓༷ɻ

    View full-size slide

  27. ·ͱΊ
    7VFͷ࢓༷ɺಛʹίϯϙʔωϯτपΓͷ࢓༷Λ཈͑
    ͓͔ͯͳ͍ͱ7VFUJGZΧελϚΠζ࣌ʹ
    ϋϚΓϙΠϯτͱͳΓ
    ΧελϚΠζ͕೉͘͠ײ͡Δɻ
    ࠓ೔ͷͭͷϙΠϯτΛ཈͓͑ͯ͘ͱϋϚΓͮΒ͍
    5IBOLZPV❤
    -FU`T7VFUJGZ

    View full-size slide