JavaScript
HTML5
canvas
favicon

faviconに通知数を表示させるやつをjsでやる

More than 1 year has passed since last update.

スクリーンショット 2016-02-17 22.55.42.png

チャットワークなんかでよくある通知されるとfaviconにも数字がつくやつ。

王道実装はデフォルトfaviconとは別に通知用のfaviconファイルを前もって用意しておいて切り替えする方法なんだろうけど、別の方法も思いついたのでやってみる。


Canvasを使ってfavicon画像の上に通知バッジを描く


描画用のcanvasを用意する.html

<body>

<canvas id="canvas" width="32" height="32"></canvas>
</body>


canvasにfaviconと通知バッジ(99)を描画する.js

var baseFaviconImg = new Image();

baseFaviconImg.src = "favicon2.png";
window.onload = function(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(baseFaviconImg, 0, 0);
ctx.fillStyle = "#f00";
ctx.fillRect(11,20, 18,12);
ctx.font = "bold 10px 'ヒラギノ角ゴ ProN W3'";
ctx.fillStyle = "#fff";
ctx.fillText("99", 13, 30);
}

スクリーンショット 2016-02-17 23.27.58.png

こうなる


描画したものをpngにする

var faviconImage = canvas.toDataURL('image/png');

とするとcanvasの像が base64形式でpngファイルのURIとして得られる。

ちなみに、Webサーバを介さない場合はクロスドメイン制約に引っかかるので

baseFaviconImg.crossOrigin = 'Anonymous';

と設定するか、素直にwebサーバ立てると良い。(上記、Firefoxでは出来たが、Chromeではダメだった。)


得られたURI

data:image/png;base64,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


スクリーンショット 2016-02-17 23.51.37.png


生成された物をfaviconに設定

後はいつもどおりhrefを書き換えるだけ。


favicon書き換え.js

document.getElementById('favicon').href=faviconImage


(潰れてるけど...)出来た!!!

スクリーンショット 2016-02-17 23.55.28.png

今回は解説のためにcanvasが表示されるようにしたけれど、

var canvas = document.createElement('canvas');

canvas.width = 32, canvas.height = 32;

と定義する事で非表示のまま扱うことが出来る。