Electron – キーボードショートカットを設定する方法

概要

Electron でキーボードショートカットを設定する方法について、解説します。

キーボードの一覧

登録可能なキーボードショートカットの一覧は、Accelerator | Electron で確認できます。 修飾キー+キー または キー で指定します。

• 修飾キー
  • Control/Ctrl (または Ctrl)
  • CommandOrControl/CmdOrCtrl (Windows だと Ctrl、Mac だと Command)
  • Alt
  • Option (Mac)
  • Command/Cmd (Mac)
  • Shift

globalShortcut で登録する

グローバルショートカットは、アプリ起動中は、常に反応するショートカットです。最小化されている場合など、アプリケーションがフォーカスされていない場合も反応します。 使用するには、globalShortcut インタフェースを import して、globalShortcut.register() で登録します。 アプリの初期化後でないと使用できないので、whenReady() の履行ハンドラ内で呼び出します。 globalShortcut.register() は第一引数に登録したキーが押下されると、第二引数の関数が呼ばれます。 他のアプリケーションによって、登録しようとしたショートカットカットが使用できない場合、globalShortcut.register() は false を返します。

main.ts

import { app, BrowserWindow, globalShortcut } from "electron";

const createWindow = () => {
  const win = new BrowserWindow();
  win.loadFile("index.html");
};

app.whenReady().then(() => {
  const ret = globalShortcut.register("CommandOrControl+C", () => {
    console.log("Ctrl+C pressed.");
    app.quit();
  });

  if (!ret) {
    console.log('Registration failed.')
  }

  createWindow();
});

API

• GlobalShortcut.isRegistered(accelerator): キーボードショートカットが登録されているかどうか
• GlobalShortcut.register(accelerator, callback): キーボードショートカットを登録する
• GlobalShortcut.registerAll(accelerators, callback): 複数のキーボードショートカットをまとめて登録する
• GlobalShortcut.unregister(accelerator): キーボードショートカットの登録を解除する
• GlobalShortcut.unregisterAll(): キーボードショートカットの登録をすべて解除する

ローカルショートカット

グローバルショートカットは、アプリケーションがフォーカスされている場合のみ反応するショートカットです。最小化されている場合など、フォーカスされていない場合は反応しません。 ローカルアプリケーションは、メニューにアイテムを追加する形で登録します。

import { app, BrowserWindow, Menu, MenuItem } from "electron";

const createWindow = () => {
  const win = new BrowserWindow();
  win.loadFile("index.html");
};

// メニューを作成する。
const menu = new Menu();
// メニューにアイテムを追加する。
menu.append(
  new MenuItem({
    label: "Electron",
    submenu: [
      {
        role: "help",
        accelerator:
          // Windows の場合は Alt+Shift+I、Mac の場合は Alt+Cmd+I
          process.platform === "darwin" ? "Alt+Cmd+I" : "Alt+Shift+I",
        click: () => {
          console.log("Alt+Shift+I pressed.");
        },
      },
    ],
  })
);
// アプリケーションにメニューを設定する。
Menu.setApplicationMenu(menu);

app.whenReady().then(createWindow);

レンダラー単位のショートカット

指定のウィンドウのみで有効にしたいショートカットは、BrowserWindow.webContents で、キーが押されたときに発生するイベント before-input-event を購読することで処理します。キーが押下されると、before-input-event イベントが発生し、input 引数に押下されたキーの情報が格納されています。

import { app, BrowserWindow } from "electron";

const createWindow = () => {
  const win = new BrowserWindow();
  win.loadFile("index.html");

  win.webContents.on("before-input-event", (event, input) => {
    if (input.control && input.key.toLowerCase() === "i") {
      console.log("Ctrl+C pressed.");
      event.preventDefault();
    }
  });
};

app.whenReady().then(createWindow);