[小西ホームページ]   [目次・索引]   [前の授業]   [次の授業]

コンピュータIIE(HTMLとウェブ・サーバ)第9回

目次
9.1 ウェブの仕組み
9.1.1 授業の進め方
9.1.2 クライアント・サーバ・モデル
9.1.3 ウェブ・サーバとウェブ・ブラウザ
9.1.4 URL
9.1.5 HTTP
9.1.6 CGI
9.1.7 ウェブ・サーバの例
9.2 演習9
9.3 レポート課題
9.4 参考文献
索引
CGI   CGIスクリプト   CGIプログラム   HTTP   ウェブ・サーバ   ウェブ・ブラウザ   クライアント   クライアント・サーバ・モデル   サーバ   サービス   プロセス   プロトコル   ポート   ホスト   メッセージ  

9.1 ウェブの仕組み

9.1.1 授業の進め方

掲示板のようなホームページを作成するには、

の知識が必要です。 残念ながら、プログラミングは1時間や2時間で理解できるものではありません。 そこで、演習では、コピーしたプログラムを部分的に書き換えることにします。 参考になるプログラムをコピーし、その一部を変更して利用するという経験は、それなりに意味があります。

9.1.2 クライアント・サーバ・モデル

パソコンには、ワープロ・ソフトや表計算ソフトなど、いくつかのソフトウェアがインストールされています。 そして、アイコンをクリックするなどしてソフトウェアを起動しますと、そのソフトウェアは稼働します。 稼働しているソフトウェアを プロセスprocess ) と呼びます。

また、パソコンをネットワークに接続しますと、メールやウェブなどが利用できます。 ネットワークに接続されているコンピュータを、 ホストhost ) と呼びます。 メールやウェブなどの機能を、抽象的に サービスservice ) と呼びます。

ネットワーク・サービスを実現するためには、それぞれのホストにソフトウェアをインストールし、ホスト同士を通信回線で接続しますが、それだけでは足りません。 インストールしたソフトウェアを起動し、それぞれのホストのプロセスがネットワーク経由でメッセージを交換して、初めてネットワーク・サービスが実現するのです。 ここで、 メッセージmessage ) とは、何らかの意味がある通信データの単位のことです。

それぞれのホストのプロセスは、勝手にメッセージを送りあうのではなく、何らかの規約に従ってメッセージを交換して、ネットワーク・サービスを実現しています。 サービスを実現するための通信規約を、そのサービスの プロトコルprotocol ) と呼びます。

また、一つのホストの上で、同時に複数のソフトウェアが稼働している場合もあります。 ネットワーク・サービスにおけるメッセージは、ホストではなくホストのプロセスに送りますので、送り先のプロセスを区別しなければなりません。 これは、 ポートport ) と呼ばれる番号で区別します

ネットワーク・サービスの実現方式には、いくつかのパターンがあります。 その中で基本的なのが、クライアント・サーバ・モデルです。 クライアント・サーバ・モデルclient-server model ) とは、クライアント・プロセスがサーバ・プロセスに要求メッセージを送信し、応答メッセージを待つというパターンです。 ここで、 クライアントclient ) とは、データを要求する側のことで、 サーバserver ) とは、データを提供する側のことです。

クライアントとサーバの間のメッセージ交換は、必要に応じて何度も行われます。 以下は、そのイメージです。

表 9.1  クライアント・サーバ間のメッセージ交換
時間 クライアント 通信回線 サーバ
1 要求メッセージ1 →→→→
2
←←←← 応答メッセージ1
3 要求メッセージ2 →→→→
4
←←←← 応答メッセージ2
: : : :

9.1.3 ウェブ・サーバとウェブ・ブラウザ

以上の抽象論を、ウェブの場合に当てはめます。

まず、ウェブはネットワーク・サービスの一種です。 次に、ウェブのためのプロトコルは、 HTTP (HyperText Transfer Protocol) と呼ばれます。 最後に、ウェブはクライアント・サーバ・モデルに基づいています。

ウェブのためのクライアント・ソフトウェアは、 ウェブ・ブラウザweb browser ) と呼ばれます。 WindowsではInternet Explorer, Mac OS XではSafariが標準のウェブ・ブラウザです。 また、フリーソフトではMozilla Firefoxが有名です。

ウェブのためのサーバ・ソフトウェアは、 ウェブ・サーバweb server ) と呼ばれます。 WindowsではIISが標準のウェブ・サーバです。 また、フリーソフトではApacheが有名です。 Mac OS XでもApacheを採用しています。

ここでは、例として、東京女子大学の情報処理教室で東京女子大学のトップ・ページを閲覧する場合を考えます。

まず、ウェブ・サーバApacheは、東京女子大学の一室にあるホストwww.twcu.ac.jpの上で常時稼働しています。 そして、トップ・ページを閲覧するするユーザは、情報処理教室のMacでウェブ・ブラウザSafariを起動し、アドレス欄にトップ・ページのURL http://www.twcu.ac.jp/を入力します。 すると、Safariは、ネットワークの中からホストwww.twcu.ac.jpを探し出し、Apacheとの間で通信状態を確立します。

Safariは、Apacheに対して、トップ・ページのHTMLファイルを送るようにという要求メッセージを、プロトコルHTTPに従って送ります。 このメッセージを受け取ったApacheは、Safariに対して、トップページのHTMLファイルの内容(応答メッセージ)を、プロトコルHTTPに従って送ります。

Safariは、トップページにイメージ・ファイルが使われていることに気付き、Apacheに対して、イメージ・ファイルを送るようにとメッセージを送ります。 Apacheは、Safariに対して、イメージ・ファイルの内容を送ります。 数回のメッセージ交換の結果、必要なデータがすべてSafariに届き、最後にトップ・ページが表示されます。

以上のメッセージ交換をまとめますと、次のようになります。

表 9.2  SafariとApacheの間のメッセージ交換
時間 Safari 通信回線 Apache
1 「HTMLファイルを送れ。」 →→→→
2
←←←← HTMLファイルの内容
3 「イメージ・ファイルを送れ。」 →→→→
4
←←←← イメージ・ファイルの内容
: : : :

なお、ウェブ・サーバのポート番号は、通常80番が使われます。

9.1.4 URL

ウェブのプロトコルHTTPについて説明する前に、URLの書式について確認します。

HTTPのためのURLは、次のような書式が基本です。

http:// host [: port ][ path [? query ]]

ここで、ブラケットで囲まれた部分は、省略可能を意味します。

host はウェブ・サーバが稼働しているホストの名前です。 port はポート番号で、省略すると80番になります。 path はパス名で、省略すると"/"になります。 query はウェブ・サーバに与える追加データで、入力欄の内容などがここに来ます。

URLでは、":"や"/"など、一部の記号に特別な意味があります。 そのような記号がURLの成分に含まれる場合、記号は"%"付きの符号に置き換えられます。 例えば、":"は"%3a"に置き換えられますし、"/"は"%2f"に置き換えられます。 もちろん、"%"自身も置き換えられ、"%25"になります。 なお、スペースは"%20"に置き換えられます。 漢字なども置き換えられ、"%"付きの符号になります。

9.1.5 HTTP

ウェブのプロトコルHTTPにおいて、クライアントからの要求メッセージは本質的にURLであり、サーバからの反応メッセージは本質的にファイルの内容です。

HTTPは過去に数回バージョン・アップし、現在はHTTP/1.0とHTTP/1.1が使われています。 ここでは、HTTP/1.1について説明します。

HTTPでは、要求メッセージも応答メッセージも、「ヘッダ+空行+本文」というパターンで構成されます。 ヘッダには本文に関するデータが列挙され、ヘッダと本文は空行で区切られます。 特に、ヘッダの1行目が最も重要です。

要求メッセージの1行目は、データを取得する場合、 GET から始まります。 GET の後には、URL, そしてHTTPのバージョンが続きます。 2行目以降には、ホストの名前( Host 欄)や接続の継続性( Connect 欄)などのデータが列挙されます。

応答メッセージの1行目は、HTTPのバージョンの後に、サーバの状態番号と状態語句が続きます。 要求の実現に成功した場合、状態番号と状態語句は 200 OK となります。 2行目以降には、送信データの種類( Content-Type 欄)や接続の継続性( Connect 欄)などのデータが列挙されます。 空行を挟んで、送信データが続きます。

東京女子大学の情報処理教室で東京女子大学のトップ・ページを閲覧する場合、Safariからの最初の要求メッセージは次のようになります。

GET / HTTP/1.1
Host: www.twcu.ac.jp
Connection: close
(その他のデータ)
(空行)

Apacheからの最初の応答メッセージは次の通りです。

HTTP/1.1 200 OK
Content-Type: text/html; charset=iso-2022-jp
Connection: close
(その他のデータ)
(空行)
<html>
<head>
<title>東京女子大学-トップページ</title>
(HTMLドキュメントの残り)

9.1.6 CGI

掲示板のようなホームページでは、通常、 CGI (Common Gateway Interface) と呼ばれる仕組みが使われます。 CGIを利用しますと、動的な内容を持つホームページが作成できます。

ウェブ・サーバは、通常、URLで指定されたファイルの内容を、ウェブ・ブラウザへ送ります。 一方、CGIで送るのは、その場で生成されたHTMLドキュメントです。 HTMLドキュメントを生成するソフトウェアは、 CGIプログラムCGI program ) や CGIスクリプトCGI script ) と呼ばれます。

CGIプログラムのファイルは、HTMLファイルと同様、特定のフォルダに格納されます。 URLでそのファイルが指定されますと、ウェブ・ブラウザはCGIプログラムを起動させます。 そして、入力欄の内容やデータベースを元にして、HTMLドキュメントが生成されます。 最後に、ウェブ・ブラウザは生成されたHTMLドキュメントを表示します。

例えば、掲示板のホームページの場合、データベースには過去の書き込みが格納されています。 ユーザがウェブ・ブラウザの入力欄に書き込みを行い、送信ボタンをクリックしますと、ウェブ・サーバはURLで指定された掲示板のCGIプログラムを起動させます。 CGIプログラムは、最新の書き込みをデータベースに追加し、データベースの内容からHTMLドキュメントを生成します。 最後に、ウェブ・ブラウザには、過去の書き込みに最新の書き込みを追加した内容が表示されます。

9.1.7 ウェブ・サーバの例

残念ながら、東京女子大学のウェブ・サーバでは、一般ユーザがCGIを利用することは許可されていません。 そこで、この授業では、簡単なウェブ・サーバをコピーしてもらい、自分で起動することにします。 このウェブ・サーバは、本来のCGIとは違うものですが、考え方は共通しています。

今日は、次のプログラムを実行します。 このプログラムは、「大吉」、「中吉」、「末吉」、「吉」、「小吉」、「凶」の6個の単語の中から1つをランダムに選び、HTMLドキュメントを構成するウェブ・サーバです。 プログラムの中に、サーバからの応答メッセージが埋め込まれていることを確認してください。

/*  1*/ import java.io.*;
/*  2*/ import java.net.*;
/*  3*/
/*  4*/ class OmikujiServer {
/*  5*/     public static void main (String[] args) throws IOException {
/*  6*/         ServerSocket ss = new ServerSocket(8080);
/*  7*/         Socket s;
/*  8*/         InputStreamReader isr;
/*  9*/         BufferedReader br;
/* 10*/         String request;
/* 11*/         PrintWriter pw;
/* 12*/         while (true) {
/* 13*/             s = ss.accept();
/* 14*/             isr = new InputStreamReader(s.getInputStream());
/* 15*/             br = new BufferedReader(isr);
/* 16*/             while (!((request = br.readLine()).equals(""))) {
/* 17*/                 System.out.println(request);
/* 18*/             }
/* 19*/             pw = new PrintWriter(s.getOutputStream());
/* 20*/             pw.println("HTTP/1.1 200 OK");
/* 21*/             pw.println("Content-Type: text/html; charset=Shift_JIS");
/* 22*/             pw.println("Connection: close");
/* 23*/             pw.println();
/* 24*/             pw.println("<html>");
/* 25*/             pw.println("<head>");
/* 26*/             pw.println("<title>おみくじサーバ</title>");
/* 27*/             pw.println("</head>");
/* 28*/             pw.println("<body>");
/* 29*/             switch ((int) (Math.random() * 6)) {
/* 30*/                 case 0: pw.println("<p>大吉</p>"); break;
/* 31*/                 case 1: pw.println("<p>中吉</p>"); break;
/* 32*/                 case 2: pw.println("<p>末吉</p>"); break;
/* 33*/                 case 3: pw.println("<p>吉</p>"); break;
/* 34*/                 case 4: pw.println("<p>小吉</p>"); break;
/* 35*/                 default: pw.println("<p>凶</p>"); break;
/* 36*/             }
/* 37*/             pw.println("</body>");
/* 38*/             pw.println("</html>");
/* 39*/             pw.close();
/* 40*/             br.close();
/* 41*/             s.close();
/* 42*/         }
/* 43*/         // ss.close();
/* 44*/     }
/* 45*/ }

まず、Jeditを起動し、このプログラムをコピーして、ファイルに保存してください。 ファイル名は"OmikujiServer.java"にし、文字コードはシフトJISにしてください。

次に、「ターミナル」を起動して、次のように入力してください。

b04a001@AsiaA1:~% cd WWW-local
b04a001@AsiaA1:~/WWW-local% cd comp2e
b04a001@AsiaA1:~/WWW-local/comp2e% javac OmikujiServer.java
b04a001@AsiaA1:~/WWW-local/comp2e% java OmikujiServer

最後に、SafariでURL http://localhost:8080/を開きます。 すると、前述の6個の単語のどれかが表示されます。 再読み込みをしますと、単語が選び直されます。

なお、このURL http://localhost:8080/の"localhost"は、自分のホストを意味します。 また、"8080"はこのウェブ・サーバのポート番号です。

「ターミナル」には、Safariからの要求メッセージが出力されています。 ウェブ・サーバを終了するには、「ターミナル」の上で、controlキーを押しながら C キーを押します。


9.2 演習9

上記のプログラムを変更し、単語ではなく文章がランダムに表示されるウェブ・サーバを作成してください。 文章は、自分で考えるか、次の通りとします。

作業手順は、以下の通りです。

  1. Jeditでプログラムを変更して、保存します。 ファイル名は"OmikujiServer.java"で、文字コードはシフトJISです。
  2. 「ターミナル」に javac OmikujiServer.java と入力します。
  3. 「ターミナル」に java OmikujiServer と入力します。 この段階で、サーバが起動します。
  4. Safariのアドレスバーに http://localhost:8080/ と入力します。 必要に応じて、再読み込みボタンを数回クリックします。
  5. 「ターミナル」の上で、controlキーを押しながら C キーを押します。 この段階で、サーバが停止します。

9.3 レポート課題

今日の演習9の答案(Javaプログラム)をメールで提出してください。 メールの差出人は学内のアドレス(b04a001@twcu.ac.jpなど)とし、メールの宛先はkonishi@twcu.ac.jpとします。 メールの本文には、学生番号、氏名、科目名、授業日(11月30日)を明記してください。


9.4 参考文献


[小西ホームページ]   [目次・索引]   [前の授業]   [次の授業]

2005年11月30日更新
小西 善二郎 <konishi@twcu.ac.jp>
Copyright (C) 2005 Zenjiro Konishi. All rights reserved.