ElectronのMenuのカスタマイズ

概要

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 とかで追記すれば良さそう。

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

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のみ