Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Touch Bar on Catalyst #potatotip

fromkk
April 27, 2020

Touch Bar on Catalyst #potatotip

4/27(月)の20時からオンラインで開催された[Online] potatotips #69 iOS/Android開発Tips共有会で登壇した資料です。
Catalyst自体はWWDC 2018で発表されたmacOS MojaveでApple製のアプリケーションの一部にUIKitが利用され、Apple社内でテスト的に利用が開始されました。それらのアプリケーションとはNews、株価、ボイスメモ、ホームの4です。開発者向けには2019年のリリースとなることがアナウンスされました。そして翌年のWWDC 2019にてProject Catalystが発表され、macO向けのアプリケーションの開発にUIKitが利用できることが発表されました。もちろんiOSとmacOSには様々な違いがあるのですがそれらも吸収されています。(メニューバーで動作するアプリケーションなど非対応の機能もまだまだあります)それでも同じコードベースのアプリケーションがiPhone、iPad、Macで動作させることが可能になりました。その中でも今回はTouch Barの実装方法について調べたので発表します。

fromkk

April 27, 2020
Tweet

More Decks by fromkk

Other Decks in Programming

Transcript

  1. 5PVDI#BSPO$BUBMZTU
    QPUBUPUJQTJ04"OESPJE։ൃ5JQTڞ༗ձ

    View full-size slide

  2. 1SPpMF
    struct Profile {
    let name = "Kazuya Ueoka"
    let twitter = "@fromkk"
    let github = "fromkk"
    let qiita = "fromkk"
    let note = "fromkk"
    }

    2

    View full-size slide

  3. IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

    View full-size slide

  4. IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

    View full-size slide

  5. IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

    View full-size slide

  6. IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

    View full-size slide

  7. IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

    View full-size slide

  8. IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

    View full-size slide

  9. 5PVDI#BSͱ͸
    w ೥ʹൃച͞Εͨ.BDCPPL1SP͔Β౥ࡌ͞ΕͨΩʔϘʔ
    υͷԞଆʹ഑ஔ͞ΕΔσΟεϓϨΠ͖ͭͷίϯτϩʔϧόʔ
    w ൃച౰͔࣌Β&TDΩʔͱϑΝϯΫγϣϯΩʔ͕5PVDI#BSʹ
    ಺แ͞Εͯ͠·͍ࢍ൱྆࿦
    w ೥݄ʹൃച͞Εͨ.BDCPPL1SPΠϯνͰ͸&TD
    Ωʔ͕෮ؼͨ͜͠ͱͰ଴ͪ๬ΜͰ͍ͨਓ͸େ׻ت
    12

    View full-size slide

  10. $BUBMZTUͰར༻ՄೳͳϘλϯͷछྨ
    13

    View full-size slide

  11. ࣮૷ํ๏

    View full-size slide

  12. ࣮૷ํ๏
    • NSTouchBar.CustomizationIdentifierΛఆٛ͢Δ
    • Touch BarͷछྨΛࣝผ͢Δ
    15
    extension NSTouchBar.CustomizationIdentifier {
    static let myTouchBar = NSTouchBar.CustomizationIdentifier(
    "me.fromkk.CatalystSampler.MyTouchBar"
    )
    }

    View full-size slide

  13. ࣮૷ํ๏
    16
    extension NSTouchBarItem.Identifier {
    static let prev = NSTouchBarItem.Identifier(
    "me.fromkk.CatalystSampler.prev"
    )
    static let next = NSTouchBarItem.Identifier(
    "me.fromkk.CatalystSampler.next"
    )
    }
    • NSTouchBarItem.IdentifierΛఆٛ͢Δ
    • Touch Barʹදࣔ͢Δ߲໨ͷछྨΛࣝผ͢Δ

    View full-size slide

  14. ࣮૷ํ๏
    w $BUBMZTUͷ৔߹ʹ6*3FTQPOEFSʹ૿͍͑ͯΔNBLF5PVDI#BSϝιουΛ࣮૷͢Δ
    17
    #if targetEnvironment(macCatalyst)
    override func makeTouchBar() -> NSTouchBar? {
    let touchBar = NSTouchBar()
    touchBar.customizationIdentifier = .myTouchBar
    touchBar.defaultItemIdentifiers = [.prev, .next, .otherItemsProxy]
    touchBar.customizationAllowedItemIdentifiers = [.prev, .next]
    touchBar.delegate = self
    return touchBar
    }
    #endif

    View full-size slide

  15. NSTouchBarͷϓϩύςΟ
    • customizationIdentifier:Touch BarΛࣝผ͢ΔͨΊͷ஋
    • customizationAllowedItemIdentifiers:ΧελϚΠζΛڐՄ͢Δࣝผࢠ
    • customizationRequiredItemIdentifiers:ΧελϚΠζ࣌ʹ࡟আͰ͖ͳ͍ࣝผࢠ
    • defaultItemIdentifiers:ΧελϚΠζ͢Δલʹදࣔ͢Δࣝผࢠ
    • itemIdentifiers:ొ࿥ࡁΈͷࣝผࢠ
    • principalItemIdentifier:தԝʹදࣔ͞ΕΔॏཁͳࣝผࢠ
    • escapeKeyReplacementItemIdentifier:Esc ΩʔΛࠩ͠ସ͑Δ৔߹ͷࣝผࢠ
    • templateItems:ࣝผࢠ͔ΒΠϯελϯεԽ͞Ε߲ͨ໨Λอ࣋͢ΔϓϩύςΟ
    • delegate: ࣝผࢠ͔ΒΠϯελϯεΛੜ੒͢ΔॲཧΛҠৡ
    18

    View full-size slide

  16. ΧελϚΠζ
    w ʮදࣔʯϝχϡʔ͔Βʮ5PVDI#BSΛΧελϚΠζʜʯΛબ୒
    ͢Δ͜ͱͰදࣔ͢Δ߲໨΍ฒͼॱͷઃఆ͕Մೳ
    w DVTUPNJ[BUJPO"MMPXFE*UFN*EFOUJpFST΍
    DVTUPNJ[BUJPO3FRVJSFE*UFN*EFOUJpFSTΛࢦఆ
    19

    View full-size slide

  17. ࣮૷ํ๏
    • NSTouchBarDelegateΛ࣮૷͢Δ
    • func touchBar(_ touchBar: NSTouchBar,
    makeItemForIdentifier identifier:
    NSTouchBarItem.Identifier) -> NSTouchBarItem?
    • identifierʹࣄલʹఆٛͨ͠஋͕౉͞ΕΔͷͰNSTouchBarItem
    ͷαϒΫϥεΛੜ੒ͯ͠ฦ͢
    • NSTouchBarItemʹ͸customizationLabelΛઃఆ͓ͯ͘͠ͱΧ
    ελϚΠζ࣌ʹϥϕϧ͕දࣔ͞ΕΔ
    20

    View full-size slide

  18. ݕࡧॱং
    IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPOBQQLJUOTUPVDICBS
    10. App delegate
    9. App object
    8. Main window’s controller
    7. Main window’s delegate
    6. Main window
    5. Main window’s first responder
    4. Key window’s controller
    3. Key window’s delegate
    2. Key window
    1. Key window’s first responder
    5PVDI#BSΛݕࡧ͢ΔॱংʢԼ͔Β্ʹʣ 6*3FTQPOEFSͷαϒΫϥεΛൃݟ͢Δͱߋʹݕࡧ
    9. App delegate
    8. App object
    7. Key window’s controller
    6. Key window
    5. View controller that is closest to
    root of window
    4. View that is closest to root of
    window
    3. Intermediate view controllers and
    views
    2. View controller of key window’s
    first responder
    1. Key window’s first responder

    View full-size slide

  19. ஫ҙ఺
    w 6*3FTQPOEFSΛܧঝͯ͠Ε͹දࣔ͞ΕΔ͔ͱࢥ͕ͬͨ4XJGU6*
    ʢ6*7JFX$POUSPMMFS3FQSFTFOUBCMF 6*7JFX3FQSFTFOUBCMFͰϥοϓͨ͠΋ͷʣͰ͸
    දࣔ͞Εͳ͍
    w XJOEPX4DFOFͷUPVDI#BSϓϩύςΟʹແཧ΍Γ/45PVDI#BSͷΠϯελϯεΛ౉
    ͙͢Β͍͔͠ͳͦ͞͏
    w 4XJGU6*Λར༻͍ͨ͠৔߹͸$BUBMZTUͰ͸ແ͘NBD04ωΠςΟϒͷΞϓϦΛ։ൃ͠
    ͨํ͕ྑ͍͔΋
    w εϥΠμʔΛදݱ͢Δ/44MJEFS5PVDI#BS*UFN͔Β஋Λऔಘ͢ΔϓϩύςΟ͕ແ͍
    w TMJEFS*UFNWBMVF GPS,FZlEPVCMF7BMVF
    ͰऔಘՄೳ
    22

    View full-size slide

  20. ·ͱΊ
    w 5PVDI#BS͸/45PVDI#BSͰදݱ
    w ରԠࡁΈͷ/45PVDI#BS*UFNͷछྨ΋·ͩগͳ͍ͪ͠ΌΜͱ஋
    ͕औΕͳ͔ͬͨΓ͢ΔͷͰࠓޙʹظ଴
    w 5PVDI#BS͸NBD04ͳΒͰ͸ͷཁૉͷҰͭͳͷͰ$BUBMZTUର
    Ԡ͢Δ࣌͸ੋඇ࣮૷͠·͠ΐ͏
    23

    View full-size slide

  21. αϯϓϧίʔυ
    IUUQTHJUIVCDPNGSPNLL$BUBMZTU4BNQMFS

    View full-size slide

  22. ʲిࢠॻ੶ʳNBD04$BUBMZTU%FFQ%JWF
    26
    IUUQTGSPNLLCPPUIQNJUFNT

    View full-size slide

  23. IUUQTGSFFUJNFQJDLFSpSFCBTFBQQDPN

    View full-size slide

  24. IUUQTUZQFNBSLEPXOBQQ

    View full-size slide

  25. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    29

    View full-size slide