Menu

クラス: Menu

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

プロセス: メイン

new Menu()

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

静的メソッド

Menuクラスには、次の静的メソッドがあります。

Menu.setApplicationMenu(menu)

• menu Menu | null

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

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

項目名で`&`文字をエスケープするには、前に`&`を追加します。たとえば、`&&File`はボタンラベルに`&File`と表示されます。

nullを渡すと、デフォルトのメニューが抑制されます。WindowsとLinuxでは、これはウィンドウからメニューバーを削除するという追加の効果があります。

注: アプリケーションがメニューを設定しない場合、デフォルトのメニューが自動的に作成されます。これには、`ファイル`、`編集`、`表示`、`ウィンドウ`、`ヘルプ`などの標準項目が含まれています。

Menu.getApplicationMenu()

戻り値 Menu | null - アプリケーションメニューが設定されている場合はそのメニュー、設定されていない場合はnull。

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

Menu.sendActionToFirstResponder(action) macOS

• action string

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

macOSのネイティブアクションの詳細については、macOS Cocoaイベント処理ガイドを参照してください。

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 (オプション) - メニューが閉じられたときに呼び出されます。

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

menu.closePopup([browserWindow])

• browserWindow BrowserWindow (オプション) - デフォルトはフォーカスされているウィンドウです。

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

menu.append(menuItem)

• menuItem MenuItem

menuItemをメニューに追加します。

menu.getMenuItemById(id)

• id string

戻り値 MenuItem | null 指定されたidを持つ項目。

menu.insert(pos, menuItem)

• pos Integer
• menuItem MenuItem

menuItemをメニューのposの位置に挿入します。`

インスタンスイベント

new Menuで作成されたオブジェクト、またはMenu.buildFromTemplateから返されたオブジェクトは、次のイベントを発行します。

注: 一部のイベントは特定のオペレーティングシステムでのみ使用でき、そのようにラベル付けされています。

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

戻り値

• event Event

menu.popup()が呼び出されたときに発行されます。

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

戻り値

• event Event

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

インスタンスプロパティ

menuオブジェクトには、次のプロパティもあります。

menu.items

メニューの項目を含む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://electron.dokyumento.jp')
        }
      }
    ]
  }
]

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

レンダラープロセス

レンダラープロセスによって開始されたメニューを作成するには、必要な情報をIPCを使用してメインプロセスに送信し、メインプロセスにレンダラーの代わりにメニューを表示させます。

以下は、ユーザーがページを右クリックしたときにメニューを表示する例です。

// renderer
window.addEventListener('contextmenu', (e) => {
  e.preventDefault()
  ipcRenderer.send('show-context-menu')
})

ipcRenderer.on('context-menu-command', (e, command) => {
  // ...
})

// main
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では、xxxについて、xxxを隠す、その他を隠すなど、いくつかのメニュー項目に標準アクションが用意されています。メニュー項目のアクションを標準アクションに設定するには、メニュー項目のrole属性を設定する必要があります。

メインメニューの名前

macOSでは、アプリケーションメニューの最初の項目のラベルは、設定したラベルに関係なく、常にアプリの名前になります。これを変更するには、アプリバンドルのInfo.plistファイルを修正します。詳しくは、情報プロパティリストファイルについてを参照してください。

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

ブラウザウィンドウのsetMenuメソッドを使用すると、特定のブラウザウィンドウのメニューを設定できます。

メニュー項目の位置

Menu.buildFromTemplateでメニューを作成する際に、before、after、beforeGroupContaining、afterGroupContaining、idを使用して、項目の配置方法を制御できます。

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

デフォルトでは、指定された配置キーワードのいずれかが使用されない限り、項目はテンプレートに存在する順序で挿入されます。

例

テンプレート

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

Menu

- 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' }
]

Menu

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

テンプレート

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

Menu

- ---
- 3
- 2
- 1