読者です 読者をやめる 読者になる 読者になる

techium

このブログは何かに追われないと頑張れない人たちが週一更新をノルマに技術情報を発信するブログです。もし何か調査して欲しい内容がありましたら、@kobashinG or @muchiki0226 までいただけますと気が向いたら調査するかもしれません。

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を表示することができます。

f:id:muchiki0226:20160403233401p:plain

BrowserWindowでNotificationを表示すると下図のように表示されます。

f:id:muchiki0226:20160403233422p:plain

メインプロセスで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を設定するとそのタイミングでもコールバックを受け取ることができます。

上記でボタンを押すと下図のように表示されます。

f:id:muchiki0226:20160403233442p:plain

左側のtのアイコン画像が評されているのはnotifyの引数に渡しているiconで指定している画像が割り当てられます。
また、contentIconで指定した画像は右側のtのアイコンとして表示されます。

サンプルコード

github.com