メインコンテンツへ飛ぶ

Menu

クラス: Menu

ネイティブアプリケーションのメニューとコンテキストメニューを作成します。

プロセス: Main

new Menu()

新しいメニューを作成します

静的メソッド

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

  • menu Menu | null

macOS では、 menu をアプリケーションメニューとして設定します。 Windows と Linux では、 menu は各ウィンドウのトップメニューとして設定されます。

更に Windows と Linux では、最上位のアイテム名に & を使用して、アクセラレータを生成させるときに取得する文字を指定できます。 たとえば、ファイルメニューに &File を使用すると、その関連付けされたメニューを開く Alt-F アクセラレータが生成されます。 ボタンラベルでその指定をした文字には下線が引かれ、& 文字はボタンラベルに表示されません。

メニューアイテム名の & 文字をエスケープするには、& を続けて書きます。 例えば、&&File とするとボタンラベルに &File が表示されます。

null を渡すと、既定のメニューが表示されなくなります。 Windows と Linux では、さらにウィンドウからメニューバーを削除します。

注: アプリが何も設定しない場合は自動でデフォルトメニューが作成されます。 これは ファイル編集表示ウィンドウヘルプ のような標準のアイテムを含みます。

戻り値 Menu | null - セットされていれば menu を、そうでなければ null を返します。

注: 返される Menu のインスタンスは、メニューアイテムの動的な追加または削除をサポートしていません。 インスタンス プロパティ は動的に変更ができます。

  • action String

action をアプリケーションの最初のレスポンダーに送信します。 macOS メニューの既定の動作をエミュレートするために使用されます。 通常は MenuItemrole プロパティを使用します。

macOSネイティブなアクションに関してはmacOS Cocoa Event Handling Guideを参照してください。

  • template (MenuItemConstructorOptions | MenuItem)[]

戻り値 Menu

一般的に、templateMenuItem を構築するための options の配列です。 使用方法は上記を参照できます。

template の要素に他のフィールドを付けることもでき、それらは構築されたメニューアイテムのプロパティになります。

インスタンスメソッド

menu オブジェクトには以下のメソッドがあります。

  • options Object (任意)
    • window BrowserWindow (任意) - 省略値はフォーカスされたウインドウです。
    • x Number (任意) - 既定ではマウスカーソルの現在位置です。 y が宣言されている場合は宣言する必要があります。
    • y Number (任意) - 既定ではマウスカーソルの現在位置です。 x が宣言されている場合は宣言する必要があります。
    • positioningItem Number (任意) macOS - マウスカーソルの位置に配置するメニューアイテムのインデックス。 既定値は -1 です。
    • callback Function (任意) - メニューが閉じたしたときに呼ばれます。

この menu を BrowserWindow 内のコンテキストメニューとしてポップアップします。

  • browserWindow BrowserWindow (任意) - 省略値はフォーカスされたウインドウです。

browserWindow 内のこのコンテキストメニューを閉じます。

menu に menuItem を追加します。

  • id String

戻り値 MenuItem | null - 指定した id のアイテム。

menu の pos の位置に menuItem を挿入します。

インスタンスイベント

new Menu で作成されたオブジェクトまたは Menu.buildFromTemplate によって返されたオブジェクトは、以下のイベントが発生します。

注: いくつかのイベントは特定のオペレーティングシステムでのみ利用可能で、そのように注記がつけられています。

イベント: 'menu-will-show'

戻り値:

  • event Event

menu.popup() が呼ばれたときに発生します。

イベント: 'menu-will-close'

戻り値:

  • event Event

手動か menu.closePopup() でポップアップが閉じられたときに発生します。

インスタンスプロパティ

menu オブジェクトには更に以下のプロパティがあります。

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: 'ファイル',
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(BrowserWindow.fromWebContents(event.sender))
})

macOS アプリケーションメニューについて

macOS は、Windows 及び Linux とは全く異なるスタイルのアプリケーションメニューを持ちます。 ここでは、アプリのメニューをよりネイティブのようにする方法について、いくつかの注意点を示します。

標準メニュー

macOS ではシステムが定義する標準メニューがいくつかある。例えば、サービスウインドウ メニューが該当する。 メニューを標準メニューにするには、メニューの role を次のいずれかに設定する必要があります。Electron はそれらを認識して標準メニューにします。

  • window
  • help
  • services

標準メニューアイテムアクション

macOS はいくつかのメニューアイテムに、About xxxHide xxxHide Others といった標準アクションを提供しています。 メニューアイテムのアクションを標準アクションに設定するには、メニューアイテムの role 属性を設定する必要があります。

メインメニュー名

macOS のアプリケーションメニューの最初のアイテムのラベルは、設定した名前に関係なく、アプリ名になります。 これを変えるには、アプリのバンドルの Info.plist ファイルを変更します。 より詳しくは、Information Property List ファイルについて をご参照ください。

特定のブラウザウィンドウのメニューの設定 (Linux Windows)

ブラウザウインドウの setMenu メソッド は、特定のブラウザウインドウのメニューを設定できます。

メニューアイテムの位置

Menu.buildFromTemplate でメニューを構築するとき、アイテムをどのように配置するかを制御するのに、before, after, beforeGroupContaining, afterGroupContaining, id が使用できます。

  • before - 指定したラベルの前にこのアイテムを挿入します。 参照された項目が存在しない場合、アイテムはメニューの最後に挿入されます。 また、与えられたメニューアイテムをそのアイテムと同じ「グループ」に配置する必要があることを意味します。
  • after - 指定したラベルの後にこのアイテムを挿入します。 参照された項目が存在しない場合、アイテムはメニューの最後に挿入されます。 また、与えられたメニューアイテムをそのアイテムと同じ「グループ」に配置する必要があることを意味します。
  • beforeGroupContaining - 単一のコンテキストメニューで、指定されたラベルのアイテムを含むグループの前に、そのグループの配置を宣言する手段を提供します。
  • afterGroupContaining - 単一のコンテキストメニューで、指定されたラベルのアイテムを含むグループの後に、そのグループの配置を宣言する手段を提供します。

デフォルトでは、指定された位置指定キーワードのうち1つも使用されていない限り、アイテムはテンプレートに存在する順序で挿入されます。

サンプル

テンプレート:

[
{ id: '1', label: 'one' },
{ id: '2', label: 'two' },
{ id: '3', label: 'three' },
{ id: '4', label: 'four' }
]

メニュー:

- 1
- 2
- 3
- 4

テンプレート:

[
{ id: '1', label: 'one' },
{ type: 'separator' },
{ id: '3', label: 'three', beforeGroupContaining: ['1'] },
{ id: '4', label: 'four', afterGroupContaining: ['2'] },
{ type: 'separator' },
{ id: '2', label: 'two' }
]

メニュー:

- 3
- 4
- ---
- 1
- ---
- 2

テンプレート:

[
{ id: '1', label: 'one', after: ['3'] },
{ id: '2', label: 'two', before: ['1'] },
{ id: '3', label: 'three' }
]

メニュー:

- ---
- 3
- 2
- 1