node-webkitでデスクトップウィジェットをつくる
こんにちは。メリークリスマス。きたけーです。
数年前にデスクトップにウィジェットを置くのが流行ったと思うんですが(Googleデスクトップ、MacのDashboardみたいなやつです)、いまではその面影もないですね...
とはいえ、ちょっとしたタスクをやったり、監視、受信系のツールをつくるときにデスクトップウィジェットは結構優秀なんじゃないかな、と個人的に思ってます。
デスクトップウィジェットは(おそらく開発の敷居を下げるためだと思うのですが)Googleデスクトップにせよ、MacのDashboardにせよ、ウェブの技術で実装することができました。それでも、数年前につくろうとしたときは、提供されているAPIが扱いづらかったり、設定ファイルをXMLでごりごり書くのがしんどかった印象があるのですが、
今だとnodeのパッケージを使える&設定がしやすい、という点でnode-webkitで作るのがけっこう良いのでは、と思ってます。
諸々の設定
package.json
node-webkitは、そのままだとブラウザのウィンドウっぽく画面が表示されるので、
package.jsonに以下の設定を記述して、ウィジェットっぽくします。
{ "window": { "transparent": true, "toolbar": false, "frame": false, "width": 300, "height": 300, "resizable": false, "always-on-top": true } }
おこなっている設定は以下の内容です。
- 画面を透過にする
- ツールバーを非表示にする
- フレーム(閉じるボタンとかタイトル)を非表示にする
- 幅と高さを指定する
- ウィンドウをリサイズできないようにする
- 最前面で表示するようにする
CSS
ウィジェットをドラッグしてグリグリ動かせるように以下の指定をおこないます
body { -webkit-app-region: drag; }
こんなかんじ
↑の設定をおこなうとこんなかんじの土台ができるので、
後はCPUの使用率を出すなり、時刻を表示するなり、グラフを表示するなり、いいかんじにします。
ひな形のリポジトリがこれです。
kitak/nw-desktop-widget-sample · GitHub
ショートカットキーを設定することもできるので、素早く呼び出したり、邪魔になったら閉じたりできるようにするとよさそうです。
Shortcut · rogerwang/node-webkit Wiki · GitHub