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

情報処理IIA(HTML入門)第12回

目次 索引
12.1 HTTPとCGI
12.2 SGMLとDTD
12.3 成績評価について
12.4 アンケート12

12.1 HTTPとCGI

ブラウザの「場所:」入力欄に、例えば http://www.leeds.ac.uk/ と入力しますと、少し待たされた後、イギリスのリーズ大学のホームページが表示されます。 この間に以下のようなことが起こっていることは、前の授業で説明しました。

  1. ブラウザは、自分の組織のネームサーバに、ドメイン名 www.leeds.ac.uk の名前解決を求める。
  2. 自分の組織のネームサーバは、いくつかのネームサーバを利用して www.leeds.ac.uk のIPアドレスが 129.11.16.23 だと割り出し、それをブラウザに知らせる。
  3. ブラウザは、インターネットの中からIPアドレスが 129.11.16.23 であるコンピュータ(WWWサーバ)を見つける。
  4. いくつかのルータを経由して、ブラウザとこのWWWサーバとの間で必要なデータ通信を行う。
  5. ブラウザは、必要なデータが集まりしだい、段階的にホームページを表示する。

今日の授業では、後半の「ブラウザとWWWサーバの間の通信」と「ホームページの表示」の仕組みに触れます。

12.1.1 HTTP

通信の規約をプロトコルとよぶことは前の授業でも話しました。 HTTP(HyperText Transfer Protocol)とは、ブラウザとWWWサーバの間のプロトコルです。 ここでハイパーテキストhypertext)とは、リンク構造を持つテキストのことです。 現在のWWWを考えますと、テキストだけではなく、画像や音声、動画にもリンクが張られていますので、ハイパーメディアhypermedia)とよんだほうが適切かもしれません。 HTTPとは、ホームページを転送する規約だと考えてください。

HTTPの仕組みは単純です。

  1. ブラウザからWWWサーバへ、URIを表す文字列を転送する。
  2. WWWサーバからブラウザへ、ファイル情報を表す文字列と、(空行と、)指定されたファイルの内容を転送する。

これだけです。 このやり取りを何度か繰り返して、ブラウザはホームページの表示に必要なデータを集めます。

なお、ブラウザへ送られるファイル情報の中では、ファイルの種類が重要です。 HTML形式のファイルを転送すときには、ファイル情報の中で Content-Type: text/html という文字列が送られます。 JPEG形式の画像のときには、Content-Type: image/jpeg という文字列が送られます。 ブラウザは、受け取ったファイル情報をもとに、テキストファイルの場合、画像ファイルの場合と、適切な処理を行います。

前述の例(http://www.leeds.ac.uk/)ですと、ブラウザとWWWサーバは、おおよそ次のようなやり取りを行います。

  1. ブラウザは、WWWサーバ www.leeds.ac.uk を見つける。
  2. ブラウザはそのWWWサーバに、文字列 GET / を送る。
  3. WWWサーバはブラウザに、Content-Type: text/html などの文字列と、(WWW用に公開するディレクトリの中の)ファイル index.html の内容を転送する。
  4. ブラウザは、届いたファイルをHTML形式と見なし、画像の部分を空けて表示する。
  5. そのHTMLファイルの中には、<img src="s-logo.gif" ...> という画像ファイルの指定があるので、この相対URIを解決し、絶対URI http://www.leeds.ac.uk/s-logo.gif を得る。
  6. ブラウザは、WWWサーバ www.leeds.ac.uk を見つける。
  7. ブラウザはそのWWWサーバに、文字列 GET /s-logo.gif を送る。
  8. WWWサーバはブラウザに、Content-Type: image/gif などの文字列と、(WWW用に公開するディレクトリの中の)ファイル s-logo.gif の内容を転送する。
  9. ブラウザは、届いたファイルをGIF形式の画像と見なし、空けておいた部分にその画像を表示する。
  10. もとのHTMLファイルの中には、<img src="/icons/welc-b.gif" ...> という画像ファイルの指定があるので、この相対URIを解決し、絶対URI http://www.leeds.ac.uk/icons/welc-b.gif を得る。
  11. ...
  12. もとのHTMLファイルに指定されている画像がすべて届いたので、転送を終了する。

12.1.2 HTMLドキュメントの動的な構成

ロボット系検索エンジンでは、検索語を入力しますと、しばらくして検索語に関するホームページが表示されます。 実は、検索語ごとにHTMLファイルがあらかじめ用意されているわけではありません。 検索エンジンのプログラムは、検索語などのデータを受け取りますと、データベースに基づいて検索語に関する情報を集め、その場でHTMLドキュメントを合成し、それをブラウザに転送しているのです。 このようなプログラムは、一般に CGI(Common Gateway Interface)スクリプトとよばれます。


12.2 SGMLとDTD

12.2.1 HTMLドキュメントの構造

これまでの説明で、HTMLファイルがネットワークを経由してブラウザに届くまでの仕組みが分かりました。 ブラウザはどのようにして、届いたHTMLドキュメントを表示しているのでしょうか。

例えば、次のようなHTMLドキュメントが届いたとします。

<html>
<head>
<title>File Formats</title>
</head>
<body>
<h1>For Documents</h1>
<ul>
  <li>PostScript</li>
  <li>PDF</li>
</ul>
</body>
</html>

このときブラウザは、おおよそ以下の図で表されるようなデータを発生させます。

                         HTML
                          |
         +--------+-------+--------+--------+
         |        |                |        |
       <html>    HEAD            BODY    </html>
                  |                | 
    +------+------+                +----+----+----+
    |      |      |                |    |    |    |
  <head> TITLE </head>           <body> H1  UL </body>
           |                            |    |
   +-------+-------+      +------+------+    +---+---+---+
   |       |       |      |      |      |    |   |   |   |
<title> #PCDATA </title> <h1> #PCDATA </h1> <ul> LI LI </ul>
           |                    |                |   |
           |             +------+  +------+------+   +------+------+
           |             |         |      |      |   |      |      |
"File Formats"  "For Documents"  <li> #PCDATA </li> <li> #PCDATA </li>
                                          |                 |
                                          |                 |
                                          |                 |
                                     "PostScript"         "PDF"

そして、このデータに基づいて、文字列などの表示位置を順次計算し、計算が終わったらその位置に文字列などを表示するわけです。

なお、このような図(データ)は解析木parse tree)とよばれます。 根から反時計回りに葉をたどると、もとのHTMLドキュメントが得られることに注意してください。

解析木を理解するために、用語を二つ定義します。 まず、<tag></tag> に囲まれた部分は、tag 要素element)とよばれます。 tag 要素から開始タグと終了タグを取り除いた部分を、その tag 要素の内容content)とよびます。 例えば、

<ul>
  <li>PostScript</li>
  <li>PDF</li>
</ul>

ul 要素で、その内容は二つの li 要素です。 また、はじめの li 要素の内容は、単純な文字列 PostScript です。

tag 要素を表す解析木は、親が名前 tag(見やすいように大文字にしました)、子が開始タグ、内容、終了タグである木です。 上記の例ですと、まず ul 要素の内容が二つの li 要素なので、

       UL
       |
 +---+-+-+---+
 |   |   |   |
<ul> LI LI </ul>

となり、li 要素の内容がそれぞれ単純な文字列 PostScript, PDF なので、「単純な文字列」を名前 #PCDATA で表すことにしまして、

                 UL
                 |
 +------+--------+---------+------+
 |      |                  |      |
<ul>    LI                 LI   </ul>
        |                  |
 +------+------+    +------+------+
 |      |      |    |      |      |
<li> #PCDATA </li> <li> #PCDATA </li>
        |                  |
        |                  |
        |                  |
   "PostScript"          "PDF"

となるわけです。

ここで、はじめの巨大な解析木に戻ってみてください。 解析木が、HTMLドキュメントの構造をよく反映していることが分かると思います。 テキストにタグを入れることは、解析木で表されるような構造をドキュメントに与えることなのです。

12.2.2 正当なHTMLドキュメント

これまでに色々なホームページを作成してきました。 試行錯誤しながらHTMLファイルを編集し、大体思い通りに表示できれば完成といったところでしょうか。 しかし、ちゃんと表示されることと、それがHTMLの規格に合致していることとは別の問題です。 ブラウザは、規格に合っていないHTMLドキュメントでも、適当に表示してくれるからです。 ここでは、HTMLの規格について知り、より完全なHTMLドキュメントの作成を目指すことにします。

HTMLの定義は、まずSGML(Standard Generalized Markup Language)から始まります。 これは、マークアップ言語の枠組みを定める仕組みです。 ただし、これは枠組みにすぎませんので、実際のファイルがSGMLに合致するかどうかはなんとも言えません。 枠組みを埋めるのが、DTD(Document Type Definition)です。 これがあってはじめて、実際のファイルが規格に合っているかどうかが判断できます。 HTMLは、SGML、およびHTML用のDTDによって規定される言語なのです。 HTMLドキュメントが規格に合致することを、正当valid)であるということにします。

HTMLのDTDは、主に次のようなことを定めています。

このうち、「どんな要素をそのタグで囲めるか」の部分が分かりにくいと思います。 例えば、<ul> タグに関しては、HTMLのDTDで

<!ELEMENT UL - - (LI)+>

と定められています。 これは、「<ul> タグは開始タグも終了タグも省略できない。 囲めるのは、li 要素のひとつ以上の並び。」いう意味です。 したがって、

...
<ul>
  <li>PostScript</li>
  <li>PDF</li>
  <p>and so on.</p>
</ul>
...

は正当でないということが分かります。

上の例で見たように、DTDは人間にとってあまり読みやすいものではありません。 しかし、少しずつでも解読していけば、HTMLに対する理解が非常に深まります。


12.3 成績評価について

レポート(アンケートも含む)の提出に関するスケジュールは次の通りです。

7月19日(木)
全員にレポートの提出状況をメールで知らせます。
7月31日(火)
レポートの最終締め切り日です。 これ以降提出されたレポートは採点しません。

この授業の成績は、レポートの評価とアンケートの提出(出席点)で決まります。

レポート(8通)
A=10点、B=9点、C=8点、D=7点、Fおよび未提出=0点。
アンケート(4/19, 6/14, 6/28, 7/12)
提出=5点、未提出=0点

成績に関して次のような事情のある人はメールで連絡してください。 できる限り対処します。


12.4 アンケート12

情報処理センターのアンケートに答えてください。


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

2001年7月12日更新
konishi@twcu.ac.jp
Copyright (C) 2001 Zenjiro Konishi. All rights reserved.