東京Node学園祭2011で出てきたものを触ってみよう、ということで。
node-canvasを使ったアプリをNode Ninjaにデプロイしてみた。
http://favicon.node-ninja.com/
ソースコードはGithubで公開しています。
https://github.com/sugyan/node-favicon
table要素で作られたマス目をクリックで色付けていくと、ブラウザタブに表示されるfaviconがリアルタイムに変わっていく、というもの。
手元のMacBookPro(Mac OS X 10.6.8)のChrome 15.0.874.106, Firefox 7.0.1 では動作しました。Safariでは動的なfavicon変更は動かない…？ IEは知らない。
(※追記： Operaでも動くそうです)
/faviconで返すコンテンツをnode-canvasから生成- クライアントJSでDOM要素のクリックを検出して、座標と色の情報をサーバに送信
- サーバで受けてその位置に
ctx.fillRectして画像情報を変更、broadcast - サーバから変更通知を受けたクライアント側で、faviconを更新
ちょっと試してみたかんじでは、faviconを変更する場合は一度DOM要素から削除して追加し直す、そしてhref属性が同じだとキャッシュされてしまっているのか更新されないようなので適当にパラメータを追加する、ということで上手くいくようだった。もっと良いベストプラクティスがあるのかな…
ちなみに最初ハマったのだけどNode Ninjaでnode-canvasを使う場合は依存パッケージが入っていないと自動で走るnpm installが失敗してしまう。これはJoyent no.deでも同じだそうで、
https://github.com/LearnBoost/node-canvas/wiki/Installation---no.de
のようにpkginコマンドでインストールしておく必要があるらしい、ということを@node_ninjaの中の人から教えていただきました。ありがとうございました！
