■はじめに

　このページでは、ホームページを制作する人の役に立つ知識をいろいろ取り上げます。

　ご注意：このページの内容は著者の個人的な研究・知識の範囲内で記述したもので、その内容やプログラムの動作などの完全性を保証するものではありません。その結果については著者は責任を負いませんので、各自の責任とリスクで追試されるようお願いします。このページの内容に問題点を発見された方は、お手数ですがメールでお知らせください。

　このページに直接来られたあなたへ：柿花総合研究所(KRI)へようこそ。最近、トップページを経由せずに直接このページへアクセスする方がたくさんおられ、皆さんのお役に立って大変うれしく思っています。このページが他のWebページやNews Groupに紹介されているそうなのですが、あなたはどこでこのページをお知りになったのでしょうか。もしよければ、メールかKRIの『ひとこと掲示板』で教えていただけないでしょうか。また感想などもありましたらよろしくお願いします。それを励みにまたいい記事を書きたいと思います。
　

■再表示時の強制リロード

【はじめに】
　一度表示したことのあるページを再表示するときにはブラウザがハードディスクにキャッシュしているデータを使用するため、１回目より高速に表示できます。ところがカウンタのあるページや『ひとこと掲示板』のような直接書き込むことのできるページなど、表示するたびに内容が新しくなるページの場合には、キャッシュのデータを使うと最新の内容が表示されません。ブラウザの設定でキャッシュを使わないようにすることは可能ですが、すべてのページでキャッシュを使用しなくなるので現実的ではありません。そこでHTMLの方で何か工夫をして、再表示するときにキャッシュのデータを使わずブラウザに強制リロードさせる方法を考え、実際にブラウザに再表示させる実験をしてみました。

【ファイル】
　実験に使ったファイルは次の４つです。

1)単なるHTMLファイルであり、拡張子が.htmlのもの(test1.html)。
内容は次の通りです。
<html>
<body>
キャッシュのテスト<br>
</body>
</html>

2)単なるHTMLファイルではあるが、拡張子が.shtmlのもの(test2.shtml)。
内容は1)と同じですが、サーバとブラウザはSSIが含まれているものと認識するので、キャッシュを使わずにリロードしやすくなる可能性があります。

3)HTMLファイルと同じ内容をPerlのprint文をつかったCGIプログラムに直したもの(test3.cgi)。
内容は次の通りです。
#!/usr/local/bin/perl
print"Content-type: text/html\n";
print"\n";
print <<EOF;
<html>
<body>
キャッシュのテスト<br>
</body>
</html>
EOF

4)HTMLファイルと同じ内容をCGIプログラムに直し、Pragmaヘッダでキャッシュを禁止したもの(test4.cgi)。
内容は3)とほぼ同じですが、２行目のContent-type:の行のあとに次の１行を加えます。これによって、ブラウザにキャッシュの使用を禁止します。
print"Pragma: no-cache\n";

【ブラウザ】
　使用したブラウザはInternet Explorer 3.0J(IE3)とNetscape Navigator 2.02[ja](NN2)の２つです。３通りの再表示の方法、ブラウザの矢印ボタンで戻る／進むを実行した場合、他のページからリンクをクリックした場合、お気に入り／ブックマークで表示した場合、のそれぞれにおいて、リロードされるかキャッシュが使われるかを調べました。再表示のときにWindows95アイコントレイのTAのアクセスランプが点滅すればリロード、しなければキャッシュと判断しました。

【結果】
　結果は表で示しましましたが、記号の意味は次の通りです。
×・・・リロードされないで、キャッシュのデータが使われる。
△・・・リロードされるときも、キャッシュが使われるときもある。
○・・・確実にリロードされる。

　IE3での結果は次の通りです。
ファイルの種類矢印ボタン　リンクのクリック　お気に入り　
1)HTML　　×　　×　　×
2)SHTML　　×　　△　　×
3)CGI　　×　　△　　×
4)CGI(no-cache)　　×　　○　　×

　NN2での結果は次の通りです。
ファイルの種類矢印ボタン　リンクのクリック　ブックマーク　
1)HTML　　×　　×　　×
2)SHTML　　×　　○　　○
3)CGI　　×　　○　　○
4)CGI(no-cache)　　○　　○　　○

【考察】
　結果をみると、やはり単なるHTMLファイルではキャッシュが使用されてしまうので、最新のページをみるためには手動でリロードする必要があります。サーバがSSIの使用を許しているならば、ファイルの拡張子を.shtmlにするだけでかなりの効果が得られます。このとき、ページの中で実際にSSIを使っているかどうかは影響ありませんでした。ファイルをCGIに書き直してno-cacheを指定するとなお効果があり、特にNN2では完ぺきです。今回の例のように『print < 　IE3とNN2とを比べてみると、IE3の方がキャッシュの使用に積極的、NN2の方が新しいデータのリロードに積極的、との傾向がありました。どちらが正しいということはないのかもしれませんが、私はNN2の動作の方が好ましいように思います。IE3ではキャッシュの使用・不使用に不確実性がありますが、原因は不明です。

　ブラウザによる差は表示されたページの外観だけでなく、こんなところにもあるようで、統一が望まれます。なお、今回試した方法の他にも何かやり方があるかもしれません。ご存じの方は教えてください。
　

■Webページで音を出す

　WebページにＢＧＭをつけたり、呼びかける声を出したりする方法を解説しましょう。まず、ＢＧＭや音声のデータファイルを用意します。ＢＧＭの場合はフリーのMIDIファイルを利用すればよいでしょう。音声の場合はWindows95のアクセサリ−マルチメディアのサウンドレコーダで声を録音してWAVEファイルとして保存してください。MIDIファイルの場合は『xxxxx.mid』、WAVEファイルの場合は『xxxxx.wav』として適当なディレクトリに置くものとします。

　Webページで音を出すためのタグはまだ統一されていないため、ブラウザによって異なります。インターネットエクスプローラ（IE）では<bgsound src="xxxxx">という専用のタグがありますがネットスケープナビゲータ（NN）では無視されてしまいます。<embed src="xxxxx">というタグを使うとIEでもNNでも認識されますが、プラグインを起動するので（特にIEで）プラグインが組み込まれていなければ演奏されません。両方のタグを記述したときはエラーメッセージが出る場合があります。とりあえず<embed src="xxxxx">だけでほとんどはＯＫです。KRIのWebページではブラウザを判別して送るタグを変えていますがこれにはSSIというプログラムを使っています。音の出るページに出会ったらどんなタグを使っているかソースを表示させてみるとおもしろいでしょう。

　タグを置く場所はHTMLの中のどこでもいいようですが、通常最初か最後に置くのがわかりやすいでしょう。ファイル名を『xxxxx.mid』とするとタグは次のようになります。
<embed src="xxxxx.mid" playmode="auto" autostart="true" hidden="true">

<bgsound src="xxxxx.mid">


　無料のMIDIデータはYAMAHAのWebページにあります。検索エンジンでMIDI、freeなどをキーワードに検索するとたくさん見つかりますが、いずれも著作権、使用条件などに注意して利用してください。

【音の出るページの例】
・Win95J祐基のホームページ
・シュークリーム　ホーム
・Asa-yan Island
　

■SSIとPerl

　Webページは一般にHTMLという言語で記述されていますが、HTMLのみで作成されたページではすべてのアクセスに対して全く同じものしか見せることができません。例えば、アクセスされるたびに現在時刻を表示したり、アクセスされた回数を表示したりするためにはHTML以外の仕組みが必要です。

　そういう場合に使われるのがSSI(Server Side Include)です。HTMLの中にSSIの命令を書いておくと、サーバでその命令が実行されて結果がブラウザに送られます。SSIでできることはプログラムを実行する、他のファイルを取り込む、ファイルのサイズや最終更新日時を表示する、などです。

　SSIはサーバの設定によって、(1)標準的に使用が許可されている場合、(2)ユーザが使用可能に設定できる場合、(3)使用が許可されていない場合の３つの場合があります。あなたのサーバが３つのうちのどれにあたるかは、サーバの管理者に尋ねてください。KRIが置かれているDigiwebは(1)、私が関係している奈良県立医科大学は(2)です。(2)の場合にはユーザがSSIを使用できるように設定しなければなりません。

　SSIを含むHTMLファイルは拡張子を『.shtml』として普通のHTMLファイルとは区別しますが、これもサーバの設定によって異なりますので管理者に尋ねてください。自分で設定できるときは拡張子を『.html』にせず『.shtml』にしてください。SSIを使用するとサーバの負荷が増大しますが、『.html』と『.shtml』とを区別することによって負荷の増大が少なくてすみます。あなたのサーバでSSIが使えるかどうか、テストしてみましょう。『test.shtml』という次のようなSSIを含むHTMLファイルを作って、あなたのWebページのディレクトリに置いてください。
<html>
<title>SSIのテスト</title>
<body bgcolor="#ffffff">
SSIのテスト
<hr>
現在の時刻：<!--#echo var="DATE_LOCAL"-->
</body>
</html>

　どうでしょう。下記のように時間が表示されたでしょうか。
SSIのテスト
現在の時間：Saturday, 31-Jan-98 01:59:24 JST

　『現在の時刻：』の後に時刻が表示されていないときはSSIが機能していません。

　ユーザがSSIを使用可能に設定できる場合にも、設定方法にはサーバによっていくつかのやり方がありますが、ここでは代表的な例を示します。 　Webページのルートディレクトリまたは『test.shtml』と同じディレクトリに『.htaccess』という名前の以下のような内容のテキストファイルを作成します。
AddType text/x-server-parsed-html .shtml

　上記でだめな場合は次の内容にしてみてください。
Options Includes
AddType text/x-server-parsed-html .shtml

　どうですか。うまくいきましたか。うまくいかない場合は、入力ミスがないかよくチェックして、それでもだめな場合はサーバの管理者に問い合わせてください。

　SSIを使うときはPerl（パール）というプログラム言語をよく使います。このあと説明するカウンタもPerlを使用しています。Perlで記述したプログラムをSSIで使うときは、だいたい次のような手順で行います。
・SSIを呼び出すHTMLファイル、Perlで記述したプログラム（スクリプト）ファイル、（必要があれば）データファイルを作成する。
・FTPで適当なディレクトリに転送する。
・telnetでログインし、ファイルの属性を変更する。

　サーバによってはSSIを使うために特別な許可や手続きが必要な場合もありますので確認してください。SSIとPerlの使用が許可されていないプロバイダではここに説明する方法でカウンタを設置することはできません。
　

■キャラクタ版アクセスカウンタ

　最も簡単なキャラクタ（文字、つまり数字）で表示するアクセスカウンタを作ってみましょう。アクセスカウンタを設置するにはいくつかの方法がありますが、ここではプロバイダのサーバがSSI(Server Side Include)の使用を許可していて、Perl（パール）というプログラム言語が使用できる場合のみを考えます。

　それでは手順を説明しますが、SSIはプロバイダのサーバでプログラムを実行するものであり、プログラムのミスによりサーバが動作不能になるなど大きな障害を引き起こすこともあるので十分注意してください。

【１】SSIスクリプトファイルを作成する。
　SSIはWebページを置いているサーバに実行させるプログラムの一種で、プログラム言語にはPerlがよく使われます。ここでもPerlで記述しました。Perlがインストールされているディレクトリはサーバによって異なり、それを調べてスクリプトの１行目に記述する必要があります。/bin/perl、/usr/bin/perl、/usr/local/bin/perlが多いようですが、この調べ方については【５】のtelnetのところで説明します。テキストエディタで次の内容のファイルを作成し、ファイル名count1.plとして保存します。拡張子は『.pl』としていますが、これはPerlのスクリプトファイルであるという意味で、Digiwebでは特に制限はありません。ここでは次の内容をブラウザからコピーするとよいでしょう。
#!/usr/local/bin/perl

$countfile="count1.dat";
$lock =2;
$unlock=8;

unless(open(FILE, "+<$countfile")){print "[Can't open $countfile]"; exit;}
flock(FILE,$lock);
$counter=<FILE>;
$counter++;
seek(FILE,0,0);
print FILE $counter;
flock(FILE,$unlock);
close(FILE);

print $counter;
　『#!/usr/local/bin/perl』はこのファイルの先頭であり、それより前には空行を含めてなにも置かないようにしてください。１つの行が表示桁数の都合で２行にわたって表示されている場合があると思うので注意してください。Internet Explorerではだいたいうまくコピーできるようですが、Netscape Navigatorでは行頭に不要なスペースが入ったり正しく改行されなかったりすることがあります。どちらの場合もエディタにペーストしたあとおかしい部分を修正してください。

【２】カウンタ用データファイルを作成する。
　カウンタの値を保存するためのデータファイルを作成します。テキストエディタを起動して半角数字の『0』１文字だけ（改行なし）のファイルを作成し、ファイル名count1.datとして保存します。ファイルの大きさは１バイトのはずですが、そうでないときは全角文字になっていないか、改行が入っていないかなどチェックしてください。

【３】カウンタを設置するWebページを作成する。
　Webページ（HTMLファイル）の内容はもちろん任意ですが、カウンタを設置したい場所にSSIを呼び出すタグを埋め込みます。次に例を示しますが、ファイル名はcount1.shtmlとします。Digiwebでは拡張子は必ず『.shtml』にしなければなりません。<!--#exec cmd="perl count1.pl"-->の部分がSSIを呼び出すタグで、ここにカウント数が表示されます。
<html>
<head>
<title>キャラクタ版カウンタのテスト</title>
</head>
<body bgcolor="#ffffee">

<hr>
<center>
<font size="7">キャラクタ版カウンタのテストです。</font>
</center>
<hr>

<font size="4">
このページは<!--#exec cmd="perl count1.pl"-->回アクセスされました。
</font>

</body>
</html>

【４】FTPでファイルを転送する。
　FTPソフトにサーバ名（Digiwebの場合はftp.digiweb.com）、ユーザID、パスワードを指定して接続し、上の３つのファイルをサーバに転送します。転送するディレクトリはDigiwebの場合ホームディレクトリの直下の『public_html』です。私は『WS_FTP95』というフリーソフトを使っています。FTPソフトの転送モードにはASCII（テキスト）とBinary（データ）がありますが、ここではすべてASCIIモードで転送します。

【５】telnetでファイルの属性を変更する。
　telnetソフトにサーバ名（Digiwebの場合はcolumbia.digiweb.com）を指定し、接続したらユーザIDとパスワードを入力してログインします。まずPerlがインストールされているディレクトリを調べましょう。
>which perl
/usr/local/bin/perl
>

　これがcount1.plの１行目の記述と一致しているかどうか確認してください。異なる場合はcount1.plを訂正してもう一度FTPで転送し直します。

　次にpwdコマンドでカレントディレクトリを確認し、cdコマンドで目的のディレクトリ（Digiwebの場合はホームディレクトリの直下のpublic_html）に移動します。
>pwd
/usr/your-home
>cd public_html
>pwd
/usr/your-home/public_html
>

　いよいよファイルの属性を変更しますが、初期設定の属性を確認しておきます。
>ls -l count*
-rw-r--r-- 1 kakihana client 1 Apr 20 21:17 count1.dat
-rw-r--r-- 1 kakihana client 272 Apr 20 21:17 count1.pl
-rw-r--r-- 1 kakihana client 284 Apr 20 21:17 count1.shtml
>

　ここでchmodコマンドでcount1.datとcount1.plの属性を変更したあと、再度属性を確認します。これでcount1.datは書き込み可能に、count1.plは実行可能になります。count1.shtmlは属性変更の必要はありません。
>chmod 666 count1.dat
>chmod 755 count1.pl
>ls -l count*
-rw-rw-rw- 1 kakihana client 1 Apr 20 21:17 count1.dat
-rwxr-xr-x 1 kakihana client 272 Apr 20 21:17 count1.pl
-rw-r--r-- 1 kakihana client 284 Apr 20 21:17 count1.shtml
>

　ここまでできたらtelnetのコマンドラインでcount1.plを実行できるはずです。表示される数字が増えていくことを確認してください。カウンタをリセットしたいときはもう一度値が『0』のcount1.datを転送すればＯＫです。
>count1.pl
1>count1.pl
2>count1.pl
3>count1.pl
4>

　サーバとの接続を切るにはexitと入力します。
>exit

【６】トラブルシューティング
　これで完成です。以外と簡単でしょう。count1.shtmlにアクセスするたびにカウンタが１つずつ増えていきます。もし動かないときは次の点をチェックしてみてください。
・SSIの使用が許可されていて、かつPerlが使用できるか。
・Perlのインストールされているディレクトリが正しく指定されているか。
・ファイル中の重要な部分に余分なスペースなどの不要な文字が挿入されていないか。
・ファイルを転送したディレクトリは正しいか。
・FTPでのファイル転送はASCII（テキスト）モードで行ったか。
・ファイルの属性は正しく設定したか。

【７】サンプル
　ここで解説した手順通りにカウンタを設置したサンプルページを作りましたのでアクセスしてみてください。

キャラクタ版アクセスカウンタのサンプルページ
　

■グラフィック版アクセスカウンタ

　キャラクタで表示されるものよりグラフィック文字で表示されるカウンタの方がやっぱりオシャレですね。キャラクタ版カウンタの設置に成功したら次はグラフィック版に改造してみましょう。キャラクタ版といってもカウントする原理は同じです。ただ表示するときにブラウザに文字を送るのではなく、グラフィック文字を表示するためのタグを送ります。『0』〜『9』の文字のグラフィック（画像）も用意しなくてはなりません。

　それでは手順を説明しますが、ミスを少なくするために、必ずキャラクタ版アクセスカウンタに成功してからグラフィック版に進んでください。重ねて申し添えますが、SSIはプロバイダのサーバでプログラムを実行するものであり、プログラムのミスによりサーバが動作不能になるなど大きな障害を引き起こすこともあるので十分注意してください。

【１】SSIスクリプトファイルを作成する。
　ファイル名はcount2.plとします。話が前後しますが【４】のグラフィック文字を作るときにメモしておいた画像の大きさを横19ドット、縦20ドットとします。この数値をブラウザに送る<img >タグのwidth、heightオプションとして指定しますので適宜変更してください。<img >タグのsrcオプションでは【５】で転送する画像ファイルのディレクトリを指定します。表示する桁数は最初の方の$digit=に指定します。ここでは４桁で、この桁数に満たない場合は前が『0』で埋められます。
#!/usr/local/bin/perl

$countfile="count2.dat";
$digit =4;

$lock =2;
$unlock=8;

unless(open(FILE, "+<$countfile")){print "[Can't open $countfile]"; exit;}
flock(FILE,$lock);
$counter=<FILE>;
$counter++;
seek(FILE,0,0);
print FILE $counter;
flock(FILE,$unlock);
close(FILE);

for($i=$digit-1; $i>=0; $i--){
$num=int($counter/(10 ** $i));
print "<img src=\"image/num$num.gif\" alt=\"$num\" width=19 height=20\">";
$counter=$counter-(10 ** $i)*$num;
}
　『#!/usr/local/bin/perl』はこのファイルの先頭であり、それより前には空行を含めてなにも置かないようにしてください。１つの行が表示桁数の都合で２行にわたって表示されている場合があると思うので注意してください。Internet Explorerではだいたいうまくコピーできるようですが、Netscape Navigatorでは行頭に不要なスペースが入ったり正しく改行されなかったりすることがあります。どちらの場合もエディタにペーストしたあとおかしい部分を修正してください。

【２】カウンタ用データファイルを作成する。
　カウンタ用のデータファイルはキャラクタ版の場合と同じように作成しますが、ここではファイル名をcount2.datとしました。

【３】カウンタを設置するWebページを作成する。
　これはキャラクタ版とほとんど同じです。ファイル名はcount2.shtmlとして保存します。
<html>
<head>
<title>グラフィック版カウンタのテストr</title>
</head>
<body bgcolor="#ffffee">

<hr>
<center>
<font size="7">グラフィック版カウンタのテストです。</font>
</center>
<hr>

<font size="4">
このページは<!--#exec cmd="perl count2.pl"-->回アクセスされました。
</font>

</body>
</html>

【４】グラフィック文字を作成する。
　まず表示に使うグラフィックを作成します。データは数字の『0』〜『9』の10個で、拡張子が『.gif』のGIFフォーマットで保存します。画面の表示を遅くしないためのグラフィック作成のコツは、データをできるだけ小さく、かつ『0』〜『9』の各文字のサイズを同じにする、ということです。データを小さくすると転送に要する時間が短くなりますし、各文字を同じサイズにしてタグでその大きさを指定することにより画面の表示を速くすることができます。

　実際に作成するにはGIFフォーマットを扱うことができるグラフィックソフトを使用しますが、フリーで提供されているグラフィックを使用してもよいでしょう。データを小さくするために色数を16色程度と少なくし、サイズも縦横各20ドット程度を目安にします。作成した画像の縦横のサイズ（ドット数）をメモしておいて、【１】で作成したcount2.plの中で指定してください。使用するグラフィックソフトによって出来上がりのファイルサイズがかなり異なることがありますが、１つあたり１キロバイトぐらいに抑える方がよいでしょう。

　グラフィックソフトの操作についてはここでは説明しませんが、周囲を透過色に指定し、インターレースを使うといっそうオシャレです。できあがったグラフィックデータは、ファイル名をnum0.gif〜num9.gifとして保存します。まあ、いろいろやってみてください。

【５】FTPでファイルを転送する。
　count2.pl、count2.dat、count2.shtmlの３つについてはキャラクタ版の時と同じです。

　num0.gif〜num9.gifを適当なディレクトリに転送します。ここではホームディレクトリの下の『public_html/image』に転送していますが、これはcount2.plで送るタグの指定と合わせなければなりません。

【６】telnetでファイルの属性を変更する。
　count2.pl、count2.dat、count2.shtmlの３つについてはキャラクタ版の時と同様です。num0.gif〜num9.gifの画像データは読み出すだけなので、属性の変更は必要ありません。

　属性を変更したらtelnetのコマンドラインでcount2.plを実行できるはずです。ただし表示されるのは数字ではなくタグであるのでちょっとわかりにくいかもしれません。
>count2.pl
<img src="image/num0.gif" alt=0 width=19 height=20><img src="image/num0.gif" alt=0 width=19 height=20><img src="image/num0.gif" alt=0 width=19 height=20><img src="image/num1.gif" alt=1 width=19 height=20>>count2.pl
<img src="image/num0.gif" alt=0 width=19 height=20><img src="image/num0.gif" alt=0 width=19 height=20><img src="image/num0.gif" alt=0 width=19 height=20><img src="image/num2.gif" alt=2 width=19 height=20>>count2.pl
<img src="image/num0.gif" alt=0 width=19 height=20><img src="image/num0.gif" alt=0 width=19 height=20><img src="image/num0.gif" alt=0 width=19 height=20><img src="image/num3.gif" alt=3 width=19 height=20>>count2.pl
<img src="image/num0.gif" alt=0 width=19 height=20><img src="image/num0.gif" alt=0 width=19 height=20><img src="image/num0.gif" alt=0 width=19 height=20><img src="image/num4.gif" alt=4 width=19 height=20>>

【７】トラブルシューティング
　これもキャラクタ版の時と同じですが、さらに画像ファイルが正しいディレクトリに転送されているかをチェックしてください。

【８】サンプル
　ここで解説した手順通りにカウンタを設置したサンプルページを作りましたのでアクセスしてみてください。

グラフィック版アクセスカウンタのサンプルページ
　

■訪問者ログ

　カウンタに追加して、Webページを訪れた人の記録（ログ）を取るプログラムを作成しましょう。SSIを使うとそのページがアクセスされた回数だけでなく、アクセスした人の情報を知ることもできます。情報といっても個人が特定できる訳ではありませんが、アクセスしたサーバ（プロバイダのアクセスポイント）のIPアドレス、ホスト名、リンク元のURL、使用ブラウザとOSなどを知ることができます。ここではこれらの情報およびアクセスされた時刻をテキストファイルに記録するプログラムを作成します。

　それでは手順を説明しますが、ミスを少なくするために、必ずアクセスカウンタに成功してからログに進んでください。重ねて申し添えますが、SSIはプロバイダのサーバでプログラムを実行するものであり、プログラムのミスによりサーバが動作不能になるなど大きな障害を引き起こすこともあるので十分注意してください。

【１】プログラムを作成する。
　前述のアクセスカウンタ（キャラクタ版、グラフィック版のどちらでも可）のプログラムに、ログを取るためのルーチンを追加します。ここではグラフィック版(count2.pl)に追加しました。
#!/usr/local/bin/perl

$countfile="count2.dat";
$digit =4;

$lock =2;
$unlock=8;

unless(open(FILE, "+<$countfile")){print "[Can't open $countfile]"; exit;}
flock(FILE,$lock);
$counter=<FILE>;
$counter++;
seek(FILE,0,0);
print FILE $counter;
flock(FILE,$unlock);
close(FILE);

for($i=$digit-1; $i>=0; $i--){
$num=int($counter/(10 ** $i));
print "<img src=\"image/num$num.gif\" alt=\"$num\" width=19 height=20\">";
$counter=$counter-(10 ** $i)*$num;
}

# この前はカウンタの部分、この後がログを取る部分

$logfile="log.txt";

@youbi=("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
$ENV{'TZ'} = "JST-9";
($sec,$min,$hour,$mday,$mon,$year,$wday,$yday,$isdst)=localtime(time);
$mon++;
$jst=sprintf("%2d/%02d/%02d(%s)%02d:%02d:%02d(JST)",$year,$mon,$mday,$youbi[$wday],$hour,$min,$sec);

$logdata=sprintf("$jst / %-15s / $ENV{'REMOTE_HOST'} / HTTP_REFERER=$ENV{'HTTP_REFERER'} / $ENV{'HTTP_USER_AGENT'}",$ENV{'REMOTE_ADDR'});

unless(open(LOG, ">>$logfile")){print "[Can't open $logfile]"; exit;}
flock(LOG,$lock);
print LOG "$logdata\n";
flock(LOG,$unlock);
close (LOG);
　『#!/usr/local/bin/perl』はこのファイルの先頭であり、それより前には空行を含めてなにも置かないようにしてください。１つの行が表示桁数の都合で２行にわたって表示されている場合があると思うので注意してください。Internet Explorerではだいたいうまくコピーできるようですが、Netscape Navigatorでは行頭に不要なスペースが入ったり正しく改行されなかったりすることがあります。どちらの場合もエディタにペーストしたあとおかしい部分を修正してください。

【２】ログファイルを作成する。
　ログを保存するデータファイルを作成します。テキストエディタを起動して『Access Log』と１行だけ（末尾に改行あり）のファイルを作成し、ファイル名log.txtとして保存します。ログはこの後にどんどん追加されるように記録されていくので、実際にはこの内容は何でもかまいません。なお、count2.dat、count2.shtmlはカウンタプログラムで使ったものと同じです。

【３】FTPでファイルを転送する。
　FTPソフトのテキストモードで、グラフィック版カウンタ用の３つのファイルcount2.pl、count2.dat、count2.shtmlおよびログファイルlog.txtをサーバに転送します。

【４】telnetでファイルの属性を変更する。
　count2.pl、count2.dat、count2.shtmlの３つについてはグラフィック版の時と同じです。log.txtはcount2.datと同じく書き込み可能属性(666)に変更します。

　属性を変更したらtelnetのコマンドラインでcount2.plを実行できるはずです。実行結果はログのないカウンタプログラムと同じになります。同じにならないときは間違いがないかチェックしてください。

【５】トラブルシューティング
　アクセスカウンタの時と同様のチェックを行います。さらにlog.txtの属性が正しく変更されているかチェックしてください。

【７】サンプル
　前述のグラフィック版アクセスカウンタのサンプルページをログ付きに変更してあります。このページをアクセスするとログに記録されます。試してみてください。

　ログを見るにはブラウザで直接ログファイルhttp://www.kakihana.com/log.txtにアクセスします。ログが記録されていないように思うときはブラウザの更新ボタンで更新してみてください。FTPソフトで転送してからテキストエディタで読んでもかまいませんが、いちいちFTPソフトを起動するのは面倒です。

　ログファイルには１回のアクセスが１行のデータとして記録されています。データの意味するものは前から、時刻／サーバのIPアドレス／サーバのホスト名（未登録の時はIPアドレス）／リンク元／ブラウザとOSの情報、です。

　ログファイルはアクセスがあるたびに追加され、どんどん大きくなっていきます。大きくなりすぎると読むときの転送に時間がかかりますし、使用を許可されたサーバのハードディスクの容量にも影響しますので適当に初期化（空のLOG.TXTを再転送）しておくとよいでしょう。なお、このログプログラムは１日に１００カウント程度のアクセス数でしか実績がありません。原理的にはいくら増えても大丈夫なはずですが、超人気ページに設置するときには十分テストしてください。
　

■CGIの使用

　これまでSSIを使ったWebプログラミングについて解説しましたが、サーバ上で実行するプログラムにはSSIのほかにCGI(Common Gateway Interface)と呼ばれるものがあります。SSIがHTMLファイルに組み込まれていわば自動的に実行されるものであったのに対して、CGIはリンクやフォームによって実行されます。 　CGIもSSIと同様にサーバの設定によって、(1)標準的に使用が許可されている場合、(2)ユーザが使用可能に設定できる場合、(3)使用が許可されていない場合の３つの場合があります。あなたのサーバが３つのうちのどれにあたるかは、サーバの管理者に尋ねてください。KRIが置かれているDigiwebは(1)、私が関係している奈良県立医科大学は(2)です。(2)の場合にはユーザがCGIを使用できるように設定しなければなりません。

　CGIのプログラムファイルの拡張子は通常『.cgi』に指定されていますが、指定されていない場合もあります。あなたのサーバでCGIが使えるかどうか、テストしてみましょう。『test.cgi』という次のようなCGIプログラムを作って、あなたのWebページのディレクトリに置いてください。このCGIプログラムはPerlという言語で書かれていますので、あなたのサーバでPerlが使えなければなりません。またプログラムの１行目にPerlがインストールされているディレクトリを指定しなければならないのはカウンタプログラムの場合と同様ですので参照してください。『Content-type: text/html』の行のあとには必ず空行が必要ですので注意してください。
#!/usr/local/bin/perl

print <<EOF;
Content-type: text/html

<html>
<title>CGIのテスト</title>
<body bgcolor="#ffffff">
CGIのテスト
<hr>
</body>
</html>
EOF

　FTPで転送したら、telnetでログインしてchmodコマンドで『test.cgi』のパーミッションを755に変更します。その後、ブラウザでこのCGIプログラムに接続してください。URL（アドレス）は例えば次のようになります。http://www.provider.or.jp/~your_dir/test.cgi

　どうでしょう。下記のように表示されたでしょうか。
CGIのテスト

『501 Not Implemented』と表示された場合や、プログラムがそのまま表示された場合はCGIが機能していません。『403 Forbidden』と表示された場合はパーミッションの変更を忘れています。

　ユーザがCGIを使用可能に設定できる場合にも、設定方法にはサーバによっていくつかのやり方がありますが、ここでは代表的な例を示します。 　Webページのルートディレクトリまたは『test.cgi』と同じディレクトリに『.htaccess』という名前の以下のような内容のテキストファイルを作成します。
AddType application/x-httpd-cgi .cgi

　上記でだめな場合は次の内容にしてみてください。
Options ExecCGI
AddType application/x-httpd-cgi .cgi

　SSIの設定と同時に行う場合には次のどちらかになります。
AddType application/x-httpd-cgi .cgi
AddType text/x-server-parsed-html .shtml

Options ExecCGI Includes
AddType application/x-httpd-cgi .cgi
AddType text/x-server-parsed-html .shtml

　どうですか。うまくいきましたか。うまくいかない場合は、入力ミスがないかよくチェックして、それでもだめな場合はサーバの管理者に問い合わせてください。
　

■カメレオン掲示板

さて、いよいよ掲示板です。掲示板とは、訪問者がInternet ExplorerやNetscape Navigatorなどのブラウザから直接リアルタイムに書き込めるページです。プログラムはちょっと難しいですが、掲示板があればWebページは友人・知人などのメッセージで盛り上がり、ひょっとしたら見知らぬ人と出会えるかもしれません。掲示板を実現するためのCGIはすでにたくさん紹介されていますが、書き込んだメッセージを表示するボックスの背景色を選択することができるように細工し、『カメレオン掲示板』と名付けました。その他下記のような方針で設計しました。

　最初はKRIの『ひとこと掲示板』のために作り始め、訪問者の意見を取り入れながら改良を続け、現在の形になりました。今回の公開にあたり、背景色選択の部分を追加しました。それでは手順を説明しますが、アクセスカウンタなどのSSIと同様、CGIもプロバイダのサーバでプログラムを実行するものであり、プログラムのミスによりサーバが動作不能になるなど大きな障害を引き起こすこともあるので十分注意してください。

　重要：このスクリプトはPerlで書かれており、新しいメッセージを上に表示するために、UNIXのtailというコマンドを使っています。『キャラクタ版アクセスカウンタ』のところで説明した方法でPerlとtailがインストールされているディレクトリを調べてください。

【１】プログラムをダウンロードする。
　まず、keiji.txtをダウンロードして、ファイル名をkeiji.cgiに変更してください。拡張子は必ずしも.cgiである必要なく、.plなどでもＯＫです。サーバによっては拡張子が指定されているところもあるかもしれません。
　次に、jcode.txtをダウンロードして、ファイル名をjcode.plに変更してください。これは漢字コード変換などの機能を持つフリーウエアのパッケージです。
　いずれもエディタで開いて、ファイルの最初に空行があれば削除してください。

【２】プログラムを修正する。
　keiji.cgiの最初の部分にあるパラメータを設定します。最低限変更する必要があるのはperlのディレクトリ、tailのディレクトリ、新メッセージファイル開始日、このプログラムのurlの４か所です。

【３】データファイルを作る。
　２つのデータファイル、keiji.newとkeiji.oldを作成します。どちらも最初は長さゼロの空のテキストファイルです。長さゼロのテキストファイルはWindows 95付属のメモ帳などで作成することができます。

【４】FTPでファイルを転送する。
　FTPソフトのテキストモードで４つのファイル、keiji.cgi、jcode.pl、keiji.new、keiji.oldをサーバに転送します。背景に画像ファイルを使用する場合は適切なディレクトリにバイナリモードで転送します。

【５】telnetでファイルの属性を変更する。
　アクセスカウンタの時と同様の方法で、keiji.cgi、jcode.plの２つは属性755に、keiji.new、keiji.oldの２つは属性666に変更します。

　以上で『カメレオン掲示板』の完成です。メッセージを書き込むときに背景色を『赤緑水黄紫橙桃』の７色から選択することができます。ランダムを選択すればプログラムが適当に選んでくれます。

　『カメレオン掲示板』では新しいメッセージは上に表示されますが、実際のデータファイルでは新しいメッセージはkeiji.newの最後に追加されています。keiji.newがいっぱいになってきたら適当な日で区切って、古いメッセージをkeiji.oldに移動します。このときも新しいメッセージがファイルの最後になるようにしてください。また、keiji.cgiのパラメータの『新メッセージファイル開始日』も忘れずに更新してください。

　この掲示板は実際に設置してその動作を確認していますが、もしうまくいかないようならプログラムのミスの可能性もあるのでご連絡ください。→メールの送り先support@kakihana.com
　

■パスワードによるアクセス制限

　現在一般的に使われているWebサーバでは、ディレクトリ毎にユーザのアクセスを制限することができます。これは制限したいディレクトリに『.htaccess』という名前のファイルを置き、アクセスして来たホストやIPアドレスまたはユーザの名前とパスワードを使ってアクセスを許可するユーザを限定するものです。ここではパスワードによるアクセス制限について説明しましょう。

　代表的なサーバの設定にしたがって、自分のホームディレクトリを/usr/home/user_name、自分のWebページのルートディレクトリを/usr/home/user_name/public_html、アクセス制限したいサブディレクトリを/usr/home/user_name/public_html/membersであると仮定します。この時このサブディレクトリは、ブラウザでhttp://www.domain.or.jp/~user_name/members/のURLでアクセスできるものとします。

【１】.htaccessファイルを作る。
　エディタで次のようなファイルを作成し、アクセス制限したいサブディレクトリ /usr/home/user_name/public_html/membersにFTPのASCIIモードで転送します。
AuthType Basic
AuthName Password Required
AuthUserFile /usr/home/user_name/.htpasswd
AuthGroupFile /dev/null
<Limit GET>
require valid-user
</Limit>
　AuthNameに指定した文字列はパスワードを入力するダイアログで表示されます。AuthUserFileは後に述べるパスワードファイルを置く場所を指定します。AuthGroupFileはグループ単位の認証の際にのみ必要なファイルですが、この設定がないとエラーになることがあるのでとりあえず指定しておきます。

【２】パスワードファイルをつくる。
　telnetでサーバにログインし、htpasswdコマンドでパスワードファイル『.htpasswd』を作ります。パスワードファイルはユーザから見えないようにするためにHTMLファイルを置くディレクトリより上位に置く方が安全ですので、自分のホームディレクトリに作ります。

　telnetでサーバにログインすると自動的に自分のホームディレクトリに移されます。現在作業しているディレクトリはpwdコマンドで知ることができます。
>pwd
/usr/home/user_name
>

　htpasswdコマンドにはファイル名と登録したいユーザの名前のふたつの引数が必要です。実行するとそのユーザに対するパスワードを２回入力するように要求されます。なお、１人目のユーザを登録するときだけは-cオプションをつけて実行します。

　それでは、パスワードファイルがない状態から、user1とuser2の２人のユーザを登録してみましょう。
>htpasswd -c /usr/home/user_name/.htpasswd user1
Adding password for user1.
New password:（表示されない）
Re-type new password:（表示されない）
>htpasswd /usr/home/user_name/.htpasswd user2
Adding password for user2.
New password:（表示されない）
Re-type new password:（表示されない）
>
　ユーザごとに違うパスワードを使う必要がないならば、１人のユーザを登録してすべてのユーザで共用してもよいでしょう。一度登録したユーザのパスワードを変更するにはもう一度同じコマンドを実行します。ユーザを削除するにはエディタで直接パスワードファイルを編集して、該当するユーザの行を削除します。

　これで準備は終了です。/usr/home/user_name/public_html/membersディレクトリにindex.htmlファイルをおいて、ブラウザでアクセスしてみてください。意外と簡単に実現できるでしょう。

【トラブルシューティング】
　うまくいかないときはディレクトリ関係に間違いがないか確認してください。またシステムにhtpasswdコマンドがないときは管理者に相談してみてください。環境によってはソースコードを自分でコンパイルして作らなければならないこともあります。
　

■Webプログラミングのためのリンク

　Webページを制作するための情報源は・・・もちろん、Webページです。最近ではWebページ制作に関する参考書が多数出版されていますが、インターネット上には無料でしかも最新の情報を提供してくれるぺージがあります。ここに役に立つと思われるページを紹介します。だんだん追加・整理する予定です。

・ホームページを作ってみよう！
　　…超初心者向けのHTML入門ページ(Windows95ユーザー用)。
・簡単で正しいHTMLの書き方
　　…初心者向けのHTML解説。
・HTMLどうすりゃ委員会−超簡単ＨＴＭＬ超入門
　　…サンプルページ＜驚異！ 自動スタート立体ムービーMIDI付き＞がすごい。
・ZSPC Super HTML Reference
　　…見やすいHTMLマニュアル。
・HTMLとCGI入門
　　…５週間のコースになっているバーチャル講習会。テストもあるよ。
・竹ソフト
　　…アクセスカウンタ、掲示板などのしくみ、プログラムを公開。
・インタラクティブページの作り方
　　…PerlによるCGIとSSIについて。
・Ｗｅｂ裏技
　　…CGIやSSIを使ってできることの紹介。
・Ｗｅｂ忍法帖
　　…伝言板プログラムを提供。
・マイ・ホームページへの道
　　…Webページの作り方に関する情報源へのリンク集。
・Pointer Collection
　　…『HTML の技術関連』はWebページのためのリンクの宝庫。
・Color Test
　　…Webページの配色を実験してみることができるページ。
・GIFあに倶楽部
　　…GIFアニメの作り方を学べるページ。バナー（タイトル）を無料で作ってくれる。
・イヤでもわかるshockwave講座
　　…Shockwave作り方講座。初歩から上級テクニックまで。
・MAKING INTERACTIVE HOMEPAGE
　　…カウンタ、アンケートの作り方など、CGIについて。
・Matt's Script Archive
　　…カウンタ、掲示板などのCGIについての超有名なページ。英語です。
・N88perl HomePage
　　…簡単なプログラムを「N88BASICとperl」で記述することによりperlの文法を学ぶページ。
・perl-4.019 Japanese Manual
　　…CGIのためのプログラミング言語Perlのオンラインマニュアルの日本語訳。
・Perlのタコ
　　…Perlに関するさまざまな話題。
・Perl初心者の部屋
　　…Perlのためのマニュアル、FAQ、リンクのページ。
・WWWの手引
　　…CGIのTips、アクセス制御、ユーザ認証について。
・ひなたdeＣＯＣＯ
　　…『勝手にＰｅｒｌリファレンス』のページに基礎からTipsまで役に立つ情報がたくさん。
・ホームページ・クリエイティブ・グループ
　　…メーリングリストのWebページ。どうしても解決できない問題があれば答えが得られるかも。
　

■Webプログラミングのための素材

　Webページを飾るアイコン、ボタン、背景などの素材を提供してくれるWebページです。ネットサーフィンのページからこちらに移しました

・著作権フリー素材集
　　…ボタン、文字、数字、背景、罫線など。
・背景屋さん
　　…背景、左端っこ背景画像。
・The Background Sampler
　　…Netscapeの背景素材集。
・Pattern Land!
　　…背景集。
・WebGround
　　…背景集。
・Texture Land
　　…背景集。
・Background Samples!
　　…背景集。
・ふぁんし〜・ぱ〜つ・しょっぷ
　　…背景、ボタン、アイコン、アニメーションパーツ、罫線集。
・Webデザイン素材店anyway
　　…自由に使えるボタンや罫線などの素材。
・The Icon and Image Bazaar
　　…自由に使える多数のアイコン。
・G-TOOL
　　…ライン、矢印、アイコンなど自由に使える素材がいっぱい。
・Charley's Angel
　　…アダルトショップの片すみに、Freeの背景、カウンタ用数字などがあります。
・ホームページのおもちゃ箱
　　…GIFアニメがかわいいアイコン集。
・SOZAI FACTORY
　　…アイコン、ビットマップが多数。アニメーションGIFも。
・デジタル福助
　　…『福助のお宝』にGIFアニメ、プログレッシブJPEG、Shockwaveムービーなどがたくさん。
・Gioacchino La Vecchia Home Page
　　…アイコンが5000種類以上もあるイタリアのWebページ。
・ICON LIFE
　　…ユーザー登録とリンクを張ることを条件にたくさんのアイコン、ボタンが使えます。
・Kazutami Takatori's Home Page
　　…背景、アイコンがたくさん。数字もあります。
・日本の伝統模様
　　…日本古来の伝統的な家紋や文様の数々。白黒のみですが、背景に使えそう。
・Nudes
　　…著作権を表示することでヌードフォトを使わせてくれるという、ありがたいページ。
・MIDI Farm
　　…Free Files Section - The MIDI Farm - General MIDI FilesにFreeのMIDI(音楽データ)ファイル。