GUIの“こちら側”からのデザイン / Designing GUI Face and Face

GUIの“こちら側”からのデザイン（公開版）

GUIの表現方法ではなく、ユーザーの操作方法やイベントディスパッチの構造に着目してmacOSネイティブインターフェイスのデザインを考えます。CocoaにおけるResponder Chainの仕組みやUIの表現に触れつつ、macOS “らしい” GUIの振る舞い方を考察します。

macOS native Symposium #04
https://macos-native.github.io
https://macos-native.connpass.com/event/127679/

Transcript

1. @usagimaruma GUI ͷ “ͪ͜Βଆ” ͔ΒͷσβΠϯ macos-native.github.io © 2019 Satori Maru / @usagimaruma. macOS native Symposium #04 #macosnative
2. © 2019 Satori Maru / @usagimaruma. ιϑτ΢ΣΞσβΠφʔ usagimaru Interface design / Interaction design / macOS / iOS @usagimaru @usagimaru @usagimaruma macOS native ίΞϝϯόʔ #macosnative
3. © 2019 Satori Maru / @usagimaruma. #macosnative Space Drag Adobe Photoshop CC 2018 Designing Desktop Interactions – macOS native Symposium #01 https://speakerdeck.com/usagimaru/designing-desktop-interactions #01
4. © 2019 Satori Maru / @usagimaruma. “ͪ͜Βଆ” #macosnative
5. © 2019 Satori Maru / @usagimaruma. ଆ #macosnative
6. © 2019 Satori Maru / @usagimaruma. #macosnative Ϣʔβʔࢹ఺ “ͪ͜Βଆ”
7. © 2019 Satori Maru / @usagimaruma. #macosnative ίϯϐϡʔλʔࢹ఺ “͋ͪΒଆ”
8. © 2019 Satori Maru / @usagimaruma. Interface #macosnative
9. © 2019 Satori Maru / @usagimaruma. Inter-face #macosnative ໘ͱ໘ͷؒ
10. © 2019 Satori Maru / @usagimaruma. #macosnative “ͪ͜Βଆ” “͋ͪΒଆ”
11. © 2019 Satori Maru / @usagimaruma. #macosnative “ͪ͜Βଆ” “͋ͪΒଆ” User Interface
12. © 2019 Satori Maru / @usagimaruma. #macosnative “ͪ͜Βଆ” “͋ͪΒଆ” ࡞༻ ࡞༻ User Interface
13. © 2019 Satori Maru / @usagimaruma. #macosnative “ͪ͜Βଆ” “͋ͪΒଆ” ࡞༻ ΧʔιϧҠಈ ΫϦοΫ Ωʔೖྗ Ի੠ೖྗ ࡞༻ άϥϑΟοΫඳը α΢ϯυ࠶ੜ ৼಈ ҹ࡮ User Interface
14. © 2019 Satori Maru / @usagimaruma. Human-Computer Interaction #macosnative ײ֮ث ਫ਼ਆ ਎ମೳྗ ώτ पลػثɾग़ྗ ϋʔυ΢ΣΞ ूੵճ࿏ ιϑτ΢ΣΞ macOS ΞϓϦέʔγϣϯ https://en.wikipedia.org/wiki/File:Linux_kernel_INPUT_OUPUT_evdev_gem_USB_framebuffer.svg ΑΓ࠶ߏ੒ पลػثɾೖྗ Cocoa Core Text Open AL Quartz Core Animation Core Audio Core Image AV Foundation Core Services Metal Darwin ΢Πϯυ΢ UIίϯτϩʔϧ ϝχϡʔ Χʔιϧ α΢ϯυ ϏσΦ Πϝʔδ ςΩετ ΩʔΠϕϯτ Ϛ΢εΠϕϯτ Ի੠ೖྗ ίϯςϯπ IC
15. © 2019 Satori Maru / @usagimaruma. Human-Computer Interaction #macosnative ײ֮ث ਫ਼ਆ ਎ମೳྗ ώτ पลػثɾग़ྗ ϋʔυ΢ΣΞ ूੵճ࿏ ιϑτ΢ΣΞ macOS ΞϓϦέʔγϣϯ https://en.wikipedia.org/wiki/File:Linux_kernel_INPUT_OUPUT_evdev_gem_USB_framebuffer.svg ΑΓ࠶ߏ੒ पลػثɾೖྗ Cocoa Core Text Open AL Quartz Core Animation Core Audio Core Image AV Foundation Core Services Metal Darwin ΢Πϯυ΢ UIίϯτϩʔϧ ϝχϡʔ Χʔιϧ α΢ϯυ ϏσΦ Πϝʔδ ςΩετ ΩʔΠϕϯτ Ϛ΢εΠϕϯτ Ի੠ೖྗ ΦϒδΣΫτ ؍೦ ಺ࡏԽ IC
16. © 2019 Satori Maru / @usagimaruma. Human-Computer Interaction #macosnative ਫ਼ਆ ώτ ιϑτ΢ΣΞ ΞϓϦέʔγϣϯ https://en.wikipedia.org/wiki/File:Linux_kernel_INPUT_OUPUT_evdev_gem_USB_framebuffer.svg ΑΓ࠶ߏ੒ ΦϒδΣΫτ ؍೦ ಺ࡏԽ
17. © 2019 Satori Maru / @usagimaruma. #macosnative
18. © 2019 Satori Maru / @usagimaruma. #macosnative ࡞༻ ࡞༻ ࡞༻
19. © 2019 Satori Maru / @usagimaruma. #macosnative ࡞༻ ࡞༻ ࡞༻
20. © 2019 Satori Maru / @usagimaruma. #macosnative ࡞༻ ࡞༻ ࡞༻
21. © 2019 Satori Maru / @usagimaruma. #macosnative ခ”C ခ”C ခ”C
22. © 2019 Satori Maru / @usagimaruma. #macosnative ခ”C ခ”C ခ”C Polymorphism ࣅͨੑ࣭ͷΦϒδΣΫτʹ͸ಉ͡࡞༻Λ༩͑ΒΕΔ
23. © 2019 Satori Maru / @usagimaruma. #macosnative ခ”C ခ”C ခ”C Polymorphism ࣅͨੑ࣭ͷΦϒδΣΫτʹ͸ಉ͡࡞༻Λ༩͑ΒΕΔ
24. © 2019 Satori Maru / @usagimaruma. #macosnative ໊শະઃఆϑΥϧμ Keynote.app Moof.app ခ”C ခ”C ခ”C Finder ϑΝΠϧγεςϜͷΦϒδΣΫτ͸ ಉ͡Α͏ʹૢ࡞Ͱ͖Δ << File >>
25. © 2019 Satori Maru / @usagimaruma. #macosnative ໊শະઃఆϑΥϧμ Keynote.app Moof.app ခ”C ခ”C ခ”C Window ခ”C Finder ͦͷ΄͔ͷΦϒδΣΫτ͸ҟͳΔੑ࣭Λ ࣋ͭͨΊɺಉ͡ૢ࡞͸௨༻͠ͳ͍͜ͱ΋ << File >>
26. © 2019 Satori Maru / @usagimaruma. HIG – Mouse and Trackpad Use standard controls and views. Respond to clicks and gestures based on meaning, not the user’s physical movements. In general, respond to gestures in a way that’s consistent with other apps. Avoid redefining systemwide, inter-app gestures. Make sure gestures apply to the appropriate content. Define custom gestures cautiously. Don’t rely on the availability of specific devices and gestures. #macosnative https://developer.apple.com/design/human-interface-guidelines/macos/user-interaction/mouse-and-trackpad/ HIG
27. © 2019 Satori Maru / @usagimaruma. HIG – Mouse and Trackpad ඪ४ͷίϯτϩʔϧ෦඼ͱϏϡʔΛ࢖༻͠·͠ΐ͏ɻ Ϣʔβʔͷ਎ମతͳಈ͖Ͱ͸ͳ͘ɺҙຯʹج͍ͮͯδΣενϟʔʹରԠ͠·͠ΐ͏ɻ Ұൠతʹ͸ɺଞͷΞϓϦέʔγϣϯͱಉ͡ํ๏ͰδΣενϟʔʹରԠ͠·͠ΐ͏ɻ γεςϜશମͰద༻͞ΕΔδΣενϟʔΛ࠶ఆٛ͠ͳ͍Ͱ͍ͩ͘͞ɻ δΣενϟʔ͕ίϯςϯπʹରͯ͠ద੾ʹద༻͞ΕΔ͜ͱʹཹҙ͍ͯͩ͘͠͞ɻ ಠࣗͷδΣενϟʔͷఆٛ͸৻ॏʹߦ͍ͬͯͩ͘͞ɻ ಛఆػثʹΑΔδΣενϟʔʹ͸པΒͳ͍Ͱ͍ͩ͘͞ɻ #macosnative https://developer.apple.com/design/human-interface-guidelines/macos/user-interaction/mouse-and-trackpad/ HIG
28. ඪ४ͷίϯτϩʔϧ෦඼ͱϏϡʔΛ࢖༻͠·͠ΐ͏ɻ Ϣʔβʔͷ਎ମతͳಈ͖Ͱ͸ͳ͘ɺҙຯʹج͍ͮͯδΣενϟʔʹରԠ͠·͠ΐ͏ɻ Ұൠతʹ͸ɺଞͷΞϓϦέʔγϣϯͱಉ͡ํ๏ͰδΣενϟʔʹରԠ͠·͠ΐ͏ɻ γεςϜશମͰద༻͞ΕΔδΣενϟʔΛ࠶ఆٛ͠ͳ͍Ͱ͍ͩ͘͞ɻ δΣενϟʔ͕ίϯςϯπʹରͯ͠ద੾ʹద༻͞ΕΔ͜ͱʹཹҙ͍ͯͩ͘͠͞ɻ ಠࣗͷδΣενϟʔͷఆٛ͸৻ॏʹߦ͍ͬͯͩ͘͞ɻ ಛఆػثʹΑΔδΣενϟʔʹ͸པΒͳ͍Ͱ͍ͩ͘͞ɻ © 2019 Satori Maru / @usagimaruma. HIG – Mouse and Trackpad #macosnative https://developer.apple.com/design/human-interface-guidelines/macos/user-interaction/mouse-and-trackpad/ HIG Ұ ؏ ੑ
29. ඪ४ͷίϯτϩʔϧ෦඼ͱϏϡʔΛ࢖༻͠·͠ΐ͏ɻ Ϣʔβʔͷ਎ମతͳಈ͖Ͱ͸ͳ͘ɺҙຯʹج͍ͮͯδΣενϟʔʹରԠ͠·͠ΐ͏ɻ Ұൠతʹ͸ɺଞͷΞϓϦέʔγϣϯͱಉ͡ํ๏ͰδΣενϟʔʹରԠ͠·͠ΐ͏ɻ γεςϜશମͰద༻͞ΕΔδΣενϟʔΛ࠶ఆٛ͠ͳ͍Ͱ͍ͩ͘͞ɻ δΣενϟʔ͕ίϯςϯπʹରͯ͠ద੾ʹద༻͞ΕΔ͜ͱʹཹҙ͍ͯͩ͘͠͞ɻ ಠࣗͷδΣενϟʔͷఆٛ͸৻ॏʹߦ͍ͬͯͩ͘͞ɻ ಛఆػثʹΑΔδΣενϟʔʹ͸པΒͳ͍Ͱ͍ͩ͘͞ɻ © 2019 Satori Maru / @usagimaruma. HIG – Mouse and Trackpad #macosnative https://developer.apple.com/design/human-interface-guidelines/macos/user-interaction/mouse-and-trackpad/ HIG Ұ ؏ ੑ ର ৅ ͱ ͷ ૢ ࡞ ํ ๏ ʹ ؔ ͢ Δ ϙ Ϧ Ϟ ʔ ϑ ỹ ζ Ϝ
30. © 2019 Satori Maru / @usagimaruma. ೖྗํ๏ͷ૊Έཱͯํ #macosnative
31. © 2019 Satori Maru / @usagimaruma. #macosnative ΠσΟΦϜ ෳ߹ཁૉ ݪ࢝తཁૉ جຊૢ࡞ͱ ϑΟʔυόοΫ ͷ࢓૊Έ Ұൠతͳೖग़ྗૢ࡞΍ه߸ྨ ݪ࢝తཁૉΛ૊Έ߹Θͤͨ΋ͷ ΠϯλʔϑΣΠεݻ༗ͷίϚϯυͱϑΟʔυόοΫ ϢʔβʔͷߦಈύλʔϯΛߟྀͭͭ͠ෳ߹ཁૉΛ૊Έ߹Θͤͨ΋ͷ ʰAbout Face 3 ΠϯλϥΫγϣϯσβΠϯͷۃҙʱΑΓղऍ Alan Cooper, Robert Reimann, David Cronin ஶɺ௕ඌߴ߂ ༁ ϙΠϯςΟϯά ΫϦοΫ λον υϥοά Ωʔೖྗ Χʔιϧ ςΩετ ը૾ μϒϧΫϦοΫ μϒϧλοϓ ϘλϯͷԡԼ ൣғબ୒ ΩʔόΠϯσΟϯά ςΩετϑΟʔϧυ ϥδΦϘλϯ બ୒ൣғͷදࣔ ԡԼཁૉͷڧௐදࣔ ৽ن࡞੒ ฤू ඳը εΫϩʔϧϏϡʔ φϏήʔγϣϯόʔ ΞϥʔτμΠΞϩά ೖྗ ग़ྗ
32. © 2019 Satori Maru / @usagimaruma. #macosnative ΠσΟΦϜ ෳ߹ཁૉ ݪ࢝తཁૉ جຊૢ࡞ͱ ϑΟʔυόοΫ ͷ࢓૊Έ Ұൠతͳೖग़ྗૢ࡞΍ه߸ྨ ݪ࢝తཁૉΛ૊Έ߹Θͤͨ΋ͷ ΠϯλʔϑΣΠεݻ༗ͷίϚϯυͱϑΟʔυόοΫ ϢʔβʔͷߦಈύλʔϯΛߟྀͭͭ͠ෳ߹ཁૉΛ૊Έ߹Θͤͨ΋ͷ ϙΠϯςΟϯά ΫϦοΫ λον υϥοά Ωʔೖྗ Χʔιϧ ςΩετ ը૾ μϒϧΫϦοΫ μϒϧλοϓ ϘλϯͷԡԼ ൣғબ୒ ΩʔόΠϯσΟϯά ςΩετϑΟʔϧυ ϥδΦϘλϯ બ୒ൣғͷදࣔ ԡԼཁૉͷڧௐදࣔ ৽ن࡞੒ ฤू ඳը εΫϩʔϧϏϡʔ φϏήʔγϣϯόʔ ΞϥʔτμΠΞϩά ʰAbout Face 3 ΠϯλϥΫγϣϯσβΠϯͷۃҙʱΑΓղऍ Alan Cooper, Robert Reimann, David Cronin ஶɺ௕ඌߴ߂ ༁ ग़ྗ ग़ ྗ ૷ ஔ ͔ Β ͷ ද ݱ ํ ๏ ೖྗ ೖ ྗ ૷ ஔ ͔ Β ͷ ૢ ࡞ ํ ๏
33. © 2019 Satori Maru / @usagimaruma. #macosnative ΠσΟΦϜ ෳ߹ཁૉ Ұൠతͳೖग़ྗૢ࡞΍ه߸ྨ ݪ࢝తཁૉΛ૊Έ߹Θͤͨ΋ͷ ΠϯλʔϑΣΠεݻ༗ͷίϚϯυͱϑΟʔυόοΫ ϢʔβʔͷߦಈύλʔϯΛߟྀͭͭ͠ෳ߹ཁૉΛ૊Έ߹Θͤͨ΋ͷ ϙΠϯςΟϯά ΫϦοΫ λον υϥοά Ωʔೖྗ Χʔιϧ ςΩετ ը૾ μϒϧΫϦοΫ μϒϧλοϓ ϘλϯͷԡԼ ൣғબ୒ ΩʔόΠϯσΟϯά ςΩετϑΟʔϧυ ϥδΦϘλϯ બ୒ൣғͷදࣔ ԡԼཁૉͷڧௐදࣔ ৽ن࡞੒ ฤू ඳը εΫϩʔϧϏϡʔ φϏήʔγϣϯόʔ ΞϥʔτμΠΞϩά ʰAbout Face 3 ΠϯλϥΫγϣϯσβΠϯͷۃҙʱΑΓղऍ Alan Cooper, Robert Reimann, David Cronin ஶɺ௕ඌߴ߂ ༁ ग़ྗ ೖྗ ग़ ྗ ૷ ஔ ͔ Β ͷ ද ݱ ํ ๏ ೖ ྗ ૷ ஔ ͔ Β ͷ ૢ ࡞ ํ ๏ ݪ࢝తཁૉ جຊૢ࡞ͱ ϑΟʔυόοΫ ͷ࢓૊Έ
34. © 2019 Satori Maru / @usagimaruma. #macosnative ςΩετ ग़ྗ
35. © 2019 Satori Maru / @usagimaruma. #macosnative ςΩετ ग़ྗ
36. © 2019 Satori Maru / @usagimaruma. #macosnative ςΩετ ೖྗ ग़ྗ ʴ
37. © 2019 Satori Maru / @usagimaruma. #macosnative ςΩετ ೖྗ ग़ྗ ʴ
38. © 2019 Satori Maru / @usagimaruma. #macosnative ςΩετ ೖྗ ग़ྗ ʴ
39. © 2019 Satori Maru / @usagimaruma. #macosnative ςΩετ ςΩετ ςΩετ ςΩετ ϨΠϠʔબ୒ঢ়ଶ ͷมԽ ςΩετฤूϞʔυ ΁ͷભҠ ςΩετબ୒ঢ়ଶ ͷมԽ ʵ ೖྗૢ࡞ ༩͑Δ࡞༻ ڍಈ က= က? က; ကA ΫϦοΫ ΫϦοΫ μϒϧΫϦοΫ ʵ
40. © 2019 Satori Maru / @usagimaruma. #macosnative ςΩετ ೖྗ ग़ྗ ʴ
41. © 2019 Satori Maru / @usagimaruma. #macosnative ೖྗ ग़ྗ ʴ ခ›
42. © 2019 Satori Maru / @usagimaruma. #macosnative ೖྗ ग़ྗ ʴ m mac a c
43. © 2019 Satori Maru / @usagimaruma. #macosnative ೖྗ ग़ྗ ʴ ခ” mac A ςΩετΛର৅ʹ ͢΂ͯબ୒
44. © 2019 Satori Maru / @usagimaruma. #macosnative ग़ྗ mac NSObject Moof!
45. © 2019 Satori Maru / @usagimaruma. #macosnative ೖྗ ग़ྗ ʴ ခ” A mac ϨΠϠʔΛର৅ʹ ͢΂ͯબ୒ Moof! NSObject
46. © 2019 Satori Maru / @usagimaruma. #macosnative ςΩετ ςΩετϑΟʔϧυ Χϯόε Ϗϡʔ্ͷϨΠϠʔશൠ બ୒͞ΕͨϨΠϠʔ ςΩετϑΟʔϧυ Πϕϯτ௨஌ର৅ ڍಈ mac mac mac ςΩετฤूϞʔυ Χϯόε্ͰϞʔυϨε ϨΠϠʔબ୒ঢ়ଶ Ϟʔυʗঢ়ଶ ςΩετฤूϞʔυ
47. © 2019 Satori Maru / @usagimaruma. #macosnative ςΩετ ςΩετฤूϞʔυ Χϯόε্ͰϞʔυϨε ϨΠϠʔબ୒ঢ়ଶ ςΩετϑΟʔϧυ Χϯόε Ϗϡʔ্ͷϨΠϠʔશൠ બ୒͞ΕͨϨΠϠʔ ςΩετϑΟʔϧυ Ϟʔυʗঢ়ଶ Πϕϯτ௨஌ର৅ ڍಈ ςΩετฤूϞʔυ mac mac mac
48. © 2019 Satori Maru / @usagimaruma. Responder Chain #macosnative
49. © 2019 Satori Maru / @usagimaruma. Responder Chain ʬͨΒ͍ճ͠ͷύλʔϯʭ ϝοηʔδͷ਺चܨ͗ܦ࿏Λܗ੒͠ɺ੹೚ͷॴࡏΛΦϒδΣΫτࣗ਎ʹܾΊͤ͞Δ #macosnative nextResponder nextResponder nextResponder nextResponder firstResponder
50. © 2019 Satori Maru / @usagimaruma. l$PDPBT
    3FTQPOEFS
    $IBJO
    XBT
    UIF
    JOTQJSBUJPO
    GPS
    UIF
    
    (P'
    $IBJO
    PG
    3FTQPOTJCJMJUZ
    QBUUFSOz 'SPN
    /F9545&1
    UP
    $PDPB
    &SJL
    #VDL
    PO
    UIF
    %FWFMPQNFOU
    PG
    $PDPB
    BOE
    0CKFDUJWF$
    IUUQXXXJOGPSNJUDPNBSUJDMFTBSUJDMFBTQY Q #macosnative
51. © 2019 Satori Maru / @usagimaruma. #macosnative NSViewController NSView NSTextView NSView NSWindow
52. © 2019 Satori Maru / @usagimaruma. #macosnative NSViewController NSView NSTextView NSView firstResponder ϑΥʔΧε͕౰ͨΔ makeFirstResponder(textview) keyWindow NSWindow
53. © 2019 Satori Maru / @usagimaruma. #macosnative NSViewController NSView NSTextView NSView keyDown() ΩʔೖྗΛड͚෇͚ NSWindow “͍͋͏↵” “ခ”C”
54. © 2019 Satori Maru / @usagimaruma. #macosnative NSViewController NSView NSTextView NSView makeFirstResponder(aView) NSWindow firstResponder
55. © 2019 Satori Maru / @usagimaruma. #macosnative NSViewController NSView NSTextView NSView keyDown() keyDown() NSWindow
56. © 2019 Satori Maru / @usagimaruma. #macosnative NSViewController NSView NSWindowController NSTextView NSView NSWindow delegate NSApplication App delegate keyDown() NSBeep() NSWindow noResponder(for:) Πϕϯτ͕ ड͚औΒΕͳ͍৔߹
57. © 2019 Satori Maru / @usagimaruma. #macosnative Click window.firstResponder textView ử
58. © 2019 Satori Maru / @usagimaruma. #macosnative ခ” A window.firstResponder NSEvent “ခ”A” textView ử
59. © 2019 Satori Maru / @usagimaruma. #macosnative ခ” W window.firstResponder NSEvent “ခ”W” textView ử .nextResponder window
60. © 2019 Satori Maru / @usagimaruma. #macosnative ခ” W window.firstResponder NSEvent “ခ”W” textView ử .nextResponder window
61. © 2019 Satori Maru / @usagimaruma. #macosnative
62. © 2019 Satori Maru / @usagimaruma. #macosnative Space Drag
63. © 2019 Satori Maru / @usagimaruma. #macosnative Drag
64. © 2019 Satori Maru / @usagimaruma. #macosnative ΞϦςΟΞ ൣғબ୒
65. © 2019 Satori Maru / @usagimaruma. #macosnative ΞϦςΟΞ mouseDown(with:) ൣғબ୒
66. © 2019 Satori Maru / @usagimaruma. #macosnative ΞϦςΟΞ mouseDown(with:) mouseDragged(with:) ൣғબ୒
67. © 2019 Satori Maru / @usagimaruma. #macosnative ΞϦςΟΞ mouseDragged(with:) ൣғબ୒
68. © 2019 Satori Maru / @usagimaruma. #macosnative ΞϦςΟΞ mouseDragged(with:) isHighlighted = true ൣғબ୒
69. © 2019 Satori Maru / @usagimaruma. #macosnative ΞϦςΟΞ mouseUp(with:) ൣғબ୒
70. © 2019 Satori Maru / @usagimaruma. #macosnative ΞϦςΟΞ υϥοά&υϩοϓ
71. © 2019 Satori Maru / @usagimaruma. #macosnative ΞϦςΟΞ mouseDown(with:) બ୒ঢ়ଶʹ isHighlighted = true υϥοά&υϩοϓ
72. © 2019 Satori Maru / @usagimaruma. #macosnative ΞϦςΟΞ mouseDown(with:) mouseDragged(with:) બ୒ঢ়ଶʹ isHighlighted = true υϥοά&υϩοϓ
73. © 2019 Satori Maru / @usagimaruma. #macosnative ΞϦςΟΞ mouseDragged(with:) Ϛ΢ε࠲ඪͷมԽྔΛ൓ө υϥοά&υϩοϓ
74. © 2019 Satori Maru / @usagimaruma. #macosnative ΞϦςΟΞ mouseUp(with:) ϨΠϠʔΦϒδΣΫτͷ ҠಈॲཧΛऴ͑Δ ʢબ୒ঢ়ଶ͸ҡ࣋ʣ υϥοά&υϩοϓ
75. © 2019 Satori Maru / @usagimaruma. #macosnative mouseDown(with:) mouseDragged(with:) ΞϦςΟΞ Χʔιϧ͕1ptͰ΋ಈ͚͹ɺϨΠϠʔΦϒδΣΫτ͸Ҡಈͯ͠͠·͏ ਓؒͷޡಈ࡞Λى͜͢ՄೳੑΛݕ౼͠ͳ͕ΒɺϢʔβϏϦςΟͷ޲্Λ໨ࢦ͍ͨ͠ ʂ υϥοά&υϩοϓ
76. © 2019 Satori Maru / @usagimaruma. #macosnative ΞϦςΟΞ Ҡಈॲཧʹᮢ஋Λઃ͚ͯ υϥοάͷ“͸ͣΈ”Λ཈͑Δ mouseDragged(with:) ᮢ஋ະຬͰ͸Ҡಈ͕ൃੜ͠ͳ͍ 5–6pt υϥοά&υϩοϓ
77. © 2019 Satori Maru / @usagimaruma. #macosnative ΞϦςΟΞ mouseDragged(with:) ᮢ஋Λߟྀͭͭ͠ Ϛ΢ε࠲ඪͷมԽྔΛ൓ө υϥοά&υϩοϓ
78. © 2019 Satori Maru / @usagimaruma. #macosnative ΞϦςΟΞ mouseUp(with:) ϨΠϠʔΦϒδΣΫτͷ ҠಈॲཧΛऴ͑Δʢબ୒ঢ়ଶ͸ҡ࣋ʣ υϥοά&υϩοϓ
79. © 2019 Satori Maru / @usagimaruma. #macosnative ΞϦςΟΞ mouseDragged(with:) mouseUp(with:) ͷલʹ υϥοάΛதࢭͨ͘͠ͳͬͨ৔߹ͷߟྀ ʂ ခ” . ခ§ υϥοά&υϩοϓ
80. © 2019 Satori Maru / @usagimaruma. #macosnative ΞϦςΟΞ cancelOperation(_:) தஅૢ࡞ͷड͚ೖΕ ခ” . ခ§ AppKit ڞ௨ͷதஅૢ࡞ υϥοά&υϩοϓ
81. © 2019 Satori Maru / @usagimaruma. #macosnative ΞϦςΟΞ தஅૢ࡞ͷड͚ೖΕ cancelOperation(_:) override func cancelOperation(_ sender: Any?) { // υϥοάॲཧΛதࢭͯ͠ mouseDown(with:) ௚લͷঢ়ଶʹ໭͢౳ } ခ” . ခ§ ϨεϙϯμʔνΣΠϯʹͯ keyDown(with:) Λ͏·͘ύε͠ͳ͍ͱ ॲཧ͞Εͳ͍ՄೳੑΞϦ஫ҙ υϥοά&υϩοϓ
82. © 2019 Satori Maru / @usagimaruma. #macosnative
83. © 2019 Satori Maru / @usagimaruma. #macosnative
84. © 2019 Satori Maru / @usagimaruma. #macosnative ΠσΟΦϜ ෳ߹ཁૉ ݪ࢝తཁૉ جຊૢ࡞ͱ ϑΟʔυόοΫ ͷ࢓૊Έ Ұൠతͳೖग़ྗૢ࡞΍ه߸ྨ ݪ࢝తཁૉΛ૊Έ߹Θͤͨ΋ͷ ΠϯλʔϑΣΠεݻ༗ͷίϚϯυͱϑΟʔυόοΫ ϢʔβʔͷߦಈύλʔϯΛߟྀͭͭ͠ෳ߹ཁૉΛ૊Έ߹Θͤͨ΋ͷ ʰAbout Face 3 ΠϯλϥΫγϣϯσβΠϯͷۃҙʱΑΓղऍ Alan Cooper, Robert Reimann, David Cronin ஶɺ௕ඌߴ߂ ༁ ೖྗ ग़ྗ গͳ͍छྨ ؆୯ͳૢ࡞ํ๏ େ ͖ ͳ ޮ Ռ
85. © 2019 Satori Maru / @usagimaruma. #macosnative ෳ߹ཁૉ ݪ࢝తཁૉ جຊૢ࡞ͱ ϑΟʔυόοΫ ͷ࢓૊Έ Ұൠతͳೖग़ྗૢ࡞΍ه߸ྨ ݪ࢝తཁૉΛ૊Έ߹Θͤͨ΋ͷ ʰAbout Face 3 ΠϯλϥΫγϣϯσβΠϯͷۃҙʱΑΓղऍ Alan Cooper, Robert Reimann, David Cronin ஶɺ௕ඌߴ߂ ༁ ೖྗ ग़ྗ গͳ͍छྨ ؆୯ͳૢ࡞ํ๏ େ ͖ ͳ ޮ Ռ ΠσΟΦϜ ΠϯλʔϑΣΠεݻ༗ͷίϚϯυͱϑΟʔυόοΫ ϢʔβʔͷߦಈύλʔϯΛߟྀͭͭ͠ෳ߹ཁૉΛ૊Έ߹Θͤͨ΋ͷ
86. © 2019 Satori Maru / @usagimaruma. #macosnative ෳ߹ཁૉ ݪ࢝తཁૉ جຊૢ࡞ͱ ϑΟʔυόοΫ ͷ࢓૊Έ Ұൠతͳೖग़ྗૢ࡞΍ه߸ྨ ݪ࢝తཁૉΛ૊Έ߹Θͤͨ΋ͷ ʰAbout Face 3 ΠϯλϥΫγϣϯσβΠϯͷۃҙʱΑΓղऍ Alan Cooper, Robert Reimann, David Cronin ஶɺ௕ඌߴ߂ ༁ ೖྗ ग़ྗ গͳ͍छྨ ؆୯ͳૢ࡞ํ๏ େ ͖ ͳ ޮ Ռ macOS ωΠςΟϒΠϯλʔϑΣΠε “Β͠͞”
87. © 2019 Satori Maru / @usagimaruma. #macosnative