Neworld – Blog

TwitterのアイコンをアニメーションGIFにしてみる

このエントリーを含むはてなブックマークはてなブックマーク - TwitterのアイコンをアニメーションGIFにしてみる このエントリをつぶやくこのWebページのtweets Share on Tumblr FC2ブックマークへ追加 Googleブックマークに追加 Bookmark this on Delicious

クルンッヒラッという感じの画像をアイコンにしたかったのでひとまずいろいろ調べつつやってみた。

まずは1個目

まずアニメ動画から数十フレーム引っこ抜いてGIFアニメを作成。
※今回はTwitterに表示させる方法なのでアニメーションGIFの作成は各人調べてください。

して、1時間ほど格闘して作成したのがこちら。

いい感じにクルンッヒラッしてるじゃない!

ということで早速上げてみようとしたところ・・・・・・
中々アップできないねこれ。

キャンセルしてみると見事に表示されない。
※ただし何故かHootsuiteのオリジナルサイズだと表示された。

調査して2個目

改めて調べてみるとどうやらTwitterの仕様変更で以前はpngファイルに偽装することで問題なくアップできていたようだが仕様変更以降48×48サイズのgifしか受付ないらしい。
どうやらTwitterは相当gifがお嫌いなようです。

というところで150×150→48×48にサイズダウンした以下の画像を上げてみる。

小さくなったけど基本フクロウさんのサムネイルでしかみないので特に問題はない。

結果、再びうまくいかない。

改めまして3個目

再度の調査によるとどうやらアニメーションGIFだとファイルサイズが20kb未満でないとうまく行きにくいとか。
という訳でなぜかパッと見色数が非常に少ないのに128色に指定していたので16色まで減色
容量もグッと減りました。

三度目の正直ということでアップロード。
結果は・・・うまく行ったー!

と思ったのもつかの間。
1コマ目のまま全く動かないのである。
クルンッヒラッしてないじゃない・・・

今度こそと4個目

ということで今まで散々調べてこれ以上の情報はのってなかったのでなんとなく残りの候補を考えた結果フレームレートを下げてみる。

1枚4/100秒(=25fps)に設定していたのを枚数を半分、時間を2倍にして8/100秒(12.5fps)に変更。

再度試してみると・・・

うまく行ったー!
http://twitter.com/nao_neworld
ただし見ての通りなぜかプロフィールページのサムネイルだけなんかすごいことに。
しかしこの時点ですでに3時間弱費やしているので原因究明は放置してこのまま。

ひとまずhootsuiteで普通に見れるのでとりあえずは問題なしという結論に至りました。
(そもそもプロフィールページなんてそうそう見ないし。

クライアントに関してアニメーションGIFが動くクライアントと動かないクライアントがあるので注意してください。
恐らくwebクライアントは動いてデスクトップやスマフォクライアントは動かない気が。
webhootsuiteついっぷるは動くのを確認、スマフォクライアントは5個ぐらい試してみたけどどれも動かず。

調べてみるとTwitterのアイコンをアニメーションGIFにするサービスとかあったりしますが自分でやりたいという方はぜひご参考に。

最後にポイントまとめ

アイコンサイズは48×48以下
ファイルサイズは20kb未満
フレームレートが高いと動かない場合がある


Categorised as: Twitter, 備忘録


Comments are closed.