Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
103
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

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

スクリーンショット 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
103
Help us understand the problem. What are the problem?