更に 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 メニューの既定の動作をエミュレートするために使用されます。 Usually you would use the role property of a MenuItem.

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

`Menu.buildFromTemplate(template)`

template (MenuItemConstructorOptions | MenuItem)[]

戻り値 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.
- 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 によって返されたオブジェクトは、以下のイベントが発生します。

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

戻り値：

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 とは全く異なるスタイルのアプリケーションメニューを持ちます。ここでは、アプリのメニューをよりネイティブのようにする方法について、いくつかの注意点を示します。

標準メニュー

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

window
help
services

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

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

メインメニュー名

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

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

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

メニューアイテムの位置

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

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

デフォルトでは、指定された位置指定キーワードのうち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

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 アプリケーションメニューについて

標準メニュー

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

メインメニュー名

特定のブラウザウィンドウのメニューの設定 (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 アプリケーションメニューについて​

標準メニュー​

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

メインメニュー名​

特定のブラウザウィンドウのメニューの設定 (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 アプリケーションメニューについて

標準メニュー

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

メインメニュー名

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

メニューアイテムの位置

サンプル