アプリケーションメニュー

それぞれのElectronアプリには、1つのトップレベルのアプリケーションメニューがあります。

macOS では、このメニューはシステムのメニューバーに表示されます。
Windows と Linux では、このメニューは各 BaseWindow の上部に表示されます。

アプリケーションメニューの構築

アプリケーションメニューは、Menu インスタンスを Menu.setApplicationMenu 静的関数に渡すことで設定できます。

Electron でアプリケーションメニューを構築する場合、最上位の配列のメニューアイテムはそれぞれ サブメニュー である必要があります。

この API が呼び出されない場合、Electron はアプリデフォルトのメニューを設定します。以下は、略記である MenuItem ロールを使用してデフォルトメニューを手動作成した例です。

Manually creating the default menu
const { shell } = require('electron/common')
const { app, Menu } = require('electron/main')

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)

info

macOS では、アプリケーションメニューの最初のサブメニューのラベルには常にアプリケーションの名前が表示されます。一般に、appMenu ロールを持つメニューアイテムを条件付きで追加することで、このサブメニューに機能を追加できます。

ヒント

さらなる利用可能なロールの説明については、一般的なメニューのガイドの MenuItem ロールの節をご参照ください。

OS 標準のメニューのロールを使用する

各サブメニューの明示的定義は、非常に冗長になることがあります。アプリデフォルトのサブメニューを再利用したい場合は、Electron が提供するさまざまなサブメニュー関連のロールを使用できます。

Using default roles for each submenu
const { shell } = require('electron/common')
const { app, Menu } = require('electron/main')

const template = [
  ...(process.platform === 'darwin'
    ? [{ role: 'appMenu' }]
    : []),
  { role: 'fileMenu' },
  { role: 'editMenu' },
  { role: 'viewMenu' },
  { role: 'windowMenu' },
  {
    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)

note

macOS での help ロールは、他のメニューアイテムのための検索バーを持つ最上位のヘルプサブメニューの定義です。この検索バーを機能させるには、その submenu にアイテムを追加する必要があります。

ウインドウ固有のアプリケーションメニューの設定 Linux Windows

Windows および Linux の各 BaseWindow にはルートのアプリケーションメニューが存在するため、win.setMenu メソッドを使用してウインドウ固有の Menu インスタンスでオーバーライドできます。

Override a window
const { BrowserWindow, Menu } = require('electron/main')

const win = new BrowserWindow()
const menu = Menu.buildFromTemplate([
  {
    label: 'my custom menu',
    submenu: [
      { role: 'copy' },
      { role: 'paste' }
    ]
  }
])
win.setMenu(menu)

ヒント

win.removeMenu API を呼び出すことで、特定のウインドウのアプリケーションメニューを削除できます。