こんな手が!Faviconを使って通知数を表示する「Tinycon」
Tinyconは未読などの通知をWebブラウザのお気に入りアイコンの上に表示するソフトウェアです。
Webサービスでメッセージをやり取りしたり、チャットなどで新着通知を出したいことがあります。そんな時にタイトルで教える方法もありますが、Tinyconは面白いことにFaviconを使って通知ができます。
![]()
Faviconの下に数字が書かれています。数秒ごとに自動で繰り上がっていきます。
実装する際のコードです。数値を当てるだけの簡単な使い方です。
Faviconの画像に数値を重ねて表示する程度であればサーバサイドでも実装できるでしょうが、TinyconはリアルタイムにFaviconを変化させられる点が強みです。メッセージを受け取ったタイミングで変化させればユーザの気付きにも役立つことでしょう。
TinyconはJavaScript製のオープンソース・ソフトウェア(MIT License)です。
MOONGIFTはこう見る
iOSアプリであれば通知の仕組みがありますが、Webアプリのお気に入りアイコンを配置した場合は同じ画像を取得するのみです。そこで予めユーザごとに生成される画像のパスを分けておくと、iOSが定期的にアイコンを取得してくれるのでその際に通知と画像を合成して送信するという仕組みがあります。
Tinyconはお気に入りアイコンにメッセージ数を出すという意味においては似たようなソフトウェアですが、クライアントサイドだけで全て行えるというのは面白いです。サーバサイドでは何の負荷もないので、未読数を管理する仕組みがあるならば組み込んでみたいソフトウェアです。