質問: 題名の通りなのですが、アルフレッドという検索アプリは特定のキーボードを押すことにより、ブラウザではなく、デスクトップ全体にモーダルが出現します。 参考URL https://pc-karuma.net/mac-app-alfred/ このような機能を作ろうと考えています。 エレクトロンとフロントはreactを使おうと考えています。 質問は二つあります。 1.これはそもそもエレクトロンで実装可能なのでしょうか。 2.この機能のことは専門用語としてはどう呼ばれていますか。検索する際に「デスクトップ モーダル」などで調べてみてもイマイチヒットせず。。。 何卒お願いします。
回答: > > 1.これはそもそもエレクトロンで実装可能なのでしょうか > > > 試したところ、以下のようなコードで実現できました。 BrowserWindowのオプションで、 `frame: false`を付けると、タイトルバーや閉じるボタンなどを消してそれっぽいウインドウになります。 必ず最前面に表示したいのであれば、`alwaysOnTop: true`もつけておくと良いです。 これで作られるウインドウは内部的にはブラウザそのものなのですが、見た目はかなり柔軟にカスタマイズ可能です。 また、globalShortcutを使うと、アプリ外でも動くショートカットを登録可能です。 以下、簡単なサンプルです。 ``` const Electron = require("electron"); const app = Electron.app; const BrowserWindow = Electron.BrowserWindow; const globalShortcut = Electron.globalShortcut; app.addListener("ready", () => { const window = new BrowserWindow({ alwaysOnTop: true, frame: false, width: 600, height: 60, show: false, }); window.loadURL(`file://${__dirname}/index.html`); globalShortcut.register('Command+Space', () => { window.show(); }) }); app.addListener('will-quit', () => { globalShortcut.unregisterAll(); }) ``` ``` ↩ ``` !イメージ説明 > > 2.この機能のことは専門用語としてはどう呼ばれていますか。検索する際に「デスクトップ モーダル」などで調べてみてもイマイチヒットせず。。。 > > > 私も確実なことはわからないですが、一応、モーダルで意味合いは通じるかと思います。 ただ、検索ワードとしては、一般的な言葉過ぎてそれっぽいものは出てこないかもしれないですね。 あと、ElectronのBrowserWindowにもmodalというオプションがありますが、 このオプションはあくまで親子になったBrowserWindowに対してモーダルかどうかを決めるオプションですので、今回の用途とは異なるかと思います。