第 1 回 インターネットサービス

本日の内容


このドキュメントは http://edu.net.c.dendai.ac.jp/ 上で公開されています。

1-1. この講義について

情報の安全・安心工学

この講義は、実践的な知識や演習を通じて情報系の技術を学びます。 特に、インターネットサービスなどの認証ややり取りなどを学び、安全・安 心に関して工学的に学びます。

授業の構成、担当は以下のとおりです

授業回担当教員内容
1〜5坂本直志教授Webサービスの仕組みと構 成
6〜10齊藤泰一教授サーバの安全性
11〜15長谷川誠教授画像認証

3つの分野でそれぞれ評価を行い、その結果から総合的に成績評価を行いま す。

Webサービスの仕組みと構成

1から5回では、Web サービスについて深く学びます。 最初は原理などを学習しますが、最終目標はWebサーバの構築です。 そのため、クラウドサービス技術の最先端である Openstack を使い、各学 生一人に一つのサーバノードを割り当てて使用します。

Webサービス
Web に関して深く学びます。特に通信手順を学びます
プロトコル、パケット通信
インターネットの通信手順の仕組みを詳しく学びます
Linux サーバー
サーバーの基本操作を学びます
Linux におけるサーバー構築
Webサーバーを構築し、通信試験などを行います
総合演習
今までの演習を復習し、学習を振り返ります

授業の受け方

コンピュータの操作の習熟度を成績評価に含めます。 そのため、採る方法は問いませんが、同じ操作を何度でもできるように、操作 ノートを作成してください。 総合演習では、そのノートを持ち込んで、コンピュータの操作を行ってもら います。

コメント集約システム tduitterを使用します。 指示に従って、コメントをしてください。

1-2. WWWの要素

World Wide Web(WWW)は Tim Bernerds-Lee が開発したインターネット上のハイ パーテキストシステムです。 ハイパーテキストとは、ドキュメントから他のドキュメントへのリンクを埋 め込む仕組みです。

ハイパーテキストシステムのアイディア自体は、 MEMEX と言う名で構想された、 マイクロフィルムの検索システムや、 Xanadu と呼ばれるハイパーテキスト のワープロの構想などがあった。

URL
WWW のドキュメントにはそれぞれ Uniform Resource Locator (URL)が結 び付けられる。
HTML
ドキュメントは当初、Standard Generalized Markup Language(SGML) を用いた Hyper Text Mark-up Language (HTML)によりマークアップされている。 SGML は XML に改良され、 XHTML が生まれた。しかし、多様な利用に対応す るため、SGML, XML の文法とは異なる HTML5 が定められた。
HTTP
Hyper Text Transport Protocol は、Transport Control Protocol の 80 番ポートを利用して行われる通信手順。 規定されているものは HTTP/1.0, HTTP/1.1, HTTP/2.0 である。
Webサーバー
HTTP サービスを行うコンピュータ。WWW は基本的に公衆サービスなので、 複数の要求に応答できる必要がある。 また、HTTP ではサーバー側でプログラムを動かし、結果を返答すること もある。
ブラウザ
Web サーバーに情報を要求するクライアント。 画像の表示できる最初のブラウザはMarc Andreessenにより作られた。 ハイパーテキストを指定すると、そこにリンクされたドキュメントをサー バに要求し、表示する。
スクリプト(本講義外)
Web のドキュメントに関連付けられたプログラムで、ブラウザ上で実行さ れる。 JavaScript言語が主に使われる。
DOM(本講義外)
Document Object Model(DOM) は HTML, XML などのドキュメントをオブジェ クト指向の手法でアクセスする仕様。 JavaScriptからアクセスすることができるので、プログラムでドキュメン トを生成、修正することができる。

1-3. URL

URLとは http://edu.net.c.dendai.ac.jp/jissenchi/ などのように、一つ の文字列でネットワークの特定の資源を指し示します。

:(コロン)の左側はスキームと呼ばれ、処理の仕方を示しています。 Webの場合、 http や https となります。 コロンの右側はスキームごとに決められていますが、Web サービスの場合は 次の書式になっています

//ユーザ:パスワード@ホストアドレス:ポート番号/パス?検索部分

したがって、 http://edu.net.c.dendai.ac.jp/jissenchi/ は、 http とい うスキームを使い、 ホスト edu.net.c.dendai.ac.jp にアクセスし、 /jissenchi/ というパスの情報を取り出します。

1-4. HTTP

WWW サーバからリソースを取り出すには HTTP(Hyper Text Transfer Protocol) というプロトコル(通信手順) を使用します。 HTTP は電子メールのプロトコルを元に作られました。

field1: xxxx
field2: yyyy
...
fieldn: zzzz

Here begins contents after one blank line....
The contents continue until the end.
\caption{RFC822\cite{rfc822}で定められた電子メールのメッセージ形式}

電子メールのプロトコル(SMTP RFC822, RFC2822)では、通信に使う情報である ヘッダと通信し たいメッセージ部分のボディの二つの部分に分けられます。ヘッダ部 分は行が改行記号で区切られ、各行はレコード名と内容が : (コロン) で区切 られています。 そして、ヘッダ部分とボディ部分は空行で区切られます。

HTTP/1.1 200 OK
Date: Mon, 01 Sep 2008 11:27:22 GMT
Server: Apache/2.2.3 (Debian)
Last-Modified: Mon, 01 Sep 2008 10:03:43 GMT
ETag: "10a0343-396-b7dc3dc0"
Accept-Ranges: bytes
Content-Length: 918
Connection: close
Content-Type: text/html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
...
\caption{HTTP によるサーバの返答}

HTTP バージョン 1.0 では、次のような単純なプロトコルを使用します。 利用者はサーバに対して TCP ポート 80 番にアクセスします。 そして、一行目に HTTP のメッセージを送り、その後に電子メールと同様のメッ セージを付けます。 メッセージの書式は「コマンド サーバ上のリソースの位置 HTTPのバージョ ン名」となります。コマンドには GET、HEAD、 POST があります。 その際、単純にリソースを取り出すだけなら、空のメッセージを送ると言う意 味でヘッダもボディも空を表す空行二つを送ります。 例えば、 http://www.c.dendai.ac.jp/ の情報を取り出すには、 www.c.dendai.ac.jp という名前のサーバの TCP 80 番のポートにアクセス し、次のメッセージを送ります。 「GET / HTTP/1.0 『改行』『改行』」 すると図 \ref{server}のような返答が返ってきます。

この一行目が状態を表す行で、「プロトコルバージョン名 状態番号 状態」が ひとつの空白で区切られてきます。

そして、二行目から空行までがヘッダ部分で、日付、サーバ名、更新日時な どドキュメントのメタ情報が書かれています。 そして、最初の空行以降がドキュメントの内容で、この場合は HTML 文書になっ ています。

状態番号には、正常を表す 200 番台、利用者側のエラーを示す 400 番台、サー バー側のエラーを示す 500 番台などがあります。

1-5. HTML

HTML は SGML を使って作られた Hyper Text 用のマークアップ言語です。 マークアップとは文書をコンピュータで処理するため、文書に印 (タグ)をつけることです。

SGML は汎用の「マークアップ言語」作成言語です。 SGML に DTD(Document Type Definition 文書型定義)と呼ばれる、タグが文書のどのような要素を指すかと いう 定義を一つ与えると、一つのマークアップ言語が作られます。 HTML も SGML に HTML を定める DTD を与えることで定まるマークアップ言語 です。 2018 年現在、有効な HTML のバージョンには 4.01 Strict, 4.01 Transitional, 4.01 Frameset, HTML 5 があります。 さらに、後継の XHTML 1.0 Strict, 1.0 Transitional, 1.0 Frameset , XHTML 1.1, XHTML Basic があります。 これらは全て HTML 4.01 を基礎として作られています。 4.01 Transitional と 4.01 Frameset は、従来のブラウザ戦争の名残りとして、 行儀の悪いさまざまな要素を取り込んだ移行用の仕様です。

なお、本資料では実用上最小限の事項のみしか説明してません。 HTML 4.01 Strict を使いこなすためには詳しい資料を別途御覧下さい。

なお、2014年に仕様が勧告された HTML5 には、 現行の HTML 4.01 に比べて次のような特徴を持ちます。

  1. 従来は SGML のアプリケーションという立場を取っていたが、 HTML 5 は HTML 4.01 と互換性を持ちながら、独自の文法を持つ
  2. DOM の機能を重視している
  3. MathML なども使用できる

HTML5の資料は実は膨大です。 HTML5はHTML 4.01 と互換性を考えて策定されていて、さらに HTML4.01は廃止 されないため、 HTML 4.01 を覚えても無駄にはならず、基礎になり得ます。

また、さらに HTML5 で積み残した仕様を組み込むため HTML5.1 が現在策定さ れています。

HTML 文書の基本構造


\caption{要素とタグ}

SGML関連のマークアップはドキュメントにタグをつけることで情報を構造化し ます。 このとき、 要素(Element) は開始タグ内容(Content) と 終了タグ の三要素からなっています。 開始タグは <要素名>で表します。 内容は要素ごとに定められます。 終了タグは </要素名 で表します。 また、属性値を指定する時は、開始タグ内に <要素名 属性名="値"> という形で指定します。 以上をまとめると、図のようになります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
...
</html>
\caption{HTML 文書の基本}

HTML ドキュメントも SGML ドキュメントです。 SGML ドキュメントはタグにどのような定義があるかの定義部と、実際にドキュ メントにタグを付けて要素として列挙した部分に分かれます。 但し、タグの定義は HTML 4.01 など仕様が決定している場合は一意に定めら れています。 それを示すため、文頭に SGML の DTD 宣言を書き、その後に要素を並べます。

HTML 文書は DTD 宣言とひとつの html 要素から構成されます。

なお、SGML では <!-- と --> の間にコメントを書くことが できます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
...
</head>
<body>
...
</body>
</html>
\caption{HTML 文書の基本2}

各要素の含むことのできる内容は各要素ごとに決められています。 html 要素は内容としてただひとつの head 要素とただひとつの body 要素を 含みます。

なお、" " は通常の空白を表します。漢字と同じ幅の空白ではありませんので注 意して下さい。

次節以降で基本的な要素を紹介します。 なお、 html ドキュメントが日本語で書かれている場合は lang オプションに ja を指定します。

head 要素が内容として含める要素

meta

meta 要素は body 要素の内容に書かれているドキュメントに関 する情報(メタ情報を設定します。例えば、本文が使用している漢字コー ドなどはメタ情報になります。 meta 要素は内容を含みません。また終了タグは省略できます。

meta 要素は文字コードの設定に必要です。 Shift\_JIS コード(Microsoft 漢字コード) を指定するには次のように設定し ます。このように内容、終了タグは指定しません。

<meta http-equiv="content-type" 
	content="text/html;charset=Shift_JIS">
title

title 要素はドキュメントの題名を指定します。 HTML 文書では必ずひとつの title 要素が必要となります。 title 要素のない HTML 文書は文法上誤りと言うことになります。

link

link 要素は他の情報源とのつながりを記述します。 内容は指定しません。また終了タグは省略できます。 スタイルシートを指定するには次のようにします。

<link rel="stylesheet" type="text/css" href="/default.css">
style

スタイルシートを HTML 文書の head 要素に含めるために使用します。 type オプションで text/css を必ず指定します。 本資料では、 CSS の説明の都合上一つのファイルで説明を完結するために使 用しますが、style 要素の代わり link 要素を使って CSS は別ファイルに書 くことを勧めます。

要素名終了タグ内容
meta省略可指定しない
title必要必須
link省略可 指定しない
style 必要 CSS
\caption{head 要素が内容として含むことのできる要素(ブロック要素)}

body 要素の内容として含むことのできる要素

body 要素の内容には、複数のブロック要素を含むことができます。 ブロック要素として代表的なものを説明します。

p

p 要素は段落を意味します。 内容にはインライン(テキスト)要素を複数含むことができます。 終了タグは省略可能です。

h1,h2,h3,h4,h5,h6

hn (n=1...6) 要素は見出しを意味します。数字はレベルを表し、 h1 が最上位、 h6 が最下位を表します。 h1 のすぐ下のレベルには h2、 h2 のすぐ下のレベルには h3 となるよう、レベルを連続して使うよう推奨さ れています。 内容はインライン要素を複数含むことができます。 終了タグは必須です。

blockquote

blockquote 要素は引用を表します。内容としては複数のブロック要素を含む ことができます。

ul, ol

ul, ol 要素は箇条書を表します。 ul は単なる列挙、ol は番号付の列挙にな ります。内容は li 要素のみを複数含むことができます。

dl

dl 要素は要素名と定義の記述のリスト(定義リスト)を表します。内容 には項目名を表す dt 要素と定義の記述を表す dd 要素のみを複数含 むことができます。

div

div 要素は意味がありません。これは文書の構造には意味づけをせず、 CSS でスタイルを与えたい時などに使用します。 内容にはインライン要素あるいはブロック要素を複数含むことができます。

hr

hr 要素は水平線を表します。内容を含むことはできません。終了タグを省略 できます。

pre

pre 要素は、与えられた内容の改行や空白を無視せずに、文字を等幅に表示し ます。 これは空白などで整形されたテキストを表示するのに使います。 内容にはインライン要素のうち img, big, small, sub, sup など等幅フォン トの指定に沿わない要素以外を使用できます。

address

address 要素はドキュメントに対する連絡先を示すものです。 内容はインライン要素で、終了タグは省略できません。

table

table 要素は表を表すものです。終了タグは省略できません。内容には 0 個または 1 つの caption 要素、 0 個以上の col または colgroup 要素、 0 個または 1 つの thead 要素と tfoot 要素、そして、 1 個以上の tbody 要素を含みます。 これらの要素に関しては節を改めて説明します。

table 要素には表の見栄えに関してさまざまなオプションを設定できます。 border オプションは外枠の太さを指定するオプションで、 border="1" などと指定すると表の枠が表示されます。

\caption{ブロック要素}
要素名終了タグ内容
p省略可インライン
hn必要インライン
blockquote必要ブロック
ul, ol必要li 要素
dl必要dt, dd 要素
div 必要 ブロック、インライン
hr 禁止 指定しない
pre 必要フォントに影響しないインライン
address必要 インライン
table必要caption, col, colgroup, thead, tfoot, tbody

インライン要素

文字

文字はインライン要素です。但し、ここで言う文字とは SGML で #PCDATA と呼ばれる文字のことです。 基本的には、通常の文字はそのまま書いて構いません。 しかし、タグを文章に入れるため に、特殊な記号はそのまま書けない決まりになっています。 <, >, &, " などはそのまま書かず、 &lt;、 &gt;、 &amp;、 &quot; と書く必要があります。

また、改行、タブ、空白文字の連続は、基本的にはひとつの空白とみなされま す。但し、タグの直後の改行のみ無視されます。

em, strong, dfn

em, strong 要素は強調を表します。 dfn は用語の定義を表します。 内容はインライン要素です。終了タグは省略できません。

sup, sub

sup 要素は上付、 sub 要素は下付の文字を意味しています。内容はインライ ン要素です。終了タグは省略できません。

span

span 要素には意味がありません。スタイルシートなどと組み合わせて使いま す。内容はインライン要素です。終了タグは省略できません。

a

a 要素はハイパーリンクを作るのに使います。内容は a 要素以外のインライ ン要素です。ですから、a 要素の内容に a 要素を入れること、すなわち入れ 子はできません。また終了タグは省略できません。

オプションの href に URI を指定します。 また、 name オプションに値を設定すると URI で # をつけた形で文書の途 中の位置を示すことができます。 例えば、 http://a/b.html という文書中に <a name="c">ここに注目</a> と書くと、http://a/b.html#c でこの文書中の「ここに注目」という場所を 指すことができます。 但し、この name オプションは XHTML 1.1 では廃止されます。XHTML では任意の開始タグに id オプションを指定するこ とになっています(但し、対応しているブラウザは少ない)。

img

img 要素は画像を読み込みます。内容を含むことはできません。終了タグは禁 止されています。 src オプションに画像の URI を指定します。また、 width 、 height オプショ ンに画像の横、縦のピクセル数を与えます。 alt オプションには、画像が表示できない時のための文章を与えます(必須)。

br

br 要素は強制改行を意味します。内容を含むことはできません。終了タグは 禁止されています。

big, small, b, i, tt

これらはフォントの表示に関わるものです。 廃止はされてませんが、本来はスタイルシートで指定するものです。 したがって、使うことは推奨されていません。 big, small 要素は内容を大きく、または、小さくする意味があります。 b, i, tt はそれぞれ、ボールド体、イタリック体、テレタイプの字体で表示 することを意味しています。

要素名終了タグ内容
文字データなしなし
em, strong, dfn必要インライン
sup, sub 必要 インライン
span必要 インライン
a必要a 以外のインライン
img 禁止 指定しない
br 禁止 指定しない
big, small, b, i tt必要インライン
\caption{インライン要素}

リスト(ol, ul, dl) の内容

li

li 要素はリストの要素を表します。 ul では要素を表すため・などが補われ、 ol では自動的に番号が付けられま す。 内容はブロック、または、インラインを含むことができます。 終了タグは省略できます。

dt

dt 要素は定義リスト dl の内容として、定義語を示します。 内容はインラインを含むことができます。 終了タグは省略できます。

dd

dd 要素は定義リストでの定義の意味を表す要素です。 内容はブロック、または、インラインを含むことができます。 終了タグは省略できます。

要素名 終了タグ 内容
li省略可能 インラインまたはブロック
dt 省略可能 インライン
dd 省略可能 インラインまたはブロック
\caption{リストの内容}

caption

caption 要素は表に題名を与えます。内容はインラインを含むことができます。 終了タグは必須です。

colgroup,col

colgroup, col は縦列のグループ化に使う要素です。colgroup は col 要素の みを含むことができます。 col 要素は内容を含まず終了タグは禁止されてい ます。col ひとつで縦列ひとつに対応します。col や colgroup ごとに class などを指定できます。

thead, tfoot, tbody

thead は表の最初の部分、 tfoot は表の最後の部分、 tbody は表の本体部分 を意味する要素です。 表示される時は、 tfoot 部分が最後に表示されますが、HTML 文書では tfoot は tbody より先に書く必要があることに注意して下さい。 内容は tr 要素を複数含むことができます。 終了タグは省略できます。

tr

tr 要素は表の行を表します。内容は th または td 要素を含むことができま す。 終了タグは省略できます。

th, td

th 要素は表の見出しを表し、 td 要素は表の内容を表します。 内容はインラインまたはブロックを含むことができます。 終了タグは省略できます。

要素名 終了タグ 内容
caption必要 インライン
colgroup 省略可能 col 要素
col 禁止 指定しない
thead, tfoot, tbody 省略可能 tr 要素
tr 省略可能 th, td 要素
th, td 省略可能 インラインまたはブロック
\caption{テーブルの内容}

マークアップの実際

文書を実際に HTML 4.01 Strict を使ってマークアップすることを考えましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type"
	 content="text/html; charset=Shift_JIS">
<title></title>
</head>
<body>

</body>
</html>
\caption{HTML 文書の必須部分}

まず、HTML で必ず書かなければならない DTD 宣言などはあらか じめファイルに保存しておくとよいです。

さて、HTML 文書では body 要素にはブロックしか含むことができません。 つまり、単純に body 要素に文字を入れていくことができません。 そこで、実際の文書をブロックに分割していくことを考えます。 見出し、段落、箇条書、表などです(なお、画像はブロックでないので要注意 です)。 そして、その構造を示すようにマークアップしていきます。 ここで注意しなければならないのは、構造を考えるにあたって、見栄えや見か け上の改行などに気をとられてはいけないことです。強制改行を意味する br 要素が必要なことは滅多にありません。

商品申し込みフォーム

以下の手順に沿って注文して下さい。
1. お客様のお名前、性別、年齢を入力して下さい。
2. 支払方法をお選び下さい。(0:現金 1:visa 2:mc 3:amex)
3. 商品名、単価、個数を入力して下さい。
4. 最後に submit ボタンを押して下さい。
  
\caption{サンプルテキスト}
商品申し込みフォーム ←(見出し)

以下の手順に沿って注文して下さい。 ←(本文、段落)
1. お客様のお名前、性別、年齢を入力して下さい。  ←(番号付箇条書)
2. 支払方法をお選び下さい。(0:現金 1:visa 2:mc 3:amex)
3. 商品名、単価、個数を入力して下さい。
4. 最後に submit ボタンを押して下さい。
\caption{文章構造の分析}

では、例として図 のドキュメントを御覧下さい。 このドキュメントの構造を考えます。 まず、一行目は表題です。そして、次の行は空行ですが、これは見栄え上あるもので あって、この空行が無くなってもドキュメントの意味や構造は変わりません。 従って、 HTML ドキュメントを作る上では特にマークアップの対象ではありま せん。 3 行目は文章になってます。ここでは文章は一行のみですが、これで一つの段 落を形成しています。 そして、 4 行目以降は番号付の箇条書になっています。 構造の分析結果を図 に示します。

商品申し込みフォーム ←(h1 要素)

以下の手順に沿って注文して下さい。 ←(p要素)
1. お客様のお名前、性別、年齢を入力して下さい。  ←(ol 要素、各項目は li 要素)
2. 支払方法をお選び下さい。(0:現金 1:visa 2:mc 3:amex)
3. 商品名、単価、個数を入力して下さい。
4. 最後に submit ボタンを押して下さい。
\caption{HTML 要素の明示}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type"
	 content="text/html; charset=Shift_JIS">
<title>商品申し込みフォーム</title>
</head>
<body>
<h1>商品申し込みフォーム</h1>
<p>
以下の手順に沿って注文して下さい。
</p>
<ol>
<li>お客様のお名前、性別、年齢を入力して下さい。</li>
<li>支払方法をお選び下さい。(0:現金 1:visa 2:mc 3:amex)</li>
<li>商品名、単価、個数を入力して下さい。</li>
<li>最後に submit ボタンを押して下さい。</li>
</ol>
</body>
</html>
\caption{例文のマークアップ}

さて、この分析をもとに HTML ドキュメントを作ります。 まず、 HTML ドキュメントに不可欠な title ですが、これは見出しをそのま ま利用して「商品申し込みフォーム」とすることにします。 一方、上の分析により見出し、段落、箇条書という構造を見出しましたが、こ れは HTML では h1 要素、 p 要素、 ol 要素にあたります(図 )。 また、箇条書の各要素は li 要素になります。 これをもとに作った HTML ドキュメントは図 になります。

1-6. 演習

HTTP の演習を行います。 Tera Term を使って、Web サーバに TCP 接続を試みます。

以下の手順により WWW サーバから情報を取り出しなさい。

  1. Tera Term を起動します。 起動後の接続の画面では図 のようにサーバのアドレス 172.31.1.1 とプロトコル telnet とポート番号 80 を指定します。
    接続
    (telnet をマークしてから、 TCP ポートを入力する) \caption{接続}
  2. 次に、設定メニューから端末を選び、出力改行コードを CR+LF に、漢 字コードを SJIS に、ローカルエコーに設定します
    端末
    \caption{端末}
  3. さらに、設定メニューから TCP/IP を選び、「自動的にウィンドウを閉 じる」のチェックを外します(図tcpip)。
    TCPIP
    \caption{TCP/IP の設定}
  4. 空のウィンドウに 「GET /index.html HTTP/1.0↓↓」と打ちます(↓は Enter キーを表しま す)。大文字、小文字は区別 されますので注意して下さい。 なお、入力した文字は画面に表示されません。
  5. サーバからメッセージが送られてきて接続が切られます。
接続例
\caption{接続例}

この実験により、ブラウザに URI を入力して、HTML のドキュメントが得られ るまでに、ブラウザが URI をどのように解釈してサーバにアクセスしている か、流れを説明しなさい。

なお、最初のステータスコードが 200 で無い場合は入力ミスなどを起こして いますので、正しい結果が得られるまでやり直して下さい。


坂本直志 <sakamoto@c.dendai.ac.jp>
東京電機大学工学部情報通信工学科