和田憲幸のブログ

前々からやってみようと思ってたけど、なかなかこういう機能付けるものがなかったのでちょうど良かったですね。寝てたら「faviconのアレやれー」という夢を見てしまって1時間もせずに起きてしまった…。

Lifelogs2.0.0 beta デモページ
ID：guest1～6（お好きなのでどうぞ） ／ PW：guest

faviconのアレの機能説明

まぁ昨今は全部タブブラウザですわな。ライフログが非アクティブの時に新しいログが増えた場合（他の誰かがログした場合）にfaviconのとこに未読件数が表示されるという単純なものです。canvasを使えばもっとスマートにできるらしいけど、面倒くさそうだったので単純にhrefを切り替えてます。

デモページを2つのウィンドウ又は2つのブラウザで開いた状態で片方でログすると片方のfaviconが変わるとおもいますよ。

仕組み

window.blurの時にログのsince_id的なものを記憶して、以後ログが増えたら差分の数値をfaviconに渡すという仕組みです。window.focusした時に監視をやめてfaviconを初期値に戻す。みたいな。やってみると意外と単純な仕組み。通常のWebサイトではほとんど使わないだろうけどWebアプリだと便利ですねやっぱ。

上記のスクリーンショットのようにタブを固定してるとfaviconしか表示されないしね。
あとはこのfaviconで通知するのをTODOの件数にするかログの未読件数にするかライフゲージ残量にするかが悩ましいところかな。いや～でも簡単に実装できてよかった。心置きなくこれで眠れる。まぁもう朝の7時ですけどね。

faviconを動的にjavascriptで差し替えるために

faviconのlinkタグをremoveして、もう一度linkタグをheadに差し込めばいいらしいです。

その他の追加機能

フィールドに何も入力していない状態でENTERを押すと「自分のログだけ表示」に切り替わります。やっぱこの操作は便利だなー。なんでみんなやらないんだべか。カチカチ感が気持ちいい。あと他にもなんかいろいろ手を入れたけど忘れました。