読者です 読者をやめる 読者になる 読者になる

Node.js+Expressでブラウザ上でアニメGIFを作るための便利ツール作った

日本人なら皆、日常的にアニメーションGIFを作って遊んでいると思う。野球、相撲、反原発デモに並ぶ国民的スポーツと言っても過言ではない。

スマートフォンアプリだとGifBoomという革命的便利ツールがあるからいいんだけど、PCで作ろうとなると良いツールがなくてimagemagickを直接叩くとかしなければならなくて困ってた。
アニメGIFを作るためのブラウザ上で動く何かがあればいいと思って作った。

名前は2012年に発売された革命的デバイスにちなんで"gifkobo"。

機能

https://dl.dropbox.com/u/23470717/gifkobo/screenshot.gif
主にできることとしてはこんな感じ。

  • コマンドから画像素材のあるディレクトリをコマンドから起動
  • アニメ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以外は一部で利用するくらいでそんなに使ってない。

今回は画面遷移のない小さいWebアプリケーションだったから、expressのようなシンプルなフレームワークを使うのはすごく楽だった。

感想

個人的に便利に使えてるし作って良かった。他の人にとっても便利かどうかはよく分からない。

割と適当に作ったから問題点は割とある。

  • Canvasでのプレビューの解像度がよくなくてぼやけた感じになる(canvasで伸縮してるから???)
  • Canvasでのプレビューと生成されるアニメGIFに結構差がある
  • UIあまり良くない
  • アニメGIFを素材として使おうとするとよく分からない挙動をする

色々あるけど、使ってるうちに困ったらその都度直していこうと思う。

Github

詳しくはGithubに書いてる。
uiureo/gifkobo · GitHub