Electron + Angular でマルチウインドウタイマー

前回の続きの作業記録です。

kawaguti.hateblo.jp

 

Electronでのマルチウインドウ化

マルチウィンドウを積み残しにしたのでその点を進めました。

Electron ではウインドウを起動するために、new BrowserWindow する、という記述があり、これを使うことを考えました。

BrowserWindow | Electron
... が、このウインドウはネイティブのウインドウでした。今回欲しいのは JavaScript 上で起動し、JavaScript で通信できる別ウインドウなので、ちょっと用途が違いました。

今回、ここの理屈を理解するまでに多くの試行をしました。最終的に、イベントでモブをしまして、よた(@y0t4) さんの手助けもあって、筋違いに気がついた次第です。モブすごい。

ayumi-hsz.hatenablog.com

 

ほんとうに必要だったものは window.open

結局のところ、必要なコードは window.open でした。あ、それもう20年ぐらい使ってるわ。どうってことのないこの一行のために費やした時間は数日(のちょっとした時間)。学びが多いです。

window open · kawaguti/tiimer@8618f42 · GitHub

ということで、二枚目をウインドウを起動できるようになりました。普通にJavaScriptなので、複数ウインドウ間のメッセージングについても、前回と同じく npx-multi-windowが使えそうです。

Angular 7 でカウントダウンタイマー - kawaguti’s diary

ということで、組み込みました。

普通にメッセージのやり取りができるようになったので、引き続き、メッセージにコマンドを仕込んで、時計のセットをできるようにして、アプリ完成です。

f:id:wayaguchi:20190623062358p:plain

 

Mac用にパッケージ

Mac OSX 用にパッケージしたものをこちらにおいておきます。セキュリティ上、App Store以外のものは動かないと思いますので、実行する場合は、詳細設定-セキュリティ から許可をしてあげる必要があります。

https://www.tiimer.net/tiimer-darwin-x64/tiimer.app.zip

Windows用も動作したのですが、うまく配布用のZipが作れていないので、また調べまーす。