トップページにカウンターをどう表示するのか（その２）
簡単な実装法 - iframe を利用する
前回のような工夫をして表示させているカウンターですが、もっと簡単に実装する方法があります。HTMLの一部に別のHTMLを表示させるもっとも簡単な方法はおそらくインラインフレームでしょう。タグでいうと「 <iframe> </iframe> 」というやつです。
このタグを使って、count.cgi だけをトップページに取り込めばいいのです。ただ、ネットスケープとかだとフレームの枠が出てしまってきれいに見えないかもしれません。カウンターのプログラムが「 count.cgi 」だとすると、HTMLには下のように書くことになります。
<html>
<head>
<title>Counter Test</title>
</head>
<body>
この下にカウンターのプログラムが読み込まれます。<br>
<iframe src="count.cgi" frameborder="no" name="counter" scrolling="no" width="300" height="40">
</iframe>
</body>
</html>
サンプルを示すのでどうぞ。開いてからソースを見てみてください。
- iframeで表示 →「こちら」をクリックで（別窓）
JavaScriptで表示する
もうひとつあります。
JavaScript を使う方法です。PerlとJavaScriptを組み合わせて使います。
カウントを行う必要があるので、訪問者を数えるプログラム自体はCGIを利用するのですが、そのカウント数を記録するファイル「 count.dat 」以外に、表示させるためのデータ「 count.js 」というJavaScript形式のファイルを作って、それを読み込んで表示するという方法です。
具体的には、、、最初につくった「 count.cgi 」に一部変更を加えました。また、データの保存用に「 count.cgi 」以外に「 count.js 」という空っぽのファイルをもう一つ用意します。
下のプログラムソースの１０行目と、１８～２０行目を見てください。ここを追加しています。また、このプログラムで結果を表示することはないので、２１行目以降にあった「 print 命令」はすべて削除されています。このプログラムでは純粋に、訪問者の数だけを記録する、という役割だけを担うことになります。
01: #!/usr/local/bin/perl
02:
03: # count.datというファイルから現在のカウント数を読み込む
04: open (IN, "count.dat");
05: $count=<IN>;
06: close(IN);
07:
08: # 現在のカウント数$countに１を追加
09: $count=$count+1;
10: $js_file="document.write('あなたは$count番目の訪問者です。');";
11:
12: # １増加したカウントを保存
13: open (OUT, ">count.dat");
14: print OUT $count;
15: close(OUT);
16:
17: # JavaScript表示用のJSファイルを保存
18: open (JS, ">count.js");
19: print JS $js_file;
20: close(JS);
21:
22: exit;
23: __END__
*追加された行を太字の赤で表記しています。
１０行目で、「 $js_file="document.write('あなたは$count番目の訪問者です。');"; 」というような JavaScript形式にデータを作り、１８～２０行目で、そのデータを「 count.js 」というファイルに書き込んでいます。
これを、カウンターを表示させたいHTMLファイルに埋め込むときは、
01: <html>
02: <head>
03: <title>Counter Test</title>
04: </head>
05: <body>
06: <img src="count.cgi" width="1" height="1">
07:
08: この下にJavaScriptによってカウンターのデータが読み込まれ、表示されます。<br>
09:
10: <script language="JavaScript" src="count.js">
11: </script>
12: </body>
13: </html>
とすることで、HTML上にカウンターの数字を出すことが可能になります。６行目でIMGタグにより「 <img src="count.cgi" width="1" height="1"> 」というように、カウントをするためのプログラムが別に起動します。ここで、画像のサイズを縦・横１ピクセルにしているのは、呼び出されても表示させるものがありませんから、単に目立たなくしているだけのことです。
- サンプル：JavaScriptで表示→ 「こちら」をクリックで（別窓）
カウンターのまとめ
以上、ちょっと変わった方法でカウンターをつけるプログラムを紹介しましたが、この方法があまりポピュラーでないのは、やはり、訪問者がJavaScriptをOffにしていると、表示されないということですよね。（JavaScriptがOffでも、カウントはちゃんとしますが。。。）
同じことは、インラインフレームを使った場合にも言えます。対応していないブラウザだとカウントさえされません。プログラムの仕組みは「前の数に１足して表示するだけ！」という単純なカウンターなのですが、これだけ苦労することを考えると、レンタルサービスで付けたほうが手っ取り早いのかもしれませんね・・・（＾＾；
ただ、ここで実験してみた「JavaScriptで表示を・・・」、というのは他のプログラムを書くときに応用できる範囲は広いのかな・・・と思ってますので、もう少し後で紹介できたらなぁ・・・と思ってます。
最後に、、、「簡単な仕組みで・・・」と書いてきたカウンターですが、ここまで書いておきながら、実はこのプログラムには重大な欠陥（？）があります。このことについては、次回ということで！！
