トレイメニュー

このガイドでは、独自のコンテキストメニューを持つアイコンをシステムトレイに作成する手順を説明します。

macOS では、アイコンはメニューバー画面の右上隅に配置されます。
Windowsでは、アイコンはタスクバーの最後の通知領域に配置されます。
Linuxでは、デスクトップ環境によってトレイの場所が異なります。

トレイアイコンの作成

Electronアプリでトレイアイコンを作成するためには、Trayクラスをインスタンス化して、プログラム上から作成する必要があります。このクラスのコンストラクタは、 NativeImageインスタンスもしくは互換性のあるアイコン画像へのパスを必要とします。

[!NOTE] ファイル形式は使用するOSによって異なります。詳しくは、TrayのAPIドキュメントの Platform Considerations を参照してください。

トレイを最小化する

全てのウィンドウが閉じられた状態でもアプリケーションを起動し続けトレイアイコンを表示するには、 app モジュールから発火されるwindow-all-closedイベントへのリスナー追加が必要です。基本の Electron テンプレートは一般的にこのイベントをリッスンしますが、WindowsとLinuxではアプリを終了して、標準の OS の動作をエミュレートします。

Setting up minimize to tray
app.on('window-all-closed', () => {
  // このリスナーを有効にするとアプリが終了しなくなります。
})

Menu クラスのインスタンスを tray.setContextMenu 関数に渡すことで、コンテキストメニューをトレイオブジェクトにアタッチできます。

[!NOTE] 通常の context menusと違い、トレイのコンテクストメニューはmenu.popup APIから手動で呼び出す必要はありません。代わりにTrayyオブジェクトは自動でクリックイベントを処理します。（ただし、より高度なユースケースに対応するため、さまざまなクリックイベント用のAPIは用意されています。）

Creating a Tray menu that can quit the app
const { nativeImage } = require('electron/common')
const { app, Tray, Menu } = require('electron/main')

// GCによって破棄されるのを避けるため、Trayオブジェクトを格納するグローバル変数を宣言します。
let tray

// 16x16サイズの赤丸アイコンへのURL
const icon = nativeImage.createFromDataURL('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACTSURBVHgBpZKBCYAgEEV/TeAIjuIIbdQIuUGt0CS1gW1iZ2jIVaTnhw+Cvs8/OYDJA4Y8kR3ZR2/kmazxJbpUEfQ/Dm/UG7wVwHkjlQdMFfDdJMFaACebnjJGyDWgcnZu1/lrCrl6NCoEHJBrDwEr5NrT6ko/UV8xdLAC2N49mlc5CylpYh8wCwqrvbBGLoKGvz8Bfq0QPWEUo/EAAAAASUVORK5CYII=')

// 'ready'イベントの発火後にのみTrayクラスはインスタンス化することができます。
app.whenReady().then(() => {
  tray = new Tray(icon)
  const contextMenu = Menu.buildFromTemplate([
    { role: 'quit' }
  ])
  tray.setContextMenu(contextMenu)
})

[!TIP] To learn more about crafting menus in Electron, see the Menus guide.

警告

enabledおよび visibilityプロパティは、macOSでのみトップレベルのメニューアイテムでは使用できません。

Runnable Fiddle demo

以下のFiddleでは実行可能なトレイを使用したコンテクストメニューの例がいくつか閲覧できます。コンテクストメニューを通じてアプリケーションの状態を変更したり、Trayクラスが提供するAPIと交信することができます。 fiddle docs/latest/fiddles/menus/tray-menu

トレイアイコンの作成​

トレイを最小化する​

Attaching a context menu​

Runnable Fiddle demo​

トレイアイコンの作成

トレイを最小化する

Attaching a context menu

Runnable Fiddle demo