メインコンテンツにスキップ

Tray

クラス: Tray​

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

プロセス: メイン

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

  • トレイアイコンはデフォルトでStatusNotifierItemを使用します。ユーザーのデスクトップ環境で利用できない場合は、代わりにGtkStatusIconが使用されます。
  • clickイベントは、トレイアイコンがユーザーからのアクティベーションを受け取ったときに発行されますが、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' }
  ])

  // Make a change to the context menu
  contextMenu.items[1].checked = false

  // Call this again for Linux because we modified the context menu
  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 (オプション) Windows - トレイアイコンにGUIDを割り当てます。実行可能ファイルが署名され、署名に件名行に組織が含まれている場合、GUIDはその署名に永続的に関連付けられます。システムトレイ内のトレイアイコンの位置などのOSレベルの設定は、実行可能ファイルへのパスが変更された場合でも保持されます。実行可能ファイルがコード署名されていない場合、GUIDは実行可能ファイルへのパスに永続的に関連付けられます。実行可能ファイルへのパスを変更すると、トレイアイコンの作成が中断され、新しいGUIDを使用する必要があります。ただし、GUIDパラメータは、コード署名された実行可能ファイルと組み合わせて使用​​することを強くお勧めします。アプリが複数のトレイアイコンを定義する場合、各アイコンは個別のGUIDを使用する必要があります。

imageに関連付けられた新しいトレイアイコンを作成します。

インスタンスイベント​

Trayモジュールは、次のイベントを発行します

イベント: 'click'​

戻り値

トレイアイコンをクリックすると発行されます。

Linuxでは、このイベントはトレイアイコンがアクティベーションを受け取ったときに発行されますが、必ずしもマウスの左クリックであるとは限りません。

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

戻り値

トレイアイコンを右クリックすると発行されます。

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

戻り値

トレイアイコンをダブルクリックすると発行されます。

イベント: 'middle-click' Windows​

戻り値

トレイアイコンをミドルクリックすると発行されます。

イベント: 'balloon-show' Windows​

トレイバルーンが表示されると発行されます。

イベント: 'balloon-click' Windows​

トレイバルーンをクリックすると発行されます。

イベント: 'balloon-closed' Windows​

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

イベント: 'drop' macOS​

ドラッグされたアイテムがトレイアイコンにドロップされると発行されます。

イベント: 'drop-files' macOS​

戻り値

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

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

イベント: 'drop-text' macOS​

戻り値

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

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

イベント: 'drag-enter' macOS​

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

イベント: 'drag-leave' macOS​

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

イベント: 'drag-end' macOS​

ドラッグ操作がトレイで終了するか、別の場所で終了したときに発行されます。

イベント: 'mouse-up' macOS​

戻り値

トレイアイコンをクリックしたときにマウスが離されると発行されます。

注：macOSレベルの制約により、`tray.setContextMenu`を使用してトレイのコンテキストメニューを設定した場合、これは発行されません。

イベント: 'mouse-down' macOS​

戻り値

マウストレイアイコンをクリックすると発行されます。

イベント: 'mouse-enter' macOS Windows​

戻り値

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

イベント: 'mouse-leave' macOS Windows​

戻り値

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

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

戻り値

マウスがトレイアイコン内で移動すると発行されます。

インスタンスメソッド​

Trayクラスには、次のメソッドがあります

tray.destroy()​

トレイアイコンをすぐに破棄します。

tray.setImage(image)​

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

tray.setPressedImage(image) macOS​

macOSで押されたときに、このトレイアイコンに関連付けられた`image`を設定します。

tray.setToolTip(toolTip)​

  • toolTip string

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

tray.setTitle(title[, options]) macOS​

  • title string
  • options Object (オプション)
    • fontType 文字列（オプション） - 表示するフォントファミリーのバリアント。monospaced または monospacedDigit を指定できます。 monospaced は macOS 10.15 以降で使用可能です。空白のままにすると、タイトルにはデフォルトのシステムフォントが使用されます。

ステータスバーのトレイアイコンの横に表示されるタイトルを設定します（ANSI カラーをサポート）。

tray.getTitle() macOS​

string を返します - ステータスバーのトレイアイコンの横に表示されるタイトル

tray.setIgnoreDoubleClickEvents(ignore) macOS​

  • ignore 真偽値

ダブルクリックイベントを無視するオプションを設定します。これらのイベントを無視することで、トレイアイコンの個々のクリックをすべて検出できます。

この値はデフォルトでfalseに設定されています。

tray.getIgnoreDoubleClickEvents() macOS​

boolean を返します - ダブルクリックイベントが無視されるかどうか。

tray.displayBalloon(options) Windows​

  • options オブジェクト
    • icon (NativeImage | string) (オプション) - iconType が custom の場合に使用されるアイコン。
    • iconType 文字列（オプション） - none、info、warning、error、または custom を指定できます。デフォルトは custom です。
    • title string
    • content 文字列
    • largeIcon 真偽値（オプション） - アイコンの大きいバージョンを使用する必要があります。デフォルトは true です。NIIF_LARGE_ICONにマップされます。
    • noSound 真偽値（オプション） - 関連付けられたサウンドを再生しません。デフォルトは false です。NIIF_NOSOUNDにマップされます。
    • respectQuietTime 真偽値（オプション） - 現在のユーザーが「クワイエットタイム」の場合、バルーン通知を表示しません。デフォルトは false です。NIIF_RESPECT_QUIET_TIMEにマップされます。

トレイバルーンを表示します。

tray.removeBalloon() Windows​

トレイバルーンを削除します。

tray.focus() Windows​

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

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

  • menu メニュー (オプション)
  • position Point (オプション) - ポップアップの位置。

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

position は Windows でのみ使用可能で、デフォルトは (0, 0) です。

tray.closeContextMenu() macOS Windows​

tray.setContextMenu() で設定された開いているコンテキストメニューを閉じます。

tray.setContextMenu(menu)​

  • menu メニュー | null

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

tray.getBounds() macOS Windows​

Rectangle を返します

このトレイアイコンの bounds を Object として返します。

tray.isDestroyed()​

boolean を返します - トレイアイコンが破棄されているかどうか。