情報システム技術論’00 — ＃ 1
久野靖∗

2000.5.25

はじめに

WWW の歴史2

こんにちは、久野です。今週から「情報システム技術論」 2.1を開始します。この科目は「現在の情報システムにおいてはじまり□ 1990 --- CERN で Tim Berners-Lee がどのような技術が使われているのか」をテーマとして、前半 3 週を講義形式、後半を論文紹介形式で実施する予定で□ 「ネットワーク上でドキュメントを共有する仕組み」

す。前半 3 回ぶんの内容は次のように予定しています。

□ ネット上のハイパーテキスト → 現在の WWW と同じ (当然だが)• WWW とウェブアプリケーション□ ブラウザ → NextStep 上 (テキストのみ)• オブジェクト指向とコンポーネント技術□ サーバ → CERN HTTPD• 並列処理と分散システム技術
この科目は「特定関連科目」として修士の人も取っていた

2.2

だけることになっていますが、あくまで博士課程の科目な躍進

ので初歩的はことはやらないつもりです。また、できるだ □ 1993 --- NCSA(Univ. Illinois) で学生たちがけ各回とも、お話だけでなく何か手を動かして実習しても□ WWW を知って「面白い」と思った
らえるようにしたいと考えています。
また、後半 2 回で紹介する論文も早めに決めてもらって □ グラフィクスを入れたら絶対ウケる → Mosaic (最初のグラフィカルブラウザ)用意するようにしたいです。論文は各自の興味で選択していただいて結構ですが、□ Internet な人 (当時は Unix ユーザばかり) の間で爆発的に普及• 上記のいずれかの内容に関係がある□ Mosaic も当初は Unix 版 → のち Mac、Windows• 英文の論文ということでお願いします。詳しくは後で相談しましょう。

1

2.3

日本では…

□ 最初は日本語なんか表示できなかった

今回のテーマ→ WWW と Web ap-□ NTT 高田ほか…Mosaic を「国際化」Mosaic-L10N → 日plication

本語表示□ WWW --- 現在の情報システムにおいて避けられない存在□ 一見「カンタン」だが非常に多様な技術の集合体• I18N --- Internationalization --- 複 数 言 語
を同時に□ 単なる「技術」だけでなくその「背景」「思想」が重要• L10N --- Localization --- 英語+当地の言語□ 役に立つ、楽しい

2.4

Mosaic のその後

□ Mosaic は爆発的に普及→イリノイ大はこれを管理しようとした→作者の学生たちは反発∗ 筑波大学大学院経営システム科学専攻1□ SGI (Sillicon Graphics) の 会 長 Jim Cleark →「これからはコレだ」→学生たちを誘って NetscapeCommunications 社を創立
□ 打倒 Mosaic → Mozilla(Netscape Navigator) の開発

3

HTML — WWW の基盤技術

3.1

マークアップと WYSIWYG□ 計算機の用途の 1 つ→整形された文書の作成→ たちまち No.1 ブラウザに→ Netscape 社はサクセ□ 「古くからある」やり方→マークアップ

スストーリの代表に• 文書に「印」「コマンド」(マークアップ) を埋め込む□ さまざまな「新機能」を搭載→ HTML も独自拡張→問題• runoff → roff → troff、nroff、groffを残した□ 「もう 1 つの」やり方→ WYSIWYG

2.5

インターネットブーム• 整形ずみ画面 (に近いもの) を表示しつつ編集□ Mozilla は Unix、Mac、Windows 版をほぼ同時にリリー• Alto のエディタ→ MacWrite、各種 DTP

ス → PC ユーザが「手軽に」WWW を使えるようになった□ それぞれの得失は…

□ Mozilla はほぼ最初から日本語対応 (しかも文字コード
自動判別) →日本での普及も問題なし

3.2□ WWW の「Point and click」→難しいことを知らなくてもネットから情報が取れる→インターネットの爆発的な

SGML□ マークアップのついたドキュメントを処理→計算機で多普及の原動力く扱われるように→そのたびに個別に処理プログラムを作るのでは大変

2.6

ブラウザ戦争□ 「マークアップ言語」の「構文」は標準化、どのような「命令」があるかは用途ごとに指定→ SGML(Standard□ Microsoft は 当 初 、イ ン タ ー ネット な ん て 駄 目 でGeneralized Markup Language)

MSN(Microsoft Network) がよい、という戦略□ SGML → ISO 規格/JIS 規格になっている→特定の言語と□ WWW の爆発的な普及を目にして急拠戦略を転換いうより「さまざまなマークアップ言語を作り出すため□ Netscape 社を追い落すには→ Spygrass 社が Mosaicの枠組み」

を 元 に 開 発 し て い た ブ ラ ウ ザ を 買 収 し て Internet□ DTD(Document Type Definition) → SGML の枠組で特Explorer と名付け、Windows に無償で添付□ さらに「Netscape の添付をやめないと不利になるぞ」と圧力を掛ける

定の言語を定義した記述。ないしその書き方。例:

HTML

DTD

□ Netscape 社はブラウザの無償化、オープンソフト化などで対抗したがジリ貧となり、AOL に買収される

3.3

SGML の書き方• まもなく出る Netscape 6 はそれなりに期待されて □ 基本的に「<…>」(タグ) でマークアップを行う
いるが…
□ 「<a>〜</a>」のように対になったタグで範囲 (要素/element) を表す

2.7

そして現在は…

• 範囲は「完全な入れ子」つまり互い違いは駄目□ ブラウザはもはや「メシの種」ではなく、WWW は「当り□ 「&名前;」→文字エントリ…キーボードで直接入れられ前のもの」に→「その上で何をやるか」が重要にない文字をドキュメントに入れるための記法□ ポータルサイト囲い込み競争• さらに、「<」→&lt;、「>」→&gt;「&」→&amp;□ 赤字が出てもとにかく WWW ビジネス参入競争□ これからは…技術的には…

• ビジネスで何が起こるかはまったく分からない• 技術的には…まだ技術の話をしてないがな!
2

3.4

HTML の歴史□ アクセシビリティに配慮した設計□ その他機能増強→フレームセット、オブジェクト埋め込□ WWW では「ブラウザが環境に合わせて整形」だから当然み、等

マークアップ□ Tim が作ったときに「マークアップだから SGML ふうに」
□ しかし最初 (0.9、1.0) は SGML ふうなだけで SGML に準拠ではなかった□ HTML 2.0 → IETF による標準化、SGML に準拠した版
張」が…

3.5

HTML 入門

4.1

簡単な HTML ドキュメント<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0//EN"><html lang="ja"><head><title>A Sample</title></head><body><h1>This is a sample</h1><p>こんにちは…</p></body></html>□ せっかく標準ができたのに「ブラウザ戦争」で新たな「拡• 機能的に重要なものも。例:
アント側イメージマップ

4

表、フレーム、クライ

W3C(WWW Consortium)□ CERN は WWW の発現の地だったが、もともと物理の研究□ DOCTYPE 宣言 --- SGML の記述で、この文書が HTML所→ WWW を背負っていくのは無理

4.0 であることを宣言している (省略すると HTML 2.0□ 任意団体として WWW コンソーシアムを設立し、標準の取と仮定されるが省略しない方がよい)

りまとめや研究を行って行くことに□ <html>…</html> --- HTML 記述の範囲全体を囲む• W3C をホストしているのは MIT(米国)、INRIA(フ□ lang="ja" --- 言語が日本語であることを示す属性 (タラ ン ス)、慶 応 大 学 (日 本)。興 味 が あ れ ば
グ内の指定)
http://www.w3.org/ を参照のこと。
□ <head>…</head> --- ヘッダ要素 (文書全体に関する記述) の範囲

3.6

HTML 3.2□ <title>…</title> --- 表題□ HTML 2.0 の後の改良を取り込む動き→ W3C は HTML 3.0 □ <body>…</body> --- 本体を提案したが、各社の意見が統一されずうまく行かな□ <h1>…</h1> --- 見出し
かった□ <p>…</p> --- 段落□ 当面「最低限の共通部分」という形で仕切り直しまとめたものが HTML 3.2 → 当面の妥協という側面が大きい

4.2• 表機能、さまざまな飾り機能、アプレット、スクリ
プト、クライアント側イメージマップなど。

文書本体の書き方□ とにかくすべてのものは要素に入れる□ 段落等は適宜詰め合わせされる (空白は無視)

3.7

HTML 4.0□ 見出し --- h1、h2、…、h6 まで (レベルは HTML 4.0
では飛んでもよいが ISO HTML では連続)□ W3C が HTML 3.0 で目指した包括的な HTML の整理→

□ 段落 --- <p>…</p>HTML 4.0 として成立□ 箇 条 書 き --- <ul>…</ul>、<ol>…</ol>、<dl>…

□ 論理構造と表現指定の分割</dl> --- 番号なし箇条書、番号つき箇条書、キー
ワード型箇条書□ 表現指定はスタイルシートに移す□ 3 種類の DTD --- Strict、Transitional、Frameset• ul と ol の 1 項目は<li>…<li>□ 正式な 4.0 は Strict DTD →表現に関する機能は「非推• dl の 1 項目は<dt>…<dt><dd>…<dd>

奨」に3

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0//EN"><html lang="ja"><head><title>A Sample</title></head><body><h1>Lists</h1><ul><li>これはペンです。</li><li>これは本です。</li><li>ごきげんいかがですか?</li></ul></body></html>5

スタイルシート機能

5.1

スタイルシートとは?

□ 一般的に「論理構造に対して表現を指定する」(例:大

見出しは 24 ポのゴシックで中央揃え、等々) 機能• Microsoft Word にもあるが使ってます?

(すごく使いにくい…)□ 論理構造と物理表現を分離→それぞれの論理構造に対して物理表現を指定する機能がスタイルシート• いちいち「ここで大きく」「ここは何色」と細かく言わないで済む4.3

表□ <table border="2">…</table> --- 表 (枠つき)

5.2□ <tr>…</tr> --- 1 つの列

CSS(直列スタイルシート)□ スタイルを指定するのは誰?

□ <th>…</th>、<td>…</td> --- 1 つのセル (見出し、• 文書の作成者→作者だから当然通常)• ブラウザ→表示するんだから当然□ colspan="数"、rowspan="数" --- セルを「ぶち抜き」• 読み手→好みに応じてスタイルを指定したいから当然にする□ スタイル指定は複数あるのが当然→それらを「混ぜる」<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0//EN"><html lang="ja"><head><title>A Sample</title></head><body><h1>Table</h1><table border="2"><tr><th></th><th>筑波</th><th>大塚</th></tr><tr><th>娯楽</th><td>少</td><td>多</td></tr><tr><th>緑</th><td colspan="2">多</td></tr></table></body></html>→実際には「順にならべて優先度の高いものから適用」→「直列順」→直列スタイルシート□ W3C が推奨規格としてまとめている• 他のライバルもあったが敗れている (なくなったわ
けではないが…)

5.3

HTML から CSS を指定する方法□ 要素タグの中で「style="スタイル指定本体…"」という属性を使う• それぞれの箇所に指定しなければならない□ ヘッダ (<head>…</head>の内側) に次の形で入れる

4.4

実習 — HTML を書いてみる<style type="text/css"><!-スタイル指定…
--></style>□ emacs を立ち上げファイル名「なんとか.html」を指定□ 例題の内容を打ち込む• <!-- … --> は HTML(SGML) のコメント←念のため□ Netscape Navigator でファイルを開いてみる• そのファイルについてスタイルをまとめて指定できる□ 内容を追加変更したら reload□ スタイル指定を別のファイルに書き、そのありかをヘッ
ダ内で次の形で指定する□ 「htmllint ファイル名」でチェックを受けてみる<link rel="stylesheet" href="ファイルの URI">

4

• 複数のファイルに対してスタイル指定を 1 つにまと

div.fr { border-style: solid;
border-width: 4px;
border-color: blue;
width: 100%;
text-align: center }span.ll { color: red }--></style></head><body><div class="fr"><h1>This is a sample</h1><p>このように<span class="ll">一部</span>だけ協調も…</p></div></body></html>

められる

5.4

CSS によるスタイル指定□ この要素にはこのような表現→「この要素」:セレクタ
で指定、「この表現」:スタイル記述本体で指定
h1 { color: blue; font-size: xx-large }□ すべての要素に均等でなくでなく「こういうもの」「これ」と言いたい場合はクラス指定と ID 指定がある。
h1.red { color: red } ← <h1 class="red">...</h1>
h1#001 { color: red } ← <h1 id="001">...</h1>□ どのようなスタイル記述があるか…別資料参照

5.7

実習 — CSS による指定をつけてみる□ これまでに書いた HTML ファイルに CSS 指定を追加して

5.5

簡単な例

みよう
□ とくに「position:<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0//EN"><html lang="ja"><head><title>A Sample</title><style type="text/css"><!-h1 { color: blue;
border-style: double;
border-width: 8px;
border-color: green;text-align: center }p { text-decoration: underline;
text-indent: 30%; }--></style></head><body><h1>This is a sample</h1><p>こんにちは…</p></body></html>5.6

absolute」は面白いのでやってみよう (?)

6

HTTP と Web サーバ

6.1

WWW は何からできているか?

□ HTML+CSS+なんとか→コンテンツの記述言語□ ブラウザ→見るためのツール□ サーバ→コンテンツをネットワーク経由で提供する□ HTTP(HyperText Transfer Protocol) →ブラウザとサーバがやりとりするプロトコル□ URI(Uniform Resource Identifier) → WWW コンテンツの「番地」• 形式:

特定の意味を持たない HTML 要素「スキーム:アドレス」• HTTP URI: 「http://サーバ/所在」• 「サーバ」は IP アドレスでもホスト名でもドメイン□ スタイルを指定するときは論理的な要素と関係ない範囲

アドレスでもよいを指定したいこともある→単なる「範囲」が欲しい• 「所在」はディレクトリ+ファイル (ディレクトリだ• <div>…</div> --- division (複数の段落から成けでもよい)

る範囲)• <span>…</span> --- 段落内部の範囲

6.2<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0//EN"><html lang="ja"><head><title>A Sample</title><style type="text/css"><!--

具体的なしくみ□ ブラウザで URI を打ち込む (または HTML 中のリンクを
選択)• リンク→「<a href="uri">テキスト</a>」5□ さまざまな Web サーバが作られて来た• いずれにせよ URI に指定されているサーバに接続• そのサーバにディレクトリ+ファイルを渡して内容を返送してもらう• フ リ ー の も の:
• 商 売 も の:

6.3

CERN http → NCSA httpd →Apache (現在主流)

HTTP

Netscape Enterprise Server、MS

IIS / Personal Web Server• 最近のネット機器:□ わりと単純なプロトコル。0.9 → 1.0 → 1.1 と変化

Web サーバが内蔵されていてその画面で設定ができる□ サーバに接続→コマンドを送る (+付加情報を表すヘッダ --- 要求ヘッダ --- を送る) →サーバからヘッダ群

6.5--- 応答ヘッダ --- が返される→ (あれば) データが送られてくる→接続継続なら次のコマンドへ進む□ オープンソースプロジェクトの代表格、高いシェア• 前はいちいち接続を切断していた→保持したままに□ もともとは NCSA 互換で改良されたサーバを、というプ

した方がオーバヘッドが小さいので改良された% telnet smm 80
Trying 192.168.128.1...
Connected to smm.
Escape character is ’^]’.
GET /index.html HTTP/1.1
Host: smm
Connection: close

Apacheロジェクトだった□ さまざまな機能を搭載している← telnet でサーバに接続• それらの機能を「モジュール」という単位で取捨選択可能←要求 (コマンド行)←ヘッダ開始□ もとは Unix 用だったが現在は Windows 他の多くの OSでも稼働する←ヘッダ終り (要求終り)
HTTP/1.1 200 OK←応答 (状態行)
Date: Wed, 05 Apr 2000 14:59:40 GMT ←ヘッダ開始
Server: Apache/1.3.6 (Unix)
Last-Modified: Sat, 25 Mar 2000 06:32:48 GMT
ETag: "945c4-6ae-38dc5d90"
Accept-Ranges: bytes
Content-Length: 1710
Connection: close
Content-Type: text/html←ヘッダ終り<!DOCTYPE ...
←データ開始(途中略)</html>←データ終りConnection closed by foreign host.
%

6.6

コンテンツの置き場所□ URI の「ディレクトリ+パス」→実際には「どこかのディレクトリ以下」に対応させるのが普通→「/」で表されるディレクトリを「ドキュメントルート」という□ 全部ドキュメントルートの下に入れなくても「つぎはぎ」してもよい。たとえば/X というディレクトリは実はこ
ちら、ということもできる (ソフトで対応をつけてるか
らどうにでもなる)。
□ とくに「~ユーザ名」という書き方で各ユーザに自分のホームディレクトリ以下の特定ディレクトリ (多くのサ□ コマンドには GET、POST、HEAD などがある

イトでは public html、我々のところでは WWW) 以下に• GET --- 内容を取り寄せる

コンテンツを自由に置かせることができる。

• HEAD --- GET と同じだがヘッダだけ返す (更新日時を調べる等に使う)

6.7• POST --- フォームの提出

コンテンツ種別と MIME タイプ□ 普通の環境だとファイルの種別は名前 (拡張子) で分かる

□ 演習 --- telnet で HTTP を喋って smm から色々取り寄□ WWW では URI の末尾に拡張子があるとは限らない→そのせてみよう

方法は使えない

6.4□ Web サーバは HTTP 応答ヘッダの一種 Content-type ヘッ

Web サーバ

ダでデータの種別を返送してくる→ブラウザはそれに応□ 要するに、HTTP の要求に従ってコンテンツを返送すれじてコンテンツを扱う

ばよい□ 種別の表記方法→ MIME タイプ

6□ MIME → multipurpose internet mail extension →電子メールでテキストに限らずさまざまな情報を送れるようにする規格→さまざまなものを取り扱う規格にも当然なっている→種別を表す方法も含まれている□ MIME

7

CGI と動的コンテンツ

7.1

CGI とは□ CGI(Common Gateway Interface) とは→ Web サーバ

タ イ プ の 形 式 →「 種 別/副 種 別 」例:

がクライアント (ブラウザ) の要求に応じてサーバ上に

text/plain、text/html、image/gif、image/jpeg、あるプログラムを呼び出して実行させ、その出力をクラ

application/postscript、等

イアントに返送するような枠組み□ 実際にはサーバは返送するものが単なるファイルのとき □ なぜ必要か…「計算機内部での処理に応じて変化するコは「.html」なら text/html 等「常識的な」やり方で種ンテンツ」(動的コンテンツ) のためにはこれが必要別を判断している• 現在ではアプレットとか色々あるけど最初はこれしかなかった

ディレクトリインデクス

6.8□ URI が「ディレクトリ部だけで終る」場合は?

□ CGI プログラム (以下単に「CGI」) の必須の条件 --つまりHTTP 応答ヘッダの一部 (通常は Content-type:ヘッダ)
を返すこと

最後が「/」□ もともと、そのディレクトリにあるファイルの一覧を返• ヘッダの終りは空行で表す (メール等と同じ)すというような意味があった□ しかし、それをカスタマイズしたいという要求があった

7.2

ので、そこに index.html というファイルがあればそれが返されるようにした

ごく簡単な CGI#!/bin/shecho ’Content-type: text/plain’echo ’’
date□ 今では index.html は「ファイルの一覧」ではなく「そのディレクトリを代表するページ (ホームページ)」を表すことになっている□ これを date.cgi という名前で用意して「chmod a+rx

date.cgi」で実行可能に→サーバからアクセスしてみる• ホームページって分かります?

□ text/plain じゃなく text/html という嘘を書いたらど

6.9

うなるか?

実習 — 自分のディレクトリ以下にファイ□ ちゃんと HTML を返すようにしてみよう
ルを置こう□ HTML ファイルからこの CGI へのリンクを貼って動かし□ 「mkdir WWW」
「chmod a+rx WWW」
「chmod a+x .」を実てみよう

行
□ 「cd WWW」でドキュメントディレクトリに行く□ そこにテキストファイルや HTML ファイルを置いてアクセスしてみよう□ ファイルは「chmod a+r *」などで「だれでも読める」
ように設定しないとうまく行かない#!/bin/sh
PATH=$PATH:/usr/local/X11R6.3/bin; export PATH
echo ’Content-type: image/gif’echo ’’
ppmpat -anticamo 200 200 | ppmtogif□ こっちだとどうか?

man ppmpat でマニュアルを見て
ppmpat のオプションを変更してみたらどうなるか? 再□ うまく行ったらサブディレクトリを作ってそっちもアク

読み込みするとどうなるか?

セスしてみる□ た と え ば 上 記 が image.cgi と い う 名 前 だ と し□ また index.html なども作ってみるて 、ス タ イ ル 指 定「bodybackground-image:url(image.cgi) 」とするとどうなるか?

7

8

フォームと CGI

8.1

フォームとは<input type="reset" value="リセット"></p></form></body></html>□ HTML の機能で、「記入欄」等の集まりを生成する機能□ 記入した内容は CGI に送られ、CGI で好きなように処理

8.4□ form 要素→開始タグの action 属性で CGI を指定する

Perl — CGI「にも」適したスクリプト言語□ Perl --- Larry Wall が開発したスクリプト言語<form method="post" action="…">…</form>• 「スクリプト言語」とは「ちょっとした処理をさっと書く」ための言語→ Perl の場合、できが良いので結8.2

フォームの入力部品

構大きなものまでこれで書かれている• 言語の構文や概念はちょっと変わっているので慣れが□ <input type="text" name="名 前" size="文 字 数">

必要--- 入力欄• version 5 でオブジェクト指向機能が加わった□ <input type="checkbox" name="名 前" [checked]>--- チェックボックス□ <inptu type="radio" name="名□ Perl は CGI で多く必要な文字列処理を得意とする
前" value="値" □ CGI のためのモジュールが提供されている[checked]> --- ラジオボタン□ <input type="submit" value="ラ ベ ル"> --- 提 出

8.5

ボタン

Perl の CGI モジュール□ <input type="reset" value="ラベル"> --- リセッ □ フォームデータの受け取り等各種機能を提供□ 使い方は次の通り簡単

トボタン• 冒頭部分での初期設定:□ <select name="名 前">…</select> --- 選 択 メ
ニュー (中に option 要素)

use CGI; $in = new CGI;

• フォームデータの参照 (「名前」はフォーム側で指定したもの):□ <option [value="値"] [selected]>…</option>--- 選択メニューの項目$var = $in->param(’ 名前’);□ <textarea name="名 前" rows="行 数" cols="文 字数">…</textarea> --- テキスト入力領域

8.6
8.3

簡単な Perl による CGI□ 先のフォームを処理簡単なフォームの例□ たとえば「2 つの数値を入力して計算する」#!/usr/local/bin/perl
use CGI; $in = new CGI;
print "Content-type: text/html\n\n";$n1 = $in->param(’n1’);$n2 = $in->param(’n2’);$op = $in->param(’op’);if($op eq ’+’) { $result = $n1 + $n2; }else{ $result = $n1 - $n2; }print ’<!DOCTYPE HTML PUBLIC’, "\n";print ’ "-//W3C//DTD HTML 4.0//EN">’, "\n";print "<head><title>sample</title></head>\n";print "<body><h1>sample</h1>\n";print "<p>$n1 $op $n2 = $result</p>\n";print "</body></html>\n";<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0//EN"><html lang="ja"><head><title>A Sample</title></head><body><h1>Sample Form</h1><form method="post" action="sample8.cgi"><p><input type="text" name="n1" size="5"><select name="op"><option>+</option><option>-</option></select><input type="text" name="n2" size="5"><br><input type="submit" value="計算">

8

8.7

ファイルへの書き込み

print ’<h2 class="write">書き込み</h2>’, "\n";print "<form method=’post’ action=’sample9.cgi’>\n";print ’<p><select name="face">’, "\n";print "<option selected>^_^</option>\n";print "<option>-_-</option>\n";print "<option>;_;</option>\n";print "<option>?_?</option></select>\n";print "名前:\n";print "<input type=’text’ name=’name’ size=’12’>\n";print "<input type=’submit’ value=’ 書き込み’><br>\n";print ’<textarea name="text" rows="10" cols="30">’, "\n";print ’ めっせえじ</textarea></p>’, "\n";print ’</form></body></html>’, "\n";□ 単純に計算して返すだけなら簡単□ 実際には入力データを保存したい□ ファイルの所有者は誰に?

いくつかの選択肢• Web サーバプロセス (nobody) が所有• 自分が所有して「誰にでも書ける」に□ 1 つの CGI の複数のインスタンスが同時実行される→
排他制御が必要→ファイルにロックを掛ける機構を利用する

8.8□ 簡単な BBS プログラム

状態の保存□ CGI では「ある実行」と「次の実行」は全く別のもの→#!/usr/local/bin/perl
require ’jcode.pl’;
何かを「記憶」しておきたければかなり工夫が必要
use CGI;$in = new CGI;
• たとえば「顧客番号」を割り当てて買物をするたびに
umask 022;
何を買ったかという情報を蓄積し、最後にまとめてprint "Content-type: text/html\n\n";print ’<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN>’;
支払処理をしたい→それらの情報はどうする? CGI
print "\n", ’<html lang="ja">, "\n";は個別に「これを買う」というごとにばらばらに起
print "<head><title>BBS</title></head><body>’, "\n";動される
print ’<h1>かんたん BBS</h1><hr>’, "\n";if($in->request_method() eq ’POST’) {• 情報をファイルに書けばよい? →複数人が同時に買
if(!open(DATA, ’>>bbs.data’)) {物をしても全く不思議ではない→「誰が」という情
print "<p>作業ファイルが書けない。</p>\n";print "</body></html>\n"; exit(); }報は別に用意しないと混乱する
while(!flock(DATA, 2+4)) { # LOCK_EX+LOCK_NB
if(++$count > 5) {□ 隠し入力欄を利用する方法
print "<p>ロックが獲得できない。\n";print "</p></body></html>\n"; exit(); }• <input type="hidden" name="名 前" value="
sleep(3); }値"> --- フォームの画面には何も現れないが値はif(open(SEQ, ’bbs.seq’)) {データとして送信されてくる→データを記憶してお$seqno = <SEQ>; close(SEQ);}
くことに相当++$seqno;• 画面がフォーム提出の連続でできていないといけな
if(open(SEQ, ’>bbs.seq’)) {print SEQ "$seqno"; close(SEQ);
い→不自由}seek(DATA, 0, 2); select(DATA);□ クッキー機能 --- Netscape 独自拡張だったが現在で$name = $in->param(’name’);は広く普及
jcode::convert(*name, ’euc’);$face = $in->param(’face’);• CGI からブラウザに「クッキー」と呼ばれる情報を送$text = $in->param(’text’);
jcode::convert(*text, ’euc’);
出→その CGI(ないし近辺) が呼ばれる時、同じクッ$text =~ s/&/&amp;/g;
キー情報が提出されてくる→それによってデータを$text =~ s/</&lt;/g;
記憶$text =~ s/>/&gt;/g;$time = gmtime();print "<h2 class=\"name\">No.$seqno\n";print "$face [ $name ] $time</h2>\n";8.9 クッキーを使う例
print "<pre class=\"text\">\n$text</pre><hr>\n";flock(DATA, 8); close(DATA); select(STDOUT);□ クッキー→「ちょっとした情報」という意味。WWW での}クッキーと言うのは、Netscape 社が独自拡張の 1 つとif(open(DATA, ’bbs.data’)) {while(<DATA>) { print; }して始めたもので、便利なので多くのブラウザで実装さ
}
れている。

9

• サーバはブラウザへの応答中に Set-cookie:応答ヘ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><html lang="ja"><head>
憶させることができる<title>Form Examples</title>• ブラウザはクッキーをそれが「どのドメインのどの </head><body>
パスから来たか」の情報を保存しておく<h1>おかいもの</h1>• ブラウザは URI にアクセスするとき、その URI にマッ <form method="post" action="sample10a.cgi"><p>名前: <input type="text" name="name" size="20">チするクッキーの情報を Cookie:ヘッダに入れてサー<input type="submit" value="登録"></p>
バに送る</form><hr>□ これらの機構を使えば CGI が使う情報を「ブラウザに覚 <form method="post" action="sample10b.cgi">
えておいてもらう」ようにできるので前述の問題が簡単 <p><input type="submit" name="goods" value="鉛筆"></p>になる</form><form method="post" action="sample10b.cgi"><p><input type="submit" name="goods" value="定規"></p>8.10 クッキーの制御</form><form method="post" action="sample10b.cgi">□ クッキーの形:<p><input type="submit" name="goods" value="手帳"></p>Set-cookie: 名 前=値; domain=ド メ イ ン; path=パ</form>ス; expires=日時<hr><form method="post" action="sample10c.cgi">• 「名前=値」がクッキーの本体<p><input type="submit" value="会計"></p>• ドメインはそのクッキーがどの範囲内のサーバで有 </form></body>
効かを示す</html>ッダを含めることで、ブラウザにクッキー情報を記• パスはクッキーがそのサーバ内のどの範囲で有効か#!/usr/local/bin/perlを示す
use CGI;• 日時はそのクッキーがいつまで「生きている」かを $in = new CGI;示す。指定しないとそのブラウザを終了させたとき $name = $in->param(’name’);if(!$name) {になくなる。
print "Content-type: text/plain\n\n";□ クッキーの制御方法:• 「名前」と「パス」が違うクッキーは別のものとして扱われる• expires が過去の日時だとクッキーは削除される• ドメインには「.」が 3 個以上 (.edu 等では 2 個以上) 含まれる必要←クッキーを使って「顧客の嗜好調査」(悪くいえばプライバシーをあばく行為) を行う
会社がある

8.11

クッキーを使った例題□ よくあるパターン:

買物サイト• 最初に顧客登録→クッキーを発行• 商品を選ぶ→クッキーに基づいて商品情報を追加していく• 最後に支払い→クッキーに基づいて支払、発送

print "名前を入れてください\n"; exit;}$cookie = $in->cookie(-name=>"goods",-value=>"$name", -expires=>"+1h");
print "Content-type: text/html\n";print "Set-cookie: $cookie\n\n";print ’<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">’;
print "\n", ’<html lang="ja">’, "\n";print "<head><title>Registerd</title></head><body>\n";print "<h1>登録完了</h1>\n";print "<p>名前「$name」で登録しました。</p>\n";print "<p><a href=’sample10.html’>戻る</a></p>\n";print "</body></html>\n";#!/usr/local/bin/perl
use CGI;$in = new CGI;
$goods = $in->cookie(’goods’);$added = $in->param(’goods’);$cookie = $ENV{’HTTP_COOKIE’};
if(!$goods) {print "Content-type: text/plain\n\n";print "最初に登録してください\n"; exit;}$goods = "$goods:$added";10

$cookie = $in->cookie(-name=>"goods",
9.3 JavaScript による簡単な例題-value=>"$goods", -expires=>"+1h");@list = split(/:/, $goods);□ 例: 最小公倍数の計算$name = shift(@list);$list = join(’ ’, @list);<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
print "Content-type: text/html\n";<html lang="ja">print "Set-cookie: $cookie\n\n";<head>
print ’<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"’;<title>JavaScript Examples</title>
print "\n", ’<html lang="ja">’, "\n";<script type="text/javascript">
print "<head><title>Registerd</title></head><body>\n"; function keisan() {print "<h1>買物かごに追加</h1>\n";fieldx = document.forms[0].elements[0];print "<p>$name さんの選定品: $list</p>\n";fieldy = document.forms[0].elements[1];print "<p><a href=’sample10.html’>戻る</a></p>\n";fieldz = document.forms[0].elements[2];print "<p>(生クッキー: $cookie)</p>\n";x = parseInt(fieldx.value);
print "</body></html>\n";y = parseInt(fieldy.value);
while(x != y) {if(x > y) {x = x - y;
9 JavaScript} else {y = y - x;}
9.1 JavaScript とは
fieldz.value = x;}
□ HTML の中に埋め込むことができるスクリプト言語}• もともとは Netscape 社が開発し LiveScript とい </script></head>う名前だったが Java ブームのとき Sun から名前を <body>
買って JavaScript になった
<h1>最大公約数</h1><form><p>□ できること→ HTML の一部をスクリプトで生成、フォー
X: <input type="text" value="0" size="8"><br>
ムなどの内容をスクリプトで読み書きして処理、ステー
Y: <input type="text" value="0" size="8"><br>
タスバーにメッセージを表示する (定期的に実行も可能)
最大公約数: <input type="text" value="0" size="8"><br><input type="button"など
value="計算!" onclick="keisan()">□ ブラウザ内で実行するので、サーバ内の情報は参照でき </p>
ないが、その代わり「ユーザと短い周期でのやりとり」 </form></body>が可能</html>9.2

JavaScript の特徴

10□ プロトタイプ方式のオブジェクト指向言語□ データは「値」か「配列」かその他の「オブジェクト」□ オブジェクトに対してはメソッドが呼べる

まとめ□ WWW の由来と歴史□ WWW の基本技術 --- HTML、CSS、サーバ、ブラウザ、

HTTP• 「このページにあるすべてのフォームオブジェクト □ 動的コンテンツの配列」「このフォームにあるすべての部品の配列」• CGI --- サーバ内で動作するプログラム→多様な処などが利用可能→これらのメソッドを呼びながら動
理、結果を HTML 等の形で生成して表示→ユーザとや作できる
りとり□ どうやって起動? →ロード時、提出時、…、「ボタン」• JavaScript --- ブラウザ内で動作する→サーバ内部品が押された時の情報には頼ることができないが対話性は高い□ 基本的には、これらの技術を組み合わせて任意の Web ア
プリケーションを構築して行くことができる

11□ もちろん裸からやらなくてもよいようにツールサポート
もいろいろある→久野としては「原理から理解しておいた方が結局早道」だと思うので基本的なところを説明さ
せて頂いた

11

紹介論文の選定□ 図

書 室 で …「ACM Transaction on OfficeInformation Systems」「IEEE Software」そ の 他
こういう話題が載っている雑誌がいろいろあるので、まずは眺めてみて欲しい□ 次回までに読んでみたそうな論文の候補を 2〜3 くらい
選択して来ること。4 回目と 5 回目が論文紹介なので次回に半分くらいの人については決定する必要がある。

12