結論
ウィンドウの設定以外に、Windows Aeroが有効でないと背景の透過ができなかった。
使用OS
Windows7 Home Premium 64bit
経緯
最近Web系を勉強しているから、Electronを使ってデスクトップアプリも作ってみよう!と思い立ち、作り始めました。
以前にC言語とWindows APIでデスクトップアプリを作ろうとして挫折した経験があるので、簡単にアプリを作ることができるElectronは革命的でした。
以前Windows APIでできなかった(断念した)こととして、背景の透過がありました。
デスクトップマスコットを作ろうと思ったのですが、設定等がよくわからず断念しました。
Electronでは背景の透過も簡単にできるとのことで、今回作ってみようと思いました。
できない!
簡単にできるという言葉を信じて作ってみたものの、肝心な背景の透過ができませんでした。
アプリを起動すると、「応答なし」のような状態になってしまい、白い画面に何も表示されませんでした。
「Electron 透過 できない」とかでググっても、設定方法しかでてきませんでした。
背景を透過させる処理は大体こんな感じです。
// メイン画面表示
var mainWindow = new BrowserWindow({
width: 200, // 幅
height: 200, // 高さ
transparent: true, // 背景透過
frame: false, // フレーム有無
resizable: false, // 大きさ変更禁止
});
意外な解決
いくらやってもできないので、ElectronをやめてNW.jsに切り替えようと思い、それの透過処理について調べたところ、
「Windows Aeroを無効にしていると背景の透過が出来ません。」
お前だったのか。
Aero「私だ。」
ということで、Windows Aeroを有効にしたところ、先ほどのコードで問題なく動作しました。
わかりづらいですが、Windows7標準の壁紙に、水色の文字でHello Worldを表示しています。
なんでWindows Aeroを無効にしてたの?
タスクバーでソフトを入れ替えるときに出てくる、画面のプレビューが鬱陶しくて無効にしてました。
普通にウインドウのタイトルだけ表示してほしいです。
まとめ
先日買ったCubase8がWindows Aeroを無効化していると立ち上がらないので、これからはAeroと共に生きていきます。