本文へスキップ

キーボードショートカット

概要​

この機能を使用すると、Electronアプリケーションのローカルおよびグローバルキーボードショートカットを設定できます。

例​

ローカルショートカット​

ローカルキーボードショートカットは、アプリケーションがフォーカスされている場合にのみトリガーされます。acceleratorプロパティをMenuモジュール内のMenuItemを作成する際に指定することで、ローカルキーボードショートカットを設定できます。

クイックスタートガイドから動作するアプリケーションを基に、main.jsを次のように更新します。

docs/fiddles/features/keyboard-shortcuts/local (33.0.1)Fiddleで開く
const { app, BrowserWindow, Menu, MenuItem } = require('electron/main')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

const menu = new Menu()
menu.append(new MenuItem({
  label: 'Electron',
  submenu: [{
    role: 'help',
    accelerator: process.platform === 'darwin' ? 'Alt+Cmd+I' : 'Alt+Shift+I',
    click: () => { console.log('Electron rocks!') }
  }]
}))

Menu.setApplicationMenu(menu)

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

注：上記のコードでは、アクセラレータがユーザーのオペレーティングシステムによって異なることがわかります。macOSの場合はAlt+Cmd+I、LinuxおよびWindowsの場合はAlt+Shift+Iです。

Electronアプリケーションを起動した後、アプリケーションメニューと、定義したローカルショートカットが表示されます。

Menu with a local shortcut

「ヘルプ」をクリックするか、定義したアクセラレータを押して、Electronアプリケーションを実行したターミナルを開くと、clickイベントをトリガーした後に生成されたメッセージ「Electron rocks!」が表示されます。

グローバルショートカット​

グローバルキーボードショートカットを設定するには、アプリケーションがキーボードフォーカスを持っていない場合でもキーボードイベントを検出するために、globalShortcutモジュールを使用する必要があります。

クイックスタートガイドから動作するアプリケーションを基に、main.jsを次のように更新します。

docs/fiddles/features/keyboard-shortcuts/global (33.0.1)Fiddleで開く
const { app, BrowserWindow, globalShortcut } = require('electron/main')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  globalShortcut.register('Alt+CommandOrControl+I', () => {
    console.log('Electron loves global shortcuts!')
  })
}).then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

注：上記のコードでは、CommandOrControlの組み合わせは、macOSではCommand、Windows/LinuxではControlを使用しています。

Electronアプリケーションを起動した後、定義したキーの組み合わせを押して、Electronアプリケーションを実行したターミナルを開くと、「Electron loves global shortcuts!」が表示されます。

BrowserWindow内のショートカット​

Web APIの使用​

BrowserWindow内でキーボードショートカットを処理する場合は、レンダラープロセス内でDOMイベントのkeyupおよびkeydownをaddEventListener() APIを使用してリッスンできます。

docs/fiddles/features/keyboard-shortcuts/web-apis (33.0.1)Fiddleで開く
function handleKeyPress (event) {
  // You can put code here to handle the keypress.
  document.getElementById('last-keypress').innerText = event.key
  console.log(`You pressed ${event.key}`)
}

window.addEventListener('keyup', handleKeyPress, true)

注：3番目のパラメータtrueは、リスナーが常に他のリスナーの前にキー押下を受け取ることを示しているため、それらに対してstopPropagation()を呼び出すことはできません。

メインプロセスでのイベントのインターセプト​

before-input-eventイベントは、ページでkeydownおよびkeyupイベントをディスパッチする前に発行されます。これは、メニューに表示されないカスタムショートカットをキャッチして処理するために使用できます。

クイックスタートガイドから動作するアプリケーションを基に、main.jsファイルに次の行を追加します。

docs/fiddles/features/keyboard-shortcuts/interception-from-main (33.0.1)Fiddleで開く
const { app, BrowserWindow } = require('electron/main')

app.whenReady().then(() => {
  const win = new BrowserWindow({ width: 800, height: 600 })

  win.loadFile('index.html')
  win.webContents.on('before-input-event', (event, input) => {
    if (input.control && input.key.toLowerCase() === 'i') {
      console.log('Pressed Control+I')
      event.preventDefault()
    }
  })
})

Electronアプリケーションを起動した後、Electronアプリケーションを実行したターミナルを開き、Ctrl+Iキーの組み合わせを押すと、このキーの組み合わせが正常にインターセプトされたことがわかります。

サードパーティライブラリの使用​

手動でショートカットを解析したくない場合は、mousetrapなど、高度なキー検出を行うライブラリがあります。以下は、レンダラープロセスで実行されるmousetrapの使用例です。

Mousetrap.bind('4', () => { console.log('4') })
Mousetrap.bind('?', () => { console.log('show shortcuts!') })
Mousetrap.bind('esc', () => { console.log('escape') }, 'keyup')

// combinations
Mousetrap.bind('command+shift+k', () => { console.log('command shift k') })

// map multiple combinations to the same callback
Mousetrap.bind(['command+k', 'ctrl+k'], () => {
  console.log('command k or control k')

  // return false to prevent default behavior and stop event from bubbling
  return false
})

// gmail style sequences
Mousetrap.bind('g i', () => { console.log('go to inbox') })
Mousetrap.bind('* a', () => { console.log('select all') })

// konami code!
Mousetrap.bind('up up down down left right left right b a enter', () => {
  console.log('konami code')
})