5 Points Of Customizing Vuetify

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

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

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

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

   View Slide

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

   View Slide

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

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

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

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

   ඞͣWCJOEΛ࢖༻͢Δɻ

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

   View Slide

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

   View 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 Slide

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

    ׬શʹཧղ͢Δ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    ׬શʹཧղ͢Δ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide