Electronで透明なウィンドウを作成する（Electron@11.2.3）

この記事について

Javascript初心者がElectronでデスクトップアプリを作ってみたときに、最新のElectronだと透明なウィンドウが表示できなかったので、対処法を記載しています。
同じく透明ウィンドウが作れない方の参考になればと思います。

前提

• Node.jsやElectronは導入済み
• 細かい理屈は知らんが動けばいいって人向け

筆者の環境

• Windows10 64bit
• node.js v14.15.5
• Electron v11.2.3

とにかく解消法が知れればいいて人

• fullscreen:false;とwidthとheightを-2pxする

発生事象

heroku + electron でニコニコメソッドを作ってみました。その２（ルーム分け機能追加）とかElectronでデスクトップいっぱいに雪を降らせるアプリを作るみたいに透明なウィンドウで画面いっぱいになんか出したいって、アプリを作ってました。

参照先のサイトを参考にしながら作りました。

main.js

"use strict";
var electron = require("electron");
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;
app.on('ready', function () {
    var Screen = require('screen');
    var size = Screen.getPrimaryDisplay().size;     // ディスプレイのサイズを取得する
    var mainWindow = new BrowserWindow({
        width: size.width,   // 最大サイズで表示する
        height: size.height, // 最大サイズで表示する
        frame: false,      // ウィンドウフレームを非表示に
        show: true,
        transparent: true, // 背景を透明に
        resizable: false,
        'always-on-top': true // 一番手前に表示する
    });
    mainWindow.setIgnoreMouseEvents(true);     // マウスイベント無視
    mainWindow.maximize();
    mainWindow.loadURL('file://' + __dirname + '/index.html');
});

Electronをnpm installして起動したところ画面が真っ黒に。。。

※デスクトップに何もなくて壁紙真っ黒なわけじゃないですよ。

Electronのバージョンが違うからかな？とか考えつつ、Electronの公式ドキュメントやStack overflowを探しても対処法が見つからない・・・
Linuxはnpmコマンド実行時に「--enable-transparent-visuals --disable-gpu」オプションをつけなさいは出てきて、Windowsだけど試してもダメ。

いろいろ探してやっと辿り着いた解決策。
GitHub electron issue27286
どうやらサイズがフルスクリーンだと発生するらしく、幅と高さをそれぞれ2px減らすとうまく動くらしい。早速やってみる。

main.js

"use strict";
var electron = require("electron");
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;
app.on('ready', function () {
    var Screen = require('screen');
    var size = Screen.getPrimaryDisplay().size;     // ディスプレイのサイズを取得する
    var mainWindow = new BrowserWindow({
-       width: size.width,   // 最大サイズで表示する
+       width: size.width-2,   // 最大サイズから-2pxする
-       height: size.height, // 最大サイズで表示する
+       height: size.height-2, // 最大サイズから-2pxする
        frame: false,      // ウィンドウフレームを非表示に
       show: true,
        transparent: true, // 背景を透明に
        resizable: false,
        'always-on-top': true // 一番手前に表示する
    });
    mainWindow.setIgnoreMouseEvents(true);     // マウスイベント無視
    mainWindow.maximize();
    mainWindow.loadURL('file://' + __dirname + '/index.html');
});

透明になりました。なぜ2pxなのかは不明。1pxだと変わらず真っ黒でした。