Edited at

ElectronのMenuのカスタマイズ

More than 1 year has passed since last update.


概要

Electron の Menu のカスタマイズ方法


Menu のカスタマイズ

Electron の設定を書いているファイルに以下を記述


app.jsの一部

// Electron

const {app, Menu, BrowserWindow} = require('electron');

// ElectronのMenuの設定
const templateMenu = [
{
label: 'Edit',
submenu: [
{
role: 'undo',
},
{
role: 'redo',
},
]
},
{
label: 'View',
submenu: [
{
label: 'Reload',
accelerator: 'CmdOrCtrl+R',
click(item, focusedWindow){
if(focusedWindow) focusedWindow.reload()
},
},
{
type: 'separator',
},
{
role: 'resetzoom',
},
{
role: 'zoomin',
},
{
role: 'zoomout',
},
{
type: 'separator',
},
{
role: 'togglefullscreen',
}
]
}
];

const menu = Menu.buildFromTemplate(templateMenu);
Menu.setApplicationMenu(menu);


label が 表示名です。最初の階層の label では、Menu 部分に表示されます。また、submenu は表示されている Menu の Dropdown 部分です。

予め用意されている role もあるみたいですが、個人的に追加したいものは、click とかで追記すれば良さそう。

実行結果としてはこんな感じ。

menu.png


role の種類

Macはよく分からないので、調べて何となくわかったものだけ書いてます。しかし、role はこんなに種類あるみたいです。基本的なものを用意してくれているのでうれしいですね。

role名
意味
備考

undo
戻る

redo
進む

cut
切り取り

copy
コピー

paste
貼り付け

pasteandmatchstyle
?

selectall
すべて選択

delete
削除

minimize
最小化(タスクバーに逃げるやつ)

close
ウィンドウを閉じる

quit
ウィンドウを閉じる

togglefullscreen
フルスクリーンにする

resetzoom
拡大縮小の解除

zoomin
拡大

zoomout
縮小

about
Aboutパネルを出すらしい
MacOSのみ

hide

MacOSのみ

hideothers

MacOSのみ

unhide

MacOSのみ

startspeaking

MacOSのみ

stopspeaking

MacOSのみ

front

MacOSのみ

zoom
たぶん拡大
MacOSのみ

window

MacOSのみ

help

MacOSのみ

services

MacOSのみ