Electronでアプリを作りました。
アプリは
- ワークスペース(デスクトップ)を切り替えても表示される
- 他のアプリよりも前に表示される
- 他のアプリを全画面表示した時も前に表示される
- Keynoteをプレゼンテーションモードにした時も前に表示される
としたかったです。
特に4つ目のKeynoteでのプレゼンテーションモードが一筋縄ではいきませんでしたが、最終的にはこんな感じで実現ができました。
package.json
の main
で定義している 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)
の設定で、ワークスペース(デスクトップ)を切り替えても一緒に移動して表示されるようになります。
これらの設定で実現できました。
参考
- https://www.electronjs.org/docs/api/browser-window
- https://www.electronjs.org/docs/api/dock
- https://discuss.atom.io/t/set-browserwindow-always-on-top-even-other-app-is-in-fullscreen/34215/2
- https://stackoverflow.com/questions/48367441/make-electron-window-able-to-receive-click-event-when-above-keynote-app