17.1 WWW のしくみ

既に hwb10.1 ウェブについての基礎知識 で簡単に述べましたが,WWW とはインターネット上で動くハイパーテキストシステムです.インターネットは全世界規模のネットワークですから,非常に多くの人が情報を受信・発信します.そして世界中の人々が全く同じように WWW を使うためには

  • ウェブページの場所を一意的に指定する方法
  • ウェブブラウザが,ウェブページを保管しているコンピュータ (ウェブサーバ) と通信を行う方法
  • ウェブページの実体であるハイパーテキストを記述する方法

がきちんと定まっていないといけません.WWW では,上から順に URL, HTTP, HTML がそれぞれの役割を担っています.これらの仕組みを少し詳しく説明します.

URL

hwb10.1 ウェブについての基礎知識 で説明した通り URL は三つの部分からなります.たとえば ECCS のリンク集 URL は

http://www.ecc.u-tokyo.ac.jp/links.html

で,”http”, “www.ecc.u-tokyo.ac.jp” “/links.html” の 3 つに分かれます.これらには前から順にスキーム名,ドメイン名,パス名という名前がついていて,それぞれ

  • URL の指し示す情報を取得する方法
  • 情報がどこのコンピュータにあるか
  • 情報がコンピュータ内のどこにあるか

を表しています.詳しく見ていきましょう.

スキーム名

URL の一番最初はスキーム名と呼ばれ,URL で指し示しされた情報を取得する方法をここに書くことになっています.ウェブページを開く場合は HTTP を用いるので,ここに http と書かれるわけです.http 以外のスキーム名では,たとえばメールアドレスを表す mailto などがあります.これ以外にも externalIANA URI Schemes でたくさんのスキームが定義されています.

ドメイン名

スキーム名以降の部分はスキームによって書き方が違いますが,以下では http の場合のみ考えることにします.

スキーム名の直後に書かれるドメイン名は「URL の指し示す情報がどこのコンピュータにあるか」という情報を表します.インターネットに繋がれたコンピュータの住所に相当するものは IP アドレスという数字の羅列です (hwb16.6.2 IP アドレス).なので実は URL にドメイン名ではなく,たとえば

http://127.0.0.1/index.html

のように直接 IP アドレスを書くことができます.ただ,無味乾燥な数字の羅列を人間が直接扱うのには無理があります.そこで IP アドレスにアルファベットの列 (たとえば www.ecc.u-tokyo.ac.jp) を対応させ,人間はアルファベットの列を扱うようにするわけです.このアルファベットの列をドメイン名といいます.ちなみにウェブブラウザなどのプログラムは IP アドレスを用いて通信するので,人間が打ち込んだドメイン名を IP アドレスに変換する仕組みが必要になります.この仕組みを DNS (Domain Name System) といい,DNS によって IP アドレスに対応する名前をドメイン名といいます (詳しくは hwb16.6.3 ドメイン名と DNS を参照).

ドメイン名は階層構造になっています.ドメイン名をドット. で区切ったとき,一番右の文字列をトップレベルドメイン,その左のドメインを第 2 レベルドメイン,以下順番に第 3 レベル, 第 4 レベルなどと呼びます.たとえば www.ecc.u-tokyo.ac.jp なら,トップレベルドメインは jp, 第 2 レベルドメインは ac, 第 3 レベルドメインは u-tokyo などとなります.このような階層構造を取っているのは DNS の都合によるものです.

ドメイン名は万国共通のものなので,異なる人が同じドメイン名を名乗ることのないようにきちんと管理する必要があります.ドメインに関する世界的なことは externalICANN という団体が取り決めをしています.またドメイン名の管理は ICANN が適当な組織に委託して行うという形になっています.私たちが最もよく目にする .jp で終わるドメイン名は externalJPRS という会社が管理しています.JPRS ではドメイン管理業務の一環として externalJPRS Whois というサービスを提供しており,これを使うとドメイン名を取得している団体または個人の情報を調べることができます.

パス名

ドメイン名から先の / で始まる部分は,ウェブサーバ内における情報の位置を表します.この部分がパス名 (hwb14.4.1 ディレクトリ) の表記に似ていることに気づいた人もいるでしょう.実際,この部分はサーバ上のファイルシステムに対応していて,URL が指している情報はパス名に従ってディレクトリの中にファイルとして保存されています.ただし,ウェブサーバー内には外部から見られては困るファイルがあるのが普通です.ですから通常は公開する情報を置くためのディレクトリがあって,そこから下の階層のみにアクセスできるようになっています.URL 表記における階層の一番上のディレクトリはルートディレクトリではなく,公開用の文書が置かれているディレクトリの階層のトップレベルのディレクトリに対応します.そこを基準にしたパス名が,URL のパス部分となります.

ちなみに,ここまではウェブサーバ上にある情報の URL だけ見てきましたが,実は手元の端末にあるファイルの場所も URL で指定することができます.この場合は URL のスキーム部は file となり,その直後に絶対パスを書きます.自分の端末に保存した HTML ファイルを開くと,おそらく URL の欄には file: とファイルのパスが表示されるはずです.ただしこの書き方は自分の端末内での位置を示すものなので,他人にとっては意味を持ちません.明示的にローカルファイルの URL を使う機会は,さほど多くはないでしょう.

HTTP

WWW にあるそれぞれの文書は,ウェブサーバと呼ばれる世界中に分散したコンピュータの中に保存されています.例えばこのはいぱーワークブックは,情報基盤センターの中にあるコンピュータのどこかに保存されています.ウェブブラウザがウェブページを表示するには,まずは表示すべきウェブページをウェブサーバから受けとらなければいけません.そのためのウェブブラウザとウェブサーバの間の通信方法を規定するのが HTTP (HyperText Transfer Protocol) です.ハイパーテキスト (HyperText) を転送 (Transfer) するための規約 (Protocol) だから,こういう名前がつきました.

HTTP での通信は,必ず

  1. ウェブブラウザがウェブサーバに対してリクエストを送り
  2. ウェブサーバはウェブブラウザからのリクエストに対して返事 (レスポンス) を送る

という手順で行われます.そしてブラウザのリクエストには

  • リクエストの内容 (ウェブページを送れ,など)
  • 開こうとするウェブページの URL
  • ブラウザの名前

などの情報が含まれます.逆にウェブサーバがレスポンスを送るときは,受け取ったリクエストに応じて

  • ステータスコード
  • 送信するデータの形式
  • 送信するデータのサイズ

などを適切に選択し,その上で送るべきデータを送るようになっています.HTTP は,こうしたリクエスト・レスポンスの書式を規定しています.

HTML と CSS

WWW においては,ウェブページの実体であるハイパーテキストを記述するのに HTML (HyperText Markup Language) および CSS (Cascading Style Sheets) というものを用います.

HTML の名前には「マークアップ言語」という言葉が入っています.マークアップ言語というのは,テキストファイル中に文書と共に文書の構造を記述するための言語です.ためしにこのページを見ながら,ブラウザメニューの「ソースを開く」をクリックしてみてください (Safari の場合は hwb10.2.4 その他の便利な機能 の「ソースを見る」を参照してください).するとウェブページの正体である「ソース」が表示されます.皆さんが普段見ているウェブサイトは,実はこんな風に書かれているんです.

ソースをぼんやり眺めると,記号の列に混じってウェブページ中の文書が入っているのが分かると思います.またソース内に < と > で挟まれた「タグ」と呼ばれるものがたくさんあります.タグの記法については以下の節で詳しく学びます.大事なことは,HTML の実体がただのテキストファイルだということです.タグの書き方さえ分かってしまえばテキストエディタを使うだけで手軽に,しかも無料でウェブサイトを作ることができます.WWW がここまで広まった要因の一つに,こうした事情があるのです.

さて,皆さんが普段見ているウェブサイトは決してモノクロではなくカラフルで,レイアウトも凝っていると思います.かつてはウェブサイトの見た目を HTML で記述していましたが,最近は CSS というものが使われます.なぜかというと,ウェブページの文書としての構造 (たとえば見出し,段落,引用文など) と見た目の情報 (たとえば文字の色や大きさ) を HTML と CSS に役割分担させるほうがメリットがたくさんあるからです.ですので以下の節でも,まず HTML の書き方を説明し,その後に CSS の書き方を説明することにします.