【JavaScript】はてなブログに貼ったgif画像に再生ボタンをつける【Gifffer】

ゲーム系のブログなんかをやっていると、動きを見せるためにgif画像を使いたい時があると思います。
しかしブログみたいな複数ページが連なっているようなところでgifを貼りまくるとそれぞれが勝手に動くのでなかなかにCPUを食いまくります。
そこで紹介したいのがGiffferというgif画像に再生ボタンをつけるJavaScriptライブラリです。
はてなブログ上でも使えそうだなと思い、試してみたらいけたのでそのやり方を書いていきます。

↑こんな感じになるよ！チタンダエル！

やり方

設定→デザイン→カスタマイズ→フッタを開き、下記のhtml及びjavaScriptを貼り付けます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://krasimir.github.io/gifffer/lib/gifffer.js"></script>
<script type="text/javascript">
     window.onload = function() {
        Gifffer();
     }
</script>

あとはgif画像を貼り付ける時に

<img data-gifffer="http://チタンダエル.gif">

こんな感じに指定してやると再生ボタンが勝手につけられます。超簡単！

捕捉

Gifffer.jsはHTML5のCanvasを利用してサムネイルを作ってくれているみたいですね。
読み込みに若干時間はかかるけどなんとなくページスクロールが軽くなったような気がします。
あと上のスクリプトに書いてあるURLはgifffer.js開発元から勝手に引っ張ってきたものなので、あっちで変更があると動かなくなる可能性があります。
下の開発元サイトからダウンロードしてきて自前サーバなりDropBoxなりに置いて、そこから引っ張ってくることをオススメします。
それとはてなブログスマートフォンサイト版だとヘッダとフッタをいじれるのはPro版かららしい、さすがはてな汚い課金しよ...

Gifffer
http://krasimir.github.io/gifffer/