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
   

   View Slide

2. © 2019 Satori Maru / @usagimaruma.
   ιϑτ΢ΣΞσβΠφʔ
   usagimaru
   Interface design / Interaction design / macOS / iOS
   @usagimaru
   @usagimaru
   @usagimaruma
   macOS native ίΞϝϯόʔ
   #macosnative
   

   View Slide

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
   

   View Slide

4. © 2019 Satori Maru / @usagimaruma.
   “ͪ͜Βଆ”
   #macosnative
   

   View Slide

5. © 2019 Satori Maru / @usagimaruma.
   ଆ
   #macosnative
   

   View Slide

6. © 2019 Satori Maru / @usagimaruma.
   #macosnative
   Ϣʔβʔࢹ఺
   “ͪ͜Βଆ”
   

   View Slide

7. © 2019 Satori Maru / @usagimaruma.
   #macosnative
   ίϯϐϡʔλʔࢹ఺
   “͋ͪΒଆ”
   

   View Slide

8. © 2019 Satori Maru / @usagimaruma.
   Interface
   #macosnative
   

   View Slide

9. © 2019 Satori Maru / @usagimaruma.
   Inter-face
   #macosnative
   ໘ͱ໘ͷؒ
   

   View Slide

10. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    “ͪ͜Βଆ” “͋ͪΒଆ”
    

    View Slide

11. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    “ͪ͜Βଆ” “͋ͪΒଆ”
    User Interface
    

    View Slide

12. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    “ͪ͜Βଆ” “͋ͪΒଆ”
    ࡞༻ ࡞༻
    User Interface
    

    View Slide

13. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    “ͪ͜Βଆ” “͋ͪΒଆ”
    ࡞༻
    ΧʔιϧҠಈ
    ΫϦοΫ
    Ωʔೖྗ
    Ի੠ೖྗ
    ࡞༻
    άϥϑΟοΫඳը
    α΢ϯυ࠶ੜ
    ৼಈ
    ҹ࡮
    User Interface
    

    View Slide

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
    

    View Slide

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
    

    View Slide

16. © 2019 Satori Maru / @usagimaruma.
    Human-Computer Interaction
    #macosnative
    ਫ਼ਆ
    ώτ ιϑτ΢ΣΞ
    ΞϓϦέʔγϣϯ
    https://en.wikipedia.org/wiki/File:Linux_kernel_INPUT_OUPUT_evdev_gem_USB_framebuffer.svg ΑΓ࠶ߏ੒
    ΦϒδΣΫτ
    ؍೦
    ಺ࡏԽ
    

    View Slide

17. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    

    View Slide

18. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ࡞༻
    ࡞༻
    ࡞༻
    

    View Slide

19. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ࡞༻
    ࡞༻
    ࡞༻
    

    View Slide

20. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ࡞༻
    ࡞༻
    ࡞༻
    

    View Slide

21. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ခ”C
    ခ”C
    ခ”C
    

    View Slide

22. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ခ”C
    ခ”C
    ခ”C
    Polymorphism
    ࣅͨੑ࣭ͷΦϒδΣΫτʹ͸ಉ͡࡞༻Λ༩͑ΒΕΔ
    

    View Slide

23. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ခ”C
    ခ”C
    ခ”C
    Polymorphism
    ࣅͨੑ࣭ͷΦϒδΣΫτʹ͸ಉ͡࡞༻Λ༩͑ΒΕΔ
    

    View Slide

24. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ໊শະઃఆϑΥϧμ
    Keynote.app
    Moof.app
    ခ”C
    ခ”C
    ခ”C
    Finder
    ϑΝΠϧγεςϜͷΦϒδΣΫτ͸
    ಉ͡Α͏ʹૢ࡞Ͱ͖Δ
    << File >>
    

    View Slide

25. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ໊শະઃఆϑΥϧμ
    Keynote.app
    Moof.app
    ခ”C
    ခ”C
    ခ”C
    Window
    ခ”C
    Finder
    ͦͷ΄͔ͷΦϒδΣΫτ͸ҟͳΔੑ࣭Λ
    ࣋ͭͨΊɺಉ͡ૢ࡞͸௨༻͠ͳ͍͜ͱ΋
    << File >>
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    Ұ
    ؏
    ੑ
    

    View Slide

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
    Ұ
    ؏
    ੑ
    ର
    ৅
    ͱ
    ͷ
    ૢ
    ࡞
    ํ
    ๏
    ʹ
    ؔ
    ͢
    Δ
    ϙ
    Ϧ
    Ϟ
    ʔ
    ϑ
    ỹ
    ζ
    Ϝ
    

    View Slide

30. © 2019 Satori Maru / @usagimaruma.
    ೖྗํ๏ͷ૊Έཱͯํ
    #macosnative
    

    View Slide

31. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ΠσΟΦϜ
    ෳ߹ཁૉ
    ݪ࢝తཁૉ
    جຊૢ࡞ͱ
    ϑΟʔυόοΫ
    ͷ࢓૊Έ
    Ұൠతͳೖग़ྗૢ࡞΍ه߸ྨ
    ݪ࢝తཁૉΛ૊Έ߹Θͤͨ΋ͷ
    ΠϯλʔϑΣΠεݻ༗ͷίϚϯυͱϑΟʔυόοΫ
    ϢʔβʔͷߦಈύλʔϯΛߟྀͭͭ͠ෳ߹ཁૉΛ૊Έ߹Θͤͨ΋ͷ
    ʰAbout Face 3 ΠϯλϥΫγϣϯσβΠϯͷۃҙʱΑΓղऍ
    Alan Cooper, Robert Reimann, David Cronin ஶɺ௕ඌߴ߂ ༁
    ϙΠϯςΟϯά
    ΫϦοΫ
    λον
    υϥοά
    Ωʔೖྗ
    Χʔιϧ
    ςΩετ
    ը૾
    μϒϧΫϦοΫ
    μϒϧλοϓ
    ϘλϯͷԡԼ
    ൣғબ୒
    ΩʔόΠϯσΟϯά
    ςΩετϑΟʔϧυ
    ϥδΦϘλϯ
    બ୒ൣғͷදࣔ
    ԡԼཁૉͷڧௐදࣔ
    ৽ن࡞੒
    ฤू
    ඳը
    εΫϩʔϧϏϡʔ
    φϏήʔγϣϯόʔ
    ΞϥʔτμΠΞϩά
    ೖྗ ग़ྗ
    

    View Slide

32. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ΠσΟΦϜ
    ෳ߹ཁૉ
    ݪ࢝తཁૉ
    جຊૢ࡞ͱ
    ϑΟʔυόοΫ
    ͷ࢓૊Έ
    Ұൠతͳೖग़ྗૢ࡞΍ه߸ྨ
    ݪ࢝తཁૉΛ૊Έ߹Θͤͨ΋ͷ
    ΠϯλʔϑΣΠεݻ༗ͷίϚϯυͱϑΟʔυόοΫ
    ϢʔβʔͷߦಈύλʔϯΛߟྀͭͭ͠ෳ߹ཁૉΛ૊Έ߹Θͤͨ΋ͷ
    ϙΠϯςΟϯά
    ΫϦοΫ
    λον
    υϥοά
    Ωʔೖྗ
    Χʔιϧ
    ςΩετ
    ը૾
    μϒϧΫϦοΫ
    μϒϧλοϓ
    ϘλϯͷԡԼ
    ൣғબ୒
    ΩʔόΠϯσΟϯά
    ςΩετϑΟʔϧυ
    ϥδΦϘλϯ
    બ୒ൣғͷදࣔ
    ԡԼཁૉͷڧௐදࣔ
    ৽ن࡞੒
    ฤू
    ඳը
    εΫϩʔϧϏϡʔ
    φϏήʔγϣϯόʔ
    ΞϥʔτμΠΞϩά
    ʰAbout Face 3 ΠϯλϥΫγϣϯσβΠϯͷۃҙʱΑΓղऍ
    Alan Cooper, Robert Reimann, David Cronin ஶɺ௕ඌߴ߂ ༁
    ग़ྗ
    ग़
    ྗ
    ૷
    ஔ
    ͔
    Β
    ͷ
    ද
    ݱ
    ํ
    ๏
    ೖྗ
    ೖ
    ྗ
    ૷
    ஔ
    ͔
    Β
    ͷ
    ૢ
    ࡞
    ํ
    ๏
    

    View Slide

33. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ΠσΟΦϜ
    ෳ߹ཁૉ
    Ұൠతͳೖग़ྗૢ࡞΍ه߸ྨ
    ݪ࢝తཁૉΛ૊Έ߹Θͤͨ΋ͷ
    ΠϯλʔϑΣΠεݻ༗ͷίϚϯυͱϑΟʔυόοΫ
    ϢʔβʔͷߦಈύλʔϯΛߟྀͭͭ͠ෳ߹ཁૉΛ૊Έ߹Θͤͨ΋ͷ
    ϙΠϯςΟϯά
    ΫϦοΫ
    λον
    υϥοά
    Ωʔೖྗ
    Χʔιϧ
    ςΩετ
    ը૾
    μϒϧΫϦοΫ
    μϒϧλοϓ
    ϘλϯͷԡԼ
    ൣғબ୒
    ΩʔόΠϯσΟϯά
    ςΩετϑΟʔϧυ
    ϥδΦϘλϯ
    બ୒ൣғͷදࣔ
    ԡԼཁૉͷڧௐදࣔ
    ৽ن࡞੒
    ฤू
    ඳը
    εΫϩʔϧϏϡʔ
    φϏήʔγϣϯόʔ
    ΞϥʔτμΠΞϩά
    ʰAbout Face 3 ΠϯλϥΫγϣϯσβΠϯͷۃҙʱΑΓղऍ
    Alan Cooper, Robert Reimann, David Cronin ஶɺ௕ඌߴ߂ ༁
    ग़ྗ
    ೖྗ
    ग़
    ྗ
    ૷
    ஔ
    ͔
    Β
    ͷ
    ද
    ݱ
    ํ
    ๏
    ೖ
    ྗ
    ૷
    ஔ
    ͔
    Β
    ͷ
    ૢ
    ࡞
    ํ
    ๏
    ݪ࢝తཁૉ
    جຊૢ࡞ͱ
    ϑΟʔυόοΫ
    ͷ࢓૊Έ
    

    View Slide

34. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ςΩετ
    ग़ྗ
    

    View Slide

35. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ςΩετ
    ग़ྗ
    

    View Slide

36. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ςΩετ
    ೖྗ
    ग़ྗ ʴ
    

    View Slide

37. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ςΩετ
    ೖྗ
    ग़ྗ ʴ
    

    View Slide

38. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ςΩετ
    ೖྗ
    ग़ྗ ʴ
    

    View Slide

39. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ςΩετ
    ςΩετ
    ςΩετ
    ςΩετ
    ϨΠϠʔબ୒ঢ়ଶ
    ͷมԽ
    ςΩετฤूϞʔυ
    ΁ͷભҠ
    ςΩετબ୒ঢ়ଶ
    ͷมԽ
    ʵ
    ೖྗૢ࡞ ༩͑Δ࡞༻ ڍಈ
    က=
    က?
    က;
    ကA
    ΫϦοΫ
    ΫϦοΫ
    μϒϧΫϦοΫ
    ʵ
    

    View Slide

40. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ςΩετ
    ೖྗ
    ग़ྗ ʴ
    

    View Slide

41. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ೖྗ
    ग़ྗ ʴ
    ခ›
    

    View Slide

42. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ೖྗ
    ग़ྗ ʴ
    m
    mac
    a c
    

    View Slide

43. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ೖྗ
    ग़ྗ ʴ
    ခ”
    mac
    A
    ςΩετΛର৅ʹ
    ͢΂ͯબ୒
    

    View Slide

44. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ग़ྗ
    mac
    NSObject
    Moof!
    

    View Slide

45. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ೖྗ
    ग़ྗ ʴ
    ခ” A
    mac
    ϨΠϠʔΛର৅ʹ
    ͢΂ͯબ୒
    Moof!
    NSObject
    

    View Slide

46. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ςΩετ
    ςΩετϑΟʔϧυ
    Χϯόε
    Ϗϡʔ্ͷϨΠϠʔશൠ
    બ୒͞ΕͨϨΠϠʔ
    ςΩετϑΟʔϧυ
    Πϕϯτ௨஌ର৅ ڍಈ
    mac
    mac
    mac
    ςΩετฤूϞʔυ
    Χϯόε্ͰϞʔυϨε
    ϨΠϠʔબ୒ঢ়ଶ
    Ϟʔυʗঢ়ଶ
    ςΩετฤूϞʔυ
    

    View Slide

47. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ςΩετ
    ςΩετฤूϞʔυ
    Χϯόε্ͰϞʔυϨε
    ϨΠϠʔબ୒ঢ়ଶ
    ςΩετϑΟʔϧυ
    Χϯόε
    Ϗϡʔ্ͷϨΠϠʔશൠ
    બ୒͞ΕͨϨΠϠʔ
    ςΩετϑΟʔϧυ
    Ϟʔυʗঢ়ଶ Πϕϯτ௨஌ର৅ ڍಈ
    ςΩετฤूϞʔυ
    mac
    mac
    mac
    

    View Slide

48. © 2019 Satori Maru / @usagimaruma.
    Responder Chain
    #macosnative
    

    View Slide

49. © 2019 Satori Maru / @usagimaruma.
    Responder Chain
    ʬͨΒ͍ճ͠ͷύλʔϯʭ
    ϝοηʔδͷ਺चܨ͗ܦ࿏Λܗ੒͠ɺ੹೚ͷॴࡏΛΦϒδΣΫτࣗ਎ʹܾΊͤ͞Δ
    #macosnative
    nextResponder
    nextResponder nextResponder
    nextResponder
    firstResponder
    

    View Slide

50. © 2019 Satori Maru / @usagimaruma.
    l$PDPBT3FTQPOEFS$IBJOXBTUIFJOTQJSBUJPOGPSUIF
    (P'$IBJOPG3FTQPOTJCJMJUZQBUUFSOz
    'SPN/F9545&1UP$PDPB&SJL#VDLPOUIF%FWFMPQNFOUPG$PDPBBOE0CKFDUJWF$
    IUUQXXXJOGPSNJUDPNBSUJDMFTBSUJDMFBTQY Q
    #macosnative
    

    View Slide

51. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    NSViewController
    NSView
    NSTextView
    NSView
    NSWindow
    

    View Slide

52. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    NSViewController
    NSView
    NSTextView
    NSView
    firstResponder ϑΥʔΧε͕౰ͨΔ
    makeFirstResponder(textview)
    keyWindow NSWindow
    

    View Slide

53. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    NSViewController
    NSView
    NSTextView
    NSView
    keyDown()
    ΩʔೖྗΛड͚෇͚
    NSWindow
    “͍͋͏↵” “ခ”C”
    

    View Slide

54. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    NSViewController
    NSView
    NSTextView
    NSView
    makeFirstResponder(aView)
    NSWindow
    firstResponder
    

    View Slide

55. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    NSViewController
    NSView
    NSTextView
    NSView
    keyDown()
    keyDown()
    NSWindow
    

    View Slide

56. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    NSViewController
    NSView
    NSWindowController
    NSTextView
    NSView
    NSWindow delegate
    NSApplication
    App delegate
    keyDown()
    NSBeep()
    NSWindow
    noResponder(for:)
    Πϕϯτ͕
    ड͚औΒΕͳ͍৔߹
    

    View Slide

57. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    Click
    window.firstResponder
    textView
    ử
    

    View Slide

58. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ခ” A
    window.firstResponder
    NSEvent “ခ”A”
    textView
    ử
    

    View Slide

59. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ခ” W
    window.firstResponder
    NSEvent “ခ”W”
    textView
    ử
    .nextResponder
    window
    

    View Slide

60. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ခ” W
    window.firstResponder
    NSEvent “ခ”W”
    textView
    ử
    .nextResponder
    window
    

    View Slide

61. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    

    View Slide

62. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    Space Drag
    

    View Slide

63. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    Drag
    

    View Slide

64. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ΞϦςΟΞ
    ൣғબ୒
    

    View Slide

65. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ΞϦςΟΞ
    mouseDown(with:)
    ൣғબ୒
    

    View Slide

66. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ΞϦςΟΞ
    mouseDown(with:)
    mouseDragged(with:)
    ൣғબ୒
    

    View Slide

67. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ΞϦςΟΞ
    mouseDragged(with:)
    ൣғબ୒
    

    View Slide

68. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ΞϦςΟΞ
    mouseDragged(with:)
    isHighlighted = true
    ൣғબ୒
    

    View Slide

69. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ΞϦςΟΞ
    mouseUp(with:)
    ൣғબ୒
    

    View Slide

70. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ΞϦςΟΞ
    υϥοά&υϩοϓ
    

    View Slide

71. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ΞϦςΟΞ
    mouseDown(with:)
    બ୒ঢ়ଶʹ
    isHighlighted = true
    υϥοά&υϩοϓ
    

    View Slide

72. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ΞϦςΟΞ
    mouseDown(with:)
    mouseDragged(with:)
    બ୒ঢ়ଶʹ
    isHighlighted = true
    υϥοά&υϩοϓ
    

    View Slide

73. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ΞϦςΟΞ
    mouseDragged(with:)
    Ϛ΢ε࠲ඪͷมԽྔΛ൓ө
    υϥοά&υϩοϓ
    

    View Slide

74. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ΞϦςΟΞ
    mouseUp(with:)
    ϨΠϠʔΦϒδΣΫτͷ
    ҠಈॲཧΛऴ͑Δ
    ʢબ୒ঢ়ଶ͸ҡ࣋ʣ
    υϥοά&υϩοϓ
    

    View Slide

75. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    mouseDown(with:)
    mouseDragged(with:)
    ΞϦςΟΞ
    Χʔιϧ͕1ptͰ΋ಈ͚͹ɺϨΠϠʔΦϒδΣΫτ͸Ҡಈͯ͠͠·͏
    ਓؒͷޡಈ࡞Λى͜͢ՄೳੑΛݕ౼͠ͳ͕ΒɺϢʔβϏϦςΟͷ޲্Λ໨ࢦ͍ͨ͠
    ʂ
    υϥοά&υϩοϓ
    

    View Slide

76. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ΞϦςΟΞ
    Ҡಈॲཧʹᮢ஋Λઃ͚ͯ
    υϥοάͷ“͸ͣΈ”Λ཈͑Δ
    mouseDragged(with:)
    ᮢ஋ະຬͰ͸Ҡಈ͕ൃੜ͠ͳ͍
    5–6pt
    υϥοά&υϩοϓ
    

    View Slide

77. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ΞϦςΟΞ
    mouseDragged(with:)
    ᮢ஋Λߟྀͭͭ͠
    Ϛ΢ε࠲ඪͷมԽྔΛ൓ө
    υϥοά&υϩοϓ
    

    View Slide

78. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ΞϦςΟΞ
    mouseUp(with:)
    ϨΠϠʔΦϒδΣΫτͷ
    ҠಈॲཧΛऴ͑Δʢબ୒ঢ়ଶ͸ҡ࣋ʣ
    υϥοά&υϩοϓ
    

    View Slide

79. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ΞϦςΟΞ
    mouseDragged(with:)
    mouseUp(with:) ͷલʹ
    υϥοάΛதࢭͨ͘͠ͳͬͨ৔߹ͷߟྀ
    ʂ
    ခ” . ခ§
    υϥοά&υϩοϓ
    

    View Slide

80. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ΞϦςΟΞ
    cancelOperation(_:)
    தஅૢ࡞ͷड͚ೖΕ
    ခ” . ခ§
    AppKit ڞ௨ͷதஅૢ࡞
    υϥοά&υϩοϓ
    

    View Slide

81. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ΞϦςΟΞ
    தஅૢ࡞ͷड͚ೖΕ
    cancelOperation(_:)
    override func cancelOperation(_ sender: Any?) {
    // υϥοάॲཧΛதࢭͯ͠ mouseDown(with:) ௚લͷঢ়ଶʹ໭͢౳
    }
    ခ” . ခ§
    ϨεϙϯμʔνΣΠϯʹͯ keyDown(with:) Λ͏·͘ύε͠ͳ͍ͱ
    ॲཧ͞Εͳ͍ՄೳੑΞϦ஫ҙ
    υϥοά&υϩοϓ
    

    View Slide

82. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    

    View Slide

83. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    

    View Slide

84. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ΠσΟΦϜ
    ෳ߹ཁૉ
    ݪ࢝తཁૉ
    جຊૢ࡞ͱ
    ϑΟʔυόοΫ
    ͷ࢓૊Έ
    Ұൠతͳೖग़ྗૢ࡞΍ه߸ྨ
    ݪ࢝తཁૉΛ૊Έ߹Θͤͨ΋ͷ
    ΠϯλʔϑΣΠεݻ༗ͷίϚϯυͱϑΟʔυόοΫ
    ϢʔβʔͷߦಈύλʔϯΛߟྀͭͭ͠ෳ߹ཁૉΛ૊Έ߹Θͤͨ΋ͷ
    ʰAbout Face 3 ΠϯλϥΫγϣϯσβΠϯͷۃҙʱΑΓղऍ
    Alan Cooper, Robert Reimann, David Cronin ஶɺ௕ඌߴ߂ ༁
    ೖྗ ग़ྗ
    গͳ͍छྨ
    ؆୯ͳૢ࡞ํ๏
    େ
    ͖
    ͳ
    ޮ
    Ռ
    

    View Slide

85. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ෳ߹ཁૉ
    ݪ࢝తཁૉ
    جຊૢ࡞ͱ
    ϑΟʔυόοΫ
    ͷ࢓૊Έ
    Ұൠతͳೖग़ྗૢ࡞΍ه߸ྨ
    ݪ࢝తཁૉΛ૊Έ߹Θͤͨ΋ͷ
    ʰAbout Face 3 ΠϯλϥΫγϣϯσβΠϯͷۃҙʱΑΓղऍ
    Alan Cooper, Robert Reimann, David Cronin ஶɺ௕ඌߴ߂ ༁
    ೖྗ ग़ྗ
    গͳ͍छྨ
    ؆୯ͳૢ࡞ํ๏
    େ
    ͖
    ͳ
    ޮ
    Ռ
    ΠσΟΦϜ
    ΠϯλʔϑΣΠεݻ༗ͷίϚϯυͱϑΟʔυόοΫ
    ϢʔβʔͷߦಈύλʔϯΛߟྀͭͭ͠ෳ߹ཁૉΛ૊Έ߹Θͤͨ΋ͷ
    

    View Slide

86. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    ෳ߹ཁૉ
    ݪ࢝తཁૉ
    جຊૢ࡞ͱ
    ϑΟʔυόοΫ
    ͷ࢓૊Έ
    Ұൠతͳೖग़ྗૢ࡞΍ه߸ྨ
    ݪ࢝తཁૉΛ૊Έ߹Θͤͨ΋ͷ
    ʰAbout Face 3 ΠϯλϥΫγϣϯσβΠϯͷۃҙʱΑΓղऍ
    Alan Cooper, Robert Reimann, David Cronin ஶɺ௕ඌߴ߂ ༁
    ೖྗ ग़ྗ
    গͳ͍छྨ
    ؆୯ͳૢ࡞ํ๏
    େ
    ͖
    ͳ
    ޮ
    Ռ
    macOS ωΠςΟϒΠϯλʔϑΣΠε
    “Β͠͞”
    

    View Slide

87. © 2019 Satori Maru / @usagimaruma.
    #macosnative
    

    View Slide