図? CGIの仕組み
「プロセス」とは、実行中のプログラム。
共通科目情報処理（上級）、インターネットの仕組み、2004年01月19日
電子・情報工学系
新城 靖
<yas@is.tsukuba.ac.jp>
このページは、次の URL にあります。
http://www.coins.tsukuba.ac.jp/~yas/ipe/inet-2003/2004-01-19
あるいは、次のページから手繰っていくこともできます。
http://www.coins.tsukuba.ac.jp/~yas/ipe/
http://www.coins.tsukuba.ac.jp/~yas/
http://www.ipe.tsukuba.ac.jp/~yshinjo/
HTML で記述できる文書の構造:
表示の方法:
H1 { color: blue; }
<HTML> <HEAD> <TITLE>タイトルです。</TITLE> <STYLE TYPE="text/css"><!-- (ここにスタイルシートを書く) --></STYLE> </HEAD>別ファイルに書いて読み込む。 スタイルシートのURLは、
filename.css のようなファイル名が多い。
<HTML> <HEAD> <TITLE>タイトルです。</TITLE> <LINK rel="stylesheet" type="text/css" href="スタイルシートのURL"> </HEAD>
<HTML> <HEAD> <TITLE>タイトルです。</TITLE> <STYLE TYPE="text/css"><!-- @import url(スタイルシートのURL); (ここにスタイルシートを書く) --></STYLE> </HEAD>
複数 @import することもできる。 複数のスタイルは、混ぜられる（カスケード）。 対立する定義は、後から出てきた方が有効になる。
HTML のタグの属性として書く。宣言部分だけ。
<P STYLE="color:#444444">文。文。文。</P>
コメントは、/* と */ で括る。
Ｃ言語やＪａｖａ言語と似ている。
コメントは、デバッグ時など一時的に無効にしたい時にも使える。
セレクタ { 宣言; }
セレクタ, セレクタ, ..., セレクタ { 宣言;宣言;宣言; }
１つひとつの宣言は、次の形式。
プロパティ:式「式」には、数、文字列、%、単位つきの長さ、URL などが書ける。
例
H1 { color:blue; } /* <H1></H1> だけ */
UL LI { color:blue; } /* <UL></UL>の中の <LI> だけ*/
OL > LI { color:blue; } /* <OL></OL>の直接の子供の <LI> だけ*/
H1 + P { color:blue; } /* <H1></H1>に隣接する <P> だけ*/
* { color:blue; } /* 全ての要素 */
.important { color:blue; } /* class="important" と指定したものだけ */
P.important { color:blue; } /* <P class="important"></P> と指定したものだけ */
#n10 { color:blue; } /* id="n10" と指定したものだけ */
P:first-line { color:blue; } /* <P></P> の中の最初の行だけ */
P:first-letter { color:blue; } /* <P></P> の中の最初の１文字だけ */
A:link { color:blue; } /* 未訪問のリンク */
A:visited { color:blue; } /* 訪問済みのリンク */
A:active { color:blue; } /* アクセス中 */
A:hover { color:blue; } /* カーソルを重ねた時 */
┌──────────────────────┐ │ 余白 │ │ ┌──────────────────┐ │ │ │ 境界 │ │ │ │ ┌──────────────┐ │ │ │ │ │ パディング │ │ │ │ │ │ ┌──────────┐ │ │ │ │ │ │ │ 内容 │ │ │ │ │ │ │ └──────────┘ │ │ │ │ │ └──────────────┘ │ │ │ └──────────────────┘ │ └──────────────────────┘ │ エレメントの幅 │ │ ボックスの幅 │
注意点
Gateway とは、WWW で使われている HTTP というプロトコルへの入り口という 意味。 プログラムの実行結果は、普通は、HTML にすることが多いが、普通のテキス トであることもイメージであることもある。
図? CGIの仕組み
CGI の利用例
CGI になるファイル名のパタン
/cgi-bin/name /dir/name.cgi
筑波大学教育用計算機システムでは、主サーバ(www.ipe.tsukuba.ac.jp)では CGI は使えない。CGI を使うためには、 申請して副サーバ (www2.ipe.tsukuba.ac.jp)を使う。
<FORM ACTION="http://www.u-ust.ac.jp/cgi-bin/adduser" method="post">
<P>
姓: <INPUT type="text" name="lastname">
名: <INPUT type="text" name="firstname"><BR>
<INPUT type="radio" name="sex" value="Male"> 男 <BR>
<INPUT type="radio" name="sex" value="Female"> 女 <BR>
<INPUT type="radio" name="sex" value="Others"> その他 <BR>
電子メール: <INPUT type="text" name="email"><BR>
<INPUT type="submit" value="send"> <INPUT type="reset">
</P>
</FORM>
表示例：
<FORM>と
</FORM>
で括られた部分が１つのフォームになる。
<INPUT>の部分が、ブラウザからサーバに送られるデー
タを表わす。
send ボタンが押されると、ブラウザは、
HTTPの
POST メソッドを使って、サーバにデータを送る。
サーバは、それを受け取ると、指定されたプログラムを実行する。 実行されたプログラムは、 環境変数と標準入力 （ともに、プログラムにデータを与える方法の種類） から データを受け取ることができる。
環境変数
REQUEST_METHOD データを送るのに使われたメソッド。POST か GET。 GET は、普通のページを得るものと同じ方法で、長いデータは送れない。 SCRIPT_NAME プログラムの名前。 QUERY_STRING URLの指定で「?」以下に指定された文字列メソッドとして
POST が使われた時、標準入力からは、
<FORM></FORM>で指定されたパラメタを受け取ることが
でる。
このデータは、「&」で区切られた
「フィールド名=値」の並びになっている。
例:
lastname=姓&firstname=名&sex=Male&email=who@u-ust.ac.jp
環境変数 CONTENT_LENGTH からは、データの長さが得られる。
メソッドとして、GET が使われた時には、
環境変数 QUERY_STRING に
「&」で区切られた「フィール
ド名=値」の並びが含まれている。
送られてくるパラメタの中に漢字など含まれていた場合、
「%hh(2桁の16進数)」
という形になっている。
これを元にもどすには
cgiparse というプログラムや
perl の命令 hex() が使われる。
SSI が使えるシステムでは、
file.html の変わりに
file.shtml とすると、
SSI の機能が働くようになります。
例１: ファイルの内容の読込み
<!--#include file="filename"-->例２: プログラム
/bin/calの実行結果の埋め込み
<PRE> <!--#exec cmd="/bin/cal"--> </PRE>例３:ファイル
file.shtml の更新時刻の表示
最終に変更されたのは、 <!--#config timefmt="%Y/%m/%d %H:%M:%S"--> <!--#flastmod file="file.shtml"--> です。
`#include'や
`#exec'
で、大事なファイルが盗まれないように、細心の注意を払ながら利用する必要
がる。
筑波大学教育用計算機システムでは、SSI は使えないような設定になっている。
画面に何かを表示する機能があり、WWWブラウザ上で動く。 Javaアプレットを使うと、アニメーションを作ったり、 CGI を使わずにユーザとの対話できる。
CGI では、プログラムは、WWWサーバが走っているコンピュータで動くが、 Javaアプレットは、プログラムはブラウザの上で動く。
<APPLET></APPLET>。
HTML記述：
<APPLET CODE="rctext.class" WIDTH="500" HEIGHT="50"> <PARAM NAME="message" VALUE="hello,world"> 与えたメッセージが動き回るJavaアプレット。 </APPLET>表示例：
CODE属性で、Javaアプレットを保存している
ファイルのURL(ただし、同一ホスト内)、
WIDTH属性で、幅、
HEIGHT属性で、高さを指定する。
<PARAM>タグを使えば、アプレットに
オプションを渡すことがでる。
<APPLET>と
</APPLET>の間には、
Java Applet に対応していないブラウザのためのテキストを書く。
Java言語については、 共通科目では別の講義がある。
注意：自分の ホーム・ページ である必要はない。課題を満たすために、どこからもリンクが張られていない 孤立したページを作ってもよい。
締め切りは、2004年1月27日火曜日とする。