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

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

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

[!NOTE] The default menu will be created automatically if the app does not set one. It contains standard items such as File, Edit, View, Window and Help.

`Menu.getApplicationMenu()`

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

[!NOTE] The returned Menu instance doesn't support dynamic addition or removal of menu items. Instance properties can still be dynamically modified.

`Menu.sendActionToFirstResponder(action)` macOS

action string

action をアプリケーションの最初のレスポンダーに送信します。 macOS メニューの既定の動作をエミュレートするために使用されます。 Usually you would use the role property of a MenuItem.

See the macOS Cocoa Event Handling Guide for more information on macOS' native actions.

`Menu.buildFromTemplate(template)`

template (MenuItemConstructorOptions | MenuItem)[]

Returns Menu

Generally, the template is an array of options for constructing a MenuItem. 使用方法は上記を参照できます。

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

インスタンスメソッド

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

`menu.popup([options])`

options Object (任意)
- window BaseWindow (optional) - Default is the focused window.
- frame WebFrameMain (optional) - Provide the relevant frame if you want certain OS-level features such as Writing Tools on macOS to function correctly. Typically, this should be params.frame from the context-menu event on a WebContents, or the focusedFrame property of a WebContents.
- x number (任意) - 既定ではマウスカーソルの現在位置です。 y が宣言されている場合は宣言する必要があります。
- y number (任意) - 既定ではマウスカーソルの現在位置です。 x が宣言されている場合は宣言する必要があります。
- positioningItem number (任意) macOS - マウスカーソルの位置に配置するメニューアイテムのインデックス。既定値は -1 です。
- sourceType string (任意) Windows Linux - これは、context-menu イベントによって提供される menuSourceType と対応しなければなりません。この値の手動設定は非推奨です。他の API から受け取った値を与えるか、undefined のままにしておいてください。 none, mouse, keyboard, touch, touchMenu, longPress, longTap, touchHandle, stylus, adjustSelection, adjustSelectionReset のいずれかになります。
- callback Function (任意) - メニューが閉じたしたときに呼ばれます。

Pops up this menu as a context menu in the BaseWindow.

`menu.closePopup([window])`

window BaseWindow (optional) - Default is the focused window.

Closes the context menu in the window.

`menu.append(menuItem)`

menuItem MenuItem

menu に menuItem を追加します。

`menu.getMenuItemById(id)`

id string

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

`menu.insert(pos, menuItem)`

pos Integer
menuItem MenuItem

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

インスタンスイベント

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

[!NOTE] Some events are only available on specific operating systems and are labeled as such.

戻り値：

event Event

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

戻り値：

event Event

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

インスタンスプロパティ

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

`menu.items`

menu のアイテムが入った配列 MenuItem[]。

Each Menu consists of multiple MenuItems and each MenuItem can have a submenu.

サンプル

以下は簡易テンプレート 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) })
})

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

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

標準メニュー

On macOS there are many system-defined standard menus, like the Services and Windows menus. メニューを標準メニューにするには、メニューの role を次のいずれかに設定する必要があります。Electron はそれらを認識して標準メニューにします。

window
help
services

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

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

メインメニュー名

macOS のアプリケーションメニューの最初のアイテムのラベルは、設定した名前に関係なく、アプリ名になります。これを変えるには、アプリのバンドルの Info.plist ファイルを変更します。 See About Information Property List Files for more information.

Menu sublabels, or subtitles, can be added to menu items using the sublabel option. Below is an example based on the renderer example above:

// main
ipcMain.on('show-context-menu', (event) => {
  const template = [
    {
      label: 'Menu Item 1',
      sublabel: 'Subtitle 1',
      click: () => { event.sender.send('context-menu-command', 'menu-item-1') }
    },
    { type: 'separator' },
    { label: 'Menu Item 2', sublabel: 'Subtitle 2', type: 'checkbox', checked: true }
  ]
  const menu = Menu.buildFromTemplate(template)
  menu.popup({ window: BrowserWindow.fromWebContents(event.sender) })
})

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

The setMenu method of browser windows can set the menu of certain browser windows.

メニューアイテムの位置

You can make use of before, after, beforeGroupContaining, afterGroupContaining and id to control how the item will be placed when building a menu with Menu.buildFromTemplate.

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

By default, items will be inserted in the order they exist in the template unless one of the specified positioning keywords is used.

サンプル

Template:

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

Menu:

- 1
- 2
- 3
- 4

Template:

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

Menu:

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

Template:

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

Menu:

- ---
- 3
- 2
- 1

Menu

クラス: Menu

`new Menu()`

静的メソッド

`Menu.setApplicationMenu(menu)`

`Menu.getApplicationMenu()`

`Menu.sendActionToFirstResponder(action)` macOS

`Menu.buildFromTemplate(template)`

インスタンスメソッド

`menu.popup([options])`

`menu.closePopup([window])`

`menu.append(menuItem)`

`menu.getMenuItemById(id)`

`menu.insert(pos, menuItem)`

インスタンスイベント

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

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

インスタンスプロパティ

`menu.items`

サンプル

レンダープロセス (render process)

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

標準メニュー

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

メインメニュー名

Menu Sublabels

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

メニューアイテムの位置

サンプル

クラス: Menu​

new Menu()​

静的メソッド​

Menu.setApplicationMenu(menu)​

Menu.getApplicationMenu()​

Menu.sendActionToFirstResponder(action) macOS​

Menu.buildFromTemplate(template)​

インスタンスメソッド​

menu.popup([options])​

menu.closePopup([window])​

menu.append(menuItem)​

menu.getMenuItemById(id)​

menu.insert(pos, menuItem)​

インスタンスイベント​

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

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

インスタンスプロパティ​

menu.items​

サンプル​

レンダープロセス (render process)​

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

標準メニュー​

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

メインメニュー名​

Menu Sublabels​

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

メニューアイテムの位置​

サンプル​

クラス: Menu

`new Menu()`

静的メソッド

`Menu.setApplicationMenu(menu)`

`Menu.getApplicationMenu()`

`Menu.sendActionToFirstResponder(action)` macOS

`Menu.buildFromTemplate(template)`

インスタンスメソッド

`menu.popup([options])`

`menu.closePopup([window])`

`menu.append(menuItem)`

`menu.getMenuItemById(id)`

`menu.insert(pos, menuItem)`

インスタンスイベント

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

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

インスタンスプロパティ

`menu.items`

サンプル

レンダープロセス (render process)

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

標準メニュー

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

メインメニュー名

Menu Sublabels

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

メニューアイテムの位置

サンプル