画像を読み込んでクライアントサイドでGIFに変換「gif.js」
gif.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。
画像は高品質でサイズが大きければ良い、なんて思われがちですが決してそれだけでは価値ははかれません。そう感じさせてくれるのがアニメーションGIFの存在です。今回はクライアントサイドだけでGIFを生成するgif.jsを紹介します。
[](http://images.moongift.jp/2013/05/Screenshot 2013-05-21 12.00.08.1369140081.png)
表示されているのはGIF画像ですが、実際の元画像はJPEGになります。しかも複数の画像を組み合わせてアニメーションGIFを生成する事もできます。
[](http://images.moongift.jp/2013/05/Screenshot 2013-05-21 12.00.24.1369140087.png)
上の写真と比べてちょっと動いているのが分かるかと思います。速度だって自在に変更できます。
[](http://images.moongift.jp/2013/05/Screenshot 2013-05-21 12.00.35.1369140092.png)
こちらはクオリティを変更できるデモ。品質を落とせばファイルサイズも小さくなります。
[](http://images.moongift.jp/2013/05/Screenshot 2013-05-21 12.00.41.1369140099.png)
品質を高くすればちょっとしたノイズが目立たなくなりますが、それでもGIFの限界はあると言えるでしょう。
GIFの生成処理は重たいため、Web Workersを使ってバックグラウンドで処理を行っているのが特徴です。また、File APIを使っているため、対応ブラウザはGoogle ChromeやFirefox 17以上、Safari6以上、IE10、iOS6のMobile Safari以上に限定されます。
MOONGIFTはこう見る
JavaScriptによる画像操作も大規模なものでない限りは難しくなくなってきました。File Readerを使えばファイルアップロードする前にファイルの内容を読み込んでチェックしたりできます。画像であれば予めリサイズしたりすればアップロードにかかる時間も短くなります。バックグラウンドでアップロード処理を開始しておく事もできます。
画像コンテンツはオンラインに溢れているため、面白いアイディアさえあれば素材には困りません。アニメーションGIFを使ってVine風のサービスだって作れるかも知れません。