トレイメニュー
このガイドでは、独自のコンテキストメニューを持つアイコンをシステムトレイに作成する手順を説明します。
- macOS では、アイコンはメニューバー画面の右上隅に配置されます。
- Windowsでは、アイコンはタスクバーの最後の 通知領域に配置されます。
- Linuxでは、デスクトップ環境によってトレイの場所が異なります。
トレイアイコンの作成
Electronアプリでトレイアイコンを作成するためには、Trayクラスをインスタンス化して、プログラム上から作成する必要があります。 このクラスのコンストラクタは、 NativeImageインスタンスもしくは互換性のあるアイコン画像へのパスを必要とします。
[!NOTE] ファイル形式は使用するOSによって異なります。 詳しくは、TrayのAPIドキュメントの Platform Considerations を参照してください。
トレイを最小化する
全てのウィンドウが閉じられた状態でもアプリケーションを起動し続けトレイアイコンを表示するには、 app
モジュールから発火されるwindow-all-closed
イベントへのリスナー追加が必要です。 基本の Electron テンプレートは一般的にこのイベントをリッスンしますが、WindowsとLinuxではアプリを終了して、標準の OS の動作をエミュレートします。
app.on('window-all-closed', () => {
// このリスナーを有効にするとアプリが終了しなくなります。
})
Attaching a context menu
Menu クラスのインスタンスを tray.setContextMenu
関数に渡すことで、コンテキストメニューをトレイオブジェクトにアタッチできます。
[!NOTE] 通常の context menusと違い、トレイのコンテクストメニューは
menu.popup
APIから手動で呼び出す必要はありません。 代わりにTrayyオブジェクトは自動でクリックイベントを処理します。(ただし、より高度なユースケースに対応するため、さまざまなクリックイベント用のAPIは用意されています。)
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