Tray
クラス: Tray
システムの通知領域にアイコンやコンテキスト メニューを追加します。
プロセス: Main
Tray
は EventEmitter です。
const { app, Menu, Tray } = require('electron')
let tray = null
app.whenReady().then(() => {
tray = new Tray('/path/to/my/icon')
const contextMenu = Menu.buildFromTemplate([
{ label: 'Item1', type: 'radio' },
{ label: 'Item2', type: 'radio' },
{ label: 'Item3', type: 'radio', checked: true },
{ label: 'Item4', type: 'radio' }
])
tray.setToolTip('This is my application.')
tray.setContextMenu(contextMenu)
})
プラットフォームの考慮事項
Linux
- Tray アイコンはデフォルトで StatusNotifierItem を使用しますが、これがユーザーのデスクトップ環境で利用できない場合は代わりに
GtkStatusIcon
を使用します。 click
イベントは Tray アイコンがユーザーに活性化されたときに発生しますが、StatusNotifierItem の仕様ではどのアクションで活性化されるかは指定されておらず、環境によってマウスの左クリックだったりダブルクリックだったりします。- 個々の
MenuItem
に加えられた変更を有効にするには、setContextMenu
を再び呼ぶ必要があります。 以下がその例です。
const { app, Menu, Tray } = require('electron')
let appIcon = null
app.whenReady().then(() => {
appIcon = new Tray('/path/to/my/icon')
const contextMenu = Menu.buildFromTemplate([
{ label: 'Item1', type: 'radio' },
{ label: 'Item2', type: 'radio' }
])
// コンテキストメニューを変更する
contextMenu.items[1].checked = false
// Linux ではコンテキストメニューを変更したのでこれを呼び出し直します
appIcon.setContextMenu(contextMenu)
})
MacOS
- Tray のコンストラクタに渡すアイコンは テンプレート画像 でなければなりません。
- Retina モニタでアイコンが粗くならないように、
@2x
の画像は 144dpi にしてください。 - アプリケーションをバンドルしている場合 (開発用の webpack など)、ファイル名がマングルおよびハッシュ化されないようにしてください。 ファイル名は Template で終わる必要があり、
@2x
画像は標準の画像と同じファイル名である必要があります。さもなくば、MacOS は自動で画像の色を反転させたり高密度画像を使用したりしません。 - 16x16 (72dpi) と 32x32@2x (144dpi) を用意すれば、ほとんどのアイコンでうまく機能します。
Windows
- 最適な視覚効果を得るために
ICO
形式のアイコンファイルの使用を推奨します。
new Tray(image, [guid])
image
(NativeImage | string)guid
string (optional) Windows - tray アイコンに割り当てる GUID。 実行形式が署名されていて署名の主体者が組織である場合は、GUID がその署名に恒久的に関連付けられます。 システム tray の tray アイコンの位置など OS レベルの設定は、実行ファイルのパスが変わっても維持されます。 実行形式がコード署名されていない場合は、GUID が実行形式のパスへ永続的に関連付けられます。 実行形式のパスを変更すると、tray アイコンの作成は破棄され、新しい GUID を使用する必要があります。 ただし、この GUID 引数はコード署名された実行形式のみと組み合わせて使用することを強く推奨します。 アプリが複数の tray アイコンを定義している場合は、それぞれのアイコンで別々の GUID を使用する必要があります。
image
に関連する新しい tray アイコンを作成します。
インスタンスイベント
tray
モジュールには以下のイベントがあります。
イベント: 'click'
戻り値:
event
KeyboardEventbounds
Rectangle - tray アイコンの境界。position
Point - イベントの位置。
tray アイコンがクリックされたときに発行されます。
注意として Linux では、このイベントは tray アイコンが活性化されたときに発生します。必ずしもマウスの左クリックとは限りません。
イベント: 'right-click' macOS Windows
戻り値:
event
KeyboardEventbounds
Rectangle - tray アイコンの境界。
tray アイコンが右クリックされたときに発行されます。
イベント: 'double-click' macOS Windows
戻り値:
event
KeyboardEventbounds
Rectangle - tray アイコンの境界。
tray アイコンがダブルクリックされたときに発行されます。
イベント: 'middle-click' Windows
戻り値:
event
KeyboardEventbounds
Rectangle - tray アイコ ンの境界。
tray アイコンが中クリックされたときに発行されます。
イベント: 'balloon-show' Windows
tray バルーンを表示するときに発行されます。
イベント: 'balloon-click' Windows
tray バルーンがクリックされたときに発行されます。
イベント: 'balloon-closed' Windows
tray バルーンが、タイムアウトかユーザの手動で、閉じられたときに発行されます。
イベント: 'drop' macOS
tray アイコン上に何かのドラッグされたアイテムがドロップされたときに発行されます。