Electronで背景透過のアプリをつくる 👀

ElectronでBrowserWindowのインスタンスを生成する際にオプションとして、transparent: trueを渡すと背景が透明なアプリを作成できます。

const mainWindow = new BrowserWindow({
  transparent: true
});

Macだとこれで問題ないのですが、Windowsだと、

const mainWindow = new BrowserWindow({
  transparent: true,
  frame: false
});

という感じで、フレームの非表示も同時に設定する必要があるようです。

個人的には、

const mainWindow = new BrowserWindow({
  transparent: true,
  alwaysOnTop: true,
  frame: false
});

という感じで、

・背景を透明
・最前面に表示
・フレームを非表示

と、セットで使うことが多いですが、フレームを非表示にするとウィンドウをドラッグで動かせなくなるので、そこの対策を入れた方が良いでしょう。

キーボードから音が出る仕組みを作って、キーボードをキーボードにしてみました。 pic.twitter.com/Z38Du9hz4s

— 君塚史高 (@ki_230) 2020年9月18日

このアプリだと、ウィンドウの位置を決めた上で表示しています。