いわゆるランダムバナーってやつですね。
広告バナーなんかで、固定表示しつづけるよりも、ページを読み込むたびに別のバナーが表示されるようにしたり、例えば自分のサイト内コンテンツの記事情報をランダムでおすすめしたりとか色々な使い方ができると思います。
例えば、こちらのサイトの「フリーゲームおすすめ」って箇所がJavascriptでのランダム生成となっています。
以前より、ランダムで表示させるものはphpやcgiを使っておこなっていましたが、どうにもPVが増えてくるとサーバーにすごい負荷がかかってくるのが気になっていました。
なので、今回は負荷を軽減するためユーザーサイドで動作するJavascriptをつかったランダムバナーに改修する方法を記録しておきます。
ネットで検索すると、結構簡単に見つかりました。
参考サイト：ランダムにバナー画像や商品情報を表示する[JavaScript]意外と簡単に実装できる！
基本はこの参考サイトを元にしてください。
こちらのサイトでは、一つのページだけに表示させるのが前提ですが、サイト内の全ページに表示させたい場合は、ソース内にランダムで表示させたいものを直に記述してしまうと、内容を更新させたいときに全ページを修正させねばならなくなり、大変な作業となってしまいます。
なので、ランダムで表示させるソースは外部Javascript化しましょう。
random.js
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>' ];
作ったrandom.jsを以下のようにして読み込む。
※random.jsへのパスはご自身のサイトにあわせて修正してください。全ページにわたって階層が異なるならルートパスが便利。
<div id="randomBanner"></div>
<script type="text/javascript" src="/js/random.js"></script>
<script type="text/javascript">
var rNo = Math.floor(Math.random() * lists.length);
document.getElementById('randomBanner').innerHTML = lists[rNo];
</script>
以上
