2015年2月15日日曜日

ブラウザとNode.jsで動作するライブラリの書いたときのやり方

動機

gifken というJavaScriptでGIF画像を作ったり、GIFアニメを分割や逆再生するようなライブラリをちまちま書いています。
もともとブラウザで動作させることしか考えていなかったのですが、Node.jsでも動かせそうだったので、対応させたときのやり方を書きます。
(ただNode.js環境でGIF画像など扱いたい場合は http://aheckmann.github.io/gm/ などでGraphicsMagickやImageMagick使った方が素直だし速度面などを考えても良いです)

導入

もっと良い方法がありそうな気もします……

もともとのものが1つの大きなJavaScriptだったので、ブラウザ依存の処理と、共通で利用できる処理をまず分けました。
Node.jsにはモジュールの仕組みが既にあり、ブラウザでその処理を動くようにするソフトウェアが既にあるのでそれを利用するのが楽でしょう。(Browserify, Webpackなど)
私は Browserify を利用しました。

Browserify の導入自体は楽だったのですが、Browserifyはrequireなどの依存関係を解決してJavaScriptファイルを書き出してくれますが、Browserifyで生成した関数に閉じた状態で出力されるので、scriptタグで読み込むだけで使えるようになる、という状態にはなりません。
Browserify のオプションを見ても特にそれらしいものは見つかりませんでした。
よって、以下のようにしました。

windowオブジェクトに追加してしまいます。
WebWorkerではwindowがglobal objectではないので、importScriptsする前に var window = self; とでもしてください……

まとめ


Browserifyの導入とglobal objectへの追加で何とかなった。