[Electron]暇なのでデスクトップいっぱいに氷を張るウィジェットを作った

暇つぶし程度に、Electronで デスクトップいっぱいに氷を表示して操作不能にするというただの作業妨害アプリを作りました。

注意事項

• 実用性なしです。
• 友達に自慢するくらいしかできません。
• Windows、フルHD(1920x1080) Electron v1.4.2の環境を前提に説明します。

なお、これは私がElectronに慣れるための練習用に作ったものなので、クオリティの低さについては勘弁してください。

実装内容

1920x1080の大きさのウィンドウを出し、そこに1920x1080の画像(透過png)を表示します。

仕様

20回クリックすると氷が割れる(=アプリが終了する)という仕様です。

ポイント

index.js

// electronモジュールを読み込み
const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
 
// 新しいウィンドウ(Webページ)を生成
let mainWindow
function createWindow () {
  //画面サイズを取得する
  const Screen = electron.screen
  const size = Screen.getPrimaryDisplay().size
  // BrowserWindowインスタンスを生成
  mainWindow = new BrowserWindow({width: size.width, height: size.height, transparent: true, frame: false, resizable: false, skipTaskbar: true})
  // index.htmlを表示
  mainWindow.loadURL('file://' + __dirname + '/index.html')
  //常に一番手前
  mainWindow.setAlwaysOnTop(true);
  // ウィンドウを閉じたら参照を破棄
  mainWindow.on('closed', function () {
    mainWindow = null
  })
}
 
// アプリの準備が整ったらウィンドウを表示
app.on('ready', createWindow)
 
// 全てのウィンドウを閉じたらアプリを終了
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

//常に一番手前
mainWindow.setAlwaysOnTop(true);

mainWindow.setAlwaysOnTop(true);で常に一番手前にウィンドウを配置します。
あとは、const Screen = electron.screen;
const size = Screen.getPrimaryDisplay().size;
width: size.width, height: size.height;
で画面サイズいっぱいの大きさにしたり、
skipTaskbar: trueでタスクバーに表示しないようにする ぐらいでしょうか。

メインのコード

index.js

//ウィンドウを取得する
const remote = require("electron").remote;
const BrowserWindow = remote.BrowserWindow;

//音声素材を読み込む
var glassBreak = new Audio("sounds/glass-break.mp3");
var glassCrack = new Audio("sounds/glass-crack.mp3");

//氷の耐久値
var tai9 = 20;

function iceclick() {
    tai9--;
    if (tai9 == 0) {
        glassBreak.play();
        remote.getCurrentWindow().hide()
    }
    glassCrack.play()
};

説明するまでもないかと。
HTMLのほうで、imgタグのonclick属性でiceclick()を実行するようにしています。
アプリの終了をhide()でしているのは、close()で完全に終了してしまうと、破壊時の効果音が鳴り終わる前に閉じてしまうからです。

さいごに／ダウンロード

本当は、デスクトップの何もないところをクリックすると氷が出てきて―― とか、
氷が割れたときのエフェクトが―― とか考えてたんですが、ウィンドウの最背面への移動や、画像を分割してバラバラにするとかいうのが、技術的にも気力的にも難しそうだったので諦めました。
あと、Windowsでもクリックスルー(透明な部分のクリックを検知させない)を実現する方法がありましたら教えてください。

ダウンロード

完成品アプリが自分のブログに置いてあります。スクリーンショットとかあります。よかったらぜひ見に来てね。