Electronで背景の透過ができなかった話

結論

ウィンドウの設定以外に、Windows Aeroが有効でないと背景の透過ができなかった。

使用OS

Windows7 Home Premium 64bit

経緯

最近Web系を勉強しているから、Electronを使ってデスクトップアプリも作ってみよう！と思い立ち、作り始めました。
以前にC言語とWindows APIでデスクトップアプリを作ろうとして挫折した経験があるので、簡単にアプリを作ることができるElectronは革命的でした。

以前Windows APIでできなかった（断念した）こととして、背景の透過がありました。
デスクトップマスコットを作ろうと思ったのですが、設定等がよくわからず断念しました。
Electronでは背景の透過も簡単にできるとのことで、今回作ってみようと思いました。

できない！

簡単にできるという言葉を信じて作ってみたものの、肝心な背景の透過ができませんでした。
アプリを起動すると、「応答なし」のような状態になってしまい、白い画面に何も表示されませんでした。
「Electron 透過 できない」とかでググっても、設定方法しかでてきませんでした。

背景を透過させる処理は大体こんな感じです。

main.js

// メイン画面表示
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と共に生きていきます。