undefined

bokuweb.me

node-webkit改めNW.jsでデスクトップウィジェットを作ってみる


NW.jsが透過に対応したと聞いて試しに簡単なウィジェットサンプルを作ってみました。

NW.jsのインストール

ここから環境に合わせダウンロード。 今回はwin7 32biitの例。

github.com

クロックウィジェットの作成

今回はクロックウィジェットにしてみる。 最低限package.jsonとindex.htmlがあればOK。 jQuery使用。GoogleFontでそれっぽいフォントを選んだ。

package.json pacakge.jssonにツールバーやらフレームを隠す設定を記述します。

index.html

上記の格納されたディレクトリをnw.exeにドロップすると実行できます。 こんな感じ。できた。 f:id:bokuweb:20150326195540p:plain

パッケージ化

index.htmlとpackage.jsonをzipで固めて*.nwにリネーム。(今回はapp.nwにリネーム)

NW.jsディレクトリ内で以下のコマンドを実行。

copy /b nw.exe+app.nw app.exe 

これでapp.exeを実行すればOKです。

クリックスルーについて

現状のままだとウィジェットの後ろにあるファイル等をクリックできません。 これは起動時に以下のオプションをつける必要があるそうです。 windowsの場合、app.exeのショートカットを作ってリンク先の末尾に以下を追加してやると便利です。

--disable-gpu --force-cpu-draw

所感

簡単にできまます。今回は使用してませんがnode_moduleが使えるのがいいです。ただ、c/c++ addonを使用しているモジュールは少し大変そうな感じです。

リポジトリ

github.com

参考記事

lealog.hateblo.jp

blog.asial.co.jp