先日プログラミングのネタを取り扱ったせいか、実際に何か組みたくなってきた。だが、大それたものは時間もかかるし慣れるまで時間もかかりそうだし、そもそもそんな題材はすぐには思いつかない。なので、手軽なものを組みたいと思っていたら、ニフティホームページでCGIを作ればいいじゃないか、という結論になった。その題材は、私の持つ超マニアックコンテンツの「BCL資料室」のリニューアルである。
う～ん、BCLってそもそも何だよ？という人は、このブログの左上のリンクから「懐かしのBCL資料室」に入ってください…。
「BCL資料室」では、世界中の放送局のQSLカードを掲示しているが（実際にはまだ国内だけ）、すべてサムネール画像のみで、拡大画像とかは掲示していなかった。また、QSLカードには裏面（葉書の宛名面のことが多い）もあり有用な情報が記入されていることが多いのだが、こっちも掲示していなかった。なので、今回、以下のようにしようと思った。
- サムネール画像をクリックすれば、大きな表面画像、裏面画像がそれぞれ表示されるようにする。
- サムネールは普段は表面だが、マウスポインタを上に乗せると裏面が出るといった演出をする。
なお、葉書の場合は宛名面が表、通信文を入れる面が裏なのだが、QSLカードの場合は裏がメインとも言えるので、裏を表、表を裏とわかりにくくさせてもらうことにした。
上で書いたやりたいことは、別にCGIのお世話にならなくても、HTMLやJavaScriptの範囲でできることだ。1については、単純にサムネールにaタグ（アンカー）を設定して別のHTMLを開くとかすればいいし、2についてはimgタグにJavaScriptを埋め込めばいい。ちょっとHTMLやJavaScriptを学んでいれば、特に悩むことはないはずだ。
だが、1をHTMLだけで実現するためには、リンクがクリックされた際に開くHTMLページを個別に用意しておかなければならない。たとえば、Aというサムネール画像がクリックされた際に開くページ、Bというサムネール画像がクリックされた際に開くページ、という具合だ。サムネール画像が増えてくると、その分HTMLページも増えてくる。単純に増えるだけならまだいいが、ページのデザインなどを変えよう、などと思ったときは最悪だ。すべてのHTMLページを編集しなければならない。こんなことはしたくない、と誰もが思うはずである。
<a href="a.html">画像A</a>
<a href="b.html">画像B</a>
………
加えて2を実現するためには、imgタグにonmouseover, onmouseoutイベントに対応するJavaScriptコードを書いていく必要がある。たとえば、こんな感じだ。
<img src="a_omote.jpg" onmouseover="this.src='a_ura.jpg'" onmouseout="this.src='a_omote.jpg'">
こんなコードを、それぞれのサムネールに書いていくことは、できれば避けたい。このようなアクションをやめたい、別の表現方法に変えたい、といったときにすべてを書き直す必要がある。こんなことはしたくない、と誰もが思うはずである。
こういったときには、プログラムで処理してしまうのが一番だ。たとえばサムネール画像のリストだけ用意しておき、それをプログラムで処理して一覧として表示するHTMLページとして書き出してしまうようにするのだ。つまり、必要なHTMLのタグやJavaScriptのコードを全て自動で書き出し、見せ方や動作を変えたい場合には、プログラムだけを変更すればよいようにすれば、修正が最小限で済むのだ。これは、プログラムを使う場合に一般的に言えることなのだが、これをHTMLページに応用してしまおうというわけである。
これがCGI（Common Gateway Interface）と呼ばれるもので、技術的には新しいものではない。Webサイトでは伝統的に使われてきたテクノロジだが、ホームページをやる人が組むプログラム、といったらCGIであることが多い。もちろん、JavaScriptも使われることが多いが、あまり長いプログラムを書くには向かないような気がするし、クライアントサイドで動作することによる制約もある。何より、私がJavaScriptを使うことがあまり好きでないので、必然的にサーバサイドで動作するCGIということになるのである。
さて、概要を示したところで、続きは次回としよう。