Chapter 11無料公開

フレームレス・ウィンドウ (BrowserWindow)

Kei Touge
Kei Touge
2021.09.18に更新

https://www.electronjs.org/docs/api/frameless-window

ウィンドウをフレームレスにする

メインプロセス

main.js
const createWindow = () => {
  const mainWindow = new BrowserWindow({
    // フレームレス
    frame: false,
    },
  });

  mainWindow.loadFile('index.html');
};

ドラッグ可能にする

フレームレス・ウィンドウではタイトルバーが表示されなくなるので、レンダラープロセスで draggable なゾーンを用意しなければいけない場合もある。

レンダラープロセス(css)
html,
body,
.container {
  height: 100%;
  overflow: hidden;
}

.container {
  display: flex;
  /* ドラッグ可能なゾーンとする */
  -webkit-app-region: drag;
}

macOS での代替機能

macOS では、フレーム全体を非表示にするだけではなく、3 つのタイトルバースタイルから選択することもできる。

以下のいずれのパターンでも、-webkit-app-region: drag; は変わらず必要です。

'hidden'

タイトルバーはなくなるが、tarffic lights(信号機)は表示される。

main.js
const createWindow = () => {
  const mainWindow = new BrowserWindow({
    titleBarStyle: 'hidden',
  });

  mainWindow.loadFile('index.html');
};

'hiddenInset'

traffic lights がやや内側に表示される。

main.js
const createWindow = () => {
  const mainWindow = new BrowserWindow({
    titleBarStyle: 'hiddenInset',
  });

  mainWindow.loadFile('index.html');
};

'customButtonsOnHover'

マウスカーソルをウィンドウ左上でホバーした時のみ traffic lights が表示される。frame: false も同時に指定する必要があることに注意。

main.js
const createWindow = () => {
  const mainWindow = new BrowserWindow({
    // 必要!
    frame: false,
    titleBarStyle: 'customButtonsOnHover',
  });

  mainWindow.loadFile('index.html');
};