Q&A
まさに自分が求めていたものです。ありがとうございます！
題名の通りなのですが、アルフレッドという検索アプリは特定のキーボードを押すことにより、ブラウザではなく、デスクトップ全体にモーダルが出現します。
参考URL
https://pc-karuma.net/mac-app-alfred/
このような機能を作ろうと考えています。
エレクトロンとフロントはreactを使おうと考えています。
質問は二つあります。
1.これはそもそもエレクトロンで実装可能なのでしょうか。
2.この機能のことは専門用語としてはどう呼ばれていますか。検索する際に「デスクトップ モーダル」などで調べてみてもイマイチヒットせず。。。
何卒お願いします。
回答2件
0
モーダルと言うよりは、ダイアログ BOX とかダイアログウィンドウ等の呼び名のほうが近い気がします。
モーダルと非モーダルダイアログ：
用いるべき場合とそうでない場合
彼女は毎朝7時にニャアと鳴いて、私に餌を求めてくる。私は寝ようとするか、朝の支度を始めようとするのだが、うちの猫は今度は私の正面に回り、私が彼女のほうを見るまで、さらに大きな声でニャアニャアと鳴き続けるのである。私が自分のタスクを終わらせたいと思えば、そのときにやっていることを即やめて、彼女の対応をするしかない。
electron は、window に対しての装飾手段が多数用意されているので、結構いろいろ出来ます。
やりたいことの記述があるか探してみて下さい。
参考）
質問内容と少し違いますが、必要に迫られて通知ウィンドウを自作した時の記事を書いたことがありますので記述しておきます。
投稿2019/05/07 13:14
退会済みユーザー
総合スコア0
0
ベストアンサー
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>
2.この機能のことは専門用語としてはどう呼ばれていますか。検索する際に「デスクトップ モーダル」などで調べてみてもイマイチヒットせず。。。
私も確実なことはわからないですが、一応、モーダルで意味合いは通じるかと思います。
ただ、検索ワードとしては、一般的な言葉過ぎてそれっぽいものは出てこないかもしれないですね。
あと、ElectronのBrowserWindowにもmodalというオプションがありますが、
このオプションはあくまで親子になったBrowserWindowに対してモーダルかどうかを決めるオプションですので、今回の用途とは異なるかと思います。
投稿2019/05/07 12:32
総合スコア241
あなたの回答
tips
プレビュー
2019/05/07 14:00