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

ベタ張り広告のバナーパターンが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'}";
〜中略〜

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