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

略してそこ仁!

【Electron】アプリを全画面モードでも他のデスクトップに移動しても常に最前面に表示する

Electronでアプリを作りました。

アプリは

  • ワークスペース(デスクトップ)を切り替えても表示される
  • 他のアプリよりも前に表示される
  • 他のアプリを全画面表示した時も前に表示される
  • Keynoteをプレゼンテーションモードにした時も前に表示される

としたかったです。

特に4つ目のKeynoteでのプレゼンテーションモードが一筋縄ではいきませんでしたが、最終的にはこんな感じで実現ができました。

f:id:syobochim:20201116213210g:plain

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

const { app, BrowserWindow } = require("electron");
const is_mac = process.platform==='darwin'     // macOSかどうかの判定をする

if(is_mac) {     // macOSの時のみこの設定を反映する
  app.dock.hide()          // Dockを非表示にする
}

const MAIN_WINDOWS_WIDTH = 300;
const MAIN_WINDOWS_HEIGHT = 350;
function createClapWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: MAIN_WINDOWS_WIDTH,
    height: MAIN_WINDOWS_HEIGHT,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    }
  })
  mainWindow.setAlwaysOnTop(true, "screen-saver")    // 常に最前面に表示する
  mainWindow.setVisibleOnAllWorkspaces(true)      // ワークスペース(デスクトップ)を移動しても表示される
  mainWindow.loadFile('public/reaction.html')
}

app.whenReady().then(() => {
  createClapWindow()
})

app.dock.hide() の設定によって、macOSにて全画面モードで開いた時にその上に表示できるようになります。
Windowsにはこの設定はないので、事前にmacOSであるかどうかを判断してmacOSの時のみ設定を適用しています。

mainWindow.setAlwaysOnTop(true, "screen-saver") の設定をすることで、キーノートのプレゼンテーションモードの時にも最前面に表示されるようになります。
BrowserWindow にも alwaysOnTopのプロパティを持っていますが、これに true を設定してもキーノートのプレゼンテーションモードでは適用されませんでした。(他のアプリの全画面モードでは最前面に表示されたのに。。。)

mainWindow.setVisibleOnAllWorkspaces(true) の設定で、ワークスペース(デスクトップ)を切り替えても一緒に移動して表示されるようになります。

これらの設定で実現できました。

参考