kitak blog

Kみたいなエンジニアになりたいブログ

node-webkitでデスクトップウィジェットをつくる

こんにちは。メリークリスマス。きたけーです。

数年前にデスクトップにウィジェットを置くのが流行ったと思うんですが(GoogleデスクトップMacDashboardみたいなやつです)、いまではその面影もないですね...
とはいえ、ちょっとしたタスクをやったり、監視、受信系のツールをつくるときにデスクトップウィジェットは結構優秀なんじゃないかな、と個人的に思ってます。

デスクトップウィジェットは(おそらく開発の敷居を下げるためだと思うのですが)Googleデスクトップにせよ、MacDashboardにせよ、ウェブの技術で実装することができました。それでも、数年前につくろうとしたときは、提供されている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の使用率を出すなり、時刻を表示するなり、グラフを表示するなり、いいかんじにします。

f:id:kitak:20141225101545p:plain

ひな形のリポジトリがこれです。
kitak/nw-desktop-widget-sample · GitHub

ショートカットキーを設定することもできるので、素早く呼び出したり、邪魔になったら閉じたりできるようにするとよさそうです。

Shortcut · rogerwang/node-webkit Wiki · GitHub

まとめ

便利ツールやおもしろツールをつくって、楽しい年末年始を過ごしましょう。