更に 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])`

options Object (任意)
- window BrowserWindow (任意) - 省略値はフォーカスされたウインドウです。
- 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 (任意) - メニューが閉じたしたときに呼ばれます。

この 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 Integer
menuItem MenuItem

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

インスタンスイベント

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

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

戻り値：

event Event

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

戻り値：

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) })
})

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)

ブラウザウインドウの 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

Menu

クラス: Menu

`new Menu()`

静的メソッド

`Menu.setApplicationMenu(menu)`

`Menu.getApplicationMenu()`

`Menu.sendActionToFirstResponder(action)` macOS

`Menu.buildFromTemplate(template)`

インスタンスメソッド

`menu.popup([options])`

`menu.closePopup([browserWindow])`

`menu.append(menuItem)`

`menu.getMenuItemById(id)`

`menu.insert(pos, menuItem)`

インスタンスイベント

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

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

インスタンスプロパティ

`menu.items`

サンプル

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

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

標準メニュー

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

メインメニュー名

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

メニューアイテムの位置

サンプル

Menu

クラス: Menu​

new Menu()​

静的メソッド​

Menu.setApplicationMenu(menu)​

Menu.getApplicationMenu()​

Menu.sendActionToFirstResponder(action) macOS​

Menu.buildFromTemplate(template)​

インスタンスメソッド​

menu.popup([options])​

menu.closePopup([browserWindow])​

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([browserWindow])`

`menu.append(menuItem)`

`menu.getMenuItemById(id)`

`menu.insert(pos, menuItem)`

インスタンスイベント

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

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

インスタンスプロパティ

`menu.items`

サンプル

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

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

標準メニュー

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

メインメニュー名

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

メニューアイテムの位置

サンプル