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

JavaScript UI

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

サンプル

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-script-type" content="text/javascript">
<title>タイトルロールテスト</title>
<script type="text/javascript"><!--

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);
  }
};


var titleroll = new TitleRoll();

function switchButton(sender){
  if (titleroll.isrolling()) {
    titleroll.stop();
    sender.innerHTML = "開　始";
  } else {
    titleroll.start('メッセージが届きました');
    sender.innerHTML = "停　止";
  }
}

//--></script>
</head>
<body>
<button onclick="switchButton(this)">開　始</button>
</body>
</html>