Electronで複数のショートカットに同じ動作を割り当てる

8863 ワード
Electron Accelerator Electron テキストリンク

Electronのメニューで拡大 (Ctrl + プラス) や縮小 (Ctrl + マイナス) を通常のキーでもテンキーでも動作させたかった時のメモ

試したバージョン

Electron 13.1.5

ダメな例

acceleratorに配列で指定できたら素敵、とか思ったけど甘かった。
issueにはそれっぽいのが上がっていたが、解決策は↓の例と同じ。

let template: { label: string; submenu: any }[] = [
  {
    label: "表示",
    submenu: [
      {
        label: "拡大率を戻す",
        accelerator: ["CmdOrCtrl+0", "CmdOrCtrl+num0"],
        role: "resetZoom",
      },
      {
        label: "拡大",
        accelerator: ["CmdOrCtrl+Plus", "CmdOrCtrl+numadd"],
        role: "zoomIn",
      },
      {
        label: "縮小",
        accelerator: ["CmdOrCtrl+-", "CmdOrCtrl+numsub"],
        role: "zoomOut",
      },
    ],
  },
]

上手くいった例

  1. 同じ動作でacceleratorの違うメニューを複数登録
  2. 表示したくないメニューに以下を指定する
    • visible: false : 項目を非表示にする
    • acceleratorWorksWhenHidden: true : 非表示でもacceleratorは動作させる
let template: { label: string; submenu: any }[] = [
  {
    label: "表示",
    submenu: [
      {
        label: "拡大率を戻す",
        accelerator: "CmdOrCtrl+0",
        role: "resetZoom",
      },
      {
        label: "拡大率を戻す",
        accelerator: "CmdOrCtrl+num0",
        role: "resetZoom",
        visible: false,
        acceleratorWorksWhenHidden: true,
      },
      {
        label: "拡大",
        accelerator: "CmdOrCtrl+Plus",
        role: "zoomIn",
      },
      {
        label: "拡大",
        accelerator: "CmdOrCtrl+numadd",
        role: "zoomIn",
        visible: false,
        acceleratorWorksWhenHidden: true,
      },
      {
        label: "縮小",
        accelerator: "CmdOrCtrl+-",
        role: "zoomOut",
      },
      {
        label: "縮小",
        accelerator: "CmdOrCtrl+numsub",
        role: "zoomOut",
        visible: false,
        acceleratorWorksWhenHidden: true,
      },
    ],
  },
]

終わりに

メニューにバインドするのやめてイベントハンドラで拾う手もあったかもしれない。
きったないけど動かないより全然良いので我慢。