動機
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 のオプションを見ても特にそれらしいものは見つかりませんでした。
よって、以下のようにしました。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var gifken = require("./gifken"), | |
GifPresenter = require("./GifPresenter"); // ブラウザ依存のモジュール | |
gifken.GifPresenter = GifPresenter; | |
window.gifken = gifken; // ブラウザでのglobal objectのwindowに追加してしまう |
windowオブジェクトに追加してしまいます。
WebWorkerではwindowがglobal objectではないので、importScriptsする前に var window = self; とでもしてください……
まとめ
Browserifyの導入とglobal objectへの追加で何とかなった。