ͪΐͬͱϚΠφʔͳέʔε͔ΒֶͿ$44ͷΞχϝʔγϣϯͷ͍͍ͱ͜Ζ 8FE.FHVSPDTTHSHSELSL
View Slide
ࣗݾհHSHSELSL !ELSLגࣜձࣾ$VSF"QQॴଐ3FBDU/BUJWF5ZQF4DSJQU
$445SBOTJUJPOͱ$44"OJNBUJPO·ͱΊͯ$44ͷΞχϝʔγϣϯ͍͍ΑͶͱ͍͏˞47(͍͍͚Ͳ৮Ε·ͤΜ
$44ͷΞχϝʔγϣϯએݴతత͕ܾ·ͬͯΔ
$44ͷΞχϝʔγϣϯͦ͜·ͰΛิؒతݩͷॴ USBOTJUJPO·ͨLFZGSBNFT
+BWB4DSJQUͷΞχϝʔγϣϯSFRVFTU"OJNBUJPO'SBNFͳͲɺϑϨʔϜ୯ҐλΠϜελϯϓͷࠩͰਐߦΛܭࢉతݩͷॴҠಈҠಈҠಈʜ⏰
Ξχϝʔγϣϯ༻ͷΤϯδϯ ࡶ.BJO5ISFBE $PNQPTJUPS"OJNBUJPO&OHJOF Ծ໊5SBOTGPSN0QBDJUZͳͲ
"OJNBUJPOΠϯεϖΫλʔ
IUUQTDPOGFSFODFQJYJWDPKQUFDIGFTͰΠϯεϖΫλʔΛ༻ఀࢭɺഒɺר͖͠ͱ͔Ͱ͖Δ
$44ϕʔεͷ+BWB4DSJQUΞχϝʔγϣϯ͋Δ
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',})
8FC"OJNBUJPOT"1* 8""1*$44ͱಉ͡ͱ͜ΖͰಈ͔ͤΔ
ϑϨʔϜϫʔΫ ϥΠϒϥϦͷ5SBOTJUJPO"OHVMBSͷUSBOTJUJPO7VFKTͷUSBOTJUJPO4WFMUFͷBOJNBUF3FBDUͷ5SBOTJUJPO(SPVQ·ͨVTF5SBOTJUJPO FYQFSJNFOUBM$44
)PVEJOJ5BTL'PSDF8FC8PSLFST$44"OJNBUJPO8PSLMFU"1* ·ͩIUUQTXXXXPSH53DTTBOJNBUJPOXPSLMFU
$44ͱϑϨʔϜ୯ҐͷΞχϝʔγϣϯͷҧ͍
ύϑΥʔϚϯε֤ॴͰطʹٞ͞Ε͍ͯΔͷͰলུ
ηΩϡϦςΟɺϓϥΠόγʔ$445SBOTJUJPO$44"OJNBUJPOʹͳ͍ʁ8""1*ͦͦॻ͍ͯͳ͍
IUUQTXXXXPSH53ISUJNFTFDQSJWBDZTFDVSJUZ%0.)JHI3FT5JNF4UBNQηΩϡϦςΟɺϓϥΠόγʔ࣌ؒਫ਼ͰύϑΥʔϚϯεใ͕౪ΈऔΒΕΔ͔ʁ
ϒϥβ͕ൿಗੑͷߴ͍ڍಈΛٻΊΔ࣌Ξχϝʔγϣϯ͕λΠϜελϯϓʹґଘ͢Δͱมͳݱ͕ى͜Δ
QSJWBDZSFTJTU'JOHFSQSJOUJOHIUUQTXJLJNP[JMMBPSH4FDVSJUZ'JOHFSQSJOUJOH
˞'JOHFS1SJOUJOHϖʔδ্Ͱใඳը݁ՌΛऔಘͯ͠ɺϢʔβʔΛಛఆͰ͖ΔϋογϡΛੜ͢ΔτϥοΩϯάٕज़
QSJWBDZSFTJTU'JOHFSQSJOUJOH'JOHFSQSJOUJOHʹѱ༻͞ΕΔॲཧΛ੍ݶ5PS#SPXTFSͷػೳ'JSFGPYͰઃఆՄ5PSϩΰ
SFTJTU'JOHFSQSJOUJOH͕Δ͜ͱw $BOWBTͷඳը݁Ռͷग़ྗΛ੍w ϩέʔϧͷݻఆw 1FSGPSNBODF"1*ͷػೳΛ΄ͱΜͲແޮԽw ࣌ؒਫ਼ͷԼ NTʙ
NTʙΞχϝʔγϣϯͷཧT˺NTΛ্ճΔ+VOLͬΆ͍ಈ͖ʹͳΔ
௨ৗ SFTJTUpOHFSQSJOUJOH
function resistFingerprintingTsurai() {let start = nullconst step = now => {if (!start) start = nowconst passedTime = now - startTargetElm.style.transform =`translate3d(0, ${passedTime}px, 0)`if (passedTime <= TIME_END_ANIMATION) {window.requestAnimationFrame(step)}}window.requestAnimationFrame(step)}
ͱͳΔͷw %BUFOPXw QFSGPSNBODFOPXw SFRVFTU"OJNBUJPO'SBNFͷDBMMCBDLͷҾ͕ର ͬͯͳ͍ͳΒͳ͍
ͬͯΔͭw K2VFSZͷBOJNBUFw 7FMPDJUZw 5XFFO.BYw %KTͳͲ
ͱݴͬͯ$44ϕʔεͰ͍͠ॲཧ͋Δ$44Ҏ֎ͷϓϩύςΟςΩετͷૢ࡞ͳͲ
8FC"OJNBUJPOT-FWFM̎IUUQTESBGUTDTTXHPSHXFCBOJNBUJPOTDVTUPNFGGFDU$VTUPN&GGFDUͰ$44Ҏ֎ͷϑΟʔϧυͰઓ͑ͦ͏ʁͨͩ͠6OPGpDJBM%SBGU
ࡶ·ͱΊมͳͷʹґଘ͠ͳ͍$44͕ྑ͍˞ϢʔεέʔεʹԠͯ͡ແཧͷͳ͍ΞχϝʔγϣϯΛ
ͱ͜ΖͰٯʹΞχϝʔγϣϯͤͨ͘͞ͳ͍߹͋ΔͦΜͳ࣌Ͱ$44ڧ͍
SFEVDFENPUJPOಈ͖ͷ͋ΔදݱͰൃ࡞Λىͯ͜͠͠·͏ͱ͔ɺΞχϝʔγϣϯ0''ͰαΫαΫಈ͔͍ͨ͠ͱ͔धཁʹԠ͑Δ
͜ΕNBDͷʮڥઃఆʯ
$44ͳΒऴண͕ܾ·ͬͯΔͦͷաఔΛม͑Δ͚ͩ
QSFGFSTSFEVDFENPUJPO.FEJB2VFSZ-FWFMCPPUTUSBQ BOJNBUFDTTͳͲ͕࠾༻*& چ&EHFະରԠ@media (prefers-reduced-motion: reduce) {* {animation-duration: 0.01s !important;transition-duration: 0.01s !important;}}
UIJTJTΞΫηγϒϧʂʂ@media (prefers-reduced-motion: reduce) {* {animation-duration: 0.01s !important;transition-duration: 0.01s !important;}}
+BWB4DSJQUͩͱʜEVSBUJPOΛஔ͖͑Δඞཁ͕͋Δɻ8""1*ಉ͡export const hasPrefersReducedMotion =typeof window !== undefined &&window.matchMedia &&window.matchMedia('(prefers-reduced-motion: reduce)’).matchesexport function setDuration(duration: number) {return hasPrefersReducedMotion ? 10 : duration}
5SBOTJUPOऴΘ͔ͬͨΒൃՐ͢ΔΑ5SBOTJUJPOऴΘ͚ͬͨͲ%VSBUJPO͕·ͩʜϑϨʔϜϫʔΫɺϥΠϒϥϦͷ5SBOTJUJPOͩͱʜ
5SBOTJUJPO͕ऴΘ͕ͬͨɺ%VSBUJPO͕ऴΘͬͯͳ͍࿈ܞͰ͖ͯͳ͍߹
ͦͯ͠$44ҙAOPOFAආ͚ΔɻABOJNBUJPOpMMNPEFAͷTUZMFอ࣋ɺ&WFOUͷൃՐͳͲͷͨΊanimation: none !important; // ͭΒ͍animation-duration: 0.01ms !important; // ͜͏
ࡶ·ͱΊΞχϝʔγϣϯඈ͢ͷָQSFGFSTSFEVDFENPUJPOͷऔΓѻ͍ਏ͍
ײมͳ෭࡞༻ʹ·͞Εͳ͍ΑաఔΛ͍͡ΔͷָͩΑ$44ͰΞχϝʔγϣϯɺྑ͍Α
͔͠͠@media (prefers-reduced-motion: reduce) {* {animation-duration: 0.01s !important;transition-duration: 0.01s !important;}}͜ΕɺϓϥΠόγʔʹؔΘΔઃఆͰʁ
IUUQTXXXXPSH53DTTUSBOTJUJPOTʮࢹࠩޮՌΛܰݮ͢ΔʯͷΑ͏ͳઃఆΛ8FCίϯςϯπ͔ΒӅ͔ܰ͢ݮΛड͚ೖΕΔ͔ͷτϨʔυΦϑΛഭΒΕ͍ͯΔ
QSJWBDZSFTJTU'JOHFSQSJOUJOH͕USVFͩͱQSFGFSTSFEVDFENPUJPO͕ແࢹ͞ΕΔ
$44Ͱ༉அͰ͖ͳ͔ͬͨ