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

by 1024jp

Slide 1

Slide 1 text

題: 発表者: 場所: 日付: πʔϧόʔΞΠίϯͱͦͷ࣮૷ KQ NBD04OBUJWF4ZNQPTJVN

Slide 2

Slide 2 text

Slide 3

Slide 3 text

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）アイコン提供だけしたやつ

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp ࠓ೔ͷτϐοΫ ѻ͏࿩ – πʔϧόʔΞΠίϯͷ࢓༷ – πʔϧόʔΞΠίϯͷྺ࢙ – Apple੡ΞϓϦέʔγϣϯʹ͓͚ΔπʔϧόʔΞΠίϯͷ࣮૷ͷ͞Εํ – ݱࡏͷྑ͍πʔϧόʔΞΠίϯͷ͋Γํ ѻΘͳ͍࿩ – πʔϧόʔͦͷ΋ͷͷڍಈ΍࣮૷ – ΞΠίϯܕʢϘλϯܕʣҎ֎ͷπʔϧόʔ߲໨ – ϝχϡʔɾϥϕϧͳͲπʔϧόʔ߲໨ʹؚ·ΕΔΞΠίϯ෦෼Ҏ֎ͷཁૉ – Mojaveʹؔ͢Δ࿩

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

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 πʔϧόʔ͸ɺ΢Πϯυ΢্෦ͷϑϨʔϜ಺ʢλΠτϧόʔͷԼ·ͨ͸ಉྻʣ ʹଘࡏ͠ɺΞϓϦέʔγϣϯ΢Πϯυ΢಺ͷΑ͘࢖͏ίϚϯυ΍ػೳ΁ͷศར ͳΞΫηεΛఏڙ͢Δɻ

Slide 11

Slide 11 text

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. ͢΂ͯͷπʔϧόʔ߲໨ʹ୹͘Θ͔Γ΍͍͢ϥϕϧΛ͚ͭΔɻ

Slide 12

Slide 12 text

macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp "QQ,JU Ͱͷ࣮૷ (private) NSToolbar NSWindow NSTitlebarView NSToolbarItem NSToolbarItem NSToolbarItem _NSToolbarViewClipView NSToolbarItemViewer subview subview subview

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

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 今後は環境設定にのみ採用すべき、かな？

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Slide 46

Slide 46 text

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()

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp πʔϧόʔ߲໨ͷ WBMJEBUJPO πʔϧόʔ߲໨ͷvalidation͸ɺtargetͱͳΔΦϒδΣΫτͷɿ – validateToolbarItem(_ item: NSToolbarItem) – validateUserInterfaceItem(_: NSValidatedUserInterfaceItem) ͲͪΒ͔Ͱߦ͏ɻ ūƃũƄ!? ⚠πʔϧόʔ߲໨͕ Ϙλϯܕͩͱݺ͹Εͳ͍

Slide 49

Slide 49 text

macOS native πʔϧόʔΞΠίϯͱͦͷ࣮૷ © 2018 1024jp πʔϧόʔ߲໨ͷ WBMJEBUJPO NSButton – title – image – tag – … + … NSImage NSToolbarItem – label – image – view – tag – target – action – menuForm\  Representation – … – validate()

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Slide 53

Slide 53 text

Slide 54

Slide 54 text

Slide 55

Slide 55 text

Slide 56

Slide 56 text

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