アルフレッドのような、ブラウザではなくデスクトップ全体へのモーダルの出し方

題名の通りなのですが、アルフレッドという検索アプリは特定のキーボードを押すことにより、ブラウザではなく、デスクトップ全体にモーダルが出現します。
参考URL
https://pc-karuma.net/mac-app-alfred/
このような機能を作ろうと考えています。
エレクトロンとフロントはreactを使おうと考えています。
質問は二つあります。
1.これはそもそもエレクトロンで実装可能なのでしょうか。
2.この機能のことは専門用語としてはどう呼ばれていますか。検索する際に「デスクトップモーダル」などで調べてみてもイマイチヒットせず。。。

何卒お願いします。

行動規範の内容に同意します

回答2件

モーダルと言うよりは、ダイアログ BOX とかダイアログウィンドウ等の呼び名のほうが近い気がします。

モーダルと非モーダルダイアログ：
用いるべき場合とそうでない場合

彼女は毎朝7時にニャアと鳴いて、私に餌を求めてくる。私は寝ようとするか、朝の支度を始めようとするのだが、うちの猫は今度は私の正面に回り、私が彼女のほうを見るまで、さらに大きな声でニャアニャアと鳴き続けるのである。私が自分のタスクを終わらせたいと思えば、そのときにやっていることを即やめて、彼女の対応をするしかない。

electron は、window に対しての装飾手段が多数用意されているので、結構いろいろ出来ます。

BrowserWindow

やりたいことの記述があるか探してみて下さい。

参考）
質問内容と少し違いますが、必要に迫られて通知ウィンドウを自作した時の記事を書いたことがありますので記述しておきます。

electron で通知を使う(Notification)

投稿2019/05/07 13:14

退会済みユーザー

総合スコア0

tomoharu

2019/05/07 14:00

ありがとうございます！　参考にいたします！

行動規範の内容に同意します

ベストアンサー

1.これはそもそもエレクトロンで実装可能なのでしょうか

試したところ、以下のようなコードで実現できました。

BrowserWindowのオプションで、
frame: falseを付けると、タイトルバーや閉じるボタンなどを消してそれっぽいウインドウになります。
必ず最前面に表示したいのであれば、alwaysOnTop: trueもつけておくと良いです。

これで作られるウインドウは内部的にはブラウザそのものなのですが、見た目はかなり柔軟にカスタマイズ可能です。

また、globalShortcutを使うと、アプリ外でも動くショートカットを登録可能です。

以下、簡単なサンプルです。

js
1const Electron = require("electron");
2const app = Electron.app;
3const BrowserWindow = Electron.BrowserWindow;
4const globalShortcut = Electron.globalShortcut;
5
6app.addListener("ready", () => {
7  const window = new BrowserWindow({
8    alwaysOnTop: true,
9    frame: false,
10    width: 600,
11    height: 60,
12    show: false,
13  });
14  window.loadURL(`file://${__dirname}/index.html`);
15
16  globalShortcut.register('Command+Space', () => {
17    window.show();
18  })
19});
20
21app.addListener('will-quit', () => {
22  globalShortcut.unregisterAll();
23})

html
1<html>
2<head>
3    <style>
4        input[type=text] {
5            width: 95%;
6            font-size: 30px;
7            vertical-align: top;
8        }
9        button {
10            width: 5%;
11            height: 100%;
12        }
13    </style>
14</head>
15<body>
16<div>
17    <input type="text"><button>↩</button>
18</div>
19</body>
20</html>