トップページにカウンターをどう表示するのか(その2)

トップ > プログラミング研究 > iframeとJavaScriptで表示
一つ前にもどる 目次にもどる 次のページへ

トップページにカウンターをどう表示するのか(その2)

簡単な実装法 - 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 」という空っぽのファイルをもう一つ用意します。

下のプログラムソースの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/06/16 by あいまい)

トップ > プログラミング研究 > iframeとJavaScriptで表示

日時: 2008年01月24日 20:15
newsingに投稿BuzzurlにブックマークBuzzurlにブックマークlivedoorクリップに投稿 Choixにブックマーク イザ!ブックマーク このエントリーを含むはてなブックマーク
トップに戻る
このエントリーの所属カテゴリ: プログラミング研究
このエントリーのタイトル:トップページにカウンターをどう表示するのか(その2)



copyright © 2000-2008 all rights reserved
あいまいモード・コム - rss2.0 atom
newsingに投稿BuzzurlにブックマークBuzzurlにブックマークlivedoorクリップに投稿 Choixにブックマーク イザ!ブックマーク このエントリーを含むはてなブックマーク