ハンドメイド now loading

by goma

Slide 1

Slide 1 text

ϋϯυϝΠυ now loading 2019/05/25 TechඒΒΕͰ͌ #1 @gomaaburamax

Slide 2

Slide 2 text

ࣗݾ঺հ • ͝· (@gomaaburamax) • ΤϯδχΞ5೥ੜ • PHP/JS/Perl • ϑϦʔϥϯε ݉ ฼ۀ

Slide 3

Slide 3 text

͋Δ೔ͷग़དྷࣄ ͍͍ͩͨ#PPUTUSBQ ִؒ௚͍ͨ͠ MJTUͷදࣔͷ಄ͷ伱ؒফ͍ͨ͠ ϒϩοΫͷ֎ʹώϣίͬͱΞΠίϯग़͍ͨ͠ ӈد͍͚ͤͨ͠Ͳޮ͔ͳ͍ͳʁ

Slide 4

Slide 4 text

͋Δ೔ͷग़དྷࣄ ͍͍ͩͨ#PPUTUSBQ ִؒ௚͍ͨ͠ MJTUͷදࣔͷ಄ͷ伱ؒফ͍ͨ͠ ϒϩοΫͷ֎ʹώϣίͬͱΞΠίϯग़͍ͨ͠ ӈد͍͚ͤͨ͠Ͳޮ͔ͳ͍ͳʁ Ͳ͍͘͜ͶʔΜ ͋ͬͪ΋ͬͪ͜΋ ༧ظͤ͵伱ؒൃੜ ޮ͔ͳ͍ϓϩύςΟ ্ॻ͖ ͞Ε·͍ͬͯͯ͘ ΋͸΍ոจॻ

Slide 5

Slide 5 text

͋Δ೔ͷग़དྷࣄ ͍͍ͩͨ#PPUTUSBQ ִؒ௚͍ͨ͠ MJTUͷදࣔͷ಄ͷ伱ؒফ͍ͨ͠ ϒϩοΫͷ֎ʹώϣίͬͱΞΠίϯग़͍ͨ͠ ӈد͍͚ͤͨ͠Ͳޮ͔ͳ͍ͳʁ Ͳ͍͘͜ͶʔΜ ͋ͬͪ΋ͬͪ͜΋ ༧ظͤ͵伱ؒൃੜ ޮ͔ͳ͍ϓϩύςΟ ্ॻ͖ ͞Ε·͍ͬͯͯ͘ ΋͸΍ոจॻ ࢲͷCSSྗ

Slide 6

Slide 6 text

എܠ • CSSϑϨʔϜϫʔΫ͔͠࢖ͬͯͳ͍ • ->CSS஌͕ࣝখखઌܳɺߏ଄෼ੳͰ͖ͳ͍ • ݕࡧͱ࣮૷ʹଟେͳ࣌ؒΛ͔͚͍ͯΔ • ->ແବͷۃΈ

Slide 7

Slide 7 text

Αͬ͠Όษڧͬͧ͢

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

ৄ͍͠࿩͸ʮ͗ͷΘΜษڧձʯͰൃද͠·ͨ͠

Slide 11

Slide 11 text

CSSΞχϝʔγϣϯָ͠ ͍!!!!!!!!!!!!!!!!!!!!!!!!!

Slide 12

Slide 12 text

CSSΞχϝʔγϣϯͰ ϋϯυϝΠυ now loading 2019/05/25 TechඒΒΕͰ͌ #1 @gomaaburamax

Slide 13

Slide 13 text

Now loading #ͱ͸ • ϩʔσΟϯάΞχϝʔγϣϯ • API௨৴ͳͲʹΑΔ஋औಘதͷ࣌ؒʹϢʔβͷ ཭୤Λ๷͙ͨΊʹग़͢Ξχϝʔγϣϯ ͍ΘΏΔ͜͏͍͏ͷˠ

Slide 14

Slide 14 text

࡞Γํ͞·͟· • CSS animation • svg • Illustrator • gif • gifը૾࡞੒αΠτ

Slide 15

Slide 15 text

࡞Γํ͞·͟· • CSS animation • svg • Illustrator • gif • gifը૾࡞੒αΠτ

Slide 16

Slide 16 text

CSSΞχϝʔγϣϯ ͷ࡞Γํ

Slide 17

Slide 17 text

JOEFYDTT CSSΞχϝʔγϣϯͷ࡞Γํ ର৅%0.DMBTT\ جຊͷܗ XJEUI IFJHIU CBDLHSPVOEDPMPSʜ ^ BOJNBUJPOϓϩύςΟ !LFZGSBNFT໊લ\ ^

Slide 18

Slide 18 text

JOEFYDTT CSSΞχϝʔγϣϯͷ࡞Γํ ର৅%0.DMBTT\ جຊͷܗ XJEUI IFJHIU CBDLHSPVOEDPMPSʜ ^ BOJNBUJPOϓϩύςΟ !LFZGSBNFT໊લ\ ^ ͲͷλΠϛϯάͰɺ Ͳ͏͍͏ܗʹͳ͍ͬͯΔ͔  ઃఆ͢Δ

Slide 19

Slide 19 text

JOEFYDTT CSSΞχϝʔγϣϯͷ࡞Γํ ର৅%0.DMBTT\ جຊͷܗ XJEUI IFJHIU CBDLHSPVOEDPMPSʜ ^ BOJNBUJPOϓϩύςΟ !LFZGSBNFT໊લ\ ^ \ XJEUIQY ^ \ XJEUIQY ^

Slide 20

Slide 20 text

JOEFYDTT CSSΞχϝʔγϣϯͷ࡞Γํ ର৅%0.DMBTT\ جຊͷܗ XJEUI IFJHIU CBDLHSPVOEDPMPSʜ ^ BOJNBUJPOϓϩύςΟ ࢦఆ !LFZGSBNFT໊લ\ ^ \ XJEUIQY ^ \ XJEUIQY ^

Slide 21

Slide 21 text

JOEFYDTT CSSΞχϝʔγϣϯͷ࡞Γํ ର৅%0.DMBTT\ جຊͷܗ XJEUI IFJHIU CBDLHSPVOEDPMPSʜ ^ BOJNBUJPOMPOHFS ࢦఆ !LFZGSBNFTMPOHFS\ ^ \ XJEUIQY ^ \ XJEUIQY ^

Slide 22

Slide 22 text

JOEFYDTT CSSΞχϝʔγϣϯͷ࡞Γํ ର৅%0.DMBTT\ جຊͷܗ XJEUI IFJHIU CBDLHSPVOEDPMPSʜ ^ BOJNBUJPOTIBLF !LFZGSBNFTMPOHFS\ ^ มԽʹ͍ͭͯઃఆ ͲΕ͘Β͍ͷ଎͞Ͱʁ ΪϡΠʔϯͬͯมΘΔʁҰఆʹมΘΔʁ ΤϯυϨεͰʁ \ XJEUIQY ^ \ XJEUIQY ^

Slide 23

Slide 23 text

JOEFYDTT CSSΞχϝʔγϣϯͷ࡞Γํ ର৅%0.DMBTT\ جຊͷܗ XJEUI IFJHIU CBDLHSPVOEDPMPSʜ ^ BOJNBUJPOMPOHFSFBTFJOPVUTJOpOJUF; !LFZGSBNFTMPOHFS\ ^ -> ΪϡΠʔϯͱ2ඵ͔͚ͯແݶ࠶ੜ ※ৄࡉׂѪ \ XJEUIQY ^ \ XJEUIQY ^

Slide 24

Slide 24 text

ݟͯΈΑ͏ https://codepen.io/gomayumax/pen/dEmoWJ

Slide 25

Slide 25 text

ͳΜͱͳ͘෼͔Ε͹OK

Slide 26

Slide 26 text

࡞ͬͨ΋ͷ 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

Slide 27

Slide 27 text

·ͱΊ • CSSΞχϝʔγϣϯͰ  ϩʔσΟϯάΞχϝʔγϣϯ͕࡞ΕΔ • animationϓϩύςΟ͸ύϥϝʔλ͕๛෋Ͱ  Ͱ͖Δ͜ͱ͕ͨ͘͞Μ͋Δ • ͨͷ͍͠ ɹ✌('ω'✌ )ࡾ✌('ω')✌ࡾ( ✌'ω')✌

Slide 28

Slide 28 text

͕࣌ؒ༨ͬͨΒ….

Slide 29

Slide 29 text

ճస࣠͸ΦϒδΣΫτͷத৺

Slide 30

Slide 30 text

ճస࣠͸ΦϒδΣΫτͷத৺

Slide 31

Slide 31 text

ճస࣠͸ΦϒδΣΫτͷத৺ ←ݟ͑ͳ͍

Slide 32

Slide 32 text

Vue.js  ࣮ߦλΠϛϯάΛࢦఆ͢ΔΫϥε

४උத

Slide 33

Slide 33 text

Vue.js  ࣮ߦλΠϛϯάΛࢦఆ͢ΔΫϥε

४උத

.upper-enter-active { animation: upper-in 5s; } .upper-leave-active { animation: upper-in 5s reverse; } @keyframes upper-in { 0% { height: 0; } 100% { height: 100vh; } } •

Slide 34

Slide 34 text

Vue.js  ࣮ߦλΠϛϯάΛࢦఆ͢ΔΫϥε

४උத

.upper-enter-active { animation: upper-in 5s; } .upper-leave-active { animation: upper-in 5s reverse; } @keyframes upper-in { 0% { height: 0; } 100% { height: 100vh; } } •