Tweet
Tweet

Slide 1

Slide 1 text

ͪΐͬͱϚΠφʔͳέʔε͔ΒֶͿ $44ͷΞχϝʔγϣϯͷ͍͍ͱ͜Ζ 8FE .FHVSPDTT HSHSELSL

Slide 2

Slide 2 text

ࣗݾ঺հ HSHSELSL !ELSL גࣜձࣾ$VSF"QQॴଐ 3FBDU/BUJWF5ZQF4DSJQU

Slide 3

Slide 3 text

$445SBOTJUJPOͱ$44"OJNBUJPO ·ͱΊͯ$44ͷΞχϝʔγϣϯ ͍͍ΑͶͱ͍͏࿩ ˞47(΋͍͍͚Ͳ৮Ε·ͤΜ

Slide 4

Slide 4 text

$44ͷΞχϝʔγϣϯ એݴత ໨త஍͕ܾ·ͬͯΔ

Slide 5

Slide 5 text

$44ͷΞχϝʔγϣϯ ͦ͜·ͰΛิؒ ໨త஍ ݩͷ৔ॴ USBOTJUJPO ·ͨ͸LFZGSBNFT

Slide 6

Slide 6 text

+BWB4DSJQUͷΞχϝʔγϣϯ SFRVFTU"OJNBUJPO'SBNFͳͲɺϑϨʔϜ୯Ґ λΠϜελϯϓͷࠩ෼ͰਐߦΛܭࢉ ໨త஍ ݩͷ৔ॴ Ҡಈ Ҡಈ Ҡಈ ʜ ⏰

Slide 7

Slide 7 text

Ξχϝʔγϣϯ༻ͷΤϯδϯ ࡶ .BJO5ISFBE $PNQPTJUPS "OJNBUJPO &OHJOF Ծ໊ 5SBOTGPSN 0QBDJUZͳͲ

Slide 8

Slide 8 text

"OJNBUJPOΠϯεϖΫλʔ

Slide 9

Slide 9 text

IUUQTDPOGFSFODFQJYJWDPKQUFDIGFTͰ ΠϯεϖΫλʔΛ࢖༻ ఀࢭɺഒ଎ɺר͖໭͠ͱ͔Ͱ͖Δ

Slide 10

Slide 10 text

$44ϕʔεͷ +BWB4DSJQUΞχϝʔγϣϯ΋ ͋Δ

Slide 11

Slide 11 text

8FC"OJNBUJPOT"1* 8""1* $44"OJNBUJPOͷಛੑΛ࣋ͭ Elm.animate( [ { transform: `translate3d(0, 0, 0) scale(1)`, }, { transform: `translate3d(500px, 0, 0) scale(4)`, }, ], { duration: setDuration(DURATION), fill: 'both', } )

Slide 12

Slide 12 text

8FC"OJNBUJPOT"1* 8""1* $44ͱಉ͡ͱ͜ΖͰಈ͔ͤΔ

Slide 13

Slide 13 text

ϑϨʔϜϫʔΫ ϥΠϒϥϦͷ 5SBOTJUJPO "OHVMBSͷUSBOTJUJPO 7VFKTͷUSBOTJUJPO 4WFMUFͷBOJNBUF 3FBDUͷ5SBOTJUJPO(SPVQ ·ͨ͸VTF5SBOTJUJPO FYQFSJNFOUBM $44

Slide 14

Slide 14 text

)PVEJOJ5BTL'PSDF 8FC8PSLFST $44"OJNBUJPO8PSLMFU"1* ·ͩ IUUQTXXXXPSH53DTTBOJNBUJPOXPSLMFU

Slide 15

Slide 15 text

$44ͱϑϨʔϜ୯Ґͷ Ξχϝʔγϣϯͷҧ͍

Slide 16

Slide 16 text

ύϑΥʔϚϯε ֤ॴͰطʹٞ࿦͞Ε͍ͯΔͷͰলུ

Slide 17

Slide 17 text

ηΩϡϦςΟɺϓϥΠόγʔ $445SBOTJUJPO΍$44"OJNBUJPOʹ͸ͳ͍ʁ 8""1*͸ͦ΋ͦ΋ॻ͍ͯͳ͍

Slide 18

Slide 18 text

IUUQTXXXXPSH53ISUJNFTFDQSJWBDZTFDVSJUZ %0.)JHI3FT5JNF4UBNQ ηΩϡϦςΟɺϓϥΠόγʔ ࣌ؒਫ਼౓ͰύϑΥʔϚϯε৘ใ͕ ౪ΈऔΒΕΔ͔΋ʁ

Slide 19

Slide 19 text

ϒϥ΢β͕ൿಗੑͷߴ͍ڍಈΛٻΊΔ࣌ Ξχϝʔγϣϯ͕λΠϜελϯϓʹґଘ͢Δͱ มͳݱ৅͕ى͜Δ

Slide 20

Slide 20 text

QSJWBDZSFTJTU'JOHFSQSJOUJOH IUUQTXJLJNP[JMMBPSH4FDVSJUZ'JOHFSQSJOUJOH

Slide 21

Slide 21 text

˞'JOHFS1SJOUJOH ϖʔδ্Ͱ୺຤৘ใ΍ඳը݁ՌΛऔಘͯ͠ɺ ϢʔβʔΛಛఆͰ͖Δϋογϡ஋Λੜ੒͢Δ τϥοΩϯάٕज़

Slide 22

Slide 22 text

QSJWBDZSFTJTU'JOHFSQSJOUJOH 'JOHFSQSJOUJOHʹѱ༻͞ΕΔॲཧΛ੍ݶ 5PS#SPXTFSͷػೳ 'JSFGPYͰ΋ઃఆՄ 5PSϩΰ

Slide 23

Slide 23 text

SFTJTU'JOHFSQSJOUJOH͕΍Δ͜ͱ w $BOWBTͷඳը݁Ռͷग़ྗΛ཈੍ w ϩέʔϧͷݻఆ w 1FSGPSNBODF"1*ͷػೳΛ΄ͱΜͲແޮԽ w ࣌ؒਫ਼౓ͷ௿Լ NTʙ

Slide 24

Slide 24 text

NTʙ Ξχϝʔγϣϯͷཧ૝ T˺NTΛ্ճΔ +VOLͬΆ͍ಈ͖ʹͳΔ

Slide 25

Slide 25 text

௨ৗ SFTJTUpOHFSQSJOUJOH

Slide 26

Slide 26 text

function resistFingerprintingTsurai() { let start = null const step = now => { if (!start) start = now const passedTime = now - start TargetElm.style.transform = `translate3d(0, ${passedTime}px, 0)` if (passedTime <= TIME_END_ANIMATION) { window.requestAnimationFrame(step) } } window.requestAnimationFrame(step) }

Slide 27

Slide 27 text

໰୊ͱͳΔ΋ͷ w %BUFOPX w QFSGPSNBODFOPX w SFRVFTU"OJNBUJPO'SBNFͷDBMMCBDLͷҾ਺ ͕ର৅ ࢖ͬͯͳ͍ͳΒ໰୊ͳ͍

Slide 28

Slide 28 text

࢖ͬͯΔ΍ͭ w K2VFSZͷBOJNBUF w 7FMPDJUZ w 5XFFO.BY w %KT ͳͲ

Slide 29

Slide 29 text

ͱ͸ݴͬͯ΋ $44ϕʔεͰ͸೉͍͠ॲཧ͸͋Δ $44Ҏ֎ͷϓϩύςΟ΍ ςΩετͷૢ࡞ͳͲ

Slide 30

Slide 30 text

8FC"OJNBUJPOT-FWFM̎ IUUQTESBGUTDTTXHPSHXFCBOJNBUJPOTDVTUPNFGGFDU $VTUPN&GGFDU Ͱ$44Ҏ֎ͷϑΟʔϧυͰ΋ઓ͑ͦ͏ʁ ͨͩ͠6OPGpDJBM%SBGU

Slide 31

Slide 31 text

ࡶ·ͱΊ มͳͷʹґଘ͠ͳ͍$44͕ྑ͍ ˞ϢʔεέʔεʹԠͯ͡ແཧͷͳ͍ΞχϝʔγϣϯΛ

Slide 32

Slide 32 text

ͱ͜ΖͰ ٯʹΞχϝʔγϣϯͤͨ͘͞ͳ͍৔߹΋͋Δ ͦΜͳ࣌Ͱ΋$44͸ڧ͍

Slide 33

Slide 33 text

SFEVDFENPUJPO ಈ͖ͷ͋ΔදݱͰൃ࡞Λىͯ͜͠͠·͏ͱ͔ɺ Ξχϝʔγϣϯ0''ͰαΫαΫಈ͔͍ͨ͠ͱ͔ धཁʹԠ͑Δ

Slide 34

Slide 34 text

͜Ε NBDͷʮ؀ڥઃఆʯ

Slide 35

Slide 35 text

$44ͳΒऴண఺͕ܾ·ͬͯΔ ͦͷաఔΛม͑Δ͚ͩ

Slide 36

Slide 36 text

QSFGFSTSFEVDFENPUJPO .FEJB2VFSZ-FWFM CPPUTUSBQ BOJNBUFDTTͳͲ͕࠾༻ *& چ&EHFະରԠ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01s !important; transition-duration: 0.01s !important; } }

Slide 37

Slide 37 text

UIJTJTΞΫηγϒϧʂʂ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01s !important; transition-duration: 0.01s !important; } }

Slide 38

Slide 38 text

+BWB4DSJQUͩͱʜ EVSBUJPOΛஔ͖׵͑Δඞཁ͕͋Δɻ 8""1*΋ಉ͡ export const hasPrefersReducedMotion = typeof window !== undefined && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)’).matches export function setDuration(duration: number) { return hasPrefersReducedMotion ? 10 : duration }

Slide 39

Slide 39 text

5SBOTJUPOऴΘ͔ͬͨΒ ൃՐ͢ΔΑ 5SBOTJUJPOऴΘ͚ͬͨͲ %VSBUJPO͕·ͩʜ ϑϨʔϜϫʔΫɺϥΠϒϥϦͷ 5SBOTJUJPOͩͱʜ

Slide 40

Slide 40 text

5SBOTJUJPO͕ऴΘ͕ͬͨɺ%VSBUJPO͕ऴΘͬͯͳ͍ ࿈ܞͰ͖ͯͳ͍৔߹

Slide 41

Slide 41 text

ͦͯ͠$44΋஫ҙ AOPOFA͸ආ͚Δɻ ABOJNBUJPOpMMNPEFAͷTUZMFอ࣋΍ɺ &WFOUͷൃՐͳͲͷͨΊ animation: none !important; // ͭΒ͍ animation-duration: 0.01ms !important; // ͜͏

Slide 42

Slide 42 text

ࡶ·ͱΊ Ξχϝʔγϣϯඈ͹͢ͷָ QSFGFSTSFEVDFENPUJPOͷऔΓѻ͍͸ਏ͍

Slide 43

Slide 43 text

ײ૝ มͳ෭࡞༻ʹ೰·͞Εͳ͍Α աఔΛ͍͡Δͷ΋ָͩΑ $44ͰΞχϝʔγϣϯɺྑ͍Α

Slide 44

Slide 44 text

͔͠͠ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01s !important; transition-duration: 0.01s !important; } } ͜ΕɺϓϥΠόγʔʹ ؔΘΔઃఆͰ͸ʁ

Slide 45

Slide 45 text

IUUQTXXXXPSH53DTTUSBOTJUJPOT ʮࢹࠩޮՌΛܰݮ͢Δʯ ͷΑ͏ͳઃఆΛ8FCίϯςϯπ͔ΒӅ͔͢ ܰݮΛड͚ೖΕΔ͔ͷτϨʔυΦϑΛഭΒΕ͍ͯΔ

Slide 46

Slide 46 text

QSJWBDZSFTJTU'JOHFSQSJOUJOH͕USVFͩͱ QSFGFSTSFEVDFENPUJPO͕ແࢹ͞ΕΔ

Slide 47

Slide 47 text

$44Ͱ΋ ༉அͰ͖ͳ͔ͬͨ

Slide 48

Slide 48 text

No content