ランダムにバナー画像や商品情報を表示する[JavaScript]簡単に実装

公開日：2013/10/27 最終更新日：2022/08/27

ネットショップのページ等で何かをランダムに表示したいって場面は多いですよね。ページを表示する度に表示するバナーを変えたい。おすすめ商品として表示する商品をページが表示する度に切り替えたいなど活用したい場面は多いのではないでしょうか。
いざ実装しようと考えると難しそうに思える内容ですが、実は意外と簡単に実装することが出来ます。

画像をランダムに表示
商品情報をランダムに表示
商品情報（複数選択１０個から３個を表示）をランダムに表示

についてサンプルソース、動作サンプルを紹介したいと思います。javascriptを使う必要がありますが、それほど難しくはありませんので、ぜひチャレンジしてみてください。

画像をランダムに表示

ページが読み込まれる度に表示する画像ランダムに切り替える。
ネットショップに限らず、様々なサイトで使われている仕組みですね。
結構難しそうなイメージありますが、意外と簡単に実装できるので動作サンプルと一緒にサンプルソースを紹介します。

画像ランダム表示サンプルソース

サンプルソース sample1.html

<div id="myplace"></div>
 
<script type="text/javascript">
var lists=[
'<a href="リンク先URL"><img src="画像URL"></a>',
'<a href="リンク先URL"><img src="画像URL"></a>',
'<a href="リンク先URL"><img src="画像URL"></a>',
'<a href="リンク先URL"><img src="画像URL"></a>',
'<a href="リンク先URL"><img src="画像URL"></a>'
];
 
var rNo = Math.floor(Math.random() * lists.length);
document.getElementById('myplace').innerHTML = lists[rNo];
</script>

1行目　画像を表示する領域ここではid=”myplace”としています。

4行目～10行目
ランダムに表示したい情報をリスト化しています。このサンプルでは５つ情報を設定しています。
‘ 情報1 ‘ , ‘ 情報2 ‘ , ‘ 情報3 ‘ ・・・といった形式で文字列をあらかじめ設定しています。
また、画像とリンク先のみをリスト化したシンプルな形になりますので、必要に応じて情報付け加えてください。例）リンクの属性 target=”_top” など

12行目ランダムな数値を生成している部分、実行する度に「rNo」には違う数値セットされます。
このサンプルでは、0～4のいずれかの数値が選ばれます。lists.lengthはリストの要素数を取得しています。

13行目ランダムに選ばれた数値を使って、div領域にリストの0から4番目を表示する。このサンプルでは0から4までの5パターンとなりますが、実際には準備するリスト情報数によって変わってきます。

rNoには、実行する度に0から4のいずれかの数値が入るため、表示する画像を毎回変わるようになります。もちろん、0～4という少ないパターン数の場合は連続して同じ画像が表示されることも多々あります。

動作サンプルサンプル１

リロードボタンを押す度にjavascriptが実行されて、表示するバナーが変わります。

商品情報をランダムに表示

さきほどの、サンプルではあらかじめ設定しておくリスト情報としてリンク、画像しか設定していませんでしたが、リンクと画像が出来るのであれば少し記述が長くなりますが、商品情報（商品画像、品名、価格、リンク）も同様にランダムに表示することが可能です。

商品情報ランダム表示サンプルソースサンプル２

サンプルソース sample2.html

<style type="text/css">
div.itemimage{
text-align:center;
width:120px;
}
div.itemname{
font-size:12px;
padding:0px;
color:#1c4587;
width:120px;
text-align:center;
}
div.itemprice{
font-size:12px;
padding:0px;
color:#000;
width:120px;
text-align:right;
}
div.itemname a{
color:#1c4587;
font-style:normal;
text-decoration:underline;
}
a img{
border-style:none;
padding:0px;
}
</style>
<div id="myplace"></div>
 
<script type="text/javascript">
var lists=[
"<div class='itemimage'><a href='リンクURL'><img src='画像URL'></a></div><div class='itemname'><a href='リンクURL' target='_top'>商品名テスト1・・・</a></div><div class='itemprice'>1,278円</div>",
"<div class='itemimage'><a href='リンクURL'><img src='画像URL'></a></div><div class='itemname'><a href='リンクURL' target='_top'>商品名テスト2・・・</a></div><div class='itemprice'>600円</div>",
"<div class='itemimage'><a href='リンクURL'><img src='画像URL'></a></div><div class='itemname'><a href='リンクURL' target='_top'>商品名テスト3・・・</a></div><div class='itemprice'>2,100円</div>",
"<div class='itemimage'><a href='リンクURL'><img src='画像URL'></a></div><div class='itemname'><a href='リンクURL' target='_top'>商品名テスト4 ・・・</a></div><div class='itemprice'>1,158円</div>",
"<div class='itemimage'><a href='リンクURL'><img src='画像URL'></a></div><div class='itemname'><a href='リンクURL' target='_top'>商品名テスト5 ・・・</a></div><div class='itemprice'>1,998円</div>"
];
 
var rNo = Math.floor(Math.random() * lists.length);
document.getElementById('myplace').innerHTML = lists[rNo];
</script>

さきほどのサンプルと違うのは、あらかじめ設定するリスト化する部分の１つ１つの記述が長くなっているのと、見た目を調整しやすいようにスタイルシートを記述しているところです。
各要素画像、品名、価格などに対して＜div＞でそれぞれclassを指定してスタイルシートで見た目を調整しやすくしているので記述が長くなっています。

動作サンプルサンプル２

リロードボタンをクリックする度に表示する商品情報が切り替わります。やっていることはサンプル1と同じですが、リストに設定している情報が違います。

ランダム表示：複数選択する場合

いままで紹介したサンプルは、候補の中から１つをランダムに選択して表示するという仕組みでしたが、実際にランダム表示を使いたい場面では、１０個の候補からランダムに３つ選択して表示したいなどあるかと思います。

サンプルソースサンプル３

サンプルソース sample3.html

cssは省略
 
<script type="text/javascript">
var lists=[
"<div class='itemimage'><a href='リンクURL'><img src='画像URL'></a></div><div class='itemname'><a href='リンクURL' target='_top'>商品名テスト1・・・</a></div><div class='itemprice'>1,278円</div>",
"<div class='itemimage'><a href='リンクURL'><img src='画像URL'></a></div><div class='itemname'><a href='リンクURL' target='_top'>商品名テスト2・・・</a></div><div class='itemprice'>600円</div>",
"<div class='itemimage'><a href='リンクURL'><img src='画像URL'></a></div><div class='itemname'><a href='リンクURL' target='_top'>商品名テスト3・・・</a></div><div class='itemprice'>2,100円</div>",
"<div class='itemimage'><a href='リンクURL'><img src='画像URL'></a></div><div class='itemname'><a href='リンクURL' target='_top'>商品名テスト4 ・・・</a></div><div class='itemprice'>1,158円</div>",
"<div class='itemimage'><a href='リンクURL'><img src='画像URL'></a></div><div class='itemname'><a href='リンクURL' target='_top'>商品名テスト5 ・・・</a></div><div class='itemprice'>1,998円</div>"
];
 
function rndSet(){
  var rNo = Math.floor(Math.random() * lists.length);
  document.write(lists[rNo]);
  lists.splice(rNo,1);
}
</script>
 
<table><tbody><tr><td><script type="text/javascript">rndSet();</script></td><td><script type="text/javascript">rndSet();</script></td><td><script type="text/javascript">rndSet();</script></td></tr></tbody></table>

このサンプルでも、リストを５つ設定しています。
そして、５つの候補から３つランダムに選択して画面上に表示してます。

ポイントは10行目から15行目になります。
rndSetという名前でソース内から呼び出しができる部品を設定しています。

13行目　document.writeで画面上に書き込む処理

14行目　lists.spliceで1度使った内容はリストから削除しているので、複数呼び出された場合も内容の重複がされないようになっています。

そして、実際に＜table＞＜td＞内で、3回rndSetを呼び出しています。
呼び出した部分にリストで設定した商品情報が書き込まれる仕組みになっています。