前回はHTMLからPerlを呼び出す方法として、インラインフレームを使のが簡単という話だった。
ただし、この方法には問題点があることも前回お伝えした通り。
他にもHTMLからCGIを呼び出すにはSSI(Server Side Include)を利用するなどの方法があるが、使用できるサーバーが限られてくる。
そこで今回はHTMLに記述したJavaScriptからCGIを読み込ませる方法について考えてようというわけだが、その前にアクセスカウンターなど画像だけなら、
「<img src="CGIファイルまでのパス">」で簡単に表示させられることを覚えておくと良い。
ただし、CGI側は「Content-Type: text/html」としたハイパーテキストではなく、画像をバイナリモードで出力しなければならないので、以下のように記述する。
GIF画像を出力するサンプル
print "Content-type: image/gif\n\n";
open IMG,"GIF画像へのパス";
binmode IMG;
binmode STDOUT;
print <IMG>;
close IMG;
exit;
1行目はGIF画像用の指定。JPEGなどはまた指定が違うので注意。
3行目はファイルハンドルに対してバイナリモードを指定している。
アクセスカウンターなどを画像で表示するには画像を連結する処理が別に必要だが、「gifcat.pl」というPerl用画像連結ライブラリがフリーで配布され検索すればすぐに入手できるので、そちらを利用するの手っ取り早い。
当然ながら出力が画像以外の場合は表示されないので注意して欲しい。
本題に戻るが、JavaScriptでテキストなどを表示するには次のように記述する。
<script type="text/javascript" src="CGIへのパス"></script>たった1行でできてしまうのだから、ある意味感動的でさえある。
上記で読み込むCGI側のサンプル
print "Content-type: application/x-javascript\n\n";
print "document.write(\"ここに出力させたい内容\");\n";
exit;
ポイントはContent-typeを「application/x-javascript」とすることで、要するに呼び出したのがJavaScriptなら出力する方もJavaScriptの仕様に合わせろということ。
非常に簡単に思えるかも知れないが、実はここで行き詰る。
テキストだけなら問題ないのだが、画像、つまり「img src=」のようなタグを記述すると、表示されなくなる。
単純にテキストとして出力してくれれば良いのだが、そうはいかないらしい。
アクセスカウンターのようなものならそれでもいいが、少し複雑な表示させようと思うと、これでは困る。
テキストと画像が混在、というかHTML形式として出力するには次のような工夫が必要となる。
JavaScriptのエラーを回避するサンプル
print "Content-Type: text/html;\n\n";
$CONTENTS =<<EOS;
<p>ここに出力ささせたい内容</p>
<img src="画像へのパスf">
EOS
$CONTENTS =~ s/\r//g;
$CONTENTS =~ s/\n//g;
print <<EOS;
document.write('$CONTENTS');
EOS
exit;
2行目から5行目までは、ヒアドキュメントで変数に代入したが、もちろん普通に代入しても構わない(エスケープ処理が必要な点も同じ)。
6行目、7行目は改行コードが含まれているとエラーになるため、削除している。
これで通常通り、HTMLが出力されるはずだ。
JavaScriptでCGIを読み込めると、一気に応用範囲が広がるので、覚えておいて損はない。