MiroやFigmaのようなWeb上でドラッグ&ドロップ(GUI操作)を実装する技術について深掘りしていきます
View Slide
ࣗݾհʲ໊લʳߴʲॴଐʳΦϯϥΠϯαϩϯ։ൃ෦ΞʔΩςΫτνʔϜʲྖҬʳαʔόʔαΠυΤϯδχΞͱͯ͠ೖࣾۀͰΠϯϑϥ͔ΒϑϩϯτΤϯυ·Ͱ෯͘ϑϩϯτΤϯυ7VFKT /VYUKTͱ3FBDUKT /FYUKT͕ॻ͚Δʲझຯʳϑοταϧ
ͱ͜ΖͰօ͞Μʂ
'JHNB.JSPͷΑ͏ͳ(6*ͰυϥοάΞϯυυϩοϓग़དྷΔΑ͏ͳ8FCΞϓϦΛ࡞Γͨ͘ͳͬͨ͜ͱ͋Γ·ͤΜ͔ʁ
͋Γ·͢ɻ
8FC্ͰυϥοάˍυϩοϓΛ࣮͠Α͏ͱͨ͠ͱ͖ʹ·ͣ࠷ॳʹࢥ͍ͭ͘؆୯ͳΓํ
%0.ૢ࡞ελΠϦϯάͨ͠IUNMΛૢ࡞͢Δख๏
UPQQYMFGUQYυϥοάˍυϩοϓ͢ΔΦϒδΣΫτͷ࠲ඪΛঢ়ଶཧ \Y Z^EJWλάΛઈରஔͰஔ͠ɺ࠲ඪΛঢ়ଶཧઈରஔ
UPQ:QYMFGU9QY $VSTPS$VSTPSͷ࠲ඪΠϕϯτຖʹऔಘग़དྷΔ
ʬυϥοά։࢝ʭNPVTFEPXO 1$PSUPVDITUBSU 41\Y Z^υϥοά։࢝ԡ͢
ʬυϥοάதʭNPVTFNPWF 1$PSUPVDINPWF 41ʬυϩοϓʭ NPVTFVQ 1$PSUPVDIFOE 41\Y Z^υϥοάˍυϩοϓʬυϥοά։࢝ʭNPVTFEPXO 1$PSUPVDITUBSU 41͢
EZEY\Y Z^\YEY ZEZ^ΠϕϯτຖʹϚεͷ࠲ඪ͔Βબ͍ͯ͠ΔΦϒδΣΫτͷ࠲ඪΛߋ৽ʬυϥοά։࢝ʭNPVTFEPXO 1$PSUPVDITUBSU 41ʬυϥοάதʭNPVTFNPWF 1$PSUPVDINPWF 41ʬυϩοϓʭ NPVTFVQ 1$PSUPVDIFOE 41ϚεͷҠಈڑ EY EZ
αϯϓϧ࣮
%0.ૢ࡞ͰυϥοάˍυϩοϓΛ͢ΔදతͳϥΠϒϥϦʲWVFESBHHBCMFSFTJ[BCMFʳʲSFBDUESBHHBCMFʳ
λεΫཧπʔϧͷΑ͏ͳ(6*Λ࣮Ͱ͖ΔϥΠϒϥϦɾWVFESBHHBCMFɾSFBDUEOEɾSFBDUCFBVUJGVMEOESFBDUCFBVUJGVMEOEͷHJUIVCϦϙδτϦIUUQTHJUIVCDPNBUMBTTJBOSFBDUCFBVUJGVMEOE͔ΒҾ༻
%PNૢ࡞ͷ՝
େྔͷΦϒδΣΫτΛϦΞϧλΠϜڞ༗͢ΔΑ͏ͳෳࡶͳॲཧΛΖ͏ͱ͢Δͱॏ͍
%0.ૢ࡞ߴίετˍݶքɹɹɹɹ$BOWBTΛ༻͍ͯ͠Δ
-BZFS DBOWBT-BZFS DBOWBT$BOWBTͱ$BOWBTɺΣϒϖʔδʹϐΫηϧϕʔεͷάϥϑΟοΫεඳըΛՄೳʹ͢Δ)5.-ͷཁૉͷҰͭɻ $BOWBTɺ+BWB4DSJQUΛ༻͍ͯϐΫηϧΛૢ࡞͢Δ͜ͱͰɺߴͳඳըػೳΞχϝʔγϣϯɺը૾ฤूͳͲͷػೳΛ࣮ݱɻ $BOWBTͷ-BZFSΛ͚Ε͓ޓ͍ׯবͤͣಠཱੑΛҡ࣋͢Δ͜ͱ͕ग़དྷΔɻ-BZFS DBOWBT
%0.ૢ࡞WT$BOWBTʬύϑΥʔϚϯεʭ ɾ$BOWBTϐΫηϧϕʔεͷඳըͰ͋ΓɺେྔͷΦϒδΣΫτಈ͖͕͋Δ߹ͰΦϒδΣΫτͷҐஔঢ়ଶΛΞϓϦέʔγϣϯͷ+BWBTDSJQUͰશʹ੍ޚͰ͖ΔͨΊ%0.ΑΓޮతʹϨϯμϦϯάͰ͖Δɾ%0.ෳࡶͳπϦʔߏΛ͍࣋ͬͯΔͳͲͷཧ༝͔Βɺ%0.ૢ࡞ߴίετͳͷͰଟ͘ͷΦϒδΣΫτΛυϥοάˍυϩοϓ͢Δ߹ϨϯμϦϯάͷԆΫϥογϡ ϋϯά͢ΔՄೳੑ͕͋ΔʬελΠϦϯάͷॊೈੑɺಠཱੑʭɾ$BOWBTϐΫηϧϨϕϧͰͷ੍ޚΛՄೳʹ͢ΔͨΊɺҙͷܗ৭ͷΦϒδΣΫτΛࣗ༝ʹඳըͰ͖ɺଞͷDTTͷӨڹΛड͚ͳ͍ɾ%0.ඪ४ͷ)5.-͓Αͼ$44ελΠϦϯάʹ੍͞ΕɺଞͷDTTͷӨڹΛड͚ΔՄೳੑ͕͋ΔʬΠϕϯτϋϯυϦϯάʭɾϒϥβ%0.ཁૉʹର͢ΔΠϕϯτϋϯυϦϯάΛωΠςΟϒʹαϙʔτ͍ͯ͠ΔͷͰ؆୯ʹ࣮ग़དྷΔɾDBOWBTʹΠϕϯτϋϯυϦϯάͷػೳ͕ແ͍ͨΊDBOWBT্ͷ֤ΦϒδΣΫτͷܗঢ়ʹ߹ΘͤͯΠϕϯτϋϯυϦϯάͷॲཧΛϑϧεΫϥονͰ࣮͠ͳ͍ͱ͍͚ͳ͍
DBOWBT3B Cબ͢ΔΦϒδΣΫτઌఔͱಉ༷ͳԁܗΦϒδΣΫτ
DBOWBT3B CY ZϚεΠϕϯτϋϯυϦϯάͷϩδοΫυϥοάఆ
DBOWBT3B CY ZϚεͱԁͷத৺ͷڑΠϕϯτϋϯυϦϯάͷϩδοΫυϥοάఆ
DBOWBT3B CY ZϚεͱԁͷத৺ͷڑϚεͱԁͷத৺ͷڑ (x − a)2 + (y − b)2 ≦ R ԁͷܘ(x − a)2 + (y − b)2 ≦ R2ΠϕϯτϋϯυϦϯάͷϩδοΫυϥοάఆ
DBOWBT3B CY Zυϥοά։࢝(x − a)2 + (y − b)2 ≦ R2NPVTFEPXOPSUPVDITUBSU
DBOWBTB CY ZυϥοάதNPVTFͷҠಈڑΛࢉग़Y ZEYEZNPVTFNPWFPSUPVDINPWF
DBOWBTB CY ZNPVTFNPWF UPVDINPWFΠϕϯτຖʹΦϒδΣΫτͷ࠲ඪΛߋ৽ˍDBOWBTΛ࠶ඳը3Y ZEYEZBEY CEZDBOWBTΛ࠶ඳը˞ۃྗDBOWBTͷ-BZFSΛ͚Δ͜ͱͰࠩҎ֎ എܠը૾࠶ඳը͠ͳ͍Α͏ʹ͢Δ͜ͱ͕ग़དྷΔ
αϯϓϧ࣮ WVF
αϯϓϧ࣮ WVFΦϒδΣΫτͷܗঢ়ຖʹΠϕϯτϋϯυϦϯάͷϩδοΫΛॻ͔ͳ͍ͱ͍͚ͳ͍🥺
αϯϓϧ࣮ WVFΦϒδΣΫτͷܗঢ়ຖʹΠϕϯτϋϯυϦϯάͷϩδοΫΛॻ͔ͳ͍ͱ͍͚ͳ͍🥺,POWBKT͕ղܾʂ
3FBDU7VFͰ͑ΔʂLPOWBKTSFBDULPOWB WVFLPOWB
,POWBKTͰ͑ΔදతͳΦϒδΣΫτ$JSDMF3FDU &MJQTF4UBS 3FHVMBS1PMZHPO "SSPX
%SBHHBCMFΛ༩͢Δ͜ͱͰ؆୯ʹυϥοάˍυϩοϓΛ࣮Ͱ͖Δ
%0.ૢ࡞WT$BOWBTͷ·ͱΊʬ%0.ૢ࡞Ͱ࡞Δͷ͕ద͍ͯ͠Δ࣌ʭɾ؆୯ͳ6*গྔͷಈతཁૉ͔͠ͳ͍߹ɾ%0. )5.-ͷػೳΛ׆༻͍ͨ͠߹ FYλεΫཧπʔϧʬ$BOWBTͰ࡞Δͷ͕ద͍ͯ͠Δͱ͖ʭɾߴͳάϥϑΟοΫεɺେྔͳಈతΦϒδΣΫτɺ·ͨߴසͷ࠶ඳը͕ඞཁͳ߹ɾDBOWBTͷػೳΛ׆༻ʢը૾ΞχϝʔγϣϯΛ࡞ͯ͠อଘʣ͍ͨ͠Α͏ͳ߹
Ԡ༻ɿେྔͷΦϒδΣΫτΛυϥοάˍυϩοϓ͢Δ࣮ɾΦϒδΣΫτͷϦετͰঢ়ଶཧ ˠ/P42-Ͱѻ͑Δ ɾDBOWBTͰ࠷ޙʹඳըͨ͠ͷ͕Ұ൪্ʹདྷΔ ˠ࠷ޙʹબͨ͠ΦϒδΣΫτϦετͷඌʹՃ͑ͯ[JOEFYΛ࣮