おそらく常に起動している(開いている)ような Ajax アプリケーションを使う場合、タブブラウザを使っていることがほとんどだろう。そのアプリが例えば『新着メッセージがある』といった状態が変わったことを通知したいときに、ユーザーに目立たせるにはどうしたらよいだろうか。
Gears などを使うとブラウザ外へのアラートができるようだが、普通に行うにはタブ(タイトル)部分に注目させることになるだろう。そこでタイトルをロールしてみるサンプルを書いてみた。
TitleRoll クラス
function TitleRoll(){} TitleRoll.prototype = { timerid: null, start: function(text, interval){ var itv = (interval != undefined) ? interval : 500; this.text = document.title; document.title = text + " “; this.timerid = setInterval(function(){ with(document){ title = title.substr(1) + title.substr(0, 1); } }, itv); }, stop: function(){ if (this.timerid == null) return; clearInterval(this.timerid); this.timerid = null; document.title = this.text; }, isrolling: function(){ return (this.timerid != null); } };
TitleRoll クラスとしてタイトルロール機能を実装してみた。start メソッドにロールするテキスト値と、省略可能なスクロール間隔値(ミリ秒)を渡すことでロールを開始する。stop メソッドで停止してタイトルを元に戻す。isrolling メソッドはロール中かどうかを返す。