schedule2021-11-11

Electronの最大化と最小化のイベントを制限する方法

ElectronNodejs

Electron で製作するアプリのウィンドウを最大化/最小化を制限する方法がいくつかあるのでまとめておく。

２つの最大化/最小化を制限する方法がある。

BrowserWindow のオプションで無効化する方法
BrowserWindow の最大化/最小化のイベントを検知して処理する方法
ショートカットキーを検知して処理する方法

最大化/最小化を無効にするだけであれば 1 が簡潔で良い。最大化/最小化とともに何か実行したり、最小化する処理を閉じる処理に変更するなど特殊な状況では 2 を利用する。

1. BrowserWindow のオプションで無効化する方法

BrowserWindow のオプションのmaximizableとminimizableをfalseとして無効化する。

https://www.electronjs.org/docs/latest/api/browser-window#new-browserwindowoptions

let mainWindow = new BrowserWindow({
  // 最大化を無効
  maximizable: false,
  // 最小化を無効
  minimizable: false,
})

メニューバーの最大化と最小化のアイコンが disable になる。ただし、Linux では未実装であるため機能しない。

ショートカットキーのctrl+M（最小化）やF11（最大化）は無効にならなかった。

2. BrowserWindow の最大化/最小化のイベントを検知して処理する方法

BrowserWindow では各種操作のイベントに応じた処理ができるようになっている。

https://www.electronjs.org/docs/latest/api/browser-window#event-minimize

onclick イベントのように、mainWindow.on('someEvent', function(event){})と書ける。

例えば、最小化する際に何かしら処理をすることは以下のように書ける。

// 最小化するときに処理を行う。
mainWindow.on('minimize', function (event) {
  someFunction()
})

event.preventDefault();はそのイベントの処理を停止する関数。キャンセルできるイベントが狭く minimize と maximize はキャンセルできない。（closeはキャンセルできる）

最小化/最大化の他、細かくイベントが用意されているのでネイティブアプリらしくウィンドウの挙動を操作できるようになっている。

3. ショートカットキーを検知して処理する方法

Electron のアプリでショートカットキーを検知できる。

ショートカットキーのctrl+M（最小化）とF11（最大化）を無効にするには以下のように書く。

import { app, globalShortcut } from 'electron'

app.on('browser-window-focus', function () {
  // 最小化のショートカットキー
  globalShortcut.register('CommandOrControl+M', () => {
    console.log('CommandOrControl+M is pressed: Shortcut Disabled')
  })
  // 最大化のショートカットキー
  globalShortcut.register('F11', () => {
    console.log('F11 is pressed: Shortcut Disabled')
  })
})