2008/01/31

Recent entries from same category

  1. どこでもスターグリースモンキーは開発者を殺す?
  2. はてなには、既存ユーザを無視したサービスを作って欲しい
  3. はてなドメインでなくても、モバイル端末から「はてなスター」を付けてもらうハック
  4. はてなスクリーンショットに微笑む
  5. 消えていった、お星様へ

はてなスターの☆をクリックする度に画面を鮮やかに彩るグリモン書いた」は好評で、はてなスター日記でも取り上げて頂きました。
ただ、はてなブックマークでは、「Internet Explorerの為見れない」といったコメントを頂きました。

現在、Hatena Beautiful Starは
  • Firefox
  • Opera
  • Safari
にて動作確認をさせて頂いておりますが、実はInternet Explorerでも動かせない訳ではありません。

TrixieというIE版のGreasemonkeyを入れ C:¥Program Files¥Bhelpuri¥Trixie¥Scripts¥ というフォルダにスクリプトを置く事で、本格的なGreasemonkeyスクリプトこそ動きませんが、Hatena Beautiful Starくらいならば動きます。

また、Hatena Beautiful Starは元々ブログパーツとしても使える様に考えていたので、スクリプト内のFireworkクラスを切り取ればどこでも花火を打ち上げる事が出来ます。
var FIREWORKS_ANIMATION = 30;
var Firework = function(x, y, n) {
    var self = this;
    this.size = n;
    this.seq = 0;
    this.xacc = new Array();
    this.yacc = new Array();
    this.divs = new Array();
    for(var m = 0; m < this.size; m++) {
        var div = document.createElement('div');
        div.style.position = 'absolute';
        div.style.left = '' + x + 'px';
        div.style.top = '' + y + 'px';
        var c = 'white';
        switch(m%6) {
        case 0: c = 'yellow'; break;
        case 1: c = 'red'; break;
        case 2: c = 'pink'; break;
        case 3: c = 'blue'; break;
        case 4: c = 'azure'; break;
        case 5: c = 'cyan'; break;
        }
        div.style.color = c;
        div.style.zindex = 256;
        div.innerHTML = '';
        document.body.appendChild(div);
        this.divs[m] = div;
        this.xacc[m] = 10*Math.random()-5;
        this.yacc[m] = 10*Math.random()-20;
    }
    this.doWork = function() {
        if (self.seq > FIREWORKS_ANIMATION) {
            clearInterval(self.timer);
            for(var m = 0; m < self.size; m++) {
                document.body.removeChild(self.divs[m]);
            }
            return true;
        }
        for(var m = 0; m < self.size; m++) {
            var px = parseInt(self.divs[m].style.left) + self.xacc[m];
            var py = parseInt(self.divs[m].style.top) + self.yacc[m];
            self.divs[m].style.left = '' + px + 'px';
            self.divs[m].style.top = '' + py + 'px';
            self.yacc[m]++;
        }
        self.seq++;
        return true;
    }
    this.timer = setInterval(this.doWork,1);
}
という風に切り出し、何かのアクションで new Firework(xpos, ypos, star_count);
とすれば、★が舞います。
以下実行例です。

皆さんも自分のブログで花火を打ち上げて見られてはどうでしょうか?
Posted at by | Edit