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

ツールバーアイコンとその実装 / Toolbar Icons on macOS

1024jp
August 29, 2018

ツールバーアイコンとその実装 / Toolbar Icons on macOS

macOS native symposium (http://macos-native.github.io) #01 登壇資料

macOSアプリケーションのウインドウ上部に並ぶツールバーボタンは、macOSらしさを特徴付けています。ツールバーアイコンの歴史的変遷や用途によるデザインの違いを考察しながら、現在の最新システムにおけるネイティブらしいツールバーの実装方法をさぐります。

1024jp

August 29, 2018
Tweet

More Decks by 1024jp

Other Decks in Technology

Transcript

  1. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp ࣗݾ঺հ CotEditor Gapplin BathyScaphe

    ໷ϑΫϩ΢ Sparkle icon work application work plain-text editor SVG viewer 5ch browser twitter client updater 2014年に
 正式引き継ぎ サポーtメンバー
 (主にデザイン・UI) アイコン提供だけしたやつ
  2. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp ࠓ೔ͷτϐοΫ ѻ͏࿩ – πʔϧόʔΞΠίϯͷ࢓༷

    – πʔϧόʔΞΠίϯͷྺ࢙ – Apple੡ΞϓϦέʔγϣϯʹ͓͚ΔπʔϧόʔΞΠίϯͷ࣮૷ͷ͞Εํ – ݱࡏͷྑ͍πʔϧόʔΞΠίϯͷ͋Γํ ѻΘͳ͍࿩ – πʔϧόʔͦͷ΋ͷͷڍಈ΍࣮૷ – ΞΠίϯܕʢϘλϯܕʣҎ֎ͷπʔϧόʔ߲໨ – ϝχϡʔɾϥϕϧͳͲπʔϧόʔ߲໨ʹؚ·ΕΔΞΠίϯ෦෼Ҏ֎ͷཁૉ – Mojaveʹؔ͢Δ࿩
  3. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp )VNBO*OUFSGBDF(VJEFMJOFT A toolbar resides

    in the frame at the top of a window—below or integrated with the title bar—and provides convenient access to frequently used commands and features within an app window. cite: “Toolbars”, macOS Human Interface Guidelines, on 2018-08 Toolbar πʔϧόʔ͸ɺ΢Πϯυ΢্෦ͷϑϨʔϜ಺ʢλΠτϧόʔͷԼ·ͨ͸ಉྻʣ ʹଘࡏ͠ɺΞϓϦέʔγϣϯ΢Πϯυ΢಺ͷΑ͘࢖͏ίϚϯυ΍ػೳ΁ͷศར ͳΞΫηεΛఏڙ͢Δɻ
  4. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp )VNBO*OUFSGBDF(VJEFMJOFT cite: “Toolbars”, macOS

    Human Interface Guidelines, on 2018-08 Toolbar Items – Provide toolbar items for the things people do most often. Ϣʔβ͕΋ͬͱ΋࢖͏ػೳΛπʔϧόʔ߲໨ͱͯ͠ఏڙ͢Δɻ – Include image buttons or system controls, but not both. ΠϝʔδϘλϯ͔γεςϜίϯτϩʔϧͲͪΒ͔ͷΈΛ࢖͍ࠞࡏͤ͞ͳ͍ɻ – Use only toolbar-specific system control styles. πʔϧόʔ༻ͷγεςϜίϯτϩʔϧελΠϧͷΈΛ࢖͏ɻ – Make every toolbar item available as a menu command. ͢΂ͯͷπʔϧόʔ߲໨͸ϝχϡʔίϚϯυʹ΋ଘࡏ͠ͳ͍ͱ͚ͳ͍ɻ – Provide a short, descriptive label for every toolbar item. ͢΂ͯͷπʔϧόʔ߲໨ʹ୹͘Θ͔Γ΍͍͢ϥϕϧΛ͚ͭΔɻ
  5. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp "QQ,JU Ͱͷ࣮૷ (private) NSToolbar NSWindow

    NSTitlebarView NSToolbarItem NSToolbarItem NSToolbarItem _NSToolbarViewClipView NSToolbarItemViewer subview subview subview
  6. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp πʔϧόʔͷྺ࢙ cite: “Today in

    Apple history: NeXT customers get early taste of OS X”, Cult of Mac, 2017-09
 https://www.cultofmac.com/503084/today-apple-history-next-customers-get-early-taste-os-x/ NeXTSTEP 
  7. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp πʔϧόʔͷྺ࢙ cite: Mac OS

    X Public Beta, GUIdebook, on 2018-07
 https://guidebookgallery.org/screenshots/macosxpb Mac OS X Public Beta
  8. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp πʔϧόʔͷྺ࢙ cite: Mac OS

    X 10.0.4, GUIdebook, on 2018-07
 https://guidebookgallery.org/screenshots/macosx100 Mac OS X 10.0 Cheetah
  9. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp /45PPMCBS*UFN ͷ࣮૷ NSToolbarItem – label

    – image – view – tag – target – action – menuForm\
 Representation – … – validate()
  10. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp /45PPMCBS*UFN ͷ࣮૷ NSToolbarItem – label

    – image – view – tag – target – action – menuForm\
 Representation – … – validate() Image
 type Control
 type NSImage NSButton NSSearchField Search NSPopUpButton Menu NSSegmentedControl A B HIG
 推奨 NSView Custom
 View な ん で も other NSView
 subclasses
  11. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp /45PPMCBS*UFN ͷ࣮૷ NSToolbarItem – label

    – image – view – tag – target – action – menuForm\
 Representation – … – validate() Image
 type Control
 type NSImage NSButton NSSearchField Search NSPopUpButton Menu NSSegmentedControl A B HIG
 推奨 NSView Custom
 View な ん で も other NSView
 subclasses ࠶ܝ
  12. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp ͪΐͬͱલ  .BWFSJDLT  ͷπʔϧόʔ Pages

    Finder Sketch ؀ڥઃఆ (Safari) ϒϥ΢βܕ app ؀ڥઃఆ ΤσΟλܕ app
  13. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp ݱࡏ  )JHI4JFSSB  ͷπʔϧόʔ Pages

    Finder Sketch ؀ڥઃఆ (Safari) ϒϥ΢βܕ app ؀ڥઃఆ ΤσΟλܕ app
  14. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp πʔϧόʔ߲໨ͷछྨͱ༻్ͷมભ ॳظ
 Mac OS

    X தظ OS X ݱࡏ macOS ϒϥ΢βܕɹ ΤσΟλܕ ؀ڥઃఆ Button
 (Template) Button (Color) Image Button
 (Template) Image Image Image Image Image
  15. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp πʔϧόʔ߲໨ Button
 (Template) Button

    (Color) Image ؀ڥઃఆ ϒϥ΢βܕ ΞϓϦέʔγϣϯ ΤσΟλܕ ΞϓϦέʔγϣϯ ݱࡏͷ macOS (10.13) Ͱ͸ɿ
  16. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp Πϝʔδܕπʔϧόʔ߲໨ Button
 (Template) Button

    (Color) Image ؀ڥઃఆ ϒϥ΢βܕ ΞϓϦέʔγϣϯ ΤσΟλܕ ΞϓϦέʔγϣϯ ݱࡏͷ macOS (10.13) Ͱ͸ɿ ࠶ܝ
  17. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp Πϝʔδܕπʔϧόʔ߲໨ – NSToolbarItem ͷجຊܕ –

    .image ʹ NSImage Ληοτ͢Δ͚ͩͷ
 ୯७ͳ࣮૷ – macOS (Mac OS X) ͷ࠷ॳͷࠒ͸ɺ
 ΄΅͢΂ͯͷπʔϧόʔ߲໨͜ͷελΠϧ
 ͩͬͨ – ݱࡏ Apple ͸ ؀ڥઃఆ΢Πϯυ΢ ʹͷΈ࠾༻ – 3rd party ੡ͷΞϓϦέʔγϣϯͰ͸ɺ
 ࠓͰ΋ϝΠϯ΢Πϯυ΢ʹ࠾༻͍ͯ͠Δ
 ͜ͱ͕͋Δ NSToolbarItem – label – image – view – tag – target – action – menuForm\
 Representation – … – validate() NSImage 今後は環境設定にのみ採用すべき、かな?
  18. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp ؀ڥઃఆπʔϧόʔ Apple ੡ ???

    Finder Safari Keynote Mail Terminal Xcode GarageBand iTunes Advanced? センタリング(iTunes は特殊)
  19. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp ؀ڥઃఆπʔϧόʔ ίϯλΫτγϟυ΢ܕ υϩοϓγϟυ΢ܕ ؀ڥઃఆΞΠίϯͷڧ͍ఆܕελΠϧɿ

    ✔ ۩৅తͳϞνʔϑ ✔ ࣮ࣸతͳඳը ✔ ΢Πϯυ΢ʹӨΛམͱ͢ 両方アリだけど最近はドロップシャドウ型の方が優勢 →ウインドウ(物体)の上にアイコン(物体)が載ってる 厚みがある
  20. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp ؀ڥઃఆπʔϧόʔ Tower Unclutter CotEditor

    Sketch 3rd party ੡ ちょっとフラット
 すぎるかなぁ… Rが丸すぎる お手本的(自画自賛)
  21. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp ؀ڥઃఆπʔϧόʔ Fantastical Pixelmator Sketch

    Transmit Twitterrific CotEditor NSPreferencesGeneral Keynote (だって公式のダサいんだもん…) Ұൠ (General pane) ༻ͷΞΠίϯಠࣗʹ࡞Γ͗͢໰୊ official app specific ??? – Apple ͕௕͍͜ͱ NSPreferencesGeneral ͷ Retina ൛Λ࡞Δͳ͔͔ͬͨΒɺ
 ౰࣌ Retina ରԠͷͨΊʹ͸ಠࣗʹ࡞Β͟ΔΛಘͳ͔ͬͨͱ͍͏ྺ࢙తܦҢ΋ʢগ͠ʣ͋Δ – ಉ͡ Apple ఏڙͰ΋ NSAdvanced ͸ΘΓͱ࢖ΘΕΔʢ͔͍͍͔ͬ͜Βʣ
  22. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp ؀ڥઃఆπʔϧόʔc·ͱΊ ؀ڥઃఆͷπʔϧόʔΞΠίϯ͸ɿ ✔ 32px

    × 32px ͷ Image ελΠϧ ✔ ڧ͍ఆܕ͕͋Δ ✔ ཱମతɾ࣮ࣸతʹඳ͘ ✔ ʢඞཁʹԠͯ͡ʣ΢Πϯυ΢ʹӨ΋མͱ͢ ✔ γεςϜ؀ڥઃఆͷΞΠίϯͱಉ͡ελΠϧ ✔ σϑΥϧτͷ General pane ΞΠίϯ͸ΧοίΘΔ͍ 独自色は出すべきでない(と個人的には思う) ( )
  23. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp Ϙλϯܕπʔϧόʔ߲໨ Button
 (Template) Button

    (Color) Image ؀ڥઃఆ ϒϥ΢βܕ ΞϓϦέʔγϣϯ ΤσΟλܕ ΞϓϦέʔγϣϯ ݱࡏͷ macOS (10.13) Ͱ͸ɿ ࠶ܝ
  24. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp Ϙλϯܕπʔϧόʔ߲໨ Template Color ϒϥ΢βܕ

    ΞϓϦέʔγϣϯ ΤσΟλܕ ΞϓϦέʔγϣϯ ࣮૷্ͷҧ͍͸ .image ͕ template ͔Ͳ͏͔ͷΈɻ → ػೳ͸ಉ͡ͳͷͰɺ΢Πϯυ΢ͷੑ࣭ʹ߹Θͤͯબ΅͏ɻ → ͜ͷ2ͭ͸ࠞͥͯ΋ OKɻ 環境設定以外のウインドウのツールバーアイコンなら ひとまずこれ
  25. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp ςϯϓϨʔτܕͱΧϥʔܕͷ࢖͍෼͚ Finder ϒϥ΢βܕ Pages

    ΤσΟλܕ App ͷ
 ৗ༻ੑ ૢ࡞ͷ
 ಛҟੑ App ͷ
 ৗ༻ੑ ૢ࡞ͷ
 ಛҟੑ पғͱͷ
 ௐ࿨ੑ ݸʑͷ
 ࣝผੑ पғͱͷ
 ௐ࿨ੑ ݸʑͷ
 ࣝผੑ ςϯϓϨʔτܕ Χϥʔܕ
  26. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp Ϙλϯܕπʔϧόʔ߲໨ͷ࣮૷ NSToolbarItem – label

    – image – view – tag – target – action – menuForm\
 Representation – … – validate() Image type item Button type item NSButton – title – image – tag – … + … NSImage NSImage NSToolbarItem – label – image – view – tag – target – action – menuForm\
 Representation – … – validate()
  27. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp Ϙλϯܕπʔϧόʔ߲໨ NSButton NSSegmentedControl ✔

    ΫϦοΫͰ
 ϝχϡʔग़ݱ ✔ ΫϦοΫͰ
 ΞΫγϣϯ ✔ ӈଆΫϦοΫͰ
 ϝχϡʔग़ݱ ✔ ෳ਺ίϚϯυͷ
 άϧʔϓԽ – ΠϝʔδܕΑΓϘλϯܕͷํ͕ෳࡶͳૢ࡞͕ࣔͤΔɻ – ͍ΘΏΔϘλϯܕͳݟͨ໨Ͱ΋͍Ζ͍Ζ͋Δɻ ཁ subclass NSMenu クリックして直ぐにメニューを出せない ΠϝʔδܕͰ΋
 Ͱ͖Δ Πϝʔδܕͩͱ
 Ͱ͖ͳ͍ A B
  28. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp πʔϧόʔ߲໨ͷ WBMJEBUJPO πʔϧόʔ߲໨ͷvalidation͸ɺtargetͱͳΔΦϒδΣΫτͷɿ – validateToolbarItem(_

    item: NSToolbarItem) – validateUserInterfaceItem(_: NSValidatedUserInterfaceItem) ͲͪΒ͔Ͱߦ͏ɻ ūƃũƄ!? ⚠πʔϧόʔ߲໨͕ Ϙλϯܕͩͱݺ͹Εͳ͍
  29. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp πʔϧόʔ߲໨ͷ WBMJEBUJPO NSButton – title

    – image – tag – … + … NSImage NSToolbarItem – label – image – view – tag – target – action – menuForm\
 Representation – … – validate()
  30. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp - (void) validate {

    BOOL enabled = YES; id target; /* No validation for custom views */ if (_view) return; target = [NSApp targetForAction: [self action] to: [self target] from: self]; if (target == nil || ![target respondsToSelector: [self action]]) { enabled = NO; } else if ([target respondsToSelector: @selector(validateToolbarItem:)]) { enabled = [target validateToolbarItem: self]; } else if ([target respondsToSelector: @selector(validateUserInterfaceItem:)]) { enabled = [target validateUserInterfaceItem: self]; } [self setEnabled: enabled]; } (OV4UFQ Ͱͷ /45PPMCBS*UFN ͷ࣮૷ .view がセットされてる時はここで抜ける べんり! ObjC
  31. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp ϘλϯλΠϓͷ߲໨Λ WBMJEBUF ͢Δ class ControlToolbarItem: NSToolbarItem

    { override func validate() { (self.view as! NSControl).isEnabled = { guard let action = self.action, let validator = NSApp.target(forAction: action, to: self.target,
 from: self) as AnyObject? else { return false } switch validator { case let validator as NSToolbarItemValidation: return validator.validateToolbarItem(self) case let validator as NSUserInterfaceValidations: return validator.validateUserInterfaceItem(self) default: return true } }() } } Swift
  32. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp ·ͱΊ Button
 (Template) Button

    (Color) Image ؀ڥઃఆ ϒϥ΢βܕ ΞϓϦέʔγϣϯ ΤσΟλܕ ΞϓϦέʔγϣϯ
  33. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp )VNBO*OUFSGBDF(VJEFMJOFT cite: “Toolbars”, macOS

    Human Interface Guidelines, on 2018-08 Toolbar Items – Provide toolbar items for the things people do most often. Ϣʔβ͕΋ͬͱ΋࢖͏ػೳΛπʔϧόʔ߲໨ͱͯ͠ఏڙ͢Δɻ – Include image buttons or system controls, but not both. ΠϝʔδϘλϯ͔γεςϜίϯτϩʔϧͲͪΒ͔ͷΈΛ࢖͍ࠞࡏͤ͞ͳ͍ɻ – Use only toolbar-specific system control styles. πʔϧόʔ༻ͷγεςϜίϯτϩʔϧελΠϧͷΈΛ࢖͏ɻ – Make every toolbar item available as a menu command. ͢΂ͯͷπʔϧόʔ߲໨͸ϝχϡʔίϚϯυʹ΋ଘࡏ͠ͳ͍ͱ͚ͳ͍ɻ – Provide a short, descriptive label for every toolbar item. ͢΂ͯͷπʔϧόʔ߲໨ʹ୹͘Θ͔Γ΍͍͢ϥϕϧΛ͚ͭΔɻ ࠶ܝ
  34. macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp ࢀߟจݙ – Human Interface

    Guidelines https://developer.apple.com/design/human-interface-guidelines/macos/ – Core GNUstep developers interview http://www.roard.com/docs/interview/ – Guidebook -Graphical User Interface Gallery https://guidebookgallery.org – OS Xʹ͓͚ΔπʔϧόʔΞΠίϯͷ࢖͍෼͚ -ϰΥϧϑϩογϡ http://wolfrosch.com/text/2013/04/26