Happy Programming

#FFFF00

や

#FF0

あるいは

rgb(255, 255, 0)

等と表現できるが、Javascriptを使って簡単にランダムカラーを作成する事が出来る。

Mathという数学関数と定数を集めたオブジェクトがあるが、こいつのrandomメソッドを使う。

randomメソッドは0.0から1.0までの乱数を返してくれる。

例えば

0.43166892835870385
0.05968230310827494
0.43925391463562846

こんな具合の数値を返す。

これらに対して256を掛けてやる。

上の数値はそれぞれ

110.507245659828
15.2786695957184
112.449002146721

となる。

次はそれらの数値に対して同じくMathオブジェクトのfloorメソッドを適用する。

すると上の数値は

110
15
112

となる。

なぜ256を掛けるかというと0から255までの数値が欲しいからだ。

そしてそれらの数値に対して今度はtoStringメソッドを呼び出してやる。

toStringメソッドの引数には16を渡してやる事で16進数の文字列を返してくる。

上の数値は

"6e"
"f"
"70"

となる。

あとはこれらの文字列を連結してやればいいのだがこのままでは桁が1つ少ない。

上の"f"は"0f"として扱わなければいけないのでprintfのような関数を自分で作ってしまえばいい。

最終的には文字列の先頭に"#"を足して

"#6e0f70"

という値が得られる。

それを

elem.style.color = "#6e0f70";

としてやる事で文字列の色を変える事が出来る。

prototype.jsにはこれらの作業をさらに簡単にする"toColorPart"というメソッドが存在する。

これを使えばさっきの桁が1つ足りなくなるかもしれない問題も起きない。

力技だが次の1行でカラーを作る事が出来る

var color = '#' + $R(0,2).collect(function(e) {return Math.floor(Math.random() * 256);}).invoke('toColorPart').join('');

下のスクリプトはすべての'DIV'要素の背景色をランダムに設定している。

<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript">
document.observe('dom:loaded', function(event) {
    $$('div').each(function(elem) {
        var color = '#' + $R(0,2).collect(function(e) {return Math.floor(Math.random() * 256);}).invoke('toColorPart').join('');
        elem.setStyle({backgroundColor: color});
    });
});
</script>

サンプルページ