2013

10

18

JavaScript、PHPで要素をランダム表示・出力してやんよ!!!

Pocket
LINEで送る
Facebook にシェア
reddit にシェア
LinkedIn にシェア

ページ読み込みの度に対象の要素をランダムで表示したい処理を行う。

JavaScriptでランダム表示する場合

画像やテキスト単位のランダム表示

JavaScriptでランダム表示させる場合は対象要素が画像やテキスト単位であれば、HTMLの対象項目の直前に直接、短いJavaScrip記述で処理可能。

JavaScriptの記述

img = new Array();
img[0] = "image1.jpg";
img[1] = "image2.jpg";
n = Math.floor(Math.random()*img.length);
document.write("<img src='"+img[n]+"' border='0'>");

DOM要素単位でランダム表示

DOM要素単位をセレクタとして指定する場合は、jQueryライブラリで記述した方が簡単です。 たとえばid名「RundumA」と「RundumB」の中身をまるごとランダム表示の対象とする場合は以下の記述。

HTMLの記述

<div id="RundumA">
	Aパターン
</div>

<div id="RundumB">
	Bパターン
</div>

CSSの記述

div {
	width:250px;
	height:150px;
	display:none;
	text-align:center;
	line-height:150px;
	color:#FFF;
	font-weight:900;
}

#RundumA {
	background:#F00;
}

#RundumB {
	background:#00F;
	
}

jQueryの記述

$(function(){
    ABRundum = new Array();
    ABRundum[0] = "#RundumA";
    ABRundum[1] = "#RundumB";
    n = Math.floor(Math.random()*ABRundum.length);
	$(ABRundum[n]).css('display','block');
	
});
CSSで対象要素を初期値で非表示(display:none;)にしておき、ランダムで選ばれた要素のCSSを表示(display:block;)にハックする処理となります。

フロントエンド側処理のデメリット

単純に対象をランダム表示させる程度ならばフロントエンド側の処理でも問題ありませんが、この処理の場合いくつかのデメリットが考えられます。

デメリット①ソースには残る

ブラウザ上に対象要素はひとつしか表示はされないものの、ソース上はA・B要素ともに読み込まれてしまうため、コンテンツの内容によってはGoogle先生に隠れテキストやスパム扱いされかねません。ペナルティになりかねない要素はないに越した事ないですよね?

デメリット②他の挙動処理との競合の可能性

もし、同ページ内でその他のスクリプト処理などでlengthメソッドでdiv要素数を取得した場合、ブラウザで表示されている数と表示されていない要素分までカウントされてしまい、ページスクロール処理など正しい挙動がされない恐れがあります。

デメリット③ユーザーがJavaScriptをOFF設定の場合

もしエンドユーザーがブラウザ設定でJavaScript機能を切っていた場合、もちろんJavaScript記述が無意味になるので画像のパスを変数で持った要素は値が埋まらず、空の画像となりますし、ランダム表示対象の要素がすべてたれ流し表示されてしまいコンテンツによってはページがとてもカオスな状態になってしまう恐れがあります。

PHPでランダム出力する場合

PHPでランダム出力する=サーバーサイド側で処理する場合、出力対象をincファイルとして別々で管理する事ができます。

Aパターン読み込みファイル(rundumA.inc)

<div id="RundumA03">
	Aパターン(PHP)
</div>

Bパターン読み込みファイル(rundumB.inc)

<div id="RundumB03">
	Bパターン(PHP)
</div>

PHPの記述

<?php
function ABRundum($value){
    $urls = explode(',',$value);
    shuffle($urls);
    return $urls[0]
}
require_once(ABtest("rundumA.inc,rundumB.inc"));
?>

デモページ

こちらの上記3通りの出力をしたデモページがこちら ページ更新を何度か行ってランダムに切り替わってることを確認してください。
Pocket
LINEで送る
Facebook にシェア
reddit にシェア
LinkedIn にシェア

トップへ