ドラッグ＆ドロップを支える技術

MiroやFigmaのようなWeb上でドラッグ＆ドロップ（GUI操作）を実装する技術について深掘りしていきます

Transcript

2. ࣗݾ঺հ ʲ໊લʳ
   ߴ௡
   ࿱޺
   ʲॴଐʳ
   ΦϯϥΠϯαϩϯ։ൃ෦ΞʔΩςΫτνʔϜ
   ʲྖҬʳ
   αʔόʔαΠυΤϯδχΞͱͯ͠ೖࣾ
   ۀ຿Ͱ͸Πϯϑϥ͔ΒϑϩϯτΤϯυ·Ͱ෯޿͘
   ϑϩϯτΤϯυ͸7VFKT /VYUKT ͱ3FBDUKT /FYUKT ͕ॻ͚Δ
   ʲझຯʳ
   ϑοταϧ
3. ͱ͜ΖͰօ͞Μʂ
4. 'JHNB΍.JSPͷΑ͏ͳ(6*Ͱυϥοά Ξϯυυϩοϓग़དྷΔΑ͏ͳ8FCΞϓϦ Λ࡞Γͨ͘ͳͬͨ͜ͱ͸͋Γ·ͤΜ͔ʁ
5. ๻͸͋Γ·͢ɻ
6. 8FC্ͰυϥοάˍυϩοϓΛ࣮૷͠Α͏ͱ ͨ͠ͱ͖ʹ·ͣ࠷ॳʹࢥ͍ͭ͘؆୯ͳ΍Γํ
7. %0.ૢ࡞ ελΠϦϯάͨ͠IUNMΛ௚઀ૢ࡞͢Δख๏
8. UPQ
   
   
   QY MFGU
   
   
   QY υϥοάˍυϩοϓ͢ΔΦϒδΣΫτͷ࠲ඪΛঢ়ଶ؅ཧ 
 \
   Y
   
   Z
   
   ^ EJWλάΛઈର഑ஔͰ഑ஔ͠ɺ࠲ඪΛঢ়ଶ؅ཧ ઈର഑ஔ
9. UPQ
   
   :
   QY MFGU
   
   9
   QY $VSTPS $VSTPSͷ࠲ඪ͸Πϕϯτຖʹऔಘग़དྷΔ
10. ʬυϥοά։࢝ʭ
    NPVTFEPXO 1$
    PS
    UPVDITUBSU 41 \
    Y
    
    Z
    
    ^ υϥοά։࢝ ԡ͢
11. ʬυϥοάதʭ
    NPVTFNPWF 1$
    PS
    UPVDINPWF 41 ʬυϩοϓʭ 
 NPVTFVQ 1$
    PS
    UPVDIFOE 41 \
    Y
    
    Z
    
    ^ υϥοάˍυϩοϓ ʬυϥοά։࢝ʭ
    NPVTFEPXO 1$
    PS
    UPVDITUBSU 41 ཭͢
12. EZ EY \
    Y
    
    Z
    
    ^ \
    Y
    
    
    EY
    Z
    
    
    EZ^ ΠϕϯτຖʹϚ΢εͷ࠲ඪ͔Βબ୒͍ͯ͠ΔΦϒδΣΫτͷ࠲ඪΛߋ৽ ʬυϥοά։࢝ʭ
    NPVTFEPXO 1$
    PS
    UPVDITUBSU 41 ʬυϥοάதʭ
    NPVTFNPWF 1$
    PS
    UPVDINPWF 41 ʬυϩοϓʭ 
 NPVTFVQ 1$
    PS
    UPVDIFOE 41 Ϛ΢εͷҠಈڑ཭ EY
    EZ
13. αϯϓϧ࣮૷
14. %0.ૢ࡞ͰυϥοάˍυϩοϓΛ͢Δ୅දతͳϥΠϒϥϦ ʲWVFESBHHBCMFSFTJ[BCMFʳ
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ʲSFBDUESBHHBCMFʳ
    
15. λεΫ؅ཧπʔϧͷΑ͏ͳ(6*Λ࣮૷Ͱ͖ΔϥΠϒϥϦ ɾWVFESBHHBCMF
    ɾSFBDUEOE
    ɾSFBDUCFBVUJGVMEOE SFBDUCFBVUJGVMEOEͷHJUIVCϦϙδτϦ
    
    IUUQTHJUIVCDPNBUMBTTJBOSFBDUCFBVUJGVMEOE
    ͔ΒҾ༻
16. %PNૢ࡞ͷ՝୊
17. େྔͷΦϒδΣΫτΛϦΞϧλΠϜڞ༗͢ΔΑ͏ͳෳࡶͳॲཧΛ΍Ζ͏ͱ͢Δͱॏ͍
18. %0.ૢ࡞͸ߴίετˍݶք ΍ɹɹɹ
    ɹ͸$BOWBTΛ࢖༻͍ͯ͠Δ
19. -BZFS DBOWBT -BZFS DBOWBT $BOWBTͱ͸ $BOWBT͸ɺ΢Σϒϖʔδ಺ʹϐΫηϧϕʔεͷάϥϑΟοΫεඳըΛՄೳʹ͢Δ)5.-ͷཁૉͷҰͭɻ 
 $BOWBT͸ɺ+BWB4DSJQUΛ༻͍ͯ௚઀ϐΫηϧΛૢ࡞͢Δ͜ͱͰɺߴ౓ͳඳըػೳ΍Ξχϝʔγϣϯɺը૾ฤूͳͲͷػೳΛ࣮ݱɻ 
 $BOWBTͷ-BZFSΛ෼͚Ε͹͓ޓ͍͸ׯবͤͣಠཱੑΛҡ࣋͢Δ͜ͱ͕ग़དྷΔɻ -BZFS DBOWBT
20. %0.ૢ࡞
    WT
    $BOWBT ʬύϑΥʔϚϯεʭ 
 ɾ$BOWBT͸ϐΫηϧϕʔεͷඳըͰ͋ΓɺେྔͷΦϒδΣΫτ΍ಈ͖͕͋Δ৔߹Ͱ΋ΦϒδΣΫτͷҐஔ΍ঢ়ଶΛΞϓϦέʔγϣϯͷ +BWBTDSJQUͰ׬શʹ੍ޚͰ͖ΔͨΊ%0.ΑΓޮ཰తʹϨϯμϦϯάͰ͖Δ
    ɾ%0.͸ෳࡶͳπϦʔߏ଄Λ͍࣋ͬͯΔͳͲͷཧ༝͔Βɺ%0.ૢ࡞͸ߴίετͳͷͰଟ͘ͷΦϒδΣΫτΛυϥοάˍυϩοϓ͢Δ৔߹ ϨϯμϦϯάͷ஗Ԇ΍Ϋϥογϡ ϋϯά ͢ΔՄೳੑ͕͋Δ
    ʬελΠϦϯάͷॊೈੑɺಠཱੑʭ
    ɾ$BOWBT͸ϐΫηϧϨϕϧͰͷ੍ޚΛՄೳʹ͢ΔͨΊɺ೚ҙͷܗ΍৭ͷΦϒδΣΫτΛࣗ༝ʹඳըͰ͖ɺଞͷDTTͷӨڹΛड͚ͳ͍
    ɾ%0.͸ඪ४ͷ)5.-͓Αͼ$44ελΠϦϯάʹ੍໿͞ΕɺଞͷDTTͷӨڹΛड͚ΔՄೳੑ͕͋Δ
    ʬΠϕϯτϋϯυϦϯάʭ
    ɾϒϥ΢β͸%0.ཁૉʹର͢ΔΠϕϯτϋϯυϦϯάΛωΠςΟϒʹαϙʔτ͍ͯ͠ΔͷͰ؆୯ʹ࣮૷ग़དྷΔ
    ɾDBOWBTʹ͸ΠϕϯτϋϯυϦϯάͷػೳ͕ແ͍ͨΊDBOWBT্ͷ֤ΦϒδΣΫτͷܗঢ়ʹ߹ΘͤͯΠϕϯτϋϯυϦϯάͷॲཧΛ
    ϑϧεΫϥονͰ࣮૷͠ͳ͍ͱ͍͚ͳ͍
21. DBOWBT 3 B
    C બ୒͢ΔΦϒδΣΫτ ઌఔͱಉ༷ͳԁܗΦϒδΣΫτ
22. DBOWBT 3 B
    C Y
    Z Ϛ΢ε ΠϕϯτϋϯυϦϯάͷϩδοΫυϥοά൑ఆ
23. DBOWBT 3 B
    C Y
    Z Ϛ΢εͱԁͷத৺ͷڑ཭ ΠϕϯτϋϯυϦϯάͷϩδοΫυϥοά൑ఆ
24. DBOWBT 3 B
    C Y
    Z Ϛ΢εͱԁͷத৺ͷڑ཭ Ϛ΢εͱԁͷத৺ͷڑ཭ (x − a)2 + (y − b)2 ≦ R ԁͷ൒ܘ (x − a)2 + (y − b)2 ≦ R2 ΠϕϯτϋϯυϦϯάͷϩδοΫυϥοά൑ఆ
25. DBOWBT 3 B
    C Y
    Z υϥοά։࢝ (x − a)2 + (y − b)2 ≦ R2 NPVTFEPXO
    PS
    UPVDITUBSU
26. DBOWBT B
    C Y
    Z υϥοάதNPVTFͷҠಈڑ཭Λࢉग़ Y
    Z EY EZ NPVTFNPWF
    PS
    UPVDINPWF
27. DBOWBT B
    C Y
    Z NPVTFNPWF UPVDINPWF ΠϕϯτຖʹΦϒδΣΫτͷ࠲ඪΛߋ৽ˍDBOWBTΛ࠶ඳը 3 Y
    Z EY EZ B EY
    C EZ DBOWBTΛ࠶ඳը ˞ۃྗDBOWBTͷ-BZFSΛ෼͚Δ͜ͱͰࠩ෼Ҏ֎ എܠը૾౳ ͸࠶ඳը͠ͳ͍Α͏ʹ͢Δ͜ͱ͕ग़དྷΔ
28. αϯϓϧ࣮૷ WVF
29. αϯϓϧ࣮૷ WVF ΦϒδΣΫτͷܗঢ়ຖʹΠϕϯτϋϯυϦϯάͷϩδοΫΛॻ͔ͳ͍ͱ͍͚ͳ͍🥺
30. αϯϓϧ࣮૷ WVF ΦϒδΣΫτͷܗঢ়ຖʹΠϕϯτϋϯυϦϯάͷϩδοΫΛॻ͔ͳ͍ͱ͍͚ͳ͍🥺 ,POWBKT͕ղܾʂ
31. 3FBDU΍7VFͰ΋࢖͑Δʂ LPOWBKT SFBDULPOWB WVFLPOWB
32. ,POWBKTͰ࢖͑Δ୅දతͳΦϒδΣΫτ $JSDMF 3FDU &MJQTF 4UBS 3FHVMBS
    1PMZHPO "SSPX
33. αϯϓϧ࣮૷
34. %SBHHBCMFΛ෇༩͢Δ͜ͱͰ؆୯ʹυϥοάˍυϩοϓΛ࣮૷Ͱ͖Δ
35. %0.ૢ࡞
    WT
    $BOWBTͷ·ͱΊ ʬ%0.ૢ࡞Ͱ࡞Δͷ͕ద͍ͯ͠Δ࣌ʭ
    ɾ؆୯ͳ6*΍গྔͷಈతཁૉ͔͠ͳ͍৔߹
    ɾ%0. )5.- ͷػೳΛ׆༻͍ͨ͠৔߹
    FYλεΫ؅ཧπʔϧ౳
    ʬ$BOWBTͰ࡞Δͷ͕ద͍ͯ͠Δͱ͖ʭ
    ɾߴ౓ͳάϥϑΟοΫεɺେྔͳಈతΦϒδΣΫτɺ·ͨ͸ߴස౓ͷ࠶ඳը͕ඞཁͳ৔߹
    ɾDBOWBTͷػೳΛ׆༻ʢը૾΍ΞχϝʔγϣϯΛ࡞੒ͯ͠อଘʣ͍ͨ͠Α͏ͳ৔߹
36. Ԡ༻ɿେྔͷΦϒδΣΫτΛυϥοάˍυϩοϓ͢Δ࣮૷ ɾΦϒδΣΫτͷϦετͰঢ়ଶ؅ཧ 
 ˠ/P42-Ͱѻ͑Δ 
 ɾDBOWBTͰ͸࠷ޙʹඳըͨ͠΋ͷ͕Ұ൪্ʹདྷΔ 
 ˠ࠷ޙʹબ୒ͨ͠ΦϒδΣΫτ͸Ϧετͷ຤ඌʹՃ͑ͯ[JOEFYΛ࣮૷