Ajax アプリケーションのステータス変更をタイトルをロールさせて目立たせたい

June 7, 2008

おそらく常に起動している(開いている)ような 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 メソッドはロール中かどうかを返す。

サンプル

タイトルロールテスト

tilfin freelance software engineer