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

2008.4.24

1

World Wide Web

1.1

インターネットの歴史• goher →メニューベースで情報を次々に見ることができる• WAIS →キーワード検索で問い合わせに適合性の高い文書をリストアップ□ インターネットの起源→ 1969 年 (ARPANET)□ これらはいずれも• 最初は非常に限られた世界• 別個のサービスであり、□ インターネットの研究機関への普及→ 1980 年代• 個別の特性を知っていて使い分ける必要があり、• CFNET(1981)、NSFNET(1987) →研究機関が多くネッ• それぞれを活用するためのコマンドも全く別のもの

トに接続

だった

• 日本でも 1988 年 WIDE Internet により TCP/IP 接• →インターネットから情報を取り出すのは熟知した続が開始人にしかできなかった□ インターネットの社会への普及→ 1990 年代• IIJ →日本で最初のプロバイダ→ WIDE 関係者が中心

1.3となり 1992 年末設立

1.2

World Wide Web のはじまり□ 「World Wide Web とは何か」定義できます?
□ CERN(欧州粒子物理研究所) の研究者 Tim Berners-Lee

初期のインターネットの利用方法…

が 1991 年に開発

□ 電子メール→現在でもメインのサービス• 研究者どうしの情報流通をスムーズにするための手段として作った□ ネットニュース→ Web 掲示板の利用が増えたためマイナー化• 主要なアイデア→ハイパーテキスト、 URI によるポインタ

• メール、ニュースは IP 接続以前から利用できていた• WWW サーバ→ CERN httpd□ telnet →他のマシンに接続して利用するのは重要な利• 当初は文字のみのブラウザ、NeXT Station (マイナーなシステム) で稼働用形態だった□ FTP → telnet と対にして自分のアカウント間でファイ□ Mosaic --- 最初のグラフィカルブラウザ

ルを転送するのに利用• イリノイ大 NCSA の学生 Marc Andressen が 1992 年• 匿名 FTP →フリーソフトの配付手段として末に開発□ 情報公開/共有の仕組みとして…

• 1993〜1994 に爆発的に広まる (最初は Unix/X →後に Mac、Windows 版も)• 匿名 FTP ではファイルの置き場所が分からないと役に立たない• 当 然 、最 初 は 英 語 の み → 高 田 敏 弘@NTT が
Mosaic-L10N を開発→日本語も可能に• ネットニュースや「匿名 telnet」の利用• 計算機研究者の間で大ブームに (1994 ころ)• NCSA は NCSA httpd も公開∗ 筑波大学大学院経営システム科学専攻1• Netscape 4.x の次のブラウザはオープンソース開発□ イリノイ大の学生グループはその後も Mosaic の開発をモデルにより開発するとして、1998 年にソースコー

続けていたが…

ドを公開→ Mozilla プロジェクト。Mozilla ブラウ• 大学は Mosaic を自分のところのソフトとして金儲
けしようとした

ザを公開• そうしている間にも経営は苦しくなり AOL により買収• 自由にやりたい学生グループとの対立• AOL は Mozilla プ ロ ジェク ト の 成 果 を も と に□ Sillicon Graphics Inc.

(SGI) の 創 立 者 Jim
Clark は WWW が 商 売 に な る と 考 え 、Netscape

Netscape 6 を公開 (2000 年末)。Netscape 9 までバージョンは進んだが 2008.2 で開発終了。→

Communications 社 を 設 立 し て Marc Andressen
ほか学生グループの主要メンバーを引き抜く (1994)

FireFox 2 まで発展。15%くらいのシェアを持つようになった。

• Netscape ブラウザ→圧倒的な支持を得てブラウザの □ MSIE →圧倒的シェア、標準への準拠はそこそこ、よくシェア No. 1 に分からない独自機能、よくセキュリティ上の問題が発見される• 最初から Unix/X、Windows、Mac で稼働• Netscape 1.1 からは日本語も OK →日本でもイン □ Mozilla 陣営→よりよく標準へ準拠。Mozilla の後継→
ターネットブームにFireFox。FireFox 2 は 16%くらいのシェアを持つ (IE
が嫌いな人、Linux など非 Windows システム利用者の□ それで結局、WWW とは?
支持)• ネットワークにまたがるハイパーテキストシステム• そのほか、Opera、Safari(Apple)、…
• 文書は世界中のサーバによって公開されている (容• あと、i-mode とか組み込みブラウザも増えている…
量ば無尽蔵、オリジナルソースの情報は常に新しい)• 文書が相互に (サーバをまたがって) ハイパーリンク □ ブラウザは「WWW への単なる接続口」「WWW を見る道具」という位置付けに…
されている• URI で記述できるもの (ネット上の資源) は何でもリ
ンク可能

1.4

• しかし Ajax などの技術→ Web アプリの高度化もあり、一定の標準化や機能搭載は必要に→今後も進歩

ブラウザ戦争□ Microsoft 社は当初は MSN(自前のパソコン通信) に顧客を囲いこもうとしてアンチインターネット路線だった

2

WWW のプロトコルと Web サーバ

2.1

HTTP

□ インターネットがもはや主流だと分かると路線転換→自前 □ WWW の基本的なアーキテクチャ→これまでに学んで来た
クライアントサーバ型のブラウザ Microsoft Internet Explorer(MSIE) を普及させて Netscape 支配を止めようとした• クライアント (主にブラウザ、最近は Web アプリも)とサーバのやりとり→ HTTP(HyperText Transfer• MSIE を Windows に標準付属 (Win 95〜)、しかも OS

Protocol)。もともとは Web のためのプロトコルな組み込みにして取り外せないように (Win 98〜)のだが…

• PC を出荷しているメーカに圧力を掛けて Netscape• 現在のネットは組織の出入口にパケットフィルタがブラウザを付属させないようにした (→訴訟の対象設置されていて、任意のプロトコルによる情報流通となっている行為の 1 つ)は制約

• さまざまな「新技術」を取り入れて差別化を計る (ど• しかし HTTP だけは Web のために中継されるのが普通→さまざまな用途の通信が HTTP を経由することでれくらいそれが「有難い」かどうかは…?)□ Netscape 社はブラウザでは食べて行けなくなり、ブラフィルタ越しに行われるようにウザは無償化 (これまで儲かっていたビジネスが突然なくなるとは…)2

• If-Modified-Since、If-Match 等 --- 条 件 つ き□ HTTP のメッセージ形式→ヘッダとボディに分かれていGET 用て、両者の境界は「空白行」(電子メール、ネットニュー
スと同じ)• User-agent --- ブラウザ種別等の送付• Cookie --- クッキーの送付 (規格外)• 上記はクライント→サーバ (リクエスト)、サーバ→
クライアント (レスポンス) とも同一
□ 応答行
• 先頭の要求行でメソッド (コマンド)、操作対象、プロトコルを指定
HTTP/1.1 コード 説明
要求行
フィールド: 値
フィールド: 値...
←空行
データ ←データはない場合もデータ (HTTP 要求ではない方が多い)...

• 2xx --- 成功「200 OK」「201 Created」• 3xx --- リダイレクト「301 Moved Permanently」「303 See Other」• 4xx --- ク ラ イ ア ン ト エ ラ ー「403 Forbidden」「404 Not Found」• 5xx --- サ ー バ エ ラ ー「500 Internal Server• 先頭応答行は状態コードを返す

Error」「503 Service Unavailable」

応答行
フィールド: 値
フィールド: 値...
←空行
データ ←データはない場合もデータ (HTTP リダイレクト等)...

□ 応答ヘッダ• Content-type --- 応答情報の種別 (MIME タイプ)
• Location --- 移った先 (リダイレクト用)• Date --- 日付□ 要求行• Server --- サーバ種別等の送付• Refresh --- 何秒たったらどこへ移動してねメソッド URI HTTP/1.1 (or 1.0)

• Set-Cookie --- クッキーの送付 (規格外)• HTTP のメソッドは GET、HEAD、POST、PUT、DELETE、OPTIONS、TRACE、あと拡張メソッドがあることがある。

2.2• GET --- リソースを取得する (一番多い)

WWW サーバ□ Web サーバとは結局、上記の HTTP をやりとりするサー
バ→「ふつうに」Web ページを返さなくてもいい。簡単な例を見てみる。

• HEAD --- GET と同じだがヘッダ情報だけ受け取り
本体は省略• POST --- 情報を送付し応答を受け取る

import java.net.*;import java.io.*;• これ以外はあまり使わない (少なくともブラウザは使わない)

public class Sample31 {public static void main(String[] args)
throws Exception {ServerSocket ss = new ServerSocket(4192);
String mesg = "Hello.";while(true) {Socket cs = ss.accept();
PrintWriter out = new PrintWriter(cs.getOutputStream(), true);
BufferedReader in = new BufferedReader(
new InputStreamReader(cs.getInputStream()));
String path = "";while(true) {String line = in.readLine();System.out.println(line);if(line.equals("")) break;String[] a = line.split(" +");
if(a[0].equals("GET")) path = a[1];}□ 要求ヘッダ• Accept、Accept-Charset、Accept-Encoding 等--- どの種別のデータ、文字セット、符号化、等を受け取れるかを通知• Authorization --- 認証時に使用• Cache-control --- キャッシュ制御に使用• Connection --- 接続を維持するかどうか• Host --- どのホスト名でアクセスするか• Referer --- どの URI にあったリンクからこのアクセスが発生しているかを通知 (どのページから来たかが分かる)。英語のスペルミス (正しくは referrerのはず) のまま規格になってしまった3

Socket cs = ss.accept();
PrintWriter out = new PrintWriter(cs.getOutputStream(), true);
BufferedReader in = new BufferedReader(
new InputStreamReader(cs.getInputStream()));
String path = "";while(true) {String line = in.readLine();System.out.println(line);if(line.equals("")) break;String[] a = line.split(" +");
if(a[0].equals("GET")) path = a[1];}out.println("HTTP/1.0 200 OK");
out.println("Content-type: text/plain");out.println("");
try {BufferedReader rd = new BufferedReader(
new FileReader(path));String line = rd.readLine();while(line != null) {out.println(line); line = rd.readLine();}rd.close();} catch(Exception ex) {out.println("file " + path + " not found.");}cs.close();if(path.equals("/bye")) break;out.println("HTTP/1.0 200 OK");
out.println("Content-type: text/plain");out.println("Refresh: 5; URL=/");
out.println("");
out.println(mesg);
out.println(path);if(!path.equals("/")) mesg = path;cs.close();if(path.equals("/bye")) break;//}ss.close();}}• サポートするのは GET リクエストだけ• 接続を待ち受け、来たらば各行を読み込み空白で区切る• GET リクエストのときは URI(パス) を記録• 空行が来たらリクエスト読み込みは終わり• OK 行と Content-type: text/plain を出力• 記憶しておいた文字列と受け取ったパスを出力• 受け取ったパスを新たに記憶• 受け取ったのが「/bye」ならおしまい□ 演習}
ss.close();• このサーバをこのまま動かしなさい。ブラウザで「http://ホスト:4192/適当な文字列」を開いて動作}}を観察する。

• さすがに 1 行とか 2 行ではつまらないので、パスで• クライアントからどのようなヘッダが来ているかも観察する。

指定されたファイルを返送するように直す• パスは Unix の絶対パス名として扱う。本物のサーバ• 他人のサーバに接続して/他人に接続してもらって同ではこのようにしては絶対にいけない (なぜか?)様に観察しなさい• 内容としてファイルを読み込み返送するだけ• コメントアウトしたる Refresh ヘッダを出力して「定• ファイルが無かった場合は代わりにメッセージを返す

期的に再読み込み」させてみる• 応 答 を「HTTP/1.0 301 Moved Permanently」と □ やってみると…
「Location: http://www.yahoo.co.jp」だ け に• テキストファイルはちゃんと取得できる
して同様に観察しなさい• HTML ファイ ル も テ キ ス ト ファイ ル と し て 表 示□ このように、HTTP サーバが渡されて来た URI をどのよ(Content-type: text/plain としているから)うに扱うかは完全にサーバに任されている□ と り あ え ず 名 前 が「.html」で 終 わ る ファイ ル だ け□ ファイルを読み込んで返すサーバ
Content-type: text/html を返すように直す
import java.net.*;import java.io.*;import java.net.*;import java.io.*;public class Sample32 {public static void main(String[] args)
throws Exception {ServerSocket ss = new ServerSocket(4192);
String mesg = "Hello.";while(true) {public class Sample33 {public static void main(String[] args)
throws Exception {ServerSocket ss = new ServerSocket(4192);
String mesg = "Hello.";while(true) {4• c.f. Adobe PDF →印刷イメージそのまま。画面でSocket cs = ss.accept();
PrintWriter out = new PrintWriter(
読めるか? 読めるとすれば「十分な大きさの画面を
cs.getOutputStream(), true);持つ人」だけのはず。
BufferedReader in = new BufferedReader(
new InputStreamReader(cs.getInputStream()));• 「見たまま」が無理とすればどうすればいい?
String path = "";while(true) {□ 回答: 「意味マークアップ」→ブラウザがそれぞれのString line = in.readLine();
環境に合わせて整形。
System.out.println(line);if(line.equals("")) break;• マークアップ…ファイル中に「印」をつけることでString[] a = line.split(" +");
if(a[0].equals("GET")) path = a[1];付加情報を表現}• 意味マークアップ…「ここは見出し」「ここは段落」
System.out.println(path);out.println("HTTP/1.0 200 OK");など、文章の「意味」に対応してマークアップする。
if(path.matches(".*\\.html$"))• 「見出し」「段落」などをどう表示するのがよいかは
out.println("Content-type: text/html");
それぞれの環境に応じて決まる→ブラウザにおまか
elseout.println("Content-type: text/plain");
せする。
out.println("");• c.f. 命令マークアップ「ここは 12pt」「ここはクーtry {BufferedReader rd = new BufferedReader(
リエフォント」これは環境に応じて変化させられな
new FileReader(path));
いからダメ。
String line = rd.readLine();while(line != null) {out.println(line); line = rd.readLine();}
3.2 HTML のバージョンrd.close();} catch(Exception ex) {□ HTML1.0 → HTML2.0 → HTML3.2 → HTML4.0 →out.println("file " + path + " not found.");HTML4.01(最終版)}
cs.close();□ 以下では HTML 4.01 を解説
if(path.equals("/bye")) break;}ss.close();• それ以前と比較して「意味マークアップ」を重視。
• 意味マークアップでない機能 (フォントの変更、色の変更など) をすべて非推奨に。

}}• 見た目 (表現) の指定は CSS(スタイルシート) で指

□ 演習

定。

• このサーバをコピーしてきて動かせ。久野の HTML ファ□ XML(eXtensible Markup Language) の普及

イルは/u1/kuno/WWW/index.html にあります。

• リンクをたどったりしてどのような不都合があるか観察せよ。またその不都合はなぜ生じているのか考• XML では「用途に応じて自由にタグを作って使える」• XML の形式で HTML の機能を記述するもの→ XHTML。

える。

1.0、1.1

3

WWW の記述言語

3.1

HTML
guage)(HyperText• XHTML もある程度使われるようになっている。構文上の制約が厳しいのでまあ今回はパスで。

MarkupLan- 3.3□ HTMLは

SGML(Standard Generalized Markup
Language) を土台とする言語。

□ WWW 上では WYSIWYG(見たまま) はあり得ない (なぜ?)□ 理由:HTML の基本

ユーザによって持っている画面もブラウザも違• SGML ではマークアップを「<名前>…</名前>」という→同一の「見た目」は不可能→「見たまま」も不可能

う形で範囲 (要素) の指定を行う。
「<名前>」は開始
タグ、「</名前>」は終タグ。

5• <h2>…</h2>:• 単独のタグ (開始タグのみで終了タグがないもの) もある。

• <p>…</p>:• 追加の指定は属性を付加。「<名前 属性 1=値 属性

第二レベルの見出し (h6 まである)

普通の段落 (地の文)□ あとちょっとおまけ:

2=値 …>」□ 最も基本的な HTML の構造:DOCTYPE+ヘッダ+本体• <br>:

改行• <hr>:

区切りの横線• DOCTYP 宣言は「どのバージョンの文書か」表明する□ 実習:上の HTML をコピーしてきて表示せよ。
のに必要
mkdir WWW
←最初 1 回だけ
chmod a+rx WWW ←最初 1 回だけ
cp /u1/kuno/work/sam31.html WWW/sam31.html
chmod a+r WWW/sam31.html ←コピーしたら毎回
ブラウザで「http://w3in/~ユーザ/sam31.html」開く<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head><title>Sample</title>←タイトル</head><body>...
←ここにページ本体の中身を記述</body></html>□ 実習:上の HTML の内容を変更してみよ。<br>と<hr>も追加して効果を確認せよ。

• Emacs で「WWW/sam31.html」を開く。

□ ここまでに出て来た HTML の要素:

• 編集して保存。ブラウザの再読み込み。

• <html>…</html>: HTML 記述全体を表す• <head>…</head>: ヘッダ (ページに関する情報)
の範囲

3.4

• <title>…</title>: 文書のタイトルを表す□ HTML 4.01 では「意味マークアップ」• <body>…</body>: ページ本体 (ブラウザ窓の中• どのような色/大きさ/配置という指定は HTML では

身)□ 文字エントリ:<>&→ &lt;→ &gt;→ &amp;

行わない「特別な文字」をあらわす。

• これらの (表現の) 指定→スタイルシートの機能• CSS: スタイルシート記述言語として最も広く使われている

タグ開始文字
タグ終了文字文字エントリ開始文字□ 基本的な書き方:「どういう要素はどう表示」□ ページ本体の中身→見出し、段落など。
□ 例:

CSS(Cascading StyleSheet)

セレクタ { 属性:値; 属性:値; … }sam31.html• セレクタ→タグ名 (とりあえず)。

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head><title>Sample</title></head><body><h1>自己紹介</h1><h2>仕事関係</h2><p>私は大学で先生をやっています。教えるのは好きです。</p><h2>趣味関係</h2><p>コンピュータは趣味です。趣味を仕事にするのもよしあしです。</p></body></html>• 属性→指定するものの種類。
• 値→その種類の値をこれこれに設定せよ。
□ 値の書き方:• 長さ→「10mm」(ミリ)「5px」(ピクセル)「3ex」(文字幅) など単位指定が必須。

• 割合→「100%」「40%」などパーセントで。
• 色→「rgb(赤, 緑, 青)」赤/緑/青の強さを 0〜255の整数で指定。
□ CSS の主要な属性□ ここまでに出て来た HTML の要素:

• <h1>…</h1>:• 「color:

色」文字の色• 「background-color: 色」背景の色

第一レベルの見出し (大見出し)

6

• 「margin:• CSS で「. 名前」をセレクタとして指定→ class の

長さ 長さ 長さ 長さ」上下左右マージ

名前に対応ン。長さのかわりに「auto」も指定できる。

• 「padding:
め物

長さ 長さ 長さ 長さ」上下左右の詰□ 例:• 「text-indent: 長さ」段落 1 行目の字下げ• 「text-decoration: 種 別 」文 字 飾 り。種 別 は「underline」「overline」「blink」な ど 。点 滅 は絶対使わない (ださい)• 「text-align: 種別」そろえ。「left」「center」「right」• 「border: 種別 色 長さ」枠を指定。長さは枠の幅。種別は「solid」「double」「dashed」「dotted」「ridge」「groove」「inset」「outset」「none」□ CSS の HTML への入れ方 (複数の方法があるがとりあえ
ず 1 つ):<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head><title>Sample</title><style type="text/css">
body { background-color: rgb(254,200,189) }h1 { text-align: center;text-decoration: underline }.box { border: ridge blue 6px;
padding: auto 3mm }.key { font: red; text-decoration: underline }</style></head><body><h1>自己紹介</h1><div class="box"><h2>仕事関係</h2><p>私は大学で先生をやっています。教えるのは好きです。</p></div><DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head><title>Sample</title><style type="text/css">
body { background-color: rgb(254,200,189) }h1 { text-align: center;text-decoration: underline }</style></head><body><h1>自己紹介</h1><h2>仕事関係</h2><p>私は大学で先生をやっています。教えるのは好きです。</p><h2>趣味関係</h2><p>コンピュータは趣味です。趣味を仕事にするのもよしあしです。</p></body></html>□ 演習:

一部をカコミにして下線つける<h2>趣味関係</h2><p><span class="key">コンピュータ</span>
は趣味です。趣味を仕事にするのもよしあしです。</p></body></html>

□ 演習:

3.5

自分の例題に div と span も追加してみよ。

フォーム機能□ ここまでの範囲では、Web ページは「静的な、変化しな
いもの」• 情報を見るだけならこれでも役に立つが…

自分の HTML ファイルに CSS のスタイル指定を• やはり「ユーザから入力→サーバの応答」というやつけてみよ。具体的には次のようなことを試せ。

りとりがしたい• 見出しを適当な色の枠で囲む (左右 margin は auto

□ 「動的なページ」の定義は?

にするとよい)。

• 段落の字下げを 1 文字にする (日本語ではそれが標• (a) ユーザからの入力に応じた内容が返されるもの

準的)。

(それ自体は変化しない)• 段落の背景色を適当な色に設定する。

• (b) ページの内容が表示後も変化するもの• 一応、(a) だけでも役に立つ Web アプリケーション
は開発可能□ スタイル設定に使う汎用のマークアップ:• <div class="名前">…</div>: ブロック単位のグ□ フォーム:ループ

決まった書式のこと• HTML では: ページの中に「穴」があってそこに入力を入れられる• <span class="名前">…</span>: 段落の中の部
分文字列7• 埋めた入力はサーバに送信 (submit、提出) できる<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html>• 送信の形式: 2 種類
<head><title>Sample</title>□ HTTP GET: URI の後ろに「？名前＝値＆名前＝値＆…」 <style type="text/css">.sheet { background-color: rgb(200,220,240);という形で付加padding: 5px 10px }</style>• △ URI を見ると送信データが分かってしまう</head>• ○自分の手でも簡単に作れる、ブックマークに入れ <body>
られる<h1>フォームのテスト</h1><form name="f0" method="get" action="#"><div class="sheet">□ HTTP POST: データを別途送信
名前: <input name="ident" type="text" size="12"><br>• ○データが見られにくい (通信路を監視すれば見ら 性別:
男性<input name="sex" type="radio" value="male" checked>
れるけど)女性<input name="sex" type="radio" value="female"><br>• △フォームからしか送れない、ブックマークできない 学年: <select name="grade"><option value="1" selected>1 年生</option>□ フォームの構造<option value="2">2 年生</option><option value="3">3 年生</option></select><br><form ...>
<button name="cmd" value="x">提ここに普通の要素と一緒に部品を入れる
出</button></div></form></form></body></html>□ form タグの属性:□ 演習:• name="名前" → フォーム名。参照時に必要になるになるのか検討せよ。また、編集して部品を増やして

ことがある

みよ。

• method="post" または method="get" → 送信形式• action="URI" → フォームのデータを受け取る対象□ おもな部品:• <input name="名 前" type="text" [size="文 字

PHP による Web アプリケーション

4.1

CGI

• ブラウザ→サーバ→プログラム: 「環境変数」によって必要な情報を渡す (加えて method="post"で• <input name="名 前" type="checbox"> ← チェッ

は標準入力からデータが読み込める)。

クボックス• プログラム→サーバ→ブラウザ:• <input name="名 前" type="radio" value="値"[checked]> ←ラジオボタン

標準出力による:

先頭に「ヘッダ情報」、続いて「空行」(ヘッダの終わりを表す)、その後に任意のデータ。

字□ 例: sam35.cgi --- 環境変数をそのまま表示 (プレーンテキスト出力)数"></textarea> ←複数行入力欄• <select name="名前">項目…</select> ←選択メ#!/bin/shecho ’Content-type: text/plain’echo ’’←ヘッダ終わりenv←環境変数表示ニュー• <option value="値" [selected]>表 示 文 字 列</option> ←選択メニューの項目• <button name="名 前" value="値">表 示 文 字 列 □ 例:</button> ←提出ボタン□ 例:

Web サーバからサーバ上のプログラムを呼び出す時の「インタフェース」• <input name="名前" value="値"
type="hidden"> ←「見えない部品」

数" cols="文4□ CGI (Common Gateway Interface):数"]> ←入力欄• <textarea rows="行

上の例をコピーしてきて表示せよ。実際にデータを入れて送信し、method="get"だとどのような URI←最低限のヘッダ

sam36.cgi --- ヘッダで別ページへ転送#!/bin/shecho ’Location: http://www.yahoo.com’echo ’’

sam34.html
8

□ 例:

sam34.cgi --- さっきのフォームの結果受け取 <html><head><title>php sample</title><style type="text/css">
div.test { margin: 2px 20px; background: rgb(200,215,255) }れる)</style></head><body><?php#!/bin/shfor($i = 0; $i < 10; ++$i) {echo ’Content-type: text/html; charset=euc-jp’
echo "<div class=’test’>番号".$i."です。 </div>";
echo ’’}
echo ’<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">’?>echo ’<html><head><title>sample</title></head><body>’ </body></html>
echo ’<h1>見本</h1><p>’ $QUERY_STRING ’</p></body></html>’

り (環境変数 QUERY STRING で GET のパラメタが受け取□ しかしちゃんとパラメタを受け取って内部の処理も行い、□ 解説:

結果の HTML を出力するのはかなり大変そうですね?

4.2• for 文とかは C や Java と同じ。変数は「＄」をつける (シェルと同じ)。echo は PHP の命令で文字列を出力する。「.」は文字列連結。

PHP

□ 演習:

□ PHP (Hypertext Prosessor) --- 初期は「Personal

この例題をコピーして動かせ。動いたら出力の内容を変更してみよ。
HomePage tools」。ともかくプログラミング言語の 1□ PHP の利点…豊富な組み込み機能 (多数のモジュールがつ。
選択可能)• 最大のアイデア: 「ほとんどは HTML なんだから□ HTML からのパラメタの受け取りなども簡単。
HTML を書いて、ちょっとプログラムを使いたいとこ• 「$ GET[’
だけプログラムを埋め込めばいい」
名 前’]」「$ POST[’
名 前’]」で

method="get"、method="post" で 渡 さ れ た パ
ラメタがすぐ利用可能。

• 「<?php ……PHP プログラム…… ?>」の中だけプロ
グラムコード• 残りの (外側の) 部分→そのまま出力 (実は PHP のそ □ 例:
ういう命令に翻訳されて実行されるけど一見 HTML が<?php
そのままあるように見える)• 重要:

header("Content-type: text/html; charset=euc-jp");?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head><title>php sample</title><style type="text/css">p { margin: 2px 20px; background: rgb(200,215,255) }</style></head><body><?phpecho ’<p>こんにちは’.$_GET[’ident’].’ さん。</p>’;echo ’<p>性別は’.$_GET[’sex’].’ ですね。</p>’;echo ’<p>学年は’.$_GET[’grade’].’ ですね。</p>’;?></body></html>

ヘッダの出力動作は「先頭で」やらないといけない (HTML 本文に入った時はヘッダは終わっていることに注意)□ 基本的なカタチ<?phpheader("Content-type: text/html; charset=euc-jp");/* その他ヘッダ出力はここで */?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head><title>title...</title><style type="text/css">/* CSS 記述はここに */</style><head><body><?php/* ページ本体出力を含む動作 */?></body></html>□ 例:sam34.php --- 先のフォームのパラメタを表示。

4.3

PHP による Web アプリケーション□ 前のようにフォーム (HTML) と処理 (PHP) を分けるといまいち。

• 開発しにくい、分けてあるので分かりにくい

sam37.php --- 数を出力する• ある結果を表示しつつ次の入力を入れたい。

<?php
header("Content-type: text/html; charset=euc-jp");?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">• 次々に URI が移っていくのはやりづらい。
「ある特定の処理」は 1 つの URI で。

9• → 1 つの PHP ページで処理+フォーム (初回は処理し □ 演習: この PHP プログラムをまず久野のページで動かせ。
ないように)。
□ 例:

http://w3in/~kuno/ist08/sam38.php

sam38.php --- 合計の計算<?php
複数人数でバリバリ計算しても干渉しないことを確認す
header("Content-type: text/html; charset=euc-jp");
ること。
?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">□ 演習: この PHP プログラムを自分のところに持って来<html><head><title>php sample</title>て動かせ。動くことを確認したら、足し算の他に「引き<style type="text/css">算」もできるように改造してみよ。 (もっと色々できる
div { padding: 10px; background: rgb(200,215,255) }</style></head><body>
ようにしてもよい。)<h1>合計を求める</h1><form method="get" action="#"><div>□ 先の例題は「アプリケーションに必要なすべての情報を<?php
毎回ブラウザとサーバで受け渡す」ことで成立していた。
$total = 0; $data = 0;if(!isset($_GET[’cmd’])) {□ これが、データを一部サーバで保管しておこうとすると
echo "<p>値を入れてください</p>";
面倒なことが起きる。たとえば total をファイルに格納} else if($_GET[’cmd’] == ’clear’) {しておくとどうなるか? (もちろん、これだけのデータ
echo "<p>クリアしました。</p>";} else if($_GET[’cmd’] == ’calc’) {ならそんな必要はないが、もっと大量のデータがあるとif(is_numeric($_GET[’total’])) $total = $_GET[’total’];if(is_numeric($_GET[’data’])) $total += $_GET[’data’]; か、ネット上に流せない機密データだと、サーバ上に保管しておく必要がある。)
echo "<p>現在までの合計は".$total."です。</p>";} else {echo "<p>処理内容が不明です。</p>";}echo ’<input type="hidden" name="total" value="’.
$total.’">’;?><input name="data" type="text" size="6"><button name="cmd" value="calc">計算</button><button name="cmd" value="clear">クリア</button></div></form></body></html>□ 解説:• 提出されてくるデータは total、data の 2 つ (プラス cmd…後述)。これらに対応して PHP 側でも変数を用意。初期値は 0。

• isset() はそのデータがあるかどうか。なければ初回のはず→単にメッセージを表示• cmd は押したボタンに応じた value の値が入って来る。

• それが’clear’ だったら total、data とも 0 のままでよい。
• それが’calc’ だったら total に data を加える。ただし、数値の形をしているときだけ。(ブラウザから来たデータの形は絶対にそのまま信用してはいけな
い。) そして total を表示。

• いずれにせよ、現在の total は type="hidden"で次回に受け渡す。

• 最後にフォーム用意する。

10