Menu
menuクラスは、アプリケーションのメニューとコンテキストメニューとして使えるネイティブメニューを作成するのに使われます。このモジュールは、remoteモジュール経由でレンダラープロセスで使用できるメインプロセスのモジュールです。
個々のメニューは複数のmenu itemsで成り立ち、個々のメニューアイテムはサブメニューを持てます。
以下は、ユーザーはページを右クリックした時、remoteモジュールを作成するために、（レンダラープロセス）ウェブページで動的にメニューを作成して、表示します。
<!-- index.html -->
<script>
const remote = require('electron').remote;
const Menu = remote.Menu;
const MenuItem = remote.MenuItem;
var menu = new Menu();
menu.append(new MenuItem({ label: 'MenuItem1', click: function() { console.log('item 1 clicked'); } }));
menu.append(new MenuItem({ type: 'separator' }));
menu.append(new MenuItem({ label: 'MenuItem2', type: 'checkbox', checked: true }));
window.addEventListener('contextmenu', function (e) {
e.preventDefault();
menu.popup(remote.getCurrentWindow());
}, false);
</script>シンプルなテンプレートAPIでレンダラープロセスでアプリケーションメニューを作成する例です。
var template = [
{
label: 'Edit',
submenu: [
{
label: 'Undo',
accelerator: 'CmdOrCtrl+Z',
role: 'undo'
},
{
label: 'Redo',
accelerator: 'Shift+CmdOrCtrl+Z',
role: 'redo'
},
{
type: 'separator'
},
{
label: 'Cut',
accelerator: 'CmdOrCtrl+X',
role: 'cut'
},
{
label: 'Copy',
accelerator: 'CmdOrCtrl+C',
role: 'copy'
},
{
label: 'Paste',
accelerator: 'CmdOrCtrl+V',
role: 'paste'
},
{
label: 'Select All',
accelerator: 'CmdOrCtrl+A',
role: 'selectall'
}
]
},
{
label: 'View',
submenu: [
{
label: 'Reload',
accelerator: 'CmdOrCtrl+R',
click: function (item, focusedWindow) {
if (focusedWindow) focusedWindow.reload()
}
},
{
label: 'Toggle Full Screen',
accelerator: (function () {
if (process.platform === 'darwin') {
return 'Ctrl+Command+F'
} else {
return 'F11'
}
})(),
click: function (item, focusedWindow) {
if (focusedWindow) {
focusedWindow.setFullScreen(!focusedWindow.isFullScreen())
}
}
},
{
label: 'Toggle Developer Tools',
accelerator: (function () {
if (process.platform === 'darwin') {
return 'Alt+Command+I'
} else {
return 'Ctrl+Shift+I'
}
})(),
click: function (item, focusedWindow) {
if (focusedWindow) focusedWindow.toggleDevTools()
}
}
]
},
{
label: 'Window',
role: 'window',
submenu: [
{
label: 'Minimize',
accelerator: 'CmdOrCtrl+M',
role: 'minimize'
},
{
label: 'Close',
accelerator: 'CmdOrCtrl+W',
role: 'close'
}
]
},
{
label: 'Help',
role: 'help',
submenu: [
{
label: 'Learn More',
click: function () { require('electron').shell.openExternal('https://electron.atom.io') }
}
]
}
]
if (process.platform === 'darwin') {
var name = require('electron').remote.app.getName()
template.unshift({
label: name,
submenu: [
{
label: 'About ' + name,
role: 'about'
},
{
type: 'separator'
},
{
label: 'Services',
role: 'services',
submenu: []
},
{
type: 'separator'
},
{
label: 'Hide ' + name,
accelerator: 'Command+H',
role: 'hide'
},
{
label: 'Hide Others',
accelerator: 'Command+Alt+H',
role: 'hideothers'
},
{
label: 'Show All',
role: 'unhide'
},
{
type: 'separator'
},
{
label: 'Quit',
accelerator: 'Command+Q',
click: function () { app.quit() }
}
]
})
// Window menu.
template[3].submenu.push(
{
type: 'separator'
},
{
label: 'Bring All to Front',
role: 'front'
}
)
}
var menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)クラス: Menu
new Menu()
新しいメニューを作成します。
メソッド
menuクラスーは次のメソッドを持ちます。
Menu.setApplicationMenu(menu)
menuMenu
macOSで、アプリケーションメニューとしてmenuを設定します。WindowsとLinuxでは、menuはそれぞれのウィンドウの上のメニューとして設定されます。
Menu.sendActionToFirstResponder(action) macOS
actionString
アプリケーションの最初のレスポンダーにactionが送信されます。規定のCocoaメニュー動作をエミュレートするために使われ、通常はMenuItemのroleプロパティーを使います。
Menu.buildFromTemplate(template)
templateArray
一般的に、templateは、MenuItemを組み立てるための options配列です。使用方法は下のように参照します。
ほかのフィールドにtemplateの項目を設定でき、メニューアイテムを構成するプロパティです。
Menu.popup([browserWindow, x, y, positioningItem])
browserWindowBrowserWindow (オプション) - 既定ではnullです。xNumber (オプション) - 既定では -1です。yNumber (必須xが使われている場合) - 既定では -1です。positioningItemNumber (オプション) macOS - 既定では -1です。
メニューアイテムのインデックスを指定した座標にマウスカーソルを配置します。
browserWindowでコンテキストメニューとしてメニューをポップアップします。メニューを表示する場所をオプションでx, y座標を指定でき、指定しなければ現在のマウスカーソル位置に表示します。
Menu.append(menuItem)
menuItemMenuItem
メニューにmenuItemを追加します。
Menu.insert(pos, menuItem)
posIntegermenuItemMenuItem
メニューのpos位置にmenuItemを追加します。
Menu.items()
メニューのアイテムを収容した配列を取得します。
macOS アプリケーションメニューの注意事項
macOSは、WindowsとLinuxのアプリケーションのメニューとは完全に異なるスタイルを持ち、よりネイティブのようにアプリメニューを作成するのに幾つかの注意事項があります。
標準的なメニュー
macOSでは、ServicesとWindowsメニューのように定義された標準的な多くのメニューがあります。標準的なメニューを作成するために、メニューのroleに次のどれかを設定する必要があり、Electronはそれを受けて標準的なメニューを作成します。
windowhelpservices
標準的なメニューアイテムの動作
About xxxとHide xxx、Hide Othersのようないくつかのメニューアイテム用にmacOSは標準的な動作を提供します。メニューアイテムの動作に標準的な動作を設定するために、メニューアイテムのrole属性を設定すべきです。
メインのメニュー名
macOSでは、設定したラベルに関係なく、アプリケーションの最初のアイテムのラベルはいつもアプリの名前です。変更するために、アプリにバンドルされているInfo.plistファイルを修正してアプリの名前を変更する必要があります。詳細は、 About Information Property List Files を見てください。
メニューアイテムの位置
positionを使用することができ、Menu.buildFromTemplateでメニューを構築するときにidがアイテムを配置する方法をコントロールします。
MenuItemのposition属性は、[placement]=[id]をもち、 placementはbeforeや after、 endofの一つが設定され、idはメニューの設定されているアイテムで一意のIDです。
before- IDから参照したアイテムの前にアイテムを挿入します。参照するアイテムが存在しないのなら、メニューの最後にアイテムが挿入されます。after- IDから参照したアイテムの後にアイテムを挿入します。参照するアイテムが存在しないのなら、メニューの最後にアイテムが挿入されます。endof-IDから参照したアイテムを含む論理グループの最後にアイテムを挿入します（グループはアイテムを分けるために作成されます）。参照するアイテムが存在しないのなら、付与されたIDで新しい分離グループが作成され、そのグループのあとにアイテムが挿入されます。
アイテムが配置されたとき、新しいアイテムが配置されるまで、すべての配置されていないアイテムがその後に挿入されます。同じ場所にメニューアイテムのグループを配置したいのなら、最初にアイテムで場所を指定する必要があります。
具体例
テンプレート:
[
{label: '4', id: '4'},
{label: '5', id: '5'},
{label: '1', id: '1', position: 'before=4'},
{label: '2', id: '2'},
{label: '3', id: '3'}
]メニュー:
- 1
- 2
- 3
- 4
- 5テンプレート:
[
{label: 'a', position: 'endof=letters'},
{label: '1', position: 'endof=numbers'},
{label: 'b', position: 'endof=letters'},
{label: '2', position: 'endof=numbers'},
{label: 'c', position: 'endof=letters'},
{label: '3', position: 'endof=numbers'}
]メニュー:
- ---
- a
- b
- c
- ---
- 1
- 2
- 3