空想犬猫記

※当日記では、犬も猫も空想も扱っておりません。(旧・エト記)

ProgressIndicator

Professional な人には(そうでない人も,恐らく)禿しく既出だとおもうけど,prototype.js の記法を使って,ProgressIndicator を制御するクラスを作ってみた。

var ProgressIndicator = Class.create(); ProgressIndicator.prototype =
{
    count : 0,
    indicator : null,

    initialize : function(indicatorId)
    {
        this.indicator = $(indicatorId);
        this.indicator.className = "none";
    },

    run : function()
    {
        ++this.count;
        this.update(false);
    },

    stop : function()
    {
        --this.count;
        this.update(false);
    },

    update : function(reset)
    {
        if (reset || this.count < 0)
            this.count = 0;

        this.indicator.className = 0 == this.count ? "none" : "";
    }
};

使い方は,例えば,ここで砂時計アニメーションをゲットして

<img id="id_name" src="hoge.gif" />

という風に,id を指定して HTML に画像を埋め込んでおく。JavaScript を OFF にしている人のことを考慮すると,あらかじめ class="none" としておいた方が無難かも知れない。あと,CSS で .none { display:none } を定義しておく。そして,読み込み時に

var indicator = new ProgressIndicator("id_name");

して,なんか重い処理をする前(例えば XMLHttpRequest する前とか)に indicator.run() を実行。おわったら indicator.stop() を呼ぶ。ちょっとクフウしたのは,インクリメンタルなカウンタを付けて,一つの indicator を共有することができるようにした所と,indicator.update(true) を呼ぶと強制的に indicator を消す(リセットする)ことができるようにした所。update 関数を工夫して,プログレスバーも実現できるようになるとうれしい。

作ってみてだんだん巷の Web アプリケーションの動作原理が分かってきた。JavaScript は,きれいに組めないという苦手意識があったけど,Object.prototype を知ったおかげでようやく糸口を掴めた気がする。ここまでくれば,あとは平坦かも知れないなぁと楽観してみる。