$30 off During Our Annual Pro Sale. View Details »

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

高津亘宏
September 16, 2023

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

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

高津亘宏

September 16, 2023
Tweet

Other Decks in Technology

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