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

本日の内容

1-1. この講義について
1-2. WWWの要素
1-3. URL
1-4. HTTP
1-5. HTML
1-6. 演習

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

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

情報の安全・安心工学

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

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

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

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

1〜5回では、コメント集約システム tduitterを使用します。指示に従って、コメントをしてください。毎回一個以上のコメントをしてください。平常点としてカウントします。

なお、Linux を使いますが、参考書として LPI-Japan Linux標準教科書(ver.2.0.0) を使用します（現バージョンの一個前です）。

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

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

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

授業の受け方

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

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/ というパスの情報を取り出します。

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 に比べて次のような特徴を持ちます。

従来は SGML のアプリケーションという立場を取っていたが、 HTML 5 は HTML 4.01 と互換性を持ちながら、独自の文法を持つ
DOM の機能を重視している
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 と呼ばれる文字のことです。基本的には、通常の文字はそのまま書いて構いません。しかし、タグを文章に入れるために、特殊な記号はそのまま書けない決まりになっています。 <, >, &, " などはそのまま書かず、 <、 >、 &、 " と書く必要があります。

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

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 サーバから情報を取り出しなさい。

Tera Term を起動します。起動後の接続の画面では図のようにサーバのアドレス 172.31.1.1 とプロトコル telnet とポート番号 80 を指定します。

(telnet をマークしてから、 TCP ポートを入力する) \caption{接続}
次に、設定メニューから端末を選び、出力改行コードを CR+LF に、漢字コードを SJIS に、ローカルエコーに設定します

\caption{端末}
さらに、設定メニューから TCP/IP を選び、「自動的にウィンドウを閉じる」のチェックを外します(図tcpip)。

\caption{TCP/IP の設定}
空のウィンドウに「GET /index.html HTTP/1.0↓↓」と打ちます(↓は Enter キーを表します)。大文字、小文字は区別されますので注意して下さい。なお、入力した文字は画面に表示されません。
サーバからメッセージが送られてきて接続が切られます。

\caption{接続例}

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

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

坂本直志 <[email protected]>
東京電機大学工学部情報通信工学科

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