Edited at

Electronで作ったメニューバーアプリで、iconの下にwindowを表示できない(できるようになった)

More than 3 years have passed since last update.


やりたかったこと


  1. メニューバーに表示しているiconをクリックした時に、windowをicon表示位置の下に表示する。

  2. ショートカットキーをクリックした時にwindowを、windowをicon表示位置の下に表示する。

1のほうは、過去にelectronの機能として、trayのclickedイベントにbounds(tray iconの位置情報)が渡されることになったことでできるようになった。 menubarもこの機能を利用して、windowの表示位置を設定しているみたい。

2のほうは、メニューバーのiconの位置を(上記のclickedイベント以外で)取得する方法が用意されていないため、今現在(2016/03/26)もできないっぽい。ココのIssueにあがってる。できるようになったらこの記事も更新してやり方を書くようにしたい。

2016/07/26追記: 1.1.1 くらいからできるようになりました。

https://github.com/electron/electron/blob/master/docs/api/browser-window.md#wingetbounds

これを使うと 2 のときに直接 bounds を 取得することができます。


今のところ考えている回避策

一度、メニューバーiconをクリックされた時に位置を記憶しておいて、以降はそれを使ってショートカットキーが押された時にwindowを正しい位置に表示する。

この方法だと、ショートカットキーが押される前に、クリックされている必要がある。プログラム側でクリックイベントを発生させるみたいなのも調査したけどわかってない。


作ったもの

ちなみに、作ったのはコレ で簡単に次のようなアプリ

- http://245cloud.com っていうポモドーロテクニックやりながら音楽聴けるWEBサービスを表示するアプリ

- メニューバーでWEBサービスを表示してアクセスしやすくしただけ

- ショートカットキーで操作できる

- 表示しているコンテンツにあわせて通知を表示する(例: あと何分です)

- メニューバーにアイコンを表示して、タイマーの時間を表示する

- メニューバーアプリは、https://github.com/maxogden/menubar この辺、使うと良い

- Mac版しか作っていないのでWindows版のノウハウはない