業務で絶対必要にならない技術

shibuya.swift #7

Transcript

1. ۀ຿Ͱઈରඞཁ
   ʹͳΒͳ͍ٕज़
   TIJCVZBTXJGU
   !OBLBKJKBQBO
   

   View Slide

2. @nakajijapan
   GMO PEPABO inc.
   Principal Engineer
   iOS / Web / OS X
   About Me
   Daichi Nakajima
   

   View Slide

3. ϋϯυϝΠυ࡞඼Λ
   ചΕΔɺങ͑Δɻ
   ࠃ಺࠷େڃͷ
   ϋϯυϝΠυϚʔέοτ
   

   View Slide

4. NKJMultiMovieCaptureView
   NKJMovieComposer
   NKJPagerViewController
   PhotoSlider
   Teiten
   GitHub
   Sengiri
   Shari
   frustration.me
   Kazaguruma
   

   View Slide

5. ۀ຿Ͱઈରඞཁ
   ʹͳΒͳ͍ٕज़
   

   View Slide

6. ͦ͏
   

   View Slide

7. ઈରʹ
   

   View Slide

8. NSTouchBar
   ಋೖฤ
   

   View Slide

9. View Slide

10. View Slide

11. NSTouchBar
    

    View Slide

12. NSTouchBar
    • An object that provides dynamic contextual
    controls in the Touch Bar of supported models of
    MacBook Pro.
    

    View Slide

13. NSTouchBar
    • Slider
    • Popover
    • Color Picker
    • Custom
    • NSButton, NSSegmentedControl
    

    View Slide

14. NSTouchBar
    

    View Slide

15. υϯͱݟ͍ͤͨςΩετΛೖΕΔ
    Control Strip
    

    View Slide

16. υϯͱݟ͍ͤͨςΩετΛೖΕΔ
    Control Strip
    

    View Slide

17. υϯͱݟ͍ͤͨςΩετΛೖΕΔ
    Control Strip
    

    View Slide

18. Design
    

    View Slide

19. Design
    • Design a contextual experience.
    • Use the Touch Bar as an extension of the keyboard and trackpad, not as a display.
    • Strive to match the look of the physical keyboard.
    • Don’t expose functionality solely in the Touch Bar.
    • Provide controls that produce immediate results.
    • Respond immediately to user interaction.
    • When possible, allow tasks that start in the Touch Bar to finish in the Touch Bar.
    • Avoid using the Touch Bar for tasks associated with well-known keyboard
    shortcuts.
    • Reflect state consistently and accurately.
    • Avoid mirroring Touch Bar interactions on the main screen
    

    View Slide

20. Design
    • Design a contextual experience.
    • Use the Touch Bar as an extension of the keyboard and trackpad, not as a display.
    • Strive to match the look of the physical keyboard.
    • Don’t expose functionality solely in the Touch Bar.
    • Provide controls that produce immediate results.
    • Respond immediately to user interaction.
    • When possible, allow tasks that start in the Touch Bar to finish in the Touch Bar.
    • Avoid using the Touch Bar for tasks associated with well-known keyboard
    shortcuts.
    • Reflect state consistently and accurately.
    • Avoid mirroring Touch Bar interactions on the main screen
    

    View Slide

21. Gesture
    

    View Slide

22. Gesture
    • Tap
    • Touch and Hold
    • Horizontal swipe
    • Multitouch
    

    View Slide

23. Sample
    • NSTouchBar Catalog
    • Shows how to create bars and items for use in the Touch Bar
    • NSToolBar Sample
    • Shows how to add Touch Bar support to a typical Mac app
    

    View Slide

24. Develop
    

    View Slide

25. Develop
    • Simulator͕͋Γ·͢
    

    View Slide

26. Implementation Area
    

    View Slide

27. Implementation Area
    

    View Slide

28. Storyboard
    

    View Slide

29. Storyboard
    • ࢹ֮తʹ഑ஔ͕Մೳ
    

    View Slide

30. Storyboard
    • ࢹ֮తʹ഑ஔ͕Մೳ
    

    View Slide

31. Identifier
    

    View Slide

32. Identifier
    • Globally Unique
    • reverse-DNS style
    • should assign for each item
    

    View Slide

33. Identifier
    fileprivate extension NSTouchBarCustomizationIdentifier {
    static let touchBar =
    NSTouchBarCustomizationIdentifier("net.nakajijapan.TouchBar")
    }
    fileprivate extension NSTouchBarItemIdentifier {
    static let play =
    NSTouchBarItemIdentifier(“net.nakajijapan.touchbartest001.TouchBarItem.pl
    ay")
    }
    

    View Slide

34. NSTouchBar
    

    View Slide

35. NSTouchBar
    • Be a responder (an instance of an NSResponder
    subclass) that is present within a responder
    chain at runtime
    • Conform to the NSTouchBarProvider protocol
    • Implement the makeTouchBar() method within
    that protocol
    

    View Slide

36. NSResponder subclass
    • NSViewController
    • NSWindowController
    • NSView
    • NSWindow
    • ……
    

    View Slide

37. Implementation
    override func makeTouchBar() -> NSTouchBar? {
    let mainBar = NSTouchBar()
    mainBar.delegate = self
    mainBar.customizationIdentifier = .imageViewer
    mainBar.defaultItemIdentifiers =
    [.sharingPicker, .strokePopover, .strokeColorPicker, .photoPicker, .flexibl
    eSpace, .clearButton, .otherItemsProxy]
    mainBar.customizationAllowedItemIdentifiers =
    [.strokeSlider, .strokePopover, .photoPicker, .strokeColorPicker, .clearBut
    ton, .sharingPicker, .flexibleSpace]
    mainBar.principalItemIdentifier = .photoPicker
    return mainBar
    }
    

    View Slide

38. NSTouchBarDelegate
    @available(OSX 10.12.2, *)
    func touchBar(_ touchBar: NSTouchBar, makeItemForIdentifier identifier:
    NSTouchBarItemIdentifier) -> NSTouchBarItem?
    

    View Slide

39. AppDelegate
    if #available(OSX 10.12.2, *) {
    if ((NSClassFromString("NSTouchBar")) != nil) {
    NSApplication.shared()
    .isAutomaticCustomizeTouchBarMenuItemEnabled = true
    }
    }
    

    View Slide

40. Components
    

    View Slide

41. Button
    • NSCustomTouchBarItem
    

    View Slide

42. Button
    • NSCustomTouchBarItem
    let touchBarItem = NSCustomTouchBarItem(identifier: .showWindow1)
    touchBarItem.customizationLabel = "Window"
    touchBarItem.view = NSButton(title: "Window", target: self, action:
    #selector(showWindowItemDidTap))
    

    View Slide

43. Group Button
    • NSGroupCustomTouchBarItem
    

    View Slide

44. Group Button
    • NSGroupCustomTouchBarItem
    let touchBarItem = NSCustomTouchBarItem(identifier: .showWindow1)
    touchBarItem.customizationLabel = "Window"
    touchBarItem.view = NSButton(title: "Window", target: self, action:
    #selector(changeShowWindowBySegment))
    let touchBarItem2 = NSCustomTouchBarItem(identifier: .showWindow2)
    touchBarItem2.customizationLabel = "Window(Top)"
    touchBarItem2.view = NSButton(title: "Window(Top)", target: self, action:
    #selector(changeShowWindowBySegment))
    let group = NSGroupTouchBarItem.groupItem(withIdentifier: .showWindow,
    items: [touchBarItem, touchBarItem2])
    

    View Slide

45. Popover
    • NSPopoverTouchBarItem
    

    View Slide

46. Popover
    • NSPopoverTouchBarItem
    let popoverItem = NSPopoverTouchBarItem(identifier: identifier)
    popoverItem.customizationLabel = "window"
    popoverItem.collapsedRepresentationLabel = "window"
    let secondaryTouchBar = NSTouchBar()
    secondaryTouchBar.delegate = self
    secondaryTouchBar.defaultItemIdentifiers = [.play];
    popoverItem.pressAndHoldTouchBar = secondaryTouchBar
    popoverItem.popoverTouchBar = secondaryTouchBar
    return popoverItem
    

    View Slide

47. Scrubber
    • NSScrubber
    • NSScrubberDelegate
    • NSScrubberDataSource
    • NSScrubberFlowLayoutDelegate
    

    View Slide

48. Scrubber
    // NSScrubberDataSource
    func numberOfItems(for scrubber: NSScrubber) -> Int
    func scrubber(_ scrubber: NSScrubber, viewForItemAt index: Int) ->
    NSScrubberItemView
    // NSScrubberFlowLayoutDelegate
    func scrubber(_ scrubber: NSScrubber, layout: NSScrubberFlowLayout,
    sizeForItemAt itemIndex: Int) -> NSSize
    // NSScrubberDelegate
    func scrubber(_ scrubber: NSScrubber, didSelectItemAt index: Int)
    

    View Slide

49. SharingService
    • NSSharingServicePickerTouchBarItem
    

    View Slide

50. SharingService
    • NSSharingServicePickerTouchBarItem
    // MARK: - NSSharingServicePickerTouchBarItemDelegate
    extension WindowController: NSSharingServicePickerTouchBarItemDelegate {
    @available(OSX 10.12.2, *)
    func items(for pickerTouchBarItem: NSSharingServicePickerTouchBarItem)
    -> [Any] {
    return [NSImage(named: NSImageNameTouchBarRecordStartTemplate)!]
    }
    }
    let services = NSSharingServicePickerTouchBarItem(identifier: identifier)
    services.delegate = self
    

    View Slide

51. ͸·ΓϙΠϯτ
    

    View Slide

52. ࣗલͷΞϓϦʹೖΕͯΈͨ
    • Sengiri
    • ը໘Ωϟϓνϟͨ͠ΒࣗಈతʹGIFʹม׵
    • Teiten
    • PCͷΧϝϥΛར༻ͯ͠ͻͨ͢Βఆ఺؍ଌ
    

    View Slide

53. Sengiri
    

    View Slide

54. Let’s TRY!!!
    

    View Slide

55. View Slide

56. View Slide

57. View Slide

58. ❓
    

    View Slide

59. “I have no idea”
    • NSWindowControllerΛopenͤͨ࣌͞ʹ
    makeTouchBar()͕callͯ͘͠Εͳ͍
    

    View Slide

60. if let windowController =
    storyBoard.instantiateController(withIdentifier:
    "CaptureWindowController") as? CaptureWindowController {
    captureController = windowController
    windowController.showWindow(nil)
    }
    

    View Slide

61. if let windowController =
    storyBoard.instantiateController(withIdentifier:
    "CaptureWindowController") as? CaptureWindowController {
    captureController = windowController
    windowController.showWindow(nil)
    }
    NSTouchBarͷ࣮૷͸͍ͨͬͯ௨ৗ
    

    View Slide

62. if let windowController =
    storyBoard.instantiateController(withIdentifier:
    "CaptureWindowController") as? CaptureWindowController {
    captureController = windowController
    windowController.showWindow(nil)
    }
    WindowΛಁ໌ʹ͍ͯ͠Δ͜ͱ͕ݪҼ
    ʁʁʁ
    

    View Slide

63. View Slide

64. View Slide

65. ҰߦͣͭίϝϯτΞ΢τ
    

    View Slide

66. override init(contentRect: NSRect, styleMask aStyle: NSWindowStyleMask, backing bufferingType:
    NSBackingStoreType, defer flag: Bool) {
    super.init(contentRect: contentRect, styleMask: aStyle, backing: bufferingType, defer: flag)
    isReleasedWhenClosed = true
    displaysWhenScreenProfileChanges = true
    backgroundColor = NSColor.clear
    isOpaque = false
    hasShadow = false
    collectionBehavior = [.fullScreenPrimary]
    isMovable = true
    isMovableByWindowBackground = true
    styleMask = [NSBorderlessWindowMask, NSResizableWindowMask]
    ignoresMouseEvents = false
    level = Int(CGWindowLevelForKey(.floatingWindow))
    NotificationCenter.default.addObserver(self, selector: #selector(recordButtonDidClick(_:)), name:
    NSNotification.Name(rawValue: "CaptureViewRecordButtonDidClick"), object: nil)
    setFrame(NSRect(x: 200, y: 200, width: 500, height: 500), display: true)
    NSEvent.addLocalMonitorForEvents(matching: .keyDown) { (aEvent) -> NSEvent? in
    self.keyDown(with: aEvent)
    return aEvent
    }
    }
    

    View Slide

67. override init(contentRect: NSRect, styleMask aStyle: NSWindowStyleMask, backing bufferingType:
    NSBackingStoreType, defer flag: Bool) {
    super.init(contentRect: contentRect, styleMask: aStyle, backing: bufferingType, defer: flag)
    isReleasedWhenClosed = true
    displaysWhenScreenProfileChanges = true
    backgroundColor = NSColor.clear
    isOpaque = false
    hasShadow = false
    collectionBehavior = [.fullScreenPrimary]
    isMovable = true
    isMovableByWindowBackground = true
    styleMask = [NSBorderlessWindowMask, NSResizableWindowMask]
    ignoresMouseEvents = false
    level = Int(CGWindowLevelForKey(.floatingWindow))
    NotificationCenter.default.addObserver(self, selector: #selector(recordButtonDidClick(_:)), name:
    NSNotification.Name(rawValue: "CaptureViewRecordButtonDidClick"), object: nil)
    setFrame(NSRect(x: 200, y: 200, width: 500, height: 500), display: true)
    NSEvent.addLocalMonitorForEvents(matching: .keyDown) { (aEvent) -> NSEvent? in
    self.keyDown(with: aEvent)
    return aEvent
    }
    }
    ݪҼ͸෼͔Βͣɻɻɻ
    

    View Slide

68. UI͸ͦΕʹ୅ସͰ͖Δ΋ͷ͕Ͱ͖ͨ
    

    View Slide

69. Complete!!
    

    View Slide

70. ࿥ը͍ͯ͠Δ࣌͸ϑΥʔΧε͕ผͷ
    ΞϓϦʹ͋ͨΔͷͰͦͷΞϓϦͷ
    TouchBarItemʹͳͬͯ͠·͏ͨΊStop
    ͕Ͱ͖ͳ͍ͷͰશ͘ҙຯ௕͍…
    

    View Slide

71. Teiten
    

    View Slide

72. ReTRY!!!!
    

    View Slide

73. View Slide

74. It’s a simple..
    

    View Slide

75. Conlusion
    

    View Slide

76. Conclusion
    • ͦΕ୯ମͰ׬ྃ͢ΔλεΫʹదԠ͢Δ
    • WindowΛಁ໌ʹ͢ΔͱNSTouchBar͕൓Ԡ͠
    ͳ͍
    • ݪҼΘ͔Βͣɾɾɾ
    

    View Slide

77. Conclusion
    • ͦΕ୯ମͰ׬ྃ͢ΔλεΫʹదԠ͢Δ
    • WindowΛಁ໌ʹ͢ΔͱNSTouchBar͕൓Ԡ͠
    ͳ͍
    • ݪҼΘ͔Βͣɾɾɾ
    • ۀ຿Ͱ͸ઈର࢖Θͳ͍ٕज़
    

    View Slide

78. MacBook Pro
    ΄͍͠
    

    View Slide

79. Thanks.
    
    

    View Slide