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

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

Transcript

1. View Slide

2. ࣗݾ঺հ
   ʲ໊લʳ
   ߴ௡࿱޺
   ʲॴଐʳ
   ΦϯϥΠϯαϩϯ։ൃ෦ΞʔΩςΫτνʔϜ
   ʲྖҬʳ
   αʔόʔαΠυΤϯδχΞͱͯ͠ೖࣾ
   ۀ຿Ͱ͸Πϯϑϥ͔ΒϑϩϯτΤϯυ·Ͱ෯޿͘
   ϑϩϯτΤϯυ͸7VFKT /VYUKT
   ͱ3FBDUKT /FYUKT
   ͕ॻ͚Δ
   ʲझຯʳ
   ϑοταϧ
   

   View Slide

3. ͱ͜ΖͰօ͞Μʂ
   

   View Slide

4. 'JHNB΍.JSPͷΑ͏ͳ(6*Ͱυϥοά
   Ξϯυυϩοϓग़དྷΔΑ͏ͳ8FCΞϓϦ
   Λ࡞Γͨ͘ͳͬͨ͜ͱ͸͋Γ·ͤΜ͔ʁ
   

   View Slide

5. ๻͸͋Γ·͢ɻ
   

   View Slide

6. 8FC্ͰυϥοάˍυϩοϓΛ࣮૷͠Α͏ͱ
   ͨ͠ͱ͖ʹ·ͣ࠷ॳʹࢥ͍ͭ͘؆୯ͳ΍Γํ
   

   View Slide

7. %0.ૢ࡞
   ελΠϦϯάͨ͠IUNMΛ௚઀ૢ࡞͢Δख๏
   

   View Slide

8. UPQQY
   MFGUQY
   υϥοάˍυϩοϓ͢ΔΦϒδΣΫτͷ࠲ඪΛঢ়ଶ؅ཧ
   

   \Y Z^
   EJWλάΛઈର഑ஔͰ഑ஔ͠ɺ࠲ඪΛঢ়ଶ؅ཧ
   ઈର഑ஔ
   

   View Slide

9. UPQ:QY
   MFGU9QY $VSTPS
   $VSTPSͷ࠲ඪ͸Πϕϯτຖʹऔಘग़དྷΔ
   

   View Slide

10. ʬυϥοά։࢝ʭ
    NPVTFEPXO 1$
    PSUPVDITUBSU 41
    
    \Y Z^
    υϥοά։࢝
    ԡ͢
    

    View Slide

11. ʬυϥοάதʭ
    NPVTFNPWF 1$
    PSUPVDINPWF 41
    
    ʬυϩοϓʭ
    

    NPVTFVQ 1$
    PSUPVDIFOE 41
    
    \Y Z^
    υϥοάˍυϩοϓ
    ʬυϥοά։࢝ʭ
    NPVTFEPXO 1$
    PSUPVDITUBSU 41
    
    ཭͢
    

    View Slide

12. EZ
    EY
    \Y Z^
    \YEY ZEZ^
    ΠϕϯτຖʹϚ΢εͷ࠲ඪ͔Βબ୒͍ͯ͠ΔΦϒδΣΫτͷ࠲ඪΛߋ৽
    ʬυϥοά։࢝ʭ
    NPVTFEPXO 1$
    PSUPVDITUBSU 41
    
    ʬυϥοάதʭ
    NPVTFNPWF 1$
    PSUPVDINPWF 41
    
    ʬυϩοϓʭ
    

    NPVTFVQ 1$
    PSUPVDIFOE 41
    
    Ϛ΢εͷҠಈڑ཭ EY EZ
    
    

    View Slide

13. αϯϓϧ࣮૷
    

    View Slide

14. %0.ૢ࡞ͰυϥοάˍυϩοϓΛ͢Δ୅දతͳϥΠϒϥϦ
    ʲWVFESBHHBCMFSFTJ[BCMFʳʲSFBDUESBHHBCMFʳ
    

    View Slide

15. λεΫ؅ཧπʔϧͷΑ͏ͳ(6*Λ࣮૷Ͱ͖ΔϥΠϒϥϦ
    ɾWVFESBHHBCMF
    ɾSFBDUEOE
    ɾSFBDUCFBVUJGVMEOE
    SFBDUCFBVUJGVMEOEͷHJUIVCϦϙδτϦ
    IUUQTHJUIVCDPNBUMBTTJBOSFBDUCFBVUJGVMEOE
    ͔ΒҾ༻
    

    View Slide

16. %PNૢ࡞ͷ՝୊
    

    View Slide

17. େྔͷΦϒδΣΫτΛϦΞϧλΠϜڞ༗͢ΔΑ͏ͳෳࡶͳॲཧΛ΍Ζ͏ͱ͢Δͱॏ͍
    

    View Slide

18. %0.ૢ࡞͸ߴίετˍݶք
    ΍ɹɹɹɹ͸$BOWBTΛ࢖༻͍ͯ͠Δ
    

    View Slide

19. -BZFS DBOWBT
    -BZFS DBOWBT
    $BOWBTͱ͸
    $BOWBT͸ɺ΢Σϒϖʔδ಺ʹϐΫηϧϕʔεͷάϥϑΟοΫεඳըΛՄೳʹ͢Δ)5.-ͷཁૉͷҰͭɻ
    

    $BOWBT͸ɺ+BWB4DSJQUΛ༻͍ͯ௚઀ϐΫηϧΛૢ࡞͢Δ͜ͱͰɺߴ౓ͳඳըػೳ΍Ξχϝʔγϣϯɺը૾ฤूͳͲͷػೳΛ࣮ݱɻ
    

    $BOWBTͷ-BZFSΛ෼͚Ε͹͓ޓ͍͸ׯবͤͣಠཱੑΛҡ࣋͢Δ͜ͱ͕ग़དྷΔɻ
    -BZFS DBOWBT
    

    View Slide

20. %0.ૢ࡞WT$BOWBT
    ʬύϑΥʔϚϯεʭ
    

    ɾ$BOWBT͸ϐΫηϧϕʔεͷඳըͰ͋ΓɺେྔͷΦϒδΣΫτ΍ಈ͖͕͋Δ৔߹Ͱ΋ΦϒδΣΫτͷҐஔ΍ঢ়ଶΛΞϓϦέʔγϣϯͷ
    +BWBTDSJQUͰ׬શʹ੍ޚͰ͖ΔͨΊ%0.ΑΓޮ཰తʹϨϯμϦϯάͰ͖Δ
    ɾ%0.͸ෳࡶͳπϦʔߏ଄Λ͍࣋ͬͯΔͳͲͷཧ༝͔Βɺ%0.ૢ࡞͸ߴίετͳͷͰଟ͘ͷΦϒδΣΫτΛυϥοάˍυϩοϓ͢Δ৔߹
    ϨϯμϦϯάͷ஗Ԇ΍Ϋϥογϡ ϋϯά
    ͢ΔՄೳੑ͕͋Δ
    ʬελΠϦϯάͷॊೈੑɺಠཱੑʭ
    ɾ$BOWBT͸ϐΫηϧϨϕϧͰͷ੍ޚΛՄೳʹ͢ΔͨΊɺ೚ҙͷܗ΍৭ͷΦϒδΣΫτΛࣗ༝ʹඳըͰ͖ɺଞͷDTTͷӨڹΛड͚ͳ͍
    ɾ%0.͸ඪ४ͷ)5.-͓Αͼ$44ελΠϦϯάʹ੍໿͞ΕɺଞͷDTTͷӨڹΛड͚ΔՄೳੑ͕͋Δ
    ʬΠϕϯτϋϯυϦϯάʭ
    ɾϒϥ΢β͸%0.ཁૉʹର͢ΔΠϕϯτϋϯυϦϯάΛωΠςΟϒʹαϙʔτ͍ͯ͠ΔͷͰ؆୯ʹ࣮૷ग़དྷΔ
    ɾDBOWBTʹ͸ΠϕϯτϋϯυϦϯάͷػೳ͕ແ͍ͨΊDBOWBT্ͷ֤ΦϒδΣΫτͷܗঢ়ʹ߹ΘͤͯΠϕϯτϋϯυϦϯάͷॲཧΛ
    ϑϧεΫϥονͰ࣮૷͠ͳ͍ͱ͍͚ͳ͍
    

    View Slide

21. DBOWBT
    3
    B C
    
    બ୒͢ΔΦϒδΣΫτ
    ઌఔͱಉ༷ͳԁܗΦϒδΣΫτ
    

    View Slide

22. DBOWBT
    3
    B C
    
    Y Z
    
    Ϛ΢ε
    ΠϕϯτϋϯυϦϯάͷϩδοΫυϥοά൑ఆ
    

    View Slide

23. DBOWBT
    3
    B C
    
    Y Z
    
    Ϛ΢εͱԁͷத৺ͷڑ཭
    ΠϕϯτϋϯυϦϯάͷϩδοΫυϥοά൑ఆ
    

    View Slide

24. DBOWBT
    3
    B C
    
    Y Z
    
    Ϛ΢εͱԁͷத৺ͷڑ཭
    Ϛ΢εͱԁͷத৺ͷڑ཭ (x − a)2 + (y − b)2 ≦ R ԁͷ൒ܘ
    
    (x − a)2 + (y − b)2 ≦ R2
    ΠϕϯτϋϯυϦϯάͷϩδοΫυϥοά൑ఆ
    

    View Slide

25. DBOWBT
    3
    B C
    
    Y Z
    
    υϥοά։࢝
    (x − a)2 + (y − b)2 ≦ R2
    NPVTFEPXOPSUPVDITUBSU
    

    View Slide

26. DBOWBT
    B C
    
    Y Z
    
    υϥοάதNPVTFͷҠಈڑ཭Λࢉग़
    Y
    Z
    
    
    EY
    EZ
    NPVTFNPWFPSUPVDINPWF
    

    View Slide

27. DBOWBT
    B C
    
    Y Z
    
    NPVTFNPWF UPVDINPWF
    ΠϕϯτຖʹΦϒδΣΫτͷ࠲ඪΛߋ৽ˍDBOWBTΛ࠶ඳը
    3
    Y
    Z
    
    
    EY
    EZ
    BEY CEZ
    
    DBOWBTΛ࠶ඳը
    ˞ۃྗDBOWBTͷ-BZFSΛ෼͚Δ͜ͱͰࠩ෼Ҏ֎ എܠը૾౳
    ͸࠶ඳը͠ͳ͍Α͏ʹ͢Δ͜ͱ͕ग़དྷΔ
    

    View Slide

28. αϯϓϧ࣮૷ WVF
    
    

    View Slide

29. αϯϓϧ࣮૷ WVF
    
    ΦϒδΣΫτͷܗঢ়ຖʹΠϕϯτϋϯυϦϯάͷϩδοΫΛॻ͔ͳ͍ͱ͍͚ͳ͍🥺
    

    View Slide

30. αϯϓϧ࣮૷ WVF
    
    ΦϒδΣΫτͷܗঢ়ຖʹΠϕϯτϋϯυϦϯάͷϩδοΫΛॻ͔ͳ͍ͱ͍͚ͳ͍🥺
    ,POWBKT͕ղܾʂ
    

    View Slide

31. 3FBDU΍7VFͰ΋࢖͑Δʂ
    LPOWBKT
    SFBDULPOWB WVFLPOWB
    

    View Slide

32. ,POWBKTͰ࢖͑Δ୅දతͳΦϒδΣΫτ
    $JSDMF
    3FDU &MJQTF
    4UBS 3FHVMBS1PMZHPO "SSPX
    

    View Slide

33. αϯϓϧ࣮૷
    

    View Slide

34. %SBHHBCMFΛ෇༩͢Δ͜ͱͰ؆୯ʹυϥοάˍυϩοϓΛ࣮૷Ͱ͖Δ
    

    View Slide

35. %0.ૢ࡞WT$BOWBTͷ·ͱΊ
    ʬ%0.ૢ࡞Ͱ࡞Δͷ͕ద͍ͯ͠Δ࣌ʭ
    ɾ؆୯ͳ6*΍গྔͷಈతཁૉ͔͠ͳ͍৔߹
    ɾ%0. )5.-
    ͷػೳΛ׆༻͍ͨ͠৔߹ FYλεΫ؅ཧπʔϧ౳
    
    ʬ$BOWBTͰ࡞Δͷ͕ద͍ͯ͠Δͱ͖ʭ
    ɾߴ౓ͳάϥϑΟοΫεɺେྔͳಈతΦϒδΣΫτɺ·ͨ͸ߴස౓ͷ࠶ඳը͕ඞཁͳ৔߹
    ɾDBOWBTͷػೳΛ׆༻ʢը૾΍ΞχϝʔγϣϯΛ࡞੒ͯ͠อଘʣ͍ͨ͠Α͏ͳ৔߹
    

    View Slide

36. Ԡ༻ɿେྔͷΦϒδΣΫτΛυϥοάˍυϩοϓ͢Δ࣮૷
    ɾΦϒδΣΫτͷϦετͰঢ়ଶ؅ཧ
    

    ˠ/P42-Ͱѻ͑Δ
    

    ɾDBOWBTͰ͸࠷ޙʹඳըͨ͠΋ͷ͕Ұ൪্ʹདྷΔ
    

    ˠ࠷ޙʹબ୒ͨ͠ΦϒδΣΫτ͸Ϧετͷ຤ඌʹՃ͑ͯ[JOEFYΛ࣮૷
    

    View Slide