Node.js+Expressでブラウザ上でアニメGIFを作るための便利ツール作った
日本人なら皆、日常的にアニメーションGIFを作って遊んでいると思う。野球、相撲、反原発デモに並ぶ国民的スポーツと言っても過言ではない。
スマートフォンアプリだとGifBoomという革命的便利ツールがあるからいいんだけど、PCで作ろうとなると良いツールがなくてimagemagickを直接叩くとかしなければならなくて困ってた。
アニメGIFを作るためのブラウザ上で動く何かがあればいいと思って作った。
名前は2012年に発売された革命的デバイスにちなんで"gifkobo"。
機能
- コマンドから画像素材のあるディレクトリをコマンドから起動
- アニメGIFに使いたい画像をクリックで選択するGifBoomっぽいUI
- Delay(アニメを表示するときの遅延時間)とSize(生成するアニメの幅と高さ)の指定
- 生成されるGIFのcanvas上での逐次プレビュー(生成されるGIFの大まかな様子が右の画面で分かる)
- ドラッグ&ドロップで画像素材をアップロード
試しに動かすときに使えるようにid:catatsuyの画像素材が付録としてexample/にある。パブリックドメインなので、どうぞご自由にお使いください。
使い方
npmモジュールとして公開してる。素材にしたい画像のあるディレクトリを指定して起動する。
$ npm install gifkobo -g $ gifkobo /path/to/your/images/
デフォルトでは3000番ポートにサーバーが起動する。
http://localhost:3000/にアクセスすると指定した素材画像を使ってアニメGIFが作れる。
技術的なこととか
使ったNode.jsのモジュールはこれくらい。express以外は一部で利用するくらいでそんなに使ってない。
- express
- hogan.js
- imagemagick
- async
- request
今回は画面遷移のない小さいWebアプリケーションだったから、expressのようなシンプルなフレームワークを使うのはすごく楽だった。
感想
個人的に便利に使えてるし作って良かった。他の人にとっても便利かどうかはよく分からない。
割と適当に作ったから問題点は割とある。
- Canvasでのプレビューの解像度がよくなくてぼやけた感じになる(canvasで伸縮してるから???)
- Canvasでのプレビューと生成されるアニメGIFに結構差がある
- UIあまり良くない
- アニメGIFを素材として使おうとするとよく分からない挙動をする
色々あるけど、使ってるうちに困ったらその都度直していこうと思う。
Github
詳しくはGithubに書いてる。
uiureo/gifkobo · GitHub