そこに仁義はあるのか(仮)

略してそこ仁!

【Electron】アプリの背景を透明にしてマウスイベントも拾わせない

Electronでデスクトップアプリを作りました。 その中で

  • 背景を透明にしたい
  • フレームを消したい
  • サイズを変えてほしくない
  • ウィンドウに影をつけない(背景を透明にしたときに文字の影のような者が出てきていた)
  • マウスでクリックさせたくない(選択などもできないようにする)
  • 開発者モードを開いてほしくない

という設定をしたので、それのメモです。 あまりネットでまとまっているものがなかったので、参考までに。

package.jsonmain で定義している main.js にてウィンドウを開くときに設定を追加していきました。

const { BrowserWindow } = require("electron")

function createClapWindow() {
  // ウィンドウを作る
  const mainWindow = new BrowserWindow({
    transparent: true,   // ウィンドウを透明にする
    frame: false,     // フレームをなくす
    resizable: false,    // 画面の大きさを変えさせない
    hasShadow: false,    // ウィンドウに影をつけない
    webPreferences: {
      devTools: false       // 開発者モードを表示させない
    }
  })
  mainWindow.setIgnoreMouseEvents(true)     // マウスイベントを無視させる
  mainWindow.loadFile('public/index.html')
}

この設定で、Electronのブラウザらしさが無くなって、デスクトップアプリっぽく動いてくれました。

参考リンク BrowserWindow | Electron