トップへ > Web Program Lab.> No.3 カウンターを作ろう
ウェブ・プログラムの研究所 Web Application Programming Lab.
一つ前にもどる 目次にもどる 次のページへ
●カウンターの動く仕組み(アルゴリズム)

ホームページを作っていて、やはり最初に気になるのが、毎日どれくらいの人がきてくれているか、ということだと思います。そこで大抵の人がカウンターをつけているわけですが、このカウンターもWebプログラムを使わないと実現できない機能の一つです。

CGI用Perlプログラムを配布しているサイトでも、様々なカウンターのプログラムがありますが、基本的な仕組みは至って簡単です。プログラムの動く流れを示してみました。


1.CGI起動
2.現在のカウント数の読み込み(別のファイルから)
3.現在のカウントに1を追加
4.追加されたカウント情報をファイルに保存
5.カウント情報をHTMLで表示


この「5.カウント情報をHTMLで表示」という部分がテキストになっていたり、画像になっていたりするわけで、基本的な構造は「ほぼ」同じはずです。

では、早速一番簡単なカウンタープログラムを書いてみましょう。


01: #!/usr/local/bin/perl
02:
03: # count.datというファイルから現在のカウント数を読み込む
04: open (IN, "count.dat");
05: $count=<IN>;
06: close(IN);
07:
08: # 現在のカウント数$countに1を追加
09: $count=$count+1;
10:
11: # 1増加したカウントを保存
12: open (OUT, ">count.dat");
13: print OUT $count;
14: close(OUT);
15:
16: # ここからHTMLでの表示
17: print "Content-Type: text/html\n\n";
18: print "<html><head><title>test</title></head>";
19: print "<body>";
20: print "あなたは $count 番目の訪問者です。";
21: print "</body></html>";
22:
23: __END__

*左端の番号は便宜的に付けた行番号です。

これを count.cgi というファイルに保存します。また、空っぽのテキストファイル count.dat を作って同じフォルダに保存します。

これで、count.cgi が起動されるたびに、ブラウザには「あなたは 12 番目の訪問者です。」というような数字が表示されます。あまりの簡単さにビックリでしょ?

早速、いつものように解説をしようと思います。
これはもう説明不要ですね。サーバーのPerlプログラム本体までのパスですね。
01: #!/usr/local/bin/perl

最初にすることは、カウンターの数字が記録されているファイルを開くことです。現在のカウンターの数がいくつなのかは、ファイル「count.dat」を別に作成してそこに記録しておく必要があるのです。

03: # count.datというファイルから現在のカウント数を読み込む
04: open (IN, "count.dat");
05: $count=<IN>;
06: close(IN);

4行目の「open ( IN , "count.dat");」というのは、別のファイル「 count.dat」を開いてデータを取り込む命令です。このデータを、「ファイルハンドル」と呼ばれる特別な変数に関連付けるのがこの命令なのです。こうすることで、 count.dat にあるデータを IN という名前で扱うことができるようになります。

ちょっと説明がややこしいですね。あえて書くなら、count.dat の全てのデータを IN という変数に入れたと思ってもらっても間違いないと思います。また、このファイルハンドルは何でもかまいません。ここでは入力するということで、IN というのを使ってますが、COUNT とか DATA とか判りやすければなんでもOKです。

ちなみに、最初にも書きましたが、「count.dat」というのは現在のカウント数だけが入った1行だけのファイルです。

03: # count.datというファイルから現在のカウント数を読み込む
04: open (IN, "count.dat");
05: $count=<IN>;
06: close(IN);

先ほどのIN を「$count=<IN>;」というように、プログラムの中で自由に計算できるように $count という変数に代入します。そして、最後に「close(IN);」で開いたファイルを閉じます。

次にすることは、ひとつだけですよね。今取り出した現在のカウント数 $countに 1 を足すだけです。それが次の行の処理になりますね。

08: # 現在のカウント数$countに1を追加
09: $count=$count+1;

これは $count++; と書いてもOKですよね。
これで、自分が訪問した回数も含めた現在のカウント数の計算ができました。後は、これを表示するだけなのですが、、、その前にその現在のカウント数を保存しておく必要があります。じゃないとカウンターの数は増えていきません(^^; それが次の行の処理です。

11: # 1増加したカウントを保存
12: open (OUT, ">count.dat");
13: print OUT $count;
14: close(OUT);

さっきと同じように open(); を使ってファイルにデータの保存をするのですが、ちょっと違うことがあります。ファイル名の指定の前に「>」がついていますよね。

これは、この open 命令が書き込みモード(上書き)で開いているということを示しています。あと、わかりやすくするためにハンドルを OUT としてみました。でも、当然 IN を使っても動きます。

さっきは open (IN); で取り込んだデータを「$count = <IN>;」というように取り込んだのですが、こんどはファイルへの書き出しです。 これはおなじみの print 命令を使います。

11: # 1増加したカウントを保存
12: open (OUT, ">count.dat");
13: print OUT $count;
14: close(OUT);

OUTというハンドルに対して $count を書き込みなさい!というのが 「print OUT $count;」 の意味です。これで、count.dat$count の内容が書き込みされました。 最後に、open したファイルを close して書き込み処理の終了です。

そして、この $count をHTML上に表示させれば、普段見ているカウンターの出来上がり、ということになります。

17: print "Content-Type: text/html\n\n";
18: print "<html><head><title>test</title></head>";
19: print "<body>";
20: print "あなたは $count 番目の訪問者です。";
21: print "</body></html>";

上の例で言えば、20行目の文でカウンターの表示ということになります。
サンプルがありますので、こちらからどうぞ。(別窓)

●HTMLに埋め込んで表示するには?(SSIを使う!)

以上がカウンターの仕組みなのですが、一つ困ったことがあります。トップページにカウンターをつけたいのですが、動的に変わる場所はカウンターだけです。そのためだけに、ページの全てをCGI用のWebプログラムで作る必要があるからです。なんとかカウンター部分だけ、というようにできないでしょうか?

そこで、よく使われるのが Server Side Include(SSI) という技術です。これは、HTMLの中に動的な内容を組み込んで表示できるようにする技術です。

先ほどのプログラム「count.cgi」を、カウンターを表示させたいHTMLファイルに

<!--#exec cgi="count.cgi"--> (*一例です)

というようにして記述することで、index.htmlの中にカウンターだけ表示させることができます。 また、SSIを利用した場合には、index.htmlのソースを開いたときに、CGIプログラムを起動している痕跡さえ残りません。見た目は通常のHTMLのようなソースになります。

ただ、SSIを利用するときは、サーバーの設定によって、HTMLファイルの拡張子を「*.html」ではなく「*.shtml」にする必要があるかもしれません。または、「.htaccess」という設定ファイルでSSIを有効にする必要がある場合もあります。(これはサーバーに対する負荷を軽減するためです。)

SSIのサンプルがありますので、こちらからどうぞ。(別窓)
HTMLファイルなのにカウンターの数字が変化します。(不思議です・・・)

しかし、プロバイダーから提供されるHPスペースや、ホスティング等のサービスでも SSI を許可していないところが少なくありません。これはセキュリティー上の理由からですが、そうすると、カウンターを実装できないか?というとそうでもありません。

●有名CGI用スクリプト配布サイトでしている方法

CGI用Perlを配布しているサイトで配られているカウンター用プログラムでは、SSIが使えないような問題を解決するために、様々な手法が取られています。

例えば、画像をCGIとして出力させることは可能なので、カウンターの番号を画像として表示させるのが一般的にされていることです。HTMLソースを見てみると、

<img src="./cgi-bin/counter.cgi">

というような形でHTMLに組み込まれています。 「おや?」と思われた方もいるかもしれません。そうなんです。「はじめに」のページで色々なプログラムの起動方法を紹介しましたが、Webプログラムを呼び出すのに、IMGタグで呼び出すことも可能なのです。ただし、このプログラムの出力を

print "<img src='1.gif'><img src='5.gif'>";

としても、うまく表示されません。

これは、よく考えてみると当たり前で、「<img src="./cgi-bin/counter.cgi"> 」というように画像として読み出しているわけですから、CGIの出力も画像である必要があります。

print "Content-Type: text/html\n\n";
 ↓
print "Content-Type: image/gif\n\n";

上のように、ファイルのヘッダーをHTMLというテキストではなく、「画像でGIFファイルですよ〜」っと教えなおす必要があり、そのあと出力する内容もGIF画像そのもの・・・ということになります。しかも、GIF画像1枚分だけの出力しかできません。

カウンターですので、数字は毎回変わります。だから、カウンターの数字の桁ごとに画像を表示するプログラムにしてやる必要があり、それをHTMLファイルの中に下のように書いてプログラムを呼び出すことになります。

<img src="count.cgi?keta=5">
<img src="count.cgi?keta=4">
<img src="count.cgi?keta=3">
<img src="count.cgi?keta=2">
<img src="count.cgi?keta=1">

たかがカウンター・・・。訪問者数を記録するのは簡単でしたが、実際に表示させるにはかなり苦労が必要みたいですね(^^; ただ、このようなカウンターの起動方法の場合、単純に見ても5つのプログラムが動きます。そして画像を表示させるわけですから、サーバーには負荷がかかってしまいます。

また、このように画像をバラバラに表示させないようにするために、「とほほのWWW入門」で配布されている「gifcat.pl」というGIF画像連結用のモジュールを利用して、カウンターを作って配布しているものもよく見ます。(Kent-Webのカウンターがそうですね。)

上記のプログラムのサンプル等は説明すると長すぎて、しかも難しくなるので、もっとあとで扱いたいと思います。たしかに、ページにカウンターって必要なの?って議論もありますしね(^^;(自分がよくわかってない、というのも理由ですが・・・)

●もっと簡単な実装法! by あいまい

以上のような工夫をして表示させているカウンターですが、もっと簡単に実装する方法があります。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 を使う方法です。PerlとJavaScriptを組み合わせて使います。

カウントを行う必要があるので、訪問者を数えるプログラム自体はCGIを利用するのですが、そのカウント数を記録するファイル「 count.dat 」以外に、表示させるためのデータ「 count.js 」というJavaScript形式のファイルを作って、それを読み込んで表示するという方法です。

具体的には、、、最初につくった「 count.cgi 」に一部変更を加えました。また、データの保存用に「 count.cgi 」以外に「 count.js 」という空っぽのファイルをもう一つ用意します。

下のプログラムソースの10行目と、18〜20行目を見てください。ここを追加しています。また、このプログラムで結果を表示することはないので、21行目以降にあった「 print 命令」はすべて削除されています。このプログラムでは純粋に、訪問者の数だけを記録する、という役割だけを担うことになります。


01: #!/usr/local/bin/perl
02:
03: # count.datというファイルから現在のカウント数を読み込む
04: open (IN, "count.dat");
05: $count=<IN>;
06: close(IN);
07:
08: # 現在のカウント数$countに1を追加
09: $count=$count+1;
10: $js_file="document.write('あなたは$count番目の訪問者です。');";
11:
12: # 1増加したカウントを保存
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__

*追加された行を太字の赤で表記しています。

10行目で、「 $js_file="document.write('あなたは$count番目の訪問者です。');"; 」というような JavaScript形式にデータを作り、18〜20行目で、そのデータを「 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上にカウンターの数字を出すことが可能になります。6行目でIMGタグにより「 <img src="count.cgi" width="1" height="1"> 」というように、カウントをするためのプログラムが別に起動します。ここで、画像のサイズを縦・横1ピクセルにしているのは、呼び出されても表示させるものがありませんから、単に目立たなくしているだけのことです。

  • サンプル:JavaScriptで表示→ 「こちら」をクリックで(別窓)

以上、ちょっと変わった方法でカウンターをつけるプログラムを紹介しましたが、この方法があまりポピュラーでないのは、やはり、訪問者がJavaScriptをOffにしていると、表示されないということですよね。(JavaScriptがOffでも、カウントはちゃんとしますが。。。)

同じことは、インナーフレームを使った場合にも言えます。対応していないブラウザだとカウントさえされません。プログラムの仕組みは「前の数に1足して表示するだけ!」という単純なカウンターなのですが、これだけ苦労することを考えると、レンタルサービスで付けたほうが手っ取り早いのかもしれませんね・・・(^^;

ただ、ここで実験してみた「JavaScriptで表示を・・・」、というのは他のプログラムを書くときに応用できる範囲は広いのかな・・・と思ってますので、もう少し後で紹介できたらなぁ・・・と思ってます。

最後に、、、「簡単な仕組みで・・・」と書いてきたカウンターですが、ここまで書いておきながら、実はこのプログラムには重大な欠陥(?)があります。このことについては、次回ということで!!


(2003/6/16 by あいまい)
一つ前にもどる 目次にもどる 次のページへ

トップへ > Web Program Lab.> No.3 カウンターを作ろう

copyright(C) 2001-2003 all rights reserved
『ウェブ・プログラムの実験場!』

by あいまいモード・コム(www.iMYmode.com)