ファビコンにプログレスバーを表示させる！ #JavaScript

ファビコンを動的に設定することで、プログレスバーやバッジを表示させて、
他のページを開いていても、タブを見るだけで状況がわかるようになります。

通知系

進捗系

tommoor/tinycon

通知系は、tinycon.jsを使うことで簡単に実装できます。

T.setOptions({
    width: 7,
    height: 9,
    font: '10px arial',
    color: '#ffffff',
    background: '#549A2F',
    fallback: true
});

T.setBubble(7);

lipka/piecon

進捗系は、piecon.jsを使うことで簡単に実装できます。

Piecon.setOptions({
  color: '#ff0084', // Pie chart color
  background: '#bbb', // Empty pie chart color
  shadow: '#fff', // Outer ring color
  fallback: false // Toggles displaying percentage in the title bar (possible values - true, false, 'force')
});

Piecon.setProgress(7);

http://タイマー.co

KPTなど、チームで時間を決めてMTGする際、
スクリーンに映すと便利なタイマーアプリです。

本記事の技術を使って、開発しています。