バナーのランダムな並べ替え

質問

ABCDEの広告サイトバナーがあるとして各サイトのバナーが3種類あるとします
A-1、A-2、A-3...合計15個のバナーがあります。
下記で各サイトの3つのバナーをランダムで一つ表示させています

<script language="JavaScript">
<!--
サイトA=new Array();
サイトA[0]='A-1';
サイトA[1]='A-2';
サイトA[2]='A-3';
i=Math.floor(Math.random()*サイトA.length);
document.write(サイトA[i]);
// -->
</script>

このようにABCDEと追記して5つのバナーを表示しているのですがこの5つのバナーの順序を
リロードする度にランダムに並び替えたいのですが良い方法はないでしょうか？

回答No.5

nicorus · ベストアンサー

すいません。間違えてました。
これがラストアンサーです。

<script language="javascript">
var bannerSourceArray = [
{val:Math.random(),banners:[
{img:"http://A-1/A-1.gif",url:"http://A-1/"},
{img:"http://A-2/A-2.gif",url:"http://A-2/"},
{img:"http://A-3/A-3.gif",url:"http://A-3/"}
]},
{val:Math.random(),banners:[
{img:"http://B-1/B-1.gif",url:"http://B-1/"},
{img:"http://B-2/B-2.gif",url:"http://B-2/"},
{img:"http://B-3/B-3.gif",url:"http://B-3/"}
]},
{val:Math.random(),banners:[
{img:"http://C-1/C-1.gif",url:"http://C-1/"},
{img:"http://C-2/C-2.gif",url:"http://C-2/"},
{img:"http://C-3/C-3.gif",url:"http://C-3/"}
]},
{val:Math.random(),banners:[
{img:"http://D-1/D-1.gif",url:"http://D-1/"},
{img:"http://D-2/D-2.gif",url:"http://D-2/"},
{img:"http://D-3/D-3.gif",url:"http://D-3/"}
]},
{val:Math.random(),banners:[
{img:"http://E-1/E-1.gif",url:"http://E-1/"},
{img:"http://E-2/E-2.gif",url:"http://E-2/"},
{img:"http://E-3/E-3.gif",url:"http://E-3/"}
]}
];

function makeNewBannerArray( objArray , key )
{
var objNewArray = new Array();
objArray.sort( function (b1, b2) { return b1[key] > b2[key] ? 1 : -1;} );
for(var i = 0 ; i < objArray.length; i++ )
{
var banner = objArray[i].banners[Math.floor(Math.random()*objArray[i].banners.length)];
objNewArray.push({img:banner.img,url:banner.url});
}
return objNewArray;
}
var bannerNewArray = makeNewBannerArray(bannerSourceArray , "val");

document.write('<a href="'+bannerNewArray[0].url+'"><img src="'+bannerNewArray[0].img + '"/></a>');
document.write('<a href="'+bannerNewArray[1].url+'"><img src="'+bannerNewArray[1].img + '"/></a>');
document.write('<a href="'+bannerNewArray[2].url+'"><img src="'+bannerNewArray[2].img + '"/></a>');
document.write('<a href="'+bannerNewArray[3].url+'"><img src="'+bannerNewArray[3].img + '"/></a>');
document.write('<a href="'+bannerNewArray[4].url+'"><img src="'+bannerNewArray[4].img + '"/></a>');

</script>

お礼

親切な回答有難うございます

バナーコードを書き換えてスクリプトを実行した所各サイト自体のランダム抽出は出来ているのですがA～Eサイトのランダムな並び替えが出来ていませんでした。（ABCDE←固定のまま）

補足

すいませんANo.4についてお礼したつもりでしたが間違えてました。
修正されたもので実行した所うまく動作いたしました、本当に有難うございました。

回答No.4

nicorus

処理とビューを分けるという基本的な事をやっていませんでした。
これでどうでしょうか？

<script language="javascript">
var bannerSourceArray = [
{val:Math.random(),site:"A",banners:[
{img:"http://cmm001.goo.ne.jp/img/logo/goo.gif",url:"http://www.goo.ne.jp/"},
{img:"http://cmm001.goo.ne.jp/img/sn/sn_50.gif",url:"http://oshiete.goo.ne.jp/"},
{img:"http://cdn.oshiete.goo.ne.jp/images/2010renew/btn_answer.png?20110816_1",url:"http://c.oshiete.goo.ne.jp/kotaeru_reply.php3?q=6943673"}
]},
{val:Math.random(),site:"B",banners:[
{img:"http://cmm001.goo.ne.jp/img/logo/goo.gif",url:"http://www.goo.ne.jp/"},
{img:"http://cmm001.goo.ne.jp/img/sn/sn_50.gif",url:"http://oshiete.goo.ne.jp/"},
{img:"http://cdn.oshiete.goo.ne.jp/images/2010renew/btn_answer.png?20110816_1",url:"http://c.oshiete.goo.ne.jp/kotaeru_reply.php3?q=6943673"}
]},
{val:Math.random(),site:"C",banners:[
{img:"http://cmm001.goo.ne.jp/img/logo/goo.gif",url:"http://www.goo.ne.jp/"},
{img:"http://cmm001.goo.ne.jp/img/sn/sn_50.gif",url:"http://oshiete.goo.ne.jp/"},
{img:"http://cdn.oshiete.goo.ne.jp/images/2010renew/btn_answer.png?20110816_1",url:"http://c.oshiete.goo.ne.jp/kotaeru_reply.php3?q=6943673"}
]},
{val:Math.random(),site:"D",banners:[
{img:"http://cmm001.goo.ne.jp/img/logo/goo.gif",url:"http://www.goo.ne.jp/"},
{img:"http://cmm001.goo.ne.jp/img/sn/sn_50.gif",url:"http://oshiete.goo.ne.jp/"},
{img:"http://cdn.oshiete.goo.ne.jp/images/2010renew/btn_answer.png?20110816_1",url:"http://c.oshiete.goo.ne.jp/kotaeru_reply.php3?q=6943673"}
]},
{val:Math.random(),site:"E",banners:[
{img:"http://cmm001.goo.ne.jp/img/logo/goo.gif",url:"http://www.goo.ne.jp/"},
{img:"http://cmm001.goo.ne.jp/img/sn/sn_50.gif",url:"http://oshiete.goo.ne.jp/"},
{img:"http://cdn.oshiete.goo.ne.jp/images/2010renew/btn_answer.png?20110816_1",url:"http://c.oshiete.goo.ne.jp/kotaeru_reply.php3?q=6943673"}
]}
];

function makeNewBannerArray( objArray , key )
{
var objNewArray = {A:null,B:null,C:null,D:null,E:null};
objArray.sort( function (b1, b2) { return b1[key] > b2[key] ? 1 : -1;} );
for(var i = 0 ; i < objArray.length; i++ )
{
var banner = objArray[i].banners[Math.floor(Math.random()*objArray[i].banners.length)];
objNewArray[objArray[i].site] = {img:banner.img,url:banner.url};
}
return objNewArray;
}
var bannerNewArray = makeNewBannerArray(bannerSourceArray , "val");

document.write('<a href="'+bannerNewArray["A"].url+'"><img src="'+bannerNewArray["A"].img + '"/></a>');
document.write('<a href="'+bannerNewArray["B"].url+'"><img src="'+bannerNewArray["B"].img + '"/></a>');
document.write('<a href="'+bannerNewArray["C"].url+'"><img src="'+bannerNewArray["C"].img + '"/></a>');
document.write('<a href="'+bannerNewArray["D"].url+'"><img src="'+bannerNewArray["D"].img + '"/></a>');
document.write('<a href="'+bannerNewArray["E"].url+'"><img src="'+bannerNewArray["E"].img + '"/></a>');

</script>

回答No.3

babu_baboo

ぜんかくくうはくは、はんかくに。
Array.map とか、Array.reduce とかを、つかえないのなら、どこぞに。

<!DOCTYPE html>
<title></title>
<body>

<script>

var random = Math.random;
var shuffle = function () { return random () < .5; };
var map = function (a) { return a[a.length * random () |0]; };
var hoge = function (ary) { return ary.sort (random).map (map); };

//_______________

var ary = [
　['a-1', 'a-2', 'a-3'],
　['b-1', 'b-2', 'b-3'],
　['c-1', 'c-2', 'c-3'],
　['d-1', 'd-2', 'd-3'],
　['e-1', 'e-2', 'e-3']
];

//_______________

var test = hoge(ary);
alert (test.join ('\n'));

test = test.reduce (function (r, o, i) {
　return r.concat ((! (++i % 3)) ? [o, '<br />']: o);
}, []);

alert (test.join ('\n'));

</script>

お礼

回答有難うございます

実行内容は描いている通りなのですが動作的にアラート表示させるのではなく
表示バナーの順序を入れ替えたいと思っています。

回答No.2

nicorus

すいません。勘違いしました。
これでどうですか？

<script language="javascript">
var bannerArray = [
{val:Math.random(),banners:["image/A-1.gif","image/A-2.gif","image/A-3.gif"]},
{val:Math.random(),banners:["image/B-1.gif","image/B-2.gif","image/B-3.gif"]},
{val:Math.random(),banners:["image/C-1.gif","image/C-2.gif","image/C-3.gif"]},
{val:Math.random(),banners:["image/D-1.gif","image/D-2.gif","image/D-3.gif"]},
{val:Math.random(),banners:["image/E-1.gif","image/E-2.gif","image/E-3.gif"]}
];

function sort( objArray , key )
{
objArray.sort( function (b1, b2) { return b1[key] > b2[key] ? 1 : -1;} );
return objArray;
}

bannerArray = sort(bannerArray , "val");

for(var i = 0 ; i < bannerArray.length; i++ )
document.write(bannerArray[i].banners[Math.floor(Math.random()*bannerArray[i].banners.length)] + "<br/>");
</script>

お礼

スクリプトを実行した結果思い通りの結果なんですが
{val:Math.random(),banners:["image/A-1.gif","image/A-2.gif","image/A-3.gif"]},
でimage/A-1.gifがバナー部分になると思いますが実際のバナーコードに置き換えると動作しませんでした。(<a href="http://example.com/a.html"><img src="http://example.com/a-1.gif"></a>)
なにが問題なんでしょうか？

あと改行についてですが任意の位置で改行を入れる（バナー3つおきに改行とかにしたい）ことは可能でしょうか？

回答No.1

nicorus

こんな形でどうでしょうか？

<script language="javascript">
var bannerArray = [
{title:"A-1",val:Math.random(),url:"image/A-1.gif"},
{title:"A-2",val:Math.random(),url:"image/A-2.gif"},
{title:"A-3",val:Math.random(),url:"image/A-3.gif"},
{title:"A-4",val:Math.random(),url:"image/A-4.gif"},
{title:"A-5",val:Math.random(),url:"image/A-5.gif"}
];

function sort(key)
{
bannerArray.sort( function (b1, b2) { return b1[key] > b2[key] ? 1 : -1;} );
}

sort("val");

for(var i = 0 ; i < bannerArray.length; i++ )
document.write(bannerArray[i].title + ":" + bannerArray[i].url + "<br/>");
</script>

お礼

回答有難うございます

サイトごとのバナーをランダム表示するのではなく

Aサイトの3つのバナーの内1つを表示
Bサイトの3つのバナーの内1つを表示
Cサイトの3つのバナーの内1つを表示
Dサイトの3つのバナーの内1つを表示
Eサイトの3つのバナーの内1つを表示

表示した5つのバナーをリロードする度に順序を入れ替えたいんです。

伝わりづらくてすいません。