メインコンテンツへ飛ぶ

Tray

クラス: Tray

システムの通知領域にアイコンやコンテキスト メニューを追加します。

プロセス: Main

TrayEventEmitter です。

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

Platform Considerations

Linux

  • Tray icon requires support of StatusNotifierItem in user's desktop environment.
  • The click event is emitted when the tray icon receives activation from user, however the StatusNotifierItem spec does not specify which action would cause an activation, for some environments it is left mouse click, but for some it might be double left mouse click.
  • In order for changes made to individual MenuItems to take effect, you have to call setContextMenu again. 以下がその例です。
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

  • Icons passed to the Tray constructor should be Template Images.
  • To make sure your icon isn't grainy on retina monitors, be sure your @2x image is 144dpi.
  • If you are bundling your application (e.g., with webpack for development), be sure that the file names are not being mangled or hashed. The filename needs to end in Template, and the @2x image needs to have the same filename as the standard image, or MacOS will not magically invert your image's colors or use the high density image.
  • 16x16 (72dpi) and 32x32@2x (144dpi) work well for most icons.

Windows

  • It is recommended to use ICO icons to get best visual effects.

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'

戻り値:

tray アイコンがクリックされたときに発行されます。

Note that on Linux this event is emitted when the tray icon receives an activation, which might not necessarily be left mouse click.

イベント: 'right-click' macOS Windows

戻り値:

tray アイコンが右クリックされたときに発行されます。

イベント: 'double-click' macOS Windows

戻り値:

tray アイコンがダブルクリックされたときに発行されます。

イベント: 'balloon-show' Windows

tray バルーンを表示するときに発行されます。

イベント: 'balloon-click' Windows

tray バルーンがクリックされたときに発行されます。

イベント: 'balloon-closed' Windows

tray バルーンが、タイムアウトかユーザの手動で、閉じられたときに発行されます。

イベント: 'drop' macOS

tray アイコン上に何かのドラッグされたアイテムがドロップされたときに発行されます。

イベント: 'drop-files' macOS

戻り値:

  • event Event
  • files string[] - ドロップされたファイルのパス。

tray アイコン上にドラッグされたファイルがドロップされたときに発行されます。

イベント: 'drop-text' macOS

戻り値:

  • event Event
  • text string - ドロップされたテキスト文字列。

tray アイコン上にドラッグされたテキストがドロップされたときに発行されます。

イベント: 'drag-enter' macOS

ドラッグ操作が tray アイコン内に入ったときに発行されます。

イベント: 'drag-leave' macOS

ドラッグ操作が tray アイコン内から出たときに発行されます。

イベント: 'drag-end' macOS

ドラッグ操作が、tray 上か他の場所で終了したときに発行されます。

イベント: 'mouse-up' macOS

戻り値:

tray アイコンをクリックしてマウスを離したときに発生します。

注意: macOS レベルの制約によるもので、tray.setContextMenu を使って tray にコンテキストメニューを設定するとこれは発生しません。

イベント: 'mouse-down' macOS

戻り値:

tray アイコンをマウスクリックしたときに発生します。

イベント: 'mouse-enter' macOS

戻り値:

マウスが tray アイコン内に入ったときに発行されます。

イベント: 'mouse-leave' macOS

戻り値:

マウスが tray アイコン内から出たときに発行されます。

イベント: 'mouse-move' macOS Windows

戻り値:

マウスが tray アイコン内で動いたときに発行されます。

インスタンスメソッド

Tray クラスは以下のメソッドを持ちます。

tray.destroy()

tray アイコンを即座に削除します。

tray.setImage(image)

この tray アイコンに関連付けられた image を設定します。

tray.setPressedImage(image) macOS

macOS において、この tray アイコンが押されたときの関連付けられた image を設定します。

tray.setToolTip(toolTip)

  • toolTip string

この tray アイコンのホバーテキストを設定します。

tray.setTitle(title[, options]) macOS

  • title string
  • options Object (任意)
    • fontType string (任意) - 表示するフォントファミリのバリアント。 monospaced または monospacedDigit のどちらかです。 monospaced は macOS 10.15またはそれ以上で利用でき、 monospacedDigit は macOS 10.11またはそれ以上で利用できます。 空白の場合、タイトルにはデフォルトのシステムフォントを使用します。

ステータスバー内の tray アイコンの隣に表示されるタイトル (ANSI カラーサポート) を設定します。

tray.getTitle() macOS

戻り値 string - ステータスバーの tray アイコンの隣に表示されるタイトル

tray.setIgnoreDoubleClickEvents(ignore) macOS

  • ignore boolean

ダブルクリックイベントを無視するオプションを設定します。 これらのイベントを無視することで tray アイコンそれぞれの独立したクリックを検知することを許可します。

この値はデフォルトで false にセットされます。

tray.getIgnoreDoubleClickEvents() macOS

戻り値 boolean - ダブルクリックイベントが無視されているかどうか。

tray.displayBalloon(options) Windows

  • options Object
    • icon (NativeImage | string) (任意) - iconTypecustom のときに使うアイコン。
    • iconType string (任意) - noneinfowarningerrorcustom のいずれかにできます。 省略値は custom です。
    • title string
    • content string
    • largeIcon boolean (任意) - 大きなバージョンのアイコン。できればこちらを使用します。 省略値は true です。 NIIF_LARGE_ICON に対応します。
    • noSound boolean (任意) - 関連付けられたサウンドを再生しないようにします。 省略値は false です。 NIIF_NOSOUND に対応します。
    • respectQuietTime boolean (任意) - ユーザが現在 "おやすみモード" の場合、バルーン通知を表示しないようにします。 省略値は false です。 NIIF_RESPECT_QUIET_TIME に対応します。

tray のバルーンを表示します。

tray.removeBalloon() Windows

tray のバルーンを除去します。

tray.focus() Windows

タスクバーの通知領域にフォーカスを戻します。 通知領域アイコンは、UI 操作が完了したときにこのメッセージを使う必要があります。 たとえば、アイコンがショートカットメニューを表示しているけれど、ユーザーが ESC を押してキャンセルする場合、tray.focus() を使用して通知領域にフォーカスを戻します。

tray.popUpContextMenu([menu, position]) macOS Windows

  • menu Menu (任意)
  • position Point (任意) - ポップアップ位置。

tray アイコンのコンテキストメニューをポップアップ表示します。 menu が渡されると、tray アイコンのコンテキストメニューの代わりに menu を表示します。

position は Windows でのみ有効で、省略値は (0, 0) です。

tray.closeContextMenu() macOS Windows

tray.setContextMenu() でセットすることで、開かれたコンテキストメニューを閉じます。

tray.setContextMenu(menu)

  • menu Menu | null

このアイコンのコンテキストメニューを設定します。

tray.getBounds() macOS Windows

戻り値 Rectangle

Object としてのこの tray アイコンの bounds

tray.isDestroyed()

戻り値 boolean - tray アイコンが破棄されたかどうか。