JavaScriptでローテーションバナーを表示させるTips

サイトにアフィリエイト広告を設置する場合、収益率を上げるためにもできるだけ多くのバナーを設置したいと考えるのが普通だろう。だが、バナーだらけのページは訪問者にとってわかりにくい上、表示が重くなるなどあまり感心できるものではない。

そこでよく使われるのがローテーションバナーと呼ばれる方法だ。これはページ読込時や時間経過によって表示を切替えることで複数のバナー広告を一つ分のスペースでまかなうというもの。アフィリエイトなどは内容に興味がなければ何度表示しても無駄なので、ずらりと並べられるより定期的に切り替わった方が効率が良い。

ただし、通常ローテーションバナーは広告の配信側に用意されていなければならず、設置側で自由に設定できるものではない。しかし、JavaScriptを使用すれば通常の広告バナーをローテーションバナーとして表示させることが可能だ。

方法は簡単で表示させたい場所に以下のようにスクリプトを記述する。

<script language="JavaScript">
tag=new Array();
tag[0]='<!-- TG-Affiliate Banner Space -->ここに表示させたいアフィリエイトのタグを記述する<!-- /TG-Affiliate Banner Space -->';
tag[1]='<!-- TG-Affiliate Banner Space -->ここに表示させたいアフィリエイトのタグを記述する<!-- /TG-Affiliate Banner Space -->';
tag[2]='<!-- TG-Affiliate Banner Space -->ここに表示させたいアフィリエイトのタグを記述する<!-- /TG-Affiliate Banner Space -->';
i=Math.floor(Math.random()*tag.length);
document.write(tag[i]);
</script>
<noscript>ここにはJavaScripをt無効にしている場合に表示させるアフィリエイトを記述する</noscript>

数を増やしたければ、tag[]の数値を増やしていけば良い。

このスクリプトの利点は、記述するタグは基本的に何でも構わないこと。a hrefのような通常のリンクはもちろん、 iframeも表示でき、しかも混在しても問題ない。従って、ローテーションバナーを複数設定して、さらにローテーションさせるといったことも可能だ。もちろん、設置する数を増やせば読込に時間がかかるようになるので、その点は注意してもらいたい。なお、スクリプト内に記述するアフィリエイトタグは改行があるとエラーになるので、必ず続けて記述するように。

段組みで罫線を引いた時、最大ブロックの高さに揃えるCSSのTips

CSSでfloatなどを使って段組みをした場合、罫線(ボーダーライン)で区切ることはよくあることだと思う。罫線は通常ブロック要素に対して指定するため、ブロックの高さによって長さはまちまちで見栄えがあまりよくない。ブロックの高さを固定してしまえば罫線を揃えることは可能だが、内容が更新されるような場合はこれでは都合が悪い。

そこでブロック内の内容が変わっても、常に最大のブロック高に合わせて罫線を引くテクニックを紹介しよう。

罫線の高さを揃えたサンプルサイト

例として、main_blockというクラス名の親ブロック内に、left_columnというクラス名の左ブロックとright_columnというクラス名の右ブロックを配置したとしよう。

罫線の長さを気にしなければ、このようなスタイルシートの記述になるはずだ。

.main_block {
width: 802px; /*400pxのブロックx2にそれぞれ罫線の1pxの長さを考慮した幅
}
.left_column {
float: left;
width: 400px;
border-right: 1px solid #000;
}
.right_column {
float: right;
width: 400px;
border-right: 1px solid #000;
}

ただし、これだと罫線の長さはleft_column、right_columnそれぞれの高さにしか引かれない。

罫線を自動的に揃えるには、次の赤字の部分を加える。

.main_block {
width: 802px; /*400pxのブロックx2にそれぞれ罫線の1pxの長さを考慮した幅
overflow: hidden;
}
.left_column {
float: left;
width: 400px;
border-right: 1px solid #000;
padding-bottom: 32767px;
margin-bottom: -32767px;
}
.right_column {
float: right;
width: 400px;
border-right: 1px solid #000;
padding-bottom: 32767px;
margin-bottom: -32767px;
}

子ブロック要素のpaddingとmarginは表示画面より大きい数値であれば幾つでも構わない。ただし、32767以上の数値はオーバーフローするので、それ以下の数値にすること。親ブロック要素にoverflow: hiddenを指定するのを忘れないように。これでブロック内の内容が変化しても、常に最大のブロック高に合わせて罫線が引かれるようになる。

画像ファイル名が日本語(マルチバイト)の時、UTF-8で表示できない場合のTips(追記)

前回、紹介した「画像ファイル名が日本語(マルチバイト)の時、UTF-8で表示できない場合のTips」の追記。

マルチバイトのファイル名の画像を正しく表示するために、マルチバイトの定義%を別の文字に書き換えてただのアルファベットにしてしまおうというのが前回の主旨だったわけだが、それだけだとマルチバイトではない%の含まれたファイル名まで書き換えてしまうことに気付いた。まあ、ファイル名に%を含めることはあまりないだろうが、絶対にないとは言い切れないので、一応、対策を考えておく。

といっても、複雑な処理は必要ない。ファイル名にマルチバイト文字が含まれているか判定して、含まれていれば前回の処理を実行するようにしてやれば良い。

判定の方法を調べてみたら、以下のような方法で可能だとわかった。

if ($check_file =~ /[\xA1-\xFE][\xA1-\xFE]/)
{
(全角文字が含まれている場合の処理)
}

ただし、UTF-8だとすでにシングルバイトに置き換えられているので、判定する前に元のマルチバイト文字に戻しておく必要がある。

$check_file =~ s/%([0-9a-fA-F][0-9a-fA-F])/pack("C",hex($1))/eg;

変数$check_fileは判定のためだけの変数なので、実際に処理する変数とは別に格納しておく必要がある(まあ、もう一度アンパックしてもいいのだが、それよりも別にした方が安全だろう)。

というわけで、最終的なスクリプトは以下のようにした。

# $file_nameに対象となる画像ファイル名が格納されている
$check_file = $file_name; #判定用に格納
$check_file =~ s/%([0-9a-fA-F][0-9a-fA-F])/pack("C",hex($1))/eg; #マルチバイトに戻す
if ($check_file =~ /[\xA1-\xFE][\xA1-\xFE]/) #文字列にマルチバイト文字が含まれているか判定
{
$file_name =~ s/%/x/eg; #含まれていれば元ファイルをリネーム
}

画像ファイル名が日本語(マルチバイト)の時、UTF-8で表示できない場合のTips

取得したimgタグから画像のURLを抜き出して、画像を別フォルダに保存後、新たにその保存したフォルダ内の画像を表示させるimgタグを出力するという処理を行った。文章だけだとわかりにくいので、箇条書きにしてみる。

1.外部サイトのimgタグを取得(例<img src="http://abc.com/xyz.jpg">)

2.画像のURL部分だけ抽出(http://abc.com/xyz.jpg)

3.内部フォルダに画像を保存(フォルダ名:123)

4.保存した画像へimgタグを出力(123/xyz.jpg)

これをCGIとしてUTF-8で作成する。

と、動作には特に問題はなかったのだが、取得した画像のファイル名が日本語などのマルチバイトだと、保存したファイル名が「%xx」(xxは16進数)に変換されて、表示されないという不具合が発生。

16進数に変換されたファイル名を元の日本語表記に戻すこと自体は簡単で、

$file_name =~ s/%([0-9a-fA-F][0-9a-fA-F])/pack("C",hex($1))/eg;

のようにパックしてやればいい。

さらにUTF-8からSHIFT-JISにエンコードしたければ、

$file_name = Jcode->new($file_name, "utf8")->sjis; #Jcode.pmを利用した場合。

ただ、作成したスクリプトでは取得先の文字コードのばらつきをなくすため、すべてUTF-8に変換する処理を行っている。日本語の画像ファイルのタグだけをSHIFT-JISに戻すのは難しい。

しばらく悩んで思いついたのが発想の転換。つまり、重要なのはファイル名がマルチバイトかシングルバイトかや、文字コードがUTF-8かSHIFT-JISかではなく、 出力したタグと保存した画像のパスが合っているということ。それさえ合っていれば、極端な話、後はどうでも良いのである。

ということで、最終的な解決策は以下の一行を追加しただけ。

$file_name =~ s/%/x/eg;

%を任意の文字(上記の場合x)に置き換えることで、マルチバイトの文字定義をただのアルファベットにしてしまったわけだ。文字コードを変換するかということばかりを考えていたので、なかなか思いつかなかった。悩んでいたのがバカバカしくなるくらい、あっさり解決してしまった。

要するに何が言いたかったかというと、プログラムはもちろん知識も重要だが、実のところ、問題の大半はこうした発想の転換やアイデアで解決できてしまうという話。

おすすめフリーソフト紹介 その4「Perlを始めよう！」

「Perlを始めよう！」はPerlスクリプト開発支援ソフト、平たく言えばPerlに特化したテキストエディタだ。私は基本的にテキストエディタは前回紹介した「TeraPad」を使っているのだが、Perlを書く時だけはこのソフトと併用している。理由はさすがにPerl開発に特化しているだけあって、スクリプトの色分けがTeraPadよりもわかりやすいことと、複数のファイルを扱う時タブで切替えられる点が便利だからだ。

他にもほとんど使ったことはないが、デバッグモードや文法チェック機能、スクリプトの実行結果をブラウザに出力する機能などを備えている。ただし、 バーション2.0.6.5の時点では複数のファイルを開きすぎると強制終了してしまうというバグがあるようだ。もっとも頻繁に保存するのが癖になっているので、それで深刻な事態に陥ったことはないが。

正直、Perlの開発ツールでいえばあまりこれといったものがないのも事実である。その中では比較的おすすめできるソフトといえる。

公式サイト:AOK's Home Page