macOS用のメニューバーアプリ

メニューバーでホストされるアプリケーションは、macOSユーザーに長い間知られています。 これらのアプリケーションには、「通常」の部分があるものと、メニューバーにのみあるものがあります。
このガイドでは、有名な人からの引用をポップアップウィンドウに表示するアプリケーションを作成します。 このアプリケーションを作成する過程で、次のことを学びます。

• メニューバーでアプリケーションアイコンを割り当てます
• アプリケーションをメニューバーでのみホストする
• カスタムメニューを追加
• イベントモニタリングを使用して、ユーザーの要求時にポップアップウィンドウを表示し、必要に応じて非表示にします

注：このガイドは、SwiftとmacOSに精通していることを前提としています。

はじめに

Xcodeを起動します。 次に、 ファイル/新規/プロジェクト...メニューで、 macOS /アプリケーション/ Cocoa Appテンプレートを選択し、 次へをクリックします。

次の画面で、 製品名としてQuotesと入力し、 組織名と組織識別子を選択します。 次に、アプリケーション言語としてSwiftが選択され、[ ストーリーボードを使用]チェックボックスがオンになっていることを確認します。 [ ドキュメントベースのアプリケーションの作成] 、[ コアデータの使用] 、[ ユニットテストを含める]、[UIテストを含める]チェックボックスをオフにします 。



最後に、もう一度[ 次へ ]をクリックし、プロジェクトを保存する場所を指定して、[ 作成 ]をクリックします 。
新しいプロジェクトが作成されたら、 AppDelegate.swiftを開き、次のプロパティをクラスに追加します。

let statusItem = NSStatusBar.system.statusItem(withLength:NSStatusItem.squareLength) 

ここでは、メニューバーのステータスアイテム（アプリケーションアイコン）に、ユーザーに表示される固定長を作成します。

次に、新しいアプリケーションを区別できるように、メニューバーのこの新しいアイテムに画像を割り当てる必要があります。

プロジェクトナビゲータで、Assets.xcassetsに移動し、写真をアップロードして、資産カタログにドラッグします。

画像を選択して、属性インスペクターを開きます。 Render AsオプションをTemplate Imageに変更します。



独自の画像を使用する場合は、画像が白黒であることを確認し、 テンプレートメニューとして設定して、暗いメニューバーと明るいメニューバーの両方でアイコンがきれいに見えるようにします。

AppDelegate.swiftに戻り、次のコードをapplicationDidFinishLaunching（_ :)に追加します

 if let button = statusItem.button { button.image = NSImage(named:NSImage.Name("StatusBarButtonImage")) button.action = #selector(printQuote(_:)) } 

ここで、アプリケーションアイコンに追加したばかりのアプリケーションアイコンを割り当て、クリックしたときにアクションを割り当てます。

次のメソッドをクラスに追加します。

 @objc func printQuote(_ sender: Any?) { let quoteText = "Never put off until tomorrow what you can do the day after tomorrow." let quoteAuthor = "Mark Twain" print("\(quoteText) — \(quoteAuthor)") } 

このメソッドは、単に引用をコンソールに出力します。

objcメソッドディレクティブに注意してください。 これにより、ボタンクリックへの応答としてこのメ​​ソッドを使用できます。

アプリケーションをビルドして実行すると、メニューバーに新しいアプリケーションが表示されます。 やった！
メニューバーのアイコンをクリックするたびに、マークトウェインの有名な格言がXcodeコンソールに表示されます。

メインウィンドウとドックのアイコンを非表示にします

機能を直接扱う前に行う必要のある小さなことがいくつかあります。

• ドックアイコンを削除
• 不要なアプリケーションのメインウィンドウを削除する

ドックアイコンを削除するには、 Info.plistを開きます 。 新しいApplication is agent（UIElement）キーを追加し、その値をYESに設定します。



ここで、メインアプリケーションウィンドウを処理します。

• Main.storyboardを開く
• Window Controllerシーンを選択して削除します
• ビューコントローラーシーンの休暇、すぐに使用します

アプリケーションをビルドして実行します。 これで、アプリケーションのメインウィンドウと不要なアイコンの両方がドックにありません。 いいね！

ステータスアイテムにメニューを追加

重大なアプリケーションには、シングルクリック応答だけでは明らかに不十分です。 機能を追加する最も簡単な方法は、メニューを追加することです。 AppDelegateの最後にこの関数を追加します。

 func constructMenu() { let menu = NSMenu() menu.addItem(NSMenuItem(title: "Print Quote", action: #selector(AppDelegate.printQuote(_:)), keyEquivalent: "P")) menu.addItem(NSMenuItem.separator()) menu.addItem(NSMenuItem(title: "Quit Quotes", action: #selector(NSApplication.terminate(_:)), keyEquivalent: "q")) statusItem.menu = menu } 

そして、 applicationDidFinishLaunching（_ :)の最後にこの呼び出しを追加します

 constructMenu() 

NSMenuを作成し、 NSMenuItemの 3つのインスタンスをそれに追加し、このメニューをアプリケーションアイコンメニューとして設定します。

いくつかの重要なポイント：

• メニュー項目のタイトルは、メニューに表示されるテキストです。 アプリケーションをローカライズするのに適した場所（必要な場合）。
• action は、ボタンまたは他のコントロールのアクションと同様に、ユーザーがメニュー項目をクリックしたときに呼び出されるメソッドです
• keyEquivalentは、メニュー項目を選択するために使用できるキーボードショートカットです。 小文字は修飾子としてCmdを使用し、小文字はCmd + Shiftを使用します 。 これは、アプリケーションが最上位にあり、アクティブな場合にのみ機能します。 この場合、アプリケーションにはドックにアイコンがないため、メニューまたは他のウィンドウが表示されている必要があります
• separatorItemは、他の要素の間の灰色の線の形の非アクティブなメニュー項目です。 グループに使用する
• printQuoteはAppDelegateで既に定義したメソッドであり、 terminateはNSApplicationで定義されたメソッドです。

アプリケーションを起動すると、アプリケーションアイコンをクリックしてメニューが表示されます。



メニューをクリックしてみてください- 見積の印刷を選択すると、Xcodeコンソールに見積が表示され、見積を終了するとアプリケーションが終了します。

ポップアップを追加する

コードからメニューを追加するのがどれほど簡単かを見ましたが、Xcodeコンソールに引用符を表示することは、ユーザーがアプリケーションに期待するものとは明らかに異なります。 次に、シンプルなView Controllerを追加して、正しい方法で見積もりを表示します。

ファイル/新規/ファイル...メニューに移動し、 macOS /ソース/ Cocoa Classテンプレートを選択して、 次へをクリックします。

• クラスにQuotesViewControllerという名前を付けます
• NSViewControllerの相続人を作ります
• [ ユーザーインターフェイスのXIBファイルも作成する]チェックボックスがオフになっていることを確認します。
• 言語をSwiftに設定します

最後に、もう一度[ 次へ ]をクリックし、ファイルを保存する場所を選択して、[ 作成 ]をクリックします 。
Main.storyboardを開きます 。 [ View Controller Scene]を展開し 、[ View Controller instance]を選択します 。



最初にIdentity Inspectorを選択し、クラスをQuotesViewControllerに変更してから、 ストーリーボードIDをQuotesViewControllerに設定します

次に、 QuotesViewController.swiftファイルの最後に次のコードを追加します。

 extension QuotesViewController { // MARK: Storyboard instantiation static func freshController() -> QuotesViewController { //1. let storyboard = NSStoryboard(name: NSStoryboard.Name("Main"), bundle: nil) //2. let identifier = NSStoryboard.SceneIdentifier("QuotesViewController") //3. guard let viewcontroller = storyboard.instantiateController(withIdentifier: identifier) as? QuotesViewController else { fatalError("Why cant i find QuotesViewController? - Check Main.storyboard") } return viewcontroller } } 

ここで何が起こっていますか：

1. Main.storyboardへのリンクを取得します。
2. 直前にインストールしたものと一致するシーン識別子を作成します。
3. QuotesViewControllerのインスタンスを作成して返します。

このメソッドを作成するので、 QuotesViewControllerを使用するすべての人がその作成方法を知る必要がなくなりました。 それだけで動作します。

guardステートメント内のfatalErrorに注意してください。 開発中に何か問題が発生した場合に、あなた自身と開発チームの他のメンバーが知ることができるように、それを使用したりassertionFailureするのは良いことです。

AppDelegate.swiftに戻ります。 新しいプロパティを追加します。

 let popover = NSPopover() 

次に、 pplicationDidFinishLaunching（_ :)を次のコードに置き換えます。

 func applicationDidFinishLaunching(_ aNotification: Notification) { if let button = statusItem.button { button.image = NSImage(named:NSImage.Name("StatusBarButtonImage")) button.action = #selector(togglePopover(_:)) } popover.contentViewController = QuotesViewController.freshController() } 

クリックアクションを変更して、 togglePopover（_ :)メソッドを呼び出しました。これについては、後で説明します。 また、メニューをカスタマイズして追加する代わりに、 QuotesViewControllerから何かを表示するポップアップウィンドウを構成しました 。

次の3つのメソッドをAppDelegateに追加します。

 @objc func togglePopover(_ sender: Any?) { if popover.isShown { closePopover(sender: sender) } else { showPopover(sender: sender) } } func showPopover(sender: Any?) { if let button = statusItem.button { popover.show(relativeTo: button.bounds, of: button, preferredEdge: NSRectEdge.minY) } } func closePopover(sender: Any?) { popover.performClose(sender) } 

showPopover（）はポップアップを表示します。 あなたはそれがどこから来たかを示すだけで、macOSはそれを配置し、メニューバーから現れるかのように矢印を描きます。

closePopover（）は単にポップアップを閉じ、 togglePopover（）は状態に応じてポップアップを表示または非表示にするメソッドです。

アプリケーションを起動し、そのアイコンをクリックします。



すべては問題ありませんが、コンテンツはどこにありますか？

Quote View Controllerを実装します

まず、引用符と属性を保存するためのモデルが必要です。 ファイル/新規/ファイル...メニューに移動し、 macOS /ソース/ Swiftファイルテンプレートを選択し、 次へを選択します。 ファイルにQuoteという名前を付けて、[ 作成 ]をクリックします 。

Quote.swiftファイルを開き、次のコードを追加します。

 struct Quote { let text: String let author: String static let all: [Quote] = [ Quote(text: "Never put off until tomorrow what you can do the day after tomorrow.", author: "Mark Twain"), Quote(text: "Efficiency is doing better what is already being done.", author: "Peter Drucker"), Quote(text: "To infinity and beyond!", author: "Buzz Lightyear"), Quote(text: "May the Force be with you.", author: "Han Solo"), Quote(text: "Simplicity is the ultimate sophistication", author: "Leonardo da Vinci"), Quote(text: "It's not just what it looks like and feels like. Design is how it works.", author: "Steve Jobs") ] } extension Quote: CustomStringConvertible { var description: String { return "\"\(text)\" — \(author)" } } 

ここでは、単純な引用構造と、すべての引用を返す静的プロパティを定義します。 CustomStringConvertibleプロトコルに準拠したQuoteを作成したため、便利なフォーマットのテキストを簡単に取得できます。

進歩はありますが、これをすべて表示するにはコントロールが必要です。

インターフェイス要素を追加する

Main.storyboardを開き、View Controllerで3つのボタン（ プッシュボタン ）とラベル（ マルチラインラベル）を引き出します。

ボタンとラベルを次のように配置します。



20のギャップと垂直方向の中央に左ボタンを左端に取り付けます。
20のギャップで垂直に中央に右ボタンを右端に取り付けます。
20のギャップで水平方向の中央に下部ボタンを下端に取り付けます。
ラベルの左端と右端を20の間隔でボタンに取り付け、垂直方向の中央に配置します。



自動レイアウトを理解するのに十分な情報がないため、いくつかのレイアウトエラーが表示されます。

ラベルのサイズを変更できるように、 水平コンテンツのハグの優先度を249に設定します。



次の手順を実行します。

• 左ボタンの画像をNSGoLeftTemplateに設定し、 タイトルをクリアします
• 右ボタンの画像をNSGoRightTemplateに設定し、 タイトルをクリアします
• Quit Quotesで下のボタンのタイトルを設定します。
• ラベルのテキストの配置を中央に設定します 。
• ラベルの改行がワードラップに設定されていることを確認します 。

QuotesViewController.swiftを開き、 QuotesViewControllerクラスの実装に次のコードを追加します。

 @IBOutlet var textLabel: NSTextField! 

この拡張機能をクラス実装に追加します。 QuotesViewController.swiftには、 2つのクラス拡張があります。

 // MARK: Actions extension QuotesViewController { @IBAction func previous(_ sender: NSButton) { } @IBAction func next(_ sender: NSButton) { } @IBAction func quit(_ sender: NSButton) { } } 

引用符の表示に使用するラベルのアウトレットと、ボタンに接続する3つのスタブメソッドを追加しました。

Interface Builderでコードを接続する

注：Xcodeは、コードの左側、 つまりIBActionおよびIBOutletキーワードの隣に円を配置しています。



これらを使用して、コードをUIに接続します。

Altキーを押しながら、 プロジェクトナビゲーターの Main.storyboardをクリックします。 したがって、 ストーリーボードは右側のアシスタントエディターで開き、コードは左側に開きます。

textLabelの左にある円を、 インターフェイスビルダーのラベルにドラッグします 。 同様に、 previous 、 next、 quitメソッドをそれぞれ左、右、下のボタンと組み合わせます。



アプリケーションを起動します。



デフォルトのポップアップサイズを使用しました。 大きいポップアップまたは小さいポップアップが必要な場合は、 ストーリーボードでサイズを変更してください。

ボタンのコードを書く

アシスタントエディターをまだ非表示にしていない場合は、[ Cmd-Return ]または[ ビュー]> [標準エディター]> [標準エディターを表示 ]をクリックします

QuotesViewController.swiftを開き、次のプロパティをクラス実装に追加します。

 let quotes = Quote.all var currentQuoteIndex: Int = 0 { didSet { updateQuote() } } 

quotesプロパティにはすべての引用符が含まれ、 currentQuoteIndexは現在表示されている引用符のインデックスです。 CurrentQuoteIndexには、インデックスが変更されたときにラベルの内容を新しい引用で更新するプロパティオブザーバーもあります。

次のメソッドを追加します。

 override func viewDidLoad() { super.viewDidLoad() currentQuoteIndex = 0 } func updateQuote() { textLabel.stringValue = String(describing: quotes[currentQuoteIndex]) } 

ビューが読み込まれると、引用インデックスを0に設定します。これにより、インターフェースが更新されます。 updateQuote（）は、テキストラベルを更新して引用を表示するだけです。 currentQuoteIndexに対応します 。

最後に、これらのメソッドを次のコードで更新します。

 @IBAction func previous(_ sender: NSButton) { currentQuoteIndex = (currentQuoteIndex - 1 + quotes.count) % quotes.count } @IBAction func next(_ sender: NSButton) { currentQuoteIndex = (currentQuoteIndex + 1) % quotes.count } @IBAction func quit(_ sender: NSButton) { NSApplication.shared.terminate(sender) } 

next（）およびprevious（）メソッドは、すべての引用を循環します。 quitは、アプリケーションを閉じます。

アプリケーションを起動します。

イベント監視

ユーザーがアプリケーションに期待するもう1つのことがあります。ユーザーがポップアップウィンドウの外側をクリックするとポップアップウィンドウを非表示にすることです。 これを行うには、 macOS global event monitorと呼ばれるメカニズムが必要です。

新しいSwiftファイルを作成し、それをEventMonitorと呼び 、その内容を次のコードに置き換えます。

 import Cocoa public class EventMonitor { private var monitor: Any? private let mask: NSEvent.EventTypeMask private let handler: (NSEvent?) -> Void public init(mask: NSEvent.EventTypeMask, handler: @escaping (NSEvent?) -> Void) { self.mask = mask self.handler = handler } deinit { stop() } public func start() { monitor = NSEvent.addGlobalMonitorForEvents(matching: mask, handler: handler) } public func stop() { if monitor != nil { NSEvent.removeMonitor(monitor!) monitor = nil } } } 

このクラスのインスタンスを初期化するときに、リッスンするイベントマスク（キーストローク、マウスホイールのスクロールなど）とイベントハンドラーを渡します。
リスニングを開始する準備ができたら、 start（）がaddGlobalMonitorForEventsMatchingMask（_：handler :)を呼び出し、保存しているオブジェクトを返します。 マスクに含まれるイベントが発生するとすぐに、システムはハンドラーを呼び出します。

イベントの監視を停止するには、 stop（）でremoveMonitor （）が呼び出され、nilに設定してオブジェクトを削除します。

残っているのは、適切なタイミングでstart（）とstop（）を呼び出すことです。 また、クラスは、クリーンアップするためにデイニシャライザーでstop（）を呼び出します。

イベントモニターの接続

最後にAppDelegate.swiftを開き、新しいプロパティを追加します。

 var eventMonitor: EventMonitor? 

次に、このコードを追加して、 applicationDidFinishLaunchingの最後にイベントモニターを構成します（_ :)

 eventMonitor = EventMonitor(mask: [.leftMouseDown, .rightMouseDown]) { [weak self] event in if let strongSelf = self, strongSelf.popover.isShown { strongSelf.closePopover(sender: event) } } 

左または右のボタンをクリックすると、アプリケーションに通知されます。 注：アプリケーション内でのマウスクリックに応答してハンドラーは呼び出されません。 これが、ポップアップをクリックしても閉じない理由です。

AppDelegateとEventMonitor間の強力なリンクループの危険を回避するために、 弱い 自己参照を使用します。

showPopover（_ :)メソッドの最後に次のコードを追加します。

 eventMonitor?.start() 

ここでは、ポップアップウィンドウが表示されたときにイベントの監視を開始します。

次に、 closePopover（_ :)メソッドの最後にコードを追加します。

 eventMonitor?.stop() 

ここで、ポップアップが閉じたら監視を終了します。

アプリケーションの準備ができました！

おわりに

ここに 、このプロジェクトの完全なコードがあります。

メニューバーにあるアプリケーションでメニューとポップアップを設定する方法を学習しました。 複数のタグまたはフォーマットされたテキストを試して、引用符をよりよく見てみませんか？ または、バックエンドを接続してインターネットから見積もりを受け取りますか？ または、キーボードを使用して引用符間を移動しますか？

研究するのに適した場所は、公式のドキュメントNSMenu 、 NSPopoverおよびNSStatusItemです。