faviconにバッジを動的に付ける方法：JavaScript + Canvas

7241 ワード
favicon JavaScript JavaScript テキストリンク

最近色んなサービスで、faviconの上にバッジをつけてるのをよく見るので、どうやって実現しているんだろうなーと調べたら、Canvasで描画したものに差し替えているっぽい。というわけで、Canvasさわったことないけど、うにうに書いてみた。

こんなかんじのイメージ。

icon.html
<!DOCTYPE html>
<html>
<head>
    <link rel="icon" href="favicon.ico">
</head>
<body>
<script>
    var metaIcons = document.getElementsByTagName('link');
    var metaIcon = metaIcons[0];

    var canvas = document.createElement("canvas");
    canvas.width = 16;
    canvas.height = 16;
    var context = canvas.getContext("2d");

    var img = document.createElement("img");
    // CORS対策
    img.crossOrigin = "Anonymous";
    img.onload = function() {
        context.clearRect(0, 0, 16, 16);
        context.drawImage(img, 0, 0, 16, 16, 0, 0, 16, 16);

        // 円形を描画
        context.beginPath();
        context.fillStyle = "#ff3686";
        context.arc(11, 11, 5, 0, Math.PI*2, true);
        context.fill();

        // 中の数字を描画
        context.font = "10px arial";
        context.fillStyle = "#ffffff";
        context.textBaseline = "top";
        context.textAlign = "right";
        context.fillText('4', 14, 5);

        // dataURIとしてタグにセット
        metaIcon.href = canvas.toDataURL();
    }
    img.src = metaIcon.getAttribute('href');
</script>
</body>
</html>

スマホとかレティナな解像度などを無視して、16px固定でのサンプルだけど、だいたいのイメージはつかめた。ブラウザとかによっても、表示位置を調整する必要がありそうなので、ちょっと面倒くさいけど、わりと簡単に実装できそう。