コンピュータ入門

CGI（シージーアイ）はCommon Gateway Interface(コモン　ゲートウェイ　インターフェース）の略です。

通常のWebページの場合は、Webサーバーはあらかじめ用意されたページを要求に応じて返すだけです。

	nantoka.html というページを見せてください→
		↓　nantoka.html　を探し出します
	←　nantoka.html　というページを送ります。

それに対して、CGIを使うと新しいWebページを作り出すことが出来ます

	何かデータを送ります→
		↓　受け取ったデータに応じた Webページを作り出します
	←　作られたWebページを送ります。

CGIを使ったページの例

CGI(Perl)の実際

上の例はPerl（パール）というプログラミング言語で作られています。
（Perlの作者Larry Wall氏によると、Practical Extraction and Report Language＝実用的な情報抽出とレポート作成言語　の略だそうです）

例１は、フォームという入力欄を作るタグを使ったHTMLのファイル

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
</head>
<body>
食べ物では何が好きですか？
<br><br>
<form method=POST action="/cgi-bin/food.cgi">
<input type="text" name="food">
<br><br>
<input type="submit" value="入力を終えたらここをクリック">
</form>
</body>
</html>

と、Perlのプログラム（スクリプト）

#!c:\Perl/bin/perl
require("cgi-lib.pl");
&ReadParse(*input);
$suki=$input{'food'};
print "Content-type: text/html\n\n";
print "<html><head>\n";
print "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=shift_jis\">\n";
print "</head><body>\n";
print "$sukiっておいしいですよね！\n";
print"</body></html>";

を使って、上記のように書いてあります。

例２はデータ入力（フォーム）を使わない例なので

#!c:\Perl/bin/perl
@youbi=("日","月","火","水","木","金","土");
($s,$mm,$h,$d,$m,$y,$w,$summer)=localtime(time);
$year=$y+1900;
$month=$m+1;
print "Content-type: text/html\n\n";
print "<html><head>\n";
print "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=shift_jis\">\n";
print "</head><body>\n";
print "今は$year年$month月$d日（@youbi[$w]）$h時$mm分$s秒です\n";
print"</body></html>";

だけです。
Perlのプログラムファイル（Perlスクリプト）は普通のテキストファイルなので、エディタで作ることが出来ます。
（ただし、拡張子は.txtではなく、.cgiです。）

CGIで使えるプログラミング言語はPerl以外にも、Ruby（ルビー）、python（パイソン）などがあります。

CGIという仕組みの詳細と学習内容

CGIという仕組みは、三つのパートに分けられます。
下の表は各パートが何をやるのかを示したものです。
今の段階で全てを理解する必要はありませんが、クライアント、サーバ、Perlスクリプトという用語は覚えて置いてください。

一般使用者(クライアント）	サーバ（Apache）	Perlスクリプト
CGIを使ったページを見せてください→
	←フォームを使ったHTMLファイルを送る
データ入力→
	入力されたデータをPerlスクリプトに送る→
		入力されたデータを取り出し、変数に代入
		↓
		いろいろな処理後、HTMLファイル作成
		↓
		←HTMLファイルをサーバに送る
	←HTMLファイルをクライアントに送る
結果表示

JAVAスクリプト

それに対して、JAVAスクリプトやFLASHという技術は、プログラムをクライアントに送り込みます。
（JAVAにはサーバ側で動く、サーバーサイドJAVAというものもあります）

	JAVAスクリプトを含むページを見せてください→
		↓　該当するページをを探し出します
	←　該当するページをJAVAスクリプトのプログラムごと送ります。
プログラム転送後に楽しみます		プログラムを送った後は、サーバは特に仕事をしません

JAVAを使ったページの例

HTML5とCANVASタグ

HTMLの最新規格からCANVASというタグができました。
これまで、HTMLではあらかじめ作られたGIF、JPEG、PNGなどの画像を選んで表示するだけでしたが、JavaScriptと組み合わせて、CANVASタグで指定された範囲にプログラムで作画できるようになりました。
さらにthree.jsというライブラリと組み合わせて3D画像なども比較的簡単に作れるようになりました。

IEではうまく見えません。その場合はEdge、FirefoxやGoogle Chromeを使ってみてください。

例５（HTML5を使った技：色がなめらかにかわります）

例６（HTML5とthree.jsを使った高度な技：立方体が回ります。マウスでドラッグすると視点が変わります）
IEやGoogle Chromeではうまく見えません。その場合はEdge、Firefoxを使ってみてください。

Ajax

サーバー側、クライアント側（ユーザーのPC側）双方で通信を行いながら処理をする技術が最近注目されています。
その一つがAjax（アジャックス、Asyncronous JavaScript + XML)です。
まず、ユーザー側にJavaScriptで書かれたプログラムが送り込まれ、それがユーザーにあまり意識されない形でサーバーと通信を行い、サーバーから送り込まれるXMLデータを処理していくというものです。

有名なものとして、Googleの地図などがあります。

	Ajaxを使ったページを見せてください→
		↓　該当するページをを探し出します
	←　該当するページをJAVAのプログラム（Java　Script)ごと送ります。
プログラム転送後に楽しみます	←目立たないように通信しています→	サーバも仕事をします。

インタラクティブなWebページ