こんにちは。オンラインの金沢です。

通勤電車の窓から外を眺めていると、日に日に桜の花が散っているのがわかります。私も桜は好きなほうですが、すぐに散ってしまうからこそ、珍しさや神秘さから魅力を感じるのではないでしょうか。

その発想からホームページで少し遊んでみました。ある条件下で背景やカラーが桜になるというものです。3月から5月までの期間限定で、ページ読み込み時の10パーセントの確率でデザインが変わります。

やり方はさほど難しくなく、HTMLヘッダーにPHPのif文でCSS読み込みタグを追加するだけです。条件判定用の関数を用意しておくと、ヘッダー内がスッキリします。

まず、3月から5月の間かどうかを確認する関数が次のようになります。

function is_spring() {
	$month = date( 'n' );
	if( $month >= 3 && $month <= 5 ) {
		return true;
	} else {
		return false;
	}
}

PHPのdate関数にフォーマットパラメータを「’n’」で指定すると今が何月かが数値で得られます。その値が3以上5以下であればtrueを返すようにしています。単純ですね。

次に、10パーセントの確率は次のような関数を作ってみました。

function is_percent( $percent = 100 ) {
	$rand = mt_rand( 1, 100 );
	if( $percent >= $rand ) {
		return true;
	} else {
		return false;
	}
}

引数$percentに100以下の数値を入れれば、その数値のパーセント確率でtrueを返します。mt_rand()が乱数を生成する関数となっており、パラメータを指定することで1から100までの100通りの数に制限しております(PHPマニュアル – 関数リファレンス参照)。この乱数が$percent以下になる確率が、求める確率となりますので、比較演算子でtrueかfalseを返すようにしております。

これらの関数をif文の条件式に&演算子で合わせて入れて、

if( is_spring() && is_percent(10) ):
	echo 'CSSファイル読み込みタグ';
endif;

のように記述することで実装完了です。

ホーム画面にて300回のリロードを「F5」キーで行ってみた結果では、37回も桜が咲きました。また、「Ctrl」＋「F5」によるスーパーリロードで100回行ってみると、6回しか反応がありませんでした。これらの結果をあわせて確率を計算すると、実測値は10.7パーセントになります。少し大きいですが、誤差の範囲内と言えるでしょう。

今回、背景に使わせて頂いた桜の画像はホームページ用素材無料公開サイト「風と樹と空とフリー素材」からダウンロードさせて頂きました。花びらの密度が少し大きかったので、減らすようにPhotoshopで加工して使用させていただきました。

背景だけでなく見出しタグのカラーもピンクに変わるようにしました。やはり桜のデザインは……萌えますね。本日は以上となります。

金沢