Menu
クラス: Menu
ネイティブアプリケーションのメニューとコンテキストメニューを作成します。
プロセス: Main
new Menu()
新しいメニューを作成します
静的メソッド
Menu
クラスは以下の静的メソッドを持ちます。
Menu.setApplicationMenu(menu)
menu
Menu | null
macOS では、 menu
をアプリケーションメニューとして設定します。 Windows と Linux では、 menu
は各ウィンドウのトップメニューとして設定されます。
更に Windows と Linux では、最上位のアイテム名に &
を使用して、アクセラレータを生成させるときに取得する文字を指定できます。 たとえば、ファイルメニューに &File
を使用すると、その関連付けされたメニューを開く Alt-F
アクセラレータが生成されます。 ボタンラベルでその指定をした文字には下線が引かれ、&
文字はボタンラベルに表示されません。
メニューアイテム名の &
文字をエスケープするには、&
を続けて書きます。 例えば、&&File
とするとボタンラベルに &File
が表示されます。
null
を渡すと、既定のメニューが表示されなくなります。 Windows と Linux では、さらにウィンドウからメニューバーを削除します。
注: アプリが何も設定しない場合は自動でデフォルトメニューが作成されます。 これは ファイル
、編集
、表示
、ウィンドウ
、ヘルプ
のような標準のアイテムを含みます。
Menu.getApplicationMenu()
戻り値 Menu | null
- セットされていれば menu を、そうでなければ null
を返します。
注: 返される Menu
のインスタンスは、メニューアイテムの動的な追加または削除をサポートしていません。 インスタンス プロパティ は動的に変更ができます。
Menu.sendActionToFirstResponder(action)
macOS
action
string
action
をアプリケーションの最初のレスポンダーに送信します。 macOS メニューの既定の動作をエミュレートするために使用されます。 通常は MenuItem
の role
プロパティを使用します。
macOSネイティブなアクションに関してはmacOS Cocoa Event Handling Guideを参照してください。
Menu.buildFromTemplate(template)
template
(MenuItemConstructorOptions | MenuItem)[]
戻り値 Menu
一般的に、template
は MenuItem を構築するための options
の配列です。 使用方法は上記を参照できます。
template
の要素に他のフィールドを付けることもでき、それらは構築されたメニューアイテムのプロパティになります。
インスタンスメソッド
menu
オブジェクトには以下のメソッドがあります。
menu.popup([options])
この menu を BrowserWindow
内のコンテキストメニューとしてポップアップします。
menu.closePopup([browserWindow])
browserWindow
BrowserWindow (任意) - 省略値はフォーカスされたウインドウです。
browserWindow
内のこのコンテキストメニューを閉じます。
menu.append(menuItem)
menuItem
MenuItem
menu に menuItem
を追加します。
menu.getMenuItemById(id)
id
string
戻り値 MenuItem | null
- 指定した id
のアイテム。
menu.insert(pos, menuItem)
pos
IntegermenuItem
MenuItem
menu の pos
の位置に menuItem
を挿入します。
インスタンスイベント
new Menu
で作成されたオブジェクトまたは Menu.buildFromTemplate
によって返されたオブジェクトは、以下のイベントが発生します。
注: いくつかのイベントは特定のオペレーティングシステムでのみ利用可能で、そのように注記がつけられています。
イベント: 'menu-will-show'
戻り値:
event
Event
menu.popup()
が呼ばれたときに発生します。
イベント: 'menu-will-close'
戻り値:
event
Event
手動か menu.closePopup()
でポップアップが閉じられたときに発生します。
インスタンスプロパティ
menu
オブジェクトには更に以下の プロパティがあります。
menu.items
menu のアイテムが入った配列 MenuItem[]
。
それぞれの Menu
は複数の MenuItem
で構成され、それぞれの MenuItem
はサブメニューを持つことができます。
サンプル
以下は簡易テンプレート API でアプリケーションメニューを作成した例です。
const { app, Menu } = require('electron')
const isMac = process.platform === 'darwin'
const template = [
// { role: 'appMenu' }
...(isMac
? [{
label: app.name,
submenu: [
{ role: 'about' },
{ type: 'separator' },
{ role: 'services' },
{ type: 'separator' },
{ role: 'hide' },
{ role: 'hideOthers' },
{ role: 'unhide' },
{ type: 'separator' },
{ role: 'quit' }
]
}]
: []),
// { role: 'fileMenu' }
{
label: 'File',
submenu: [
isMac ? { role: 'close' } : { role: 'quit' }
]
},
// { role: 'editMenu' }
{
label: 'Edit',
submenu: [
{ role: 'undo' },
{ role: 'redo' },
{ type: 'separator' },
{ role: 'cut' },
{ role: 'copy' },
{ role: 'paste' },
...(isMac
? [
{ role: 'pasteAndMatchStyle' },
{ role: 'delete' },
{ role: 'selectAll' },
{ type: 'separator' },
{
label: 'Speech',
submenu: [
{ role: 'startSpeaking' },
{ role: 'stopSpeaking' }
]
}
]
: [
{ role: 'delete' },
{ type: 'separator' },
{ role: 'selectAll' }
])
]
},
// { role: 'viewMenu' }
{
label: 'View',
submenu: [
{ role: 'reload' },
{ role: 'forceReload' },
{ role: 'toggleDevTools' },
{ type: 'separator' },
{ role: 'resetZoom' },
{ role: 'zoomIn' },
{ role: 'zoomOut' },
{ type: 'separator' },
{ role: 'togglefullscreen' }
]
},
// { role: 'windowMenu' }
{
label: 'Window',
submenu: [
{ role: 'minimize' },
{ role: 'zoom' },
...(isMac
? [
{ type: 'separator' },
{ role: 'front' },
{ type: 'separator' },
{ role: 'window' }
]
: [
{ role: 'close' }
])
]
},
{
role: 'help',
submenu: [
{
label: 'Learn More',
click: async () => {
const { shell } = require('electron')
await shell.openExternal('https://electronjs.org')
}
}
]
}
]
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
レンダープロセス (render process)
レンダラープロセスが起点となってメニューを作成するには、IPC を使用して必要な情報をメインプロセスに送信し、メインプロセスがレンダラーに代わってメニューを表示するようにします。
以下は、ユーザーがページを右クリックしたときにメニューを表示する例です。
// レンダラー
window.addEventListener('contextmenu', (e) => {
e.preventDefault()
ipcRenderer.send('show-context-menu')
})
ipcRenderer.on('context-menu-command', (e, command) => {
// ...
})
// メイン
ipcMain.on('show-context-menu', (event) => {
const template = [
{
label: 'Menu Item 1',
click: () => { event.sender.send('context-menu-command', 'menu-item-1') }
},
{ type: 'separator' },
{ label: 'Menu Item 2', type: 'checkbox', checked: true }
]
const menu = Menu.buildFromTemplate(template)
menu.popup({ window: BrowserWindow.fromWebContents(event.sender) })
})