Rails Developers Meetup 2018 Day4 ( https://techplay.jp/event/702297 ) 発表資料
ͪΐ͍͠ΞχϝʔγϣϯϨγϐYu Ishihara (@is8r_)γϯϓϧͳ3BJMTΞϓϦέʔγϣϯʹҰՃ͑ΔRails Developers Meetup 2018 Day 4 Nouvelle Vague - 2018/12/8
View Slide
ࣗݾհ @is8r_͡Ί·ͯ͠ɻੴݪ༔ͱݴ͍·͢ੴݪ༔Yu Ishihara
ϑϦʔϥϯεͰ3BJMT(PͷΞϓϦέʔγϣϯͷσβΠϯͱϑϩϯτͷ͓ࣄΛ͓ͬͯΓ·ࣗ͢ݾհ @is8r_ͦͷଞ͍Ζ͍Ζ|| ||%FTJHO'SPOU
࠷ۙϤʔάϧτͮ͘ΓʹϋϚͬͯ·ࣗ͢ݾհμώϤʔάϧτ ΧεϐւϤʔάϧτ ϗʔϜϝΠυέϑΟΞ 3@is8r_
3VCZ,BJHJͷσβΠϯͷʜࠓ͓͍ͤͯͨͩ͘͜͠͞ͱ @is8r_
Λ͠Α͏͔ͱࢥͬͨͷͰ͕͢ͷΛલճͷ3BJMT%.Ͱ͞Μ͕͍ͯͨ͠ͷͰผͷ͓Λʜࠓ͓͍ͤͯͨͩ͘͜͠͞ͱ @is8r_
ࠓ͓͍ͤͯͨͩ͘͜͠͞ͱ$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44@is8r_
γϯϓϧͳ3BJMTΞϓϦέʔγϣϯʹҰՃ͑Δɺͪΐ͍͠ΞχϝʔγϣϯϨγϐ$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔ
$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔͪΐͬͱಈ͔ͯ͠Έ·͠ΐ͏IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNTQFFE4QFFE
$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔ͔݁Βݴ͏ͱTʙT͕ྑ͍ͱ͞Ε͍ͯ·͢)PXGBTUTIPVMEZPVS6*BOJNBUJPOTCF "EPCFͷ6*ΞχϝʔγϣϯίϯαϧλϯτͷํͷϒϩάهࣄIUUQTWBMIFBEDPNIPXGBTUTIPVMEZPVSVJBOJNBUJPOTCF200ms to500msseconds is a goodrange to start with forinterface animations.
0 200 500 1000ms$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔͱ͍͑݁ߏ෯͕͋ΔͷͰɺΓ໎ͬͯ͠·͍·͢ΑͶ
$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔϘλϯͳͲɺૢ࡞ͷϑΟʔυόοΫΛײͤ͡͞ΔͨΊͷಈ͖ͳͷͰɺಈ͖͕͍ͱअຐʹײ͡Δ͠IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNCVUUPO
$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔϢʔβʔͷҙשى͕తͷཁૉʹؔͯ͠ɺಈ͖͕ૣ͍ͱͦͷׂΛՌͨͤͳ͍IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNJOQVU
$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔϢʔβʔͷҙשى͕తͷཁૉʹؔͯ͠ɺಈ͖͕ૣ͍ͱͦͷׂΛՌͨͤͳ͍IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNOPUJDF
$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔૢ࡞͕Ͱ͖ΔཁૉͰ͋ΔࣄΛࣔͨ͢Ί͚ͩͳͷ͔ΛҾ͖͍ͨཁૉͷࢹઢͷ༠ಋͳͷ͔ɺ͋ͨΓΛҙࣝ͢ΔͱܾΊ͍͢Ͱ͢
$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔզʑGQTͱGQTͷҧ͍͕Θ͔ΔͷͰɺ͕ใͷؒΛຒΊ͍ͯΔͱ͔͋Γͦ͏͚ͩͲਓ͕ೝࣝ͢Δʮ࿈ଓͨ͠ੈքʯݬͰ͋Δͱ͍͏ௐࠪ݁ՌIUUQTHJHB[JOFOFUOFXTTQPUMJHIUPGBUUFOUJPOਓؒͷඵؒʹճͷҙྗͷഥಈ͕͋Δ41
$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔͷใߋ৽ʹ͍͍ͩͨNT͘Β͍࣌ؒΛ͔͚ͯͦ͏1000/4 = 250ms
$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔͱ͍͏͜ͱ
$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔૢ࡞ײΛମײͤ͞ΔͨΊ͚ͩͷͷʹؔͯ͠োΓʹͳΒͳ͍Α͏ʹɺNTҎԼΛ҆ʹ͢Δͷ͕ྑͦ͞͏͜ͷลʁ0 250 500 750 1000ms
$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔNTͩͱɺλΠϛϯάʹΑͬͯճͷใߋ৽ʹͨͬͯ͠·͏͔͠Εͳ͍ͷͰɺNT͕ྑͦ͞͏ms0 250 500 750 1000
$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔʮԿ͔ग़͖ͯͨࣄʯʮԿ͔ಈ͍ͨࣄʯͱ͍͏ࣄΛҙࣝతʹؾ͍ͮͯΒ͍͍ͨͷɺNTҎ্͕ྑͦ͞͏͜ͷลʁms0 250 500 750 1000
$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔճͷใߋ৽Ͱݟಀ͢ࣄߟྀͯ͠ɺNT͕ྑͦ͞͏ͳͷͰms0 250 500 750 1000
$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔ͜Μͳײ͡Ͱͷཪ͚Λߟ͑ͯΈΔͱ͢ΜͳΓܾΊΒΕͦ͏
$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔ͍͑ɺͰܾΊͯײ֮తʹͬ͘͠Γ͘Δඵ͕͋ΕͦΕͰେৎͰ͕͢ɺ͠໎ͬͨ࣌ʹͪΐͬͱࢥ͍ग़ͯ͠Έ͍ͯͩ͘͞
γϯϓϧͳ3BJMTΞϓϦέʔγϣϯʹҰՃ͑Δɺͪΐ͍͠ΞχϝʔγϣϯϨγϐΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍ΠʔδϯάΧʔϒɺͨ͘͞Μͨ͘͞Μ͋Γ·͢ΑͶIUUQTFBTJOHTOFUKB&BTJOH'VODUJPOૣݟද
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍ͪΐͬͱಈ͔ͯ͠Έ·͠ΐ͏IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNFBTJOH&BTJOH'VODUJPOT
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍DVCJDCF[JFSΛ׆༻ͨ͠ΒՃͰ͖Δ&BTJOHGVODUJPOT͋Γ·͢IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNFBTJOH$VTUPN&BTJOH'VODUJPOT
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍#PVODFDVCJDCFTJFSͰ࣮ݱͰ͖ͳ͍Έ͍ͨͰ͢// from: https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/library/_timing-functions.scss// EASE IN$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);// EASE OUT$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);// EASE IN OUT$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);// ͬͪͦ͜ΕͬΆ͍ಈ͖ͳ͚ͩ// (similar elastic).$ease-out-elastic: cubic-bezier(0.370, 1.650, 0.410, 0.780);$ease-in-elastic: cubic-bezier(0.370, 0.650, 0.410, -0.780);
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍Ξχϝʔγϣϯʹ͓͚Δͷ๏ଇɻ4MPXJOBOETMPXPVUɺ5JNJOH͋ͨΓΛݟͯΈΔͱΘ͔Γ͍͢QSJODJQMFTPGBOJNBUJPOIUUQUIFQSJODJQMFTUVNCMSDPN
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍Կ͔ʹԡ͞Εͯಈ͖࢝ΊΔͷɺ໘ͷ߅Λड͚ͯࢭ·ΔͷɺࣗͰಈ͖ग़ͯ͠ɺࢭ·Δͷɺ͋ͨΓ͕ԡ͓͖͍͑ͯͨ͞ϙΠϯτͰ͢ɻ
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍ը໘͔Βফ͍͑ͯ͘ཁૉͱ͔Կ͔ʹԡ͞Εͯಈ͖࢝ΊΔͷFBTFJO
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍ը໘ʹೖͬͯ͘Δཁૉͱ͔ɺϘλϯͱ͔໘ͳΜ͔ͷ߅Λड͚ͯࢭ·ΔͷFBTFPVU
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍৳ͼॖΈ͢ΔݕࡧϑΥʔϜͱ͔ࣗͰಈ͖ग़ͯ͠ɺࢭ·ΔͷFBTFJOPVU
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍Tఔͷಈ͖Ͱҧ͍Θ͔Γʹ͍͘͠ʜͱ͍͍ͭͭɺ$44ͷΞχϝʔγϣϯͰTJOFFYQPͳͲͷΧʔϒͷҧ͍ʹ͍ͭͯ͋·Γؾʹ͍͍ͤͣͩͨϓϦηοτʹ͋Δͭ͏ͷ͕ྑͦ͞͏
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍ҰԠͬ͘͟Γͱઆ໌Λ͓ͯ͘͠ͱೋɺࡾɺ࢛ɺޒ࣍ؔ *-quad, *-cubic, *-quart, *-quintࡾ֯ؔ *-sineٸܹͳ *-expoԁ *-circ
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍FBTFJORVBE͕མͪΔಈ͖2VBEམԼͷಈ͖
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍RVBE͔ΒRVJOUڧ͕ͪΐͱUҧ͍·͢؇͔ ܹ͍͠Quad Cubic Quart Quint
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍FBTFJOPVUTJOFৼΓࢠͷಈ͖4JOFৼΓࢠͷಈ͖
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍FBTFJOFYQPɺFBTFPVUFYQPɺFBTFJOPVUFYQPٸܹͳಈ͖&YQPٸͳಈ͖
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍Ҏ্Λ౿·͑ͯߟ͑ΔͱͲΕΛબͿͱྑ͍͔ܾΊ͘͢ͳΓ·͢IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNFBTJOH&BTJOH'VODUJPOT
γϯϓϧͳ3BJMTΞϓϦέʔγϣϯʹҰՃ͑Δɺͪΐ͍͠ΞχϝʔγϣϯϨγϐ3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44ϘλϯཁૉIUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNCVUUPO
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44Ξχϝʔγϣϯͷ෦ʢݟ͍͢Α͏ʹσβΠϯ෦NJYJOʹ͚͓͖ͯ·ͨ͠ʣ.button {@include button-base;@include font;transition: all 0.2s ease-out;}
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44σβΠϯଆͷελΠϧ ݟӫ͑Λม͚͑ͨΕͪ͜ΒΛมߋ@mixin button-base {$c: #82ccdd;$t: .2rem;display: inline-block;position: relative;cursor: pointer;text-align: center;box-sizing: border-box;border: none;outline: none;margin: 0;padding: .5rem 2rem;border-radius: 4rem;transform: translateY(-$t);background-color: $c;color: #fff;box-shadow: 0 $t 0 darken($c, 5%);&:hover {color: #fff;text-decoration: none;transform: translateY(0);box-shadow: 0 0 0 $c;background-color: darken($c, 2%);}}@mixin font($size: 1rem, $line-height:normal, $weight: 400) {font-family: YuGothic, 'ᕟΰγοΫ',sans-serif;font-size: $size;font-weight: $weight;line-height: $line-height;}
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44ΠϯϓοτཁૉIUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNJOQVU
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44Ξχϝʔγϣϯ෦@keyframes anim-shake {$m: .3rem;0% {transform: translate(0, 0) rotate(0deg);}25% {transform: translate(-$m, 0) rotate(0deg);}50% {transform: translate(0, 0) rotate(0deg);}75% {transform: translate($m, 0) rotate(0deg);}100% {transform: translate(0, 0) rotate(0deg);}}.input {@include input-base;@include font(.9375rem);&.is-action {$c: $color-red;animation: anim-shake .2s linear 4;border-color: $c;&:focus {border-color: $c;}}}
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44σβΠϯଆͷελΠϧ ݟӫ͑Λม͚͑ͨΕͪ͜ΒΛมߋ@mixin input-base {$c: #82ccdd;display: inline-block;box-sizing: border-box;appearance: none;border: none;outline: none;text-decoration: none;line-height: 1 !important;background-image: none;margin: 0;padding: .6rem .8rem;border: 1px solid #eee;border-radius: .2rem;width: 100%;background-color: #fff;&:focus {border: 1px solid $c;outline: none;}&::placeholder {font-size: inherit;color: #ddd;}}
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44༨ஊͰ͕͢ɺEFWJTFͷೝূը໘ͱ͔ɺखൈ͖͠Α͏ͱࢥͬͨΒSBJMTHEFWJTFWJFXT͠ͳͯ͘$44͚ͩͰશવσβΠϯ͕ೖΕΒΕ·͢.field {input[type=text],input[type=email],input[type=password] {@extend .input;}}.actions {input {@extend .button;width: 100%;}}
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44Τϥʔͱ͔Ͱ่ΕͨΓ͢Δͷͱ͔ɺ͜ͷลʹεϖʔε͕Ͱ͖ͨΓͯ͠Δͷҙਤ͠ͳ͍CS͕ٸʹೖͬͯ͘Δͷ͕
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44$44͚ͩͰҊ֎؆୯ʹௐ͢Δࣄ͕ՄೳͰ͢.field {label {+ br {display: none;}}input[type=checkbox] {+ label {display: inline-block;}}i {+ br {display: none;}}}.field_with_errors {i {display: block;}+ em {display: inline-block;}+ br {display: none;}}
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44͋ͱࡉ͔͍ௐΛೖΕ͓͍ͯͨΒʜʢޙͰHJUIVCʹΞοϓ͓͖ͯ͠·͢ʜʣ.field {margin-top: 1rem;label {padding-bottom: .2rem;display: block;+ br {display: none;}}input[type=text],input[type=email],input[type=password] {@extend .input;}input[type=checkbox] {margin-right: .2rem;cursor: pointer;+ label {display: inline-block;cursor: pointer;}}em {@include font(.875rem);}i {@include font(.875rem);padding-bottom: .4rem;display: block;+ br {display: none;}}}.field_with_errors {$c: $color-red;label {color: $c;margin-bottom: 0;}i {@include font(.875rem);font-style: normal;color: $color-red;padding-bottom: .4rem;display: block;&::before {@include fa('\f071');margin-right: .4rem;}}+ em {display: inline-block;margin-bottom: .5rem;}+ br {display: none;}}#error_explanation {$c: $color-red;background-color: lighten($c, 30%);border-bottom: 1px solid lighten($c, 28%);color: $c;margin-top: 1rem;padding: .5rem 1rem;h2 {@include font(.875rem, 1.2rem, bold);margin: 0;}ul {margin: .1rem 0 0 1.5rem;padding: 0;li {@include font(.9375rem);margin-top: .3rem;}}}.actions {margin-top: 1rem;text-align: center;input {@extend .button;width: 100%;}}
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44͜͏͍ͬͨͷ͕
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44͜Μͳ͔Μ͡ʹIUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNVTFSTTJHO@VQ
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44௨ཁૉIUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNOPUJDF
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44Ξχϝʔγϣϯͷ෦@keyframes anim-notice {0% {transform: translateY(-100%);opacity: 0;animation-timing-function: ease-out;}20% {transform: translateY(0%);opacity: 1;}80% {transform: translateY(0%);opacity: 1;animation-timing-function: ease-in;}100% {transform: translateY(-100%);opacity: 0;}}.notice {@include font;@include notice-base;animation: anim-notice 3s;}
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44σβΠϯͷ෦@mixin notice-base($c: #82ccdd) {display: block;margin: 0;padding: 1rem;position: fixed;width: 300px;top: 1rem;left: calc(50% - 150px);text-align: center;background-color: lighten($c, 25%);border-bottom: 1px solid lighten($c, 28%);color: $c;transform: translateY(-100%);opacity: 0;box-shadow: 0 5px 10px rgba(darken($c, 30%), .1);border-radius: .4rem;&:empty {display: none;}}
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44ͱ͍͏Θ͚Ͱ؆୯ʹ͑Δ$44ΞχϝʔγϣϯͷখٕΛ͝հ͍͖ͤͯͨͩ͞·ͨ͠
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44ϦϙδτϦͪ͜ΒNJYJO͜ͷ͋ͨΓIUUQTHJUIVCDPNJTSSBJMTENTBNQMFQSPKFDUCMPCNBTUFSBQQBTTFUTTUZMFTIFFUTTUZMFTDPOpH@NJYJOTTDTTIUUQTHJUIVCDPNJTSSBJMTENTBNQMFQSPKFDUCMPCNBTUFSBQQBTTFUTTUZMFTIFFUTBQQMJDBUJPOTDTTΞχϝʔγϣϯؔ࿈͜ͷ͋ͨΓIUUQTHJUIVCDPNJTSSBJMTENTBNQMFQSPKFDU
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44͓ࢼ͠Ͱ࡞ΔΞϓϦͷϓϩτλΠϐϯάϋοΧιϯͳΜ͔ͷεϐʔυউෛͷͰ׆༂͢Δɺϋζ
͍͞͝ʹීஈͷҊ݅ͰϝϯςφϯεͷࣄΛߟ͑ͯͦΕͧΕͷαΠτʹ͋ͬͨॻ͖ํΛ͠·͢
͍͞͝ʹ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
is8r
uxevents
norinity1103
uxaustralia
448jp
temoki
joelgoodman
studiodetails
cyrilmottier
akwkm
marset
toshiotsuka
cyberagentdevelopers
mraible
csswizardry
geoffreycrofte
keathley
danielanewman
jakevdp
eileencodes
deanohume
lara
palkan
malarkey
lynnandtonic