Twitterが公式でアニメGIFに対応したのでアニメGIFに文字を合成するツールを作ってみた

日本時間6/19 午前2時頃にTwitterが公式にアニメGIFに対応するという発表した。

先日、Twitterでgifアニメを動かせるようにしたでも書いたようにGIFMAGAZINEでアップロードしたアニメGIFをTwitterのタイムラインで動かせるように対応したばかり。

この機能はねとらぼとかgifmagazineに名前の似ているgigazineなどにも取り上げられたので浮かれてたんだけど、このニュースには度肝を抜かれた。

対応するなら早く言って〜〜と思ったんだけど、アニメGIF好きなボクとしてはTwitterでアニメGIFが動かせるのは最高に便利だし、何の文句もない。

ただ、あえて言いたいことがあるとするならば、「なぜmp4に変換するの!!」ってところ。

知ってる人もいるかもしれないけど、mp4はアニメgifより格段に軽い。

それと、Vineがmp4だしその辺のリッチコンテンツはすべて規格を統一しておきたかったのかもしれない。

だからTwitterではmp4に変換してると思うんだけど、これ、アニメGIFの画質をかなり落とすことになる。

大抵の拾い物gifとかselfyとかのアニメGIFなら全く問題ないと思うんだけど、何日もかけて丹精込めて作ったアニメGIFがmp4にされてしまうのは少々辛いものがある。

たぶんTwitterのことだからきっとその辺の変換技術もチューニングしてくれると思うし、時間が解決してくれるはず。期待したい。

ニュースの話はここまで。

アニメGIFに文字を合成するツール

1ユーザーとしてTwitterのTLでアニメGIFが動くなんて最高に感動ものなので、ボクはその最高なアップデートを最高に楽しむためのツールを作った。

それがアニメGIFに文字を合成するツール。

これは文字通り、アニメGIFに文字を合成して、GIFを再生成するツールだ。

Twitterで、ちくわぶで拾った画像を使ってコミュニケーションを行なってる人が多々いると思うのだけども、それに似たようなことをアニメGIFでもやりたかった。

web上のツールでアニメGIFに文字を合成するツールを探したのだけどなかなか見当たらなかったし、この際だし作ってしまおうということで1晩かけて作ったわけ。

これでもwebエンジニアの端くれだし、技術で応えたかったってのもある。

で、使い方としては、

①手持ちのアニメGIFをアップロード

f:id:razokulover:20140619230252p:plain

②文字を入力して、位置とか文字の大きさや色を弄る

f:id:razokulover:20140619230315p:plain

③アニメGIFを生成して、ダウンロード

f:id:razokulover:20140619230329p:plain

f:id:razokulover:20140619230344p:plain

という具合。

例えばこういうだるそうな猫gifもこの機能を使えば、

f:id:razokulover:20140619225410g:plain

こんな感じで味わい深くなる。

LGTM用アニメGIFとかもかなり作りやすくなると思う。

f:id:razokulover:20140619225553g:plain

文字の位置を弄るあたりがかなり手抜きになってるので少々使い勝手が悪いかもしれないんだけど、その辺はあとでブラッシュアップします。

あと、技術的なところなんだけど、今回もアニメGIF界隈ではおなじみのjsgifをふんだんに使用して、すべてアニメGIFの操作をクライアント側のみで完結させている。

canvasがほんと何でもできてすごい。

毎度のことながらcanvasに感謝。

ということで、存分にアニメGIFに文字を合成してほしい。

Twitterでアップロードできる気軽さと文字入りのアニメGIFが合わされば、今までよりもっともっと楽しいコミュニケーションができる。

Twitter + アニメGIFで幸せな生活を送ろう!



クライアントアプリもあるからダウンロードしてくれたらうれしい。