検索
ページ読み込みの度に対象の要素をランダムで表示したい処理を行う。
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"> Ａパターン </div> <div id="RundumB"> Ｂパターン </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;)にハックする処理となります。
フロントエンド側処理のデメリット
単純に対象をランダム表示させる程度ならばフロントエンド側の処理でも問題ありませんが、この処理の場合いくつかのデメリットが考えられます。デメリット①ソースには残る
ブラウザ上に対象要素はひとつしか表示はされないものの、ソース上はＡ・Ｂ要素ともに読み込まれてしまうため、コンテンツの内容によってはGoogle先生に隠れテキストやスパム扱いされかねません。ペナルティになりかねない要素はないに越した事ないですよね？デメリット②他の挙動処理との競合の可能性
もし、同ページ内でその他のスクリプト処理などでlengthメソッドでdiv要素数を取得した場合、ブラウザで表示されている数と表示されていない要素分までカウントされてしまい、ページスクロール処理など正しい挙動がされない恐れがあります。デメリット③ユーザーがJavaScriptをOFF設定の場合
もしエンドユーザーがブラウザ設定でJavaScript機能を切っていた場合、もちろんJavaScript記述が無意味になるので画像のパスを変数で持った要素は値が埋まらず、空の画像となりますし、ランダム表示対象の要素がすべてたれ流し表示されてしまいコンテンツによってはページがとてもカオスな状態になってしまう恐れがあります。PHPでランダム出力する場合
PHPでランダム出力する＝サーバーサイド側で処理する場合、出力対象をincファイルとして別々で管理する事ができます。Ａパターン読み込みファイル（rundumA.inc）
<div id="RundumA03"> Ａパターン(PHP) </div>
Ｂパターン読み込みファイル（rundumB.inc）
<div id="RundumB03"> Ｂパターン(PHP) </div>
PHPの記述
<?php
function ABRundum($value){
$urls = explode(',',$value);
shuffle($urls);
return $urls[0]
}
require_once(ABtest("rundumA.inc,rundumB.inc"));
?>
