JavaScript
Rails
haml
広告
ランダム

凄くシンプルにバナー広告をローテーションする(コピペで使える)

More than 1 year has passed since last update.

ベタ張り広告のバナーパターンが2種類あって、それをローテで出したい。

Rails(viewはhaml)に実装しようと思っていて、特にインスタントに試したいときに使う。

未来永劫使うのであればちゃんと作ろう。

あくまでもローテーションを、ささっと試したいに特化しています。


Javascriptで実装します。

rails(haml)内に直接Javascriptを入れる形で。

:javascript

jmp = new Array();
img = new Array();
// ジャンプ先のアドレス(数字は画像と対応)
jmp[0] = "[飛び先1]";
jmp[1] = "[飛び先2]";
// 画像のアドレス(数字はジャンプ先のアドレスと対応)
img[0] = "#{asset_path '[画像ファイル]'}";
img[1] = "#{asset_path '[画像ファイル]'}";
n = Math.floor(Math.random()*jmp.length);
document.write("<a href='"+jmp[n]+"' target=\"_blank\">");
document.write("<img src='"+img[n]+"' border='0'>");
document.write("</a>");

:javascript

jmp = new Array();
img = new Array();
// ジャンプ先のアドレス(数字は画像と対応)
jmp[0] = "http://www.google.co.jp";
jmp[1] = "http://www.yahoo.co.jp";
// 画像のアドレス(数字はジャンプ先のアドレスと対応)
img[0] = "#{asset_path 'ad1.jpg'}";
img[1] = "#{asset_path 'ad2.jpg'}";
n = Math.floor(Math.random()*jmp.length);
document.write("<a href='"+jmp[n]+"' target=\"_blank\">");
document.write("<img src='"+img[n]+"' border='0'>");
document.write("</a>");

Javascriptをチョイスしたのは、既存のウェブページに入れる時等に問題になりづらいから。

コピペで使えます。


解説:ポイントは画像ファイルのパス

バナーのファイルパス を assets:precompile したときに得られる成果物は、

/assets/images/ad1.jpg

/assets/images/ad1-XXXXXXXXXXX.jpg

と、どっちでもいけたけど、

/assets/images/ad1-XXXXXXXXXXX.jpg

rails4からは乱数がついた(=precompileされたパス)しか使えなくなった。

precompileをしたときにXXXXXXXXXXXの部分は何が付与されるかわからないのでハードコーディングは無理。

なので、画像のパスを書く時に

asset_path 'ad1-XXXXXXXXXXX.jpg'

と、枕詞を書くとよろしいでしょう。

なので、

〜中略〜

img[0] = "#{asset_path 'ad1.jpg'}";
img[1] = "#{asset_path 'ad2.jpg'}";
〜中略〜

と、なるわけでございます。