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

A4c8177aa00623c9593f10be748b3861?s=47 usagimaru
July 07, 2019

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

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

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

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

@usagimaru (@usagimaruma)

A4c8177aa00623c9593f10be748b3861?s=128

usagimaru

July 07, 2019
Tweet

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$PDPBT3FTQPOEFS$IBJOXBTUIFJOTQJSBUJPOGPSUIF (P'$IBJOPG3FTQPOTJCJMJUZQBUUFSOz 'SPN/F9545&1UP$PDPB&SJL#VDLPOUIF%FWFMPQNFOUPG$PDPBBOE0CKFDUJWF$ 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