ハンドメイド now loading

2019/05/25 Tech美られでぃ #1

Transcript

1. ϋϯυϝΠυ now loading 2019/05/25 TechඒΒΕͰ͌ #1 @gomaaburamax
2. ࣗݾ঺հ • ͝· (@gomaaburamax) • ΤϯδχΞ5೥ੜ • PHP/JS/Perl • ϑϦʔϥϯε ݉ ฼ۀ
3. ͋Δ೔ͷग़དྷࣄ ͍͍ͩͨ#PPUTUSBQ ִؒ௚͍ͨ͠ MJTUͷදࣔͷ಄ͷ伱ؒফ͍ͨ͠ ϒϩοΫͷ֎ʹώϣίͬͱΞΠίϯग़͍ͨ͠ ӈد͍͚ͤͨ͠Ͳޮ͔ͳ͍ͳʁ
4. ͋Δ೔ͷग़དྷࣄ ͍͍ͩͨ#PPUTUSBQ ִؒ௚͍ͨ͠ MJTUͷදࣔͷ಄ͷ伱ؒফ͍ͨ͠ ϒϩοΫͷ֎ʹώϣίͬͱΞΠίϯग़͍ͨ͠ ӈد͍͚ͤͨ͠Ͳޮ͔ͳ͍ͳʁ Ͳ͍͘͜ͶʔΜ ͋ͬͪ΋ͬͪ͜΋
   ༧ظͤ͵伱ؒൃੜ ޮ͔ͳ͍ϓϩύςΟ ্ॻ͖ ͞Ε·͍ͬͯͯ͘
   ΋͸΍ոจॻ
5. ͋Δ೔ͷग़དྷࣄ ͍͍ͩͨ#PPUTUSBQ ִؒ௚͍ͨ͠ MJTUͷදࣔͷ಄ͷ伱ؒফ͍ͨ͠ ϒϩοΫͷ֎ʹώϣίͬͱΞΠίϯग़͍ͨ͠ ӈد͍͚ͤͨ͠Ͳޮ͔ͳ͍ͳʁ Ͳ͍͘͜ͶʔΜ ͋ͬͪ΋ͬͪ͜΋
   ༧ظͤ͵伱ؒൃੜ ޮ͔ͳ͍ϓϩύςΟ ্ॻ͖ ͞Ε·͍ͬͯͯ͘
   ΋͸΍ոจॻ ࢲͷCSSྗ
6. എܠ • CSSϑϨʔϜϫʔΫ͔͠࢖ͬͯͳ͍ • ->CSS஌͕ࣝখखઌܳɺߏ଄෼ੳͰ͖ͳ͍ • ݕࡧͱ࣮૷ʹଟେͳ࣌ؒΛ͔͚͍ͯΔ • ->ແବͷۃΈ
7. Αͬ͠Όษڧͬͧ͢
10. ৄ͍͠࿩͸ʮ͗ͷΘΜษڧձʯͰൃද͠·ͨ͠
11. CSSΞχϝʔγϣϯָ͠ ͍!!!!!!!!!!!!!!!!!!!!!!!!!
12. CSSΞχϝʔγϣϯͰ ϋϯυϝΠυ now loading 2019/05/25 TechඒΒΕͰ͌ #1 @gomaaburamax
13. Now loading #ͱ͸ • ϩʔσΟϯάΞχϝʔγϣϯ • API௨৴ͳͲʹΑΔ஋औಘதͷ࣌ؒʹϢʔβͷ ཭୤Λ๷͙ͨΊʹग़͢Ξχϝʔγϣϯ ͍ΘΏΔ͜͏͍͏ͷˠ
14. ࡞Γํ͞·͟· • CSS animation • svg • Illustrator • gif • gifը૾࡞੒αΠτ
15. ࡞Γํ͞·͟· • CSS animation • svg • Illustrator • gif • gifը૾࡞੒αΠτ
16. CSSΞχϝʔγϣϯ ͷ࡞Γํ
17. JOEFYDTT CSSΞχϝʔγϣϯͷ࡞Γํ ର৅%0.
    DMBTT
    \
    جຊͷܗ XJEUI
    IFJHIU
    CBDLHSPVOEDPMPSʜ
    ^ BOJNBUJPO
    ϓϩύςΟ !LFZGSBNFT
    ໊લ
    \
    ^
18. JOEFYDTT CSSΞχϝʔγϣϯͷ࡞Γํ ର৅%0.
    DMBTT
    \
    جຊͷܗ XJEUI
    IFJHIU
    CBDLHSPVOEDPMPSʜ
    ^ BOJNBUJPO
    ϓϩύςΟ !LFZGSBNFT
    ໊લ
    \
    ^ ͲͷλΠϛϯάͰɺ Ͳ͏͍͏ܗʹͳ͍ͬͯΔ͔
 ઃఆ͢Δ
19. JOEFYDTT CSSΞχϝʔγϣϯͷ࡞Γํ ର৅%0.
    DMBTT
    \
    جຊͷܗ XJEUI
    IFJHIU
    CBDLHSPVOEDPMPSʜ
    ^ BOJNBUJPO
    ϓϩύςΟ !LFZGSBNFT
    ໊લ
    \
    ^
    
    
    
    
    \
    
    
    
    
    
    
    
    
    XJEUI
    QY
    
    
    
    
    ^
    
    
    
    
    \
    
    
    
    
    
    
    
    
    XJEUI
    QY
    
    
    
    
    ^
20. JOEFYDTT CSSΞχϝʔγϣϯͷ࡞Γํ ର৅%0.
    DMBTT
    \
    جຊͷܗ XJEUI
    IFJHIU
    CBDLHSPVOEDPMPSʜ
    ^ BOJNBUJPO
    ϓϩύςΟ ࢦఆ !LFZGSBNFT
    ໊લ
    \
    ^
    
    
    
    
    \
    
    
    
    
    
    
    
    
    XJEUI
    QY
    
    
    
    
    ^
    
    
    
    
    \
    
    
    
    
    
    
    
    
    XJEUI
    QY
    
    
    
    
    ^
21. JOEFYDTT CSSΞχϝʔγϣϯͷ࡞Γํ ର৅%0.
    DMBTT
    \
    جຊͷܗ XJEUI
    IFJHIU
    CBDLHSPVOEDPMPSʜ
    ^ BOJNBUJPO
    MPOHFS ࢦఆ !LFZGSBNFT
    MPOHFS
    \
    ^
    
    
    
    
    \
    
    
    
    
    
    
    
    
    XJEUI
    QY
    
    
    
    
    ^
    
    
    
    
    \
    
    
    
    
    
    
    
    
    XJEUI
    QY
    
    
    
    
    ^
22. JOEFYDTT CSSΞχϝʔγϣϯͷ࡞Γํ ର৅%0.
    DMBTT
    \
    جຊͷܗ XJEUI
    IFJHIU
    CBDLHSPVOEDPMPSʜ
    ^ BOJNBUJPO
    TIBLF !LFZGSBNFT
    MPOHFS
    \
    ^ มԽʹ͍ͭͯઃఆ ͲΕ͘Β͍ͷ଎͞Ͱʁ ΪϡΠʔϯͬͯมΘΔʁҰఆʹมΘΔʁ ΤϯυϨεͰʁ
    
    
    
    
    \
    
    
    
    
    
    
    
    
    XJEUI
    QY
    
    
    
    
    ^
    
    
    
    
    \
    
    
    
    
    
    
    
    
    XJEUI
    QY
    
    
    
    
    ^
23. JOEFYDTT CSSΞχϝʔγϣϯͷ࡞Γํ ର৅%0.
    DMBTT
    \
    جຊͷܗ XJEUI
    IFJHIU
    CBDLHSPVOEDPMPSʜ
    ^ BOJNBUJPO
    MPOHFS
    FBTFJOPVU
    T
    JOpOJUF; !LFZGSBNFT
    MPOHFS
    \
    ^ -> ΪϡΠʔϯͱ2ඵ͔͚ͯແݶ࠶ੜ ※ৄࡉׂѪ
    
    
    
    
    \
    
    
    
    
    
    
    
    
    XJEUI
    QY
    
    
    
    
    ^
    
    
    
    
    \
    
    
    
    
    
    
    
    
    XJEUI
    QY
    
    
    
    
    ^
24. ݟͯΈΑ͏ https://codepen.io/gomayumax/pen/dEmoWJ
25. ͳΜͱͳ͘෼͔Ε͹OK
26. ࡞ͬͨ΋ͷ https://codepen.io/gomayumax/pen/KLQgYj https://gomayumax.github.io/markup/loading_css/loading_1.html https://gomayumax.github.io/markup/loading_css/garagara.html
27. ·ͱΊ • CSSΞχϝʔγϣϯͰ
 ϩʔσΟϯάΞχϝʔγϣϯ͕࡞ΕΔ • animationϓϩύςΟ͸ύϥϝʔλ͕๛෋Ͱ
 Ͱ͖Δ͜ͱ͕ͨ͘͞Μ͋Δ • ͨͷ͍͠ ɹ✌('ω'✌ )ࡾ✌('ω')✌ࡾ( ✌'ω')✌
28. ͕࣌ؒ༨ͬͨΒ….
29. ճస࣠͸ΦϒδΣΫτͷத৺
30. ճస࣠͸ΦϒδΣΫτͷத৺
31. ճస࣠͸ΦϒδΣΫτͷத৺ ←ݟ͑ͳ͍
32. Vue.js
 ࣮ߦλΠϛϯάΛࢦఆ͢ΔΫϥε <transition name="upper"> <div v-if="loading" class="loading-screen shutter"> <div class="center kanban"> <div class="himo"></div> <div class="board"> <p>४උத</p> </div> </div> </div>
33. Vue.js
 ࣮ߦλΠϛϯάΛࢦఆ͢ΔΫϥε <transition name="upper"> <div v-if="loading" class="loading-screen shutter"> <div class="center kanban"> <div class="himo"></div> <div class="board"> <p>४උத</p> </div> </div> </div> .upper-enter-active { animation: upper-in 5s; } .upper-leave-active { animation: upper-in 5s reverse; } @keyframes upper-in { 0% { height: 0; } 100% { height: 100vh; } } •
34. Vue.js
 ࣮ߦλΠϛϯάΛࢦఆ͢ΔΫϥε <transition name="upper"> <div v-if="loading" class="loading-screen shutter"> <div class="center kanban"> <div class="himo"></div> <div class="board"> <p>४උத</p> </div> </div> </div> .upper-enter-active { animation: upper-in 5s; } .upper-leave-active { animation: upper-in 5s reverse; } @keyframes upper-in { 0% { height: 0; } 100% { height: 100vh; } } •