5 Points Of Customizing Vuetify

Transcript

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

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

   @plumsa

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

4. ษڧձͷએ఻ 13*.&
   03%&3Ͱ͸
   ִिͰٕज़ษڧձΛ։ ࠵͍ͯ͠·͢ɻ
   ςʔϚ͋Γͷ
   ࢀՃऀશһͰखΛಈ͔ ͠ͳ͕Βਐߦ͢ΔϞϒ ϓϩͷΑ͏ͳײ͡Ͱ ͢ɻ
   ࢒ΓΘ͔ͣʂ
   

   ઌண໊༷ʂʂ
   ͷ֬཰Ͱλίύʂ 13*.&
   5&$)
   5"-,Ͱݕࡧ
   IUUQTQMVNTBDPOOQBTTDPNFWFOU

5. 7VFUJGZΛపఈతʹΧελϚΠζ͢Δ
   ͭͷϙΠϯτ  ίϯϙʔωϯτͷϓϩύςΟͷ࢓༷Λ
 ׬શʹཧղ͢Δ
    είʔϓ෇͖εϩοτ 4DPQFE4MPU Λ
 ׬શʹཧղ͢Δ
   

    ίϯϙʔωϯτͷΧελϜΠϕϯτΛ
 ׬શʹཧղ͢Δ
    TZODम০ࢠͱVQEBUFΛ׬શʹཧղ͢Δ
    WNPEFMΛ׬શʹཧղ͢Δ

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

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

   ϓϩύςΟͷܕ͕CPPMFBOͷ৔߹ɺ஋ͳ͠Ͱهड़͢Δͱ஋USVFͱͳ ΔɻEJTBCMFE
   
   EJTBCMFElUSVFz͜͏ॻ͘ͷͱಉ͡
   w σϑΥϧτ஋͕͋ΓϓϩύςΟ͕౉͞Εͳ͍৔߹ɺ
 σϑΥϧτ஋Ͱίϯϙʔωϯτ͸ઃఆ͞ΕΔɻ
 υΩϡϝϯτʹهࡌ͞Ε͍ͯΔσϑΥϧτ஋ʹͳΔ
   w ม਺ͰσʔλΛ౉͢Α͏ͳಈతͳ஋Λ౉͢ࡍ͸ɺ
 ඞͣWCJOEΛ࢖༻͢Δɻ
 EJTBCMFElJT)PHFz
   
   WCJOE͠ͳ͍ͱzJT)PHFzͱ͍͏ͨͩͷจࣈྻʹͳΔ ҎԼͷ࢓༷͸جຊతʹॏཁʂ

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

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ཁૉʹ෇༩͞ΕΔɻ ҎԼͷ࢓༷ͷཧղ͸ΧελϚΠζ࣌ʹॏཁʂ

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

11. εϩοτΛ࢖͏ͱ
    ίϯϙʔωϯτͷதͷίϯςϯπΛ
    ࢖༻࣌ʹ޷͖ͳ΋ͷʹஔ͖׵͑Δ͜ͱ͕Ͱ͖Δ ΧελϚΠζʹ͸εϩοτ͕௒ॏཁʂ εϩοτͷ࢓༷ͷதͰ΋
    ίϯϙʔωϯτͷதͷσʔλΛ
    ར༻࣌ʢεϩοτίϯςϯπʣʹड͚౉ͤΔ
    είʔϓ෇͖εϩοτ 4DPQFE4MPU ͸
    

    ࢓༷Λཧղ͍ͯ͠ͳ͍ͱ্ख͘࢖͍͜ͳͤͳ͍ɻ
    υΩϡϝϯτͷݟຊίʔυͰ͸
    &4ͷΦϒδΣΫτͷ෼ׂ୅ೖ͕ଟ༻͞Ε͍ͯΔͷͰ
    &4ͷ࢓༷΋͔ͬ͠Γ಄ʹೖΕ͓ͯ͘͜ͱ͕ॏཁɻ
    IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC+BWB4DSJQU3FGFSFODF0QFSBUPST %FTUSVDUVSJOH@BTTJHONFOU0CKFDU@EFTUSVDUVSJOH

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

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

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

15. ίϯϙʔωϯτͰ@inputͷΑ͏ʹॻ͘΋ͷ͸ɺ
    IUNMཁૉͰϦοεϯͰ͖ΔΑ͏ͳ
    ωΠςΟϒͷΠϕϯτͰ͸ͳ͘ΧελϜΠϕϯτ FNJU bJOQVU` ͱͯ͠ίϯϙʔωϯτ࡞ऀ͕ΠϕϯτΛൃՐ ͤ͞޷͖ͳ஋Λૹ͍ͬͯΔ͚ͩɻ
    ΧελϜΠϕϯτͱωΠςΟϒΠϕϯτ͸ผ෺
    FUBSHFUWBMVFͷΑ͏ʹॻ͍ͯ΋஋͸औಘͰ͖ͳ͍ɻ
    FUBSHFUWBMVFͷΑ͏ʹॻ͚Δ΋ͷ͸ɺίϯϙʔωϯτ࡞ऀ

    ͕ωΠςΟϒΠϕϯτͷΦϒδΣΫτΛ
    ΧελϜΠϕϯτͰ౉͍ͯ͠Δɺ
    ΋͘͠͸ɺMJTUFOFSTϓϩύςΟΛ࢖ͬͯίϯϙʔωϯτ
    શͯͷΠϕϯτϦεφΛɺಛఆͷࢠཁૉʹඥ͚͍ͮͯΔɻ
    ྫʣWCUO͸υΩϡϝϯτͰ&WFOUλϒ͕ͳ͍͕DMJDLΠϕϯτͳͲͷ
    ωΠςΟϒΠϕϯτ͕ϦοεϯͰ͖Δɻ

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

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

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

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

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

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

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

    Πϕϯτ͕ൃՐͨ͠Βɺ஋Λ EPDUJUMFʹ֨ೲ͢Δɻ
    
 Ͳ͔͜ͰEPDUJUMF͕ॻ͖׵ ΘͬͨΒɺWBMVFʹόΠϯ υ͞Εͨ஋͕
    มΘΔɻ

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

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

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

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

    WNPEFMͰมߋΛόΠϯυ͞ΕΔϓϩύςΟ͕
    JOQVUWBMVFͳͷ͸ɺ
    7VFͰ͸ͳ͘ɺ7VFUJGZͷ࢓༷ɻ

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