この記事について
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";varelectron=require("electron");varapp=electron.app;varBrowserWindow=electron.BrowserWindow;app.on('ready',function(){varScreen=require('screen');varsize=Screen.getPrimaryDisplay().size;// ディスプレイのサイズを取得するvarmainWindow=newBrowserWindow({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";varelectron=require("electron");varapp=electron.app;varBrowserWindow=electron.BrowserWindow;app.on('ready',function(){varScreen=require('screen');varsize=Screen.getPrimaryDisplay().size;// ディスプレイのサイズを取得するvarmainWindow=newBrowserWindow({- width:size.width,// 最大サイズで表示する+ width:size.width-2px,// 最大サイズから-2pxする- height:size.height,// 最大サイズで表示する+ height:size.height,// 最大サイズから-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だと変わらず真っ黒だった。