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

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

通知系

進捗系

tommoor/tinycon

tommoor/tinycon

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

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

T.setBubble(7);

lipka/piecon

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する際、
スクリーンに映すと便利なタイマーアプリです。

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