あかつきのお宿

CSSで文字や背景の色を指定することができますが、その色をランダムに表示したい、あるいは変化させたい、そんなとき。PHPやjavascriptを使って動的にRGBカラーを指定してやれば、願いは叶う。

というわけで、思いついてはみたものの、特に使う日は来ない……というか、需要があったとしてもわざわざ記事にするほどのものでもないのですが、それをあえてやってしまうのがあかつきのお宿のウザいところです。

そんな役立つ情報ではないから説明もかな〜り雑にやっちゃいますが、あまり気にしないでくだせえ。とりあえず「ブログの更新が止まったわけではないんだな」ってことだけ読み取ってもらえればオッケーです^^

ほんじゃ、いきまっせー。

PHPの場合

ようは、R、G、Bそれぞれの値を0〜255の範囲で指定できれば良いわけですよね。

なので、こんなコードを書けば良い。

<?php
$color = array();
for($i = 1; $i <= 3; $i++) {
  $color[] = rand(0, 255);
}
?>

<p style="color:<?php echo 'rgb('.implode($color, ',').')' ?>">sample</p>

これだけです。あえて説明するまでもなくこれだけです。まごうことなきこれだけです。

もしrgbではなくalpha値を加えたrgbaで指定したいなら……まあ、もはや言わずもがなっすね。for文のループ回数を一回増やして、alphaだけは0〜1の範囲で数値を指定できるように分岐処理をするとか、alpha値だけは別に指定するとか、やり方はフリーダムです。

これで指定できるんだからオッケーって話ではあるんですが、もしどうしても自分は16進数表示でやりたい（#ffffffみたいな）って場合は、PHPにはdechex()っていう10進数の数字を16進数に変換してくれるやつがあるんで、それを使って空文字でimplode()すれば行けます。

ただ16進数の場合に注意しなきゃいけないのは、10進数で値が15以下だった場合、16進数だと0〜fの一桁で出力されてしまうので、その場合は00〜0fになるように、sprintf()とか使って二桁にしてやる必要がありますね。

$color[] = sprintf('%02s', dechex(rand(0, 255)));

一例を挙げると、こんな感じ。

javascriptの場合

ボタンを押したときに色を変化させるような場合は、PHPよりもjavascriptに頼ることになるでしょう。

でも基本的なやり方は一緒っす。

<script>
var color = [];
for(i = 1; i <= 3; i++) {
  n = Math.floor(Math.random() * 255);
  color.push(n);
}
document.getElementById('sample').style.color = 'rgb('+color.join(',')+')';
</script>

<p id="sample">sample</p>

こんなんで良いんじゃないかしら。

PHP同様、16進数で指定したいなら、10進数の数字を16進数に変換してあげれば良い。

n = Math.floor(Math.random() * 255).toString(16);
color.push(n);

value.toString(16)っていう書き方をすると、10進数を16進数に変換できます。ただし、やっぱりこっちも10進数で15以下の値のときは注意しなきゃいけない。しかもjavascritpにはPHPのsprintf()みたいなのがないから、自分でその処理を実装するとか、何かしらの代替策が必要になる。

ちなみに、javascriptでもsprintf()を使えるようなスクリプトを組んでくれている人などもいますので、お借りするのも良いですね。

javascriptでsprintf






たいしたことはやってないです。ただ、ふと「PHPとかjavascriptって、10進数を一発で16進数に変換できたりすんのかな〜」って思って調べてみたら実際にできるみたいだったから、それを使って何か試してみようと思ってやった次第です。

たぶん、この記事の中で一番有益な部分はどこだろうって聞かれたら「javascriptでsrpintfを使えるようにしてくれてる人がいた」ってとこですかね。これは僕もお世話になってます。感謝感激志茂田景樹です。

そんじゃ、また次回お会いしましょ〜。