ElectronでNotificationを表示する
Electron自体には通知表示するNotificationを持っていません。
そこで表示する方法がレンダラープロセスとメインプロセスでそれぞれあります。
そのやりかたについてご説明します。
レンダラープロセスでNotificationを表示する
レンダラープロセスはNotificaitonを表示するのは非常に簡単でHTML5で追加されたWeb Notifications APIを利用することでNotificationを表示することができます。
そのためBrowserWindowで表示するhtmlファイル上でNotificationを利用します。
ボタンを押した時にNotificationを表示する例は以下になります。
ElectronでNotificationを表示する(レンダラープロセス)
index.htmlのボタンを押した時に8行目にNotificationを作成し、Hello Worldという文字を表示しています。
通常のブラウザを利用する場合は下図のような許諾を表示し、許諾をユーザにもらってからでないとNotificationは表示できません。
しかしElectronではユーザに許諾をもらうことなくNotificationを表示することができます。
BrowserWindowでNotificationを表示すると下図のように表示されます。
メインプロセスでNotificationを表示する
Electronで標準でNotificationを表示する手段がないため、レンダラープロセスを持たないアプリの場合(Trayのみアプリなど)はNotificationを表示することはそのままではできません。
そこでNotificationを実現するnpmを使って実現します。
今回はnode-notifierを使ってご説明します。
node-notifierを利用するにはインストールをします。
インストールは次のようにします。
$ npm install node-notifier --save
これでインストールは完了です。
次は実装となります。
今回の例ではBrowserWindow側からプロセス間通信(remote)を利用して処理をメインプロセスに渡し、メインプロセス側でNotificationを表示します。
ElectronでNotificationを表示する(メインプロセス)
ここではmain.jsの32行目でNotificationを表示しています。
そのnode-notifierのnotifyを呼び出した時の第1引数にNotificationを表示するときの表示情報を設定します。
| 項目 | 概要 |
|---|---|
| title | 表示するタイトル |
| message | 表示するメッセージ |
| icon | タイトルやメッセージなどの左側に表示されるアイコン画像 |
| contentImage | タイトルやメッセージなどの右側に表示される画像 |
| sound | Notification表示時に音をだすかどうか |
| wait | クリックイベントやタイムアウトのイベントを検知する |
第2引数でNotificationを表示後に呼び出されるイベントを設定します。
そのコールバックの引数のresponseにはそのNotificationをユーザがどのように操作したかのイベントが返ってきます。
Notificationをクリックされた場合は「Activate」を返し、何もされずにタイムアウトを迎えた場合には「Timeout」が設定されコールバックされます。
また、43行目や47行目のようにonでclickとtimeoutを設定するとそのタイミングでもコールバックを受け取ることができます。
上記でボタンを押すと下図のように表示されます。
左側のtのアイコン画像が評されているのはnotifyの引数に渡しているiconで指定している画像が割り当てられます。
また、contentIconで指定した画像は右側のtのアイコンとして表示されます。
