faviconをアニメーションさせてみる

ブラウザのタブに表示されるfaviconが通知を教えてくれることがあります。赤いマークがついたりして、新着情報があることをfaviconがユーザにメンションしてくれます。なかなか気の利いた心遣いです。 通知が来るとリアルタイムでfaviconが変化し、通知に目を通すとその場で元に戻るので、表示するfaviconを動的に切り替えていることがわかります。 ということは、faviconを一定間隔で次々に切り替えていけばパラパラ漫画のようにアニメーションさせられるかも？　──という子供のような思いつきを実行に移してみます。 本当にfaviconを変更できるか？ まずは、faviconを簡単に切り替えられるかどうか実験してみます。faviconを2枚用意して、ボタンを押すと切り替わるだけのjQueryを書きました。 <button><img src="./favicon-a.png"></button> <button><img src="./favicon-b.png"></button> $(function() { $('button').on('click', function() { $('link[rel="icon"]').attr('href', $(this).find('img').attr('src')); }); }); 結果は、 うまくいくようですね！ どれくらいの速さで動くか？ 次に、どのくらいの頻度でfaviconを切り替えられるか実験します。先ほど使った2枚のfaviconをsetIntervalで交互に切り替えるjQueryを書きました。フレームレート（秒間何枚の画像を切り替えられるか）をあれこれ変更して確認します。さてWebコンテンツのようにサクサク書き換わればよいのですが…… <link rel="icon" href="./favicon-a.png" data-alt="./favicon-b.png"> $(function() { const frameRate = 220; //フレームレート(ms) const $target = $('link[rel="icon"]'); window.setInterval(function() { const favIcon = $target.attr('href'); const altIcon = $target.attr('data-alt'); $target.attr({ 'href': altIcon, 'data-alt': favIcon }); }, frameRate); }); 結果は、 実験の結果、筆者の環境ではChromeで約4.5fps、Firefoxでは約9fpsと、想像以上に低いフレームレートでした（一般的な動画は約30fps）。これより切り替え頻度を上げるとコマ落ちします。あまりリッチな表現はできなそうです。 アニメーションを作る フレームレートの低いカクカクの動きしかしてくれないことがわかりましたので、アニメーションも割り切って地味なものにします。「ハートマークが拡大しながらフェードアウトしていく」という簡単な6フレームのアニメーションを用意しました。 最終フレームは通常時のアイコンにしてあります。アニメーション終了後、初期状態にリセットする手間をはぶくためです。 きっかけを与えると上の6フレームのアイコンが一周する、というjQueryを書きました。ハートマークのボタンを押すとアニメーションが走ります。 $(function() { const frameRate = 220; // フレームレート（ms） const frameAmount = 6; // フレーム数 let frameCount = 0; // 現在のフレーム let animationId; // setInterval用ID // [関数]アニメーション開始 function startAnimation() { animationId = window.setInterval(animateFavicon, frameRate); } // [関数]アニメーション処理本体 function animateFavicon() { if (frameCount < frameAmount) { const faviconPath = './frames/favicon_' + frameCount + '.png'; $('link[rel="icon"]').attr('href', faviconPath); frameCount++; } else { // 最後のフレームまで行ったら停止し、カウンターをリセット clearInterval(animationId); frameCount = 0; } } // クリックイベント $('button').on('click', function() { startAnimation(); }); }); 結果…… 地味……！ でも、うまくいきました。低いフレームレートと狭い面積という制限はありますが、アイデアしだいでサイトに便利なインタラクションをつけ加えることができるのではないでしょうか。 なお、切り替えのたびにアイコン画像のリクエストがWebサーバに飛ぶことには注意が必要です。ループで回しっぱなしにしたり長大なアニメーションを組んだりするとサーバの負荷になるかもしれません。 ...