Help us understand the problem. What is going on with this article?

ElectronのMenuのカスタマイズ

More than 3 years have 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のみ
idom
自動車流通業界の常識を覆すビジネスに挑戦し、ITを活用して移動という手段に新たな価値を創出することをミッションとしています。
https://221616.com/idom/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away