Help us understand the problem. What is going on with this article?

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

More than 3 years have 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;

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした