第 10 回 WWW

本日の内容

10-1. ワーク
10-2. レポート課題
10-3. 講義

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

10-1. ワーク

ワーク10-1

学内Webサーバへ接続します。

Windows 10

エクスプローラのアドレス欄に ftp://web.term.usmc.dendai.ac.jp/ を入力し、ユーザ名とパスワードを聞かれたら学籍番号と学内共通パスワードを入れると接続される。

Macintosh

AppStore で ftp のクライアントソフトをインストールする。例えば、 FE File Explorer をインストールする。
起動するとアクセスを許可するフォルダを聞いてくる。本日の講義の範囲では「ダウンロード」フォルダのみで十分
「+」ボタンを押して、メディアセンターのWebサービスを追加する。具体的には以下のようにする
1. 「+」ボタンを押す
2. プロトコルの一覧が出るので、FTPを選ぶ
3. 以下の項目を入力する
  
  Host
  
  web.term.usmc.dendai.ac.jp
  
  User Name
  
  学籍番号
  
  Password
  
  共通パスワード
4. Save を押す
接続が成功すると public_html フォルダが見える。もし無かったらpublic_html フォルダを作成する。

iOS, Android

iOS, Android にもFE File Explorer があるので、 Macintosh と同等。ファイルを作成するには、空のファイルをフォルダ内に + ボタンで作成した後、テキストエディタで編集する。但し、最初に Text Encoding を Japanese(Windows Dos)に指定する（何故か、 Shift_jis だとエラーが出る）

ワーク10-2

以下のサンプルページを自分の Web サーバの public_html フォルダにインストールします。

そして、ブラウザで http://web.term.usmc.dendai.ac.jp/~学籍番号/ をアドレスとして与えて、ページが表示されるか、確認しなさい。

なお、漢字コードを必ずShift_jis(またはMS932)にする必要があります。

index.htmlダウンロード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="shift_jis">
<link rel="stylesheet" type="text/css" href="ex.css">
<title>ここはタイトルバーに出ます</title>
</head>
<body>
<h1>タイトル</h1>
<p>これは<em>坂本直志</em>のテストページです。</p>
<h2>メンバー紹介</h2>
<ol>
  <li><a href="http://web.term.usmc.dendai.ac.jp/~1480/">坂本直志</a></li>
  <li><a href="http://web.term.usmc.dendai.ac.jp/~1480/">坂本直志</a></li>
  <li><a href="http://web.term.usmc.dendai.ac.jp/~1480/">坂本直志</a></li>
  <li><a href="http://web.term.usmc.dendai.ac.jp/~1480/">坂本直志</a></li>
</ol>
<hr />
<address>
坂本直志 <a href="mailto:[email protected]">&lt;[email protected]&gt;</a>
<br />
東京電機大学工学部情報通信工学科
</address>
</body>
</html>

既に、index.html を使っている人は、任意のファイル名で良い。相互リンクする時には、完全なURLを相手に教えること。

ワーク10-3

以下のサンプルスタイルシートを自分の Web サーバーのpublic_html フォルダにインストールします。そして、再び http://web.term.usmc.dendai.ac.jp/~学籍番号/ にアクセスしてどのように表示されるか確認しなさい。

ex.cssダウンロード


@charset "shift_jis";
body{color: black;
	background: lime;
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}
em { color: white;
     text-decoration: underline;
     background: blue;
}
h1, h2 { border-style: solid double groove ridge;
          border-width: 0.5em 1em 2.5em 1.5em;
	  padding: 1.5em 3em 2em 0.5em;
	  margin: 0.5em 1em 2.5em 1.5em;
	  clear:both;
       }
p { border-style: solid;
  }
h1 {
    border-color: darkorange;
    color: black;
    background: gold;
}
h2 {
    border-color: magenta;
    color: white;
    background: darkmagenta;
}
ol {
    background: yellow;
}

ワーク10-4

サンプルで入れたファイルを上書きして、自分のホームページを作成してください。

なお、HTML5 の書式をチェックしたい場合は Another HTML Lint 5 http://www.htmllint.net/en/html-lint/htmllint.html を使うと良い。但し、学内ネットワークのみのサーバのチェックをするには、 Data タブを選択して、HTML を直接貼り付ける必要がある。

10-2. レポート課題

班員同士のリンクが張れたホームページを作り、それぞれのスクリーンショットを班でまとめて提出しなさい。

注意：このWebページサービスは学内ネットワークのみで利用できるので、学外から利用したい場合は VPN 接続をする必要がある。

締切、提出方法

来週の火曜日の夕方までに <[email protected]>宛にグループで一通のレポートを作成し、メールすること。

10-3. 講義

World Wide Web

1989年にティム・バーナーズ＝リーにより発明された World Wide Web は、やがてインターネットのアプリケーションのうちの最も重要な技術となりました。

現代のWWWを支える技術には様々なものがありますが、最初から考案された最も重要な技術は次の3つです。

URL(Uniform Resource Locator)
HTTP(Hyper Text Transfer Protocol)
HTML(Hyper Text Markup Language)

URL

WWWが生まれる前から、ネットワークサービスは様々ありました。後で、説明する FTP を利用したファイルサービスの他、図書館の検索サービスなども実現されていました。しかし、どれも、複数の操作が必要で、サイトごとに使用法をマスターする必要がありました。

URL はネットワーク資源を一つの文字列で表すものです。これにより様々な利用方法を覚えなければならなかった情報サービスが、統一した操作でアクセスできるようになりました。

書式は次のとおりです：

スキーム		ホスト	パス
http	://	web.term.usmc.dendai.ac.jp	/~1480/

WWW が出来た頃は様々なスキームが使えましたが、2019年には Google Chrome では ftp すら廃止の方針となり、事実上、 http と暗号通信である https のみしか使用していません。そのため、近年のブラウザでは、URL表示で「http://」の部分を表示しなくなってきています。

HTTP

Hyper Text Transfer Protocol は TCP を利用したWWWの通信プロトコルです。 1997年に HTTP/1.1 が規定され、長らく使用されてきましたが、 2015年に Google などが開発した HTTP/2 が制定され、さらに 2018年に HTTP/3 が制定されました。

HTTP/1.0 はサーバに対して、「GET パス HTTP/1.0」などのメッセージを送ると、それに対して、ファイルを送り返してくるような一往復の単純なプロトコルでした。しかし、効率が悪いため改良したのが HTTP/1.1 でした。近年、サーバーもブラウザも掌握している Google の元で、より効率の良い方式が開発され、 HTTP/2, HTTP/3 が作られました。

HTML

Hyper Text Markup Language は、もともと、ティム・バーナーズ=リーが論文を共有するために定義したSGMLのアプリケーションです。

ドキュメントの内容と書式を分けて考えるという発想から生まれたのが SGML (Standard Generalized Markup Language)です。 Markup Language とは、ドキュメントの校正用の記法を意味しています。 SGML はこのドキュメントの書式指定の記法として、次のようなタグを付ける手法を一般化したものです。

要素
属性付き開きタグ（要素名）	内容	閉じタグ（要素名）
<見出し name="表題">	HTMLとは	</ 見出し>
<段落>	HTMLは、SGMLに従って作ったWeb用文書の記法です。	</ 段落>

ティム・バーナーズ=リーはSGMLに論文が記述できるように最低限の記法として、h1, h2, ..., h6 の見出し、段落を示す p、箇条書きのための ol, ul, li などを定めました。

その後、ブラウザの発明者であるマーク・アンドリーセンが直接画像を指定する img を加えました。 1990年代半ばには、マーク・アンドリーセンの作った会社であるネットスケープコミュニケーションズ社やマイクロソフトなど、ブラウザの開発に伴い、様々な機能を実現するため、様々なタグが追加されていきました。最終的に1997年にHTML4.0(4.01)が規定されて、このHTMLのタグの混乱に終止符が打たれました。

ブラウザの発展やHTMLの制定時に得た知見から、SGML の改良版として、 XML(eXtensible Markup Language)が1998年に制定されました。 XML はコンピュータの処理を考慮していて、近年のプログラミング言語で自由に使えるようになっています。そして、XML に基づいてHTML4.01が規定され直したのが、XHTML1.0です。さらに、XML の拡張機能などに対応するように改良されたのが XHTML1.1です。

長らく、HTML4.01 とその派生が使われてきましたが、 2014年にHTML5 が制定され、さらに、5.1(2016), 5.2(2017), 5.3(2018) が制定されました。これは、HTML4.01 が長年抱えていた運用上の問題を解決するように、SGML, XML の枠にとらわれない形で定義されなおされたものです。従って、HTML4.01と外見上の互換性は高いですが、考え方は大きく異なるものです。

Webを支えるその他の技術

FTP

FTP(File Transfer Protocol) はファイル転送プロトコルです。 WWW が登場するよりも前から存在し、本来は、UNIX などのサーバとファイルを読み書きするためのプロトコルです。但し、不特定多数の相手にファイルを提供する公衆情報サービスとしても活用されていました。

長らくブラウザはこの FTP の公衆情報サービスに対応していましたが、現在はそれも減ってきたため、2019年にChrome ブラウザは対応を止めることにしたようです。

但し、WWWサーバへのファイルの書込みはHTTPでは出来ないため、現在もFTP は広く活用されています。また、暗号通信を活用した SFTP も使われます。

CSS

CSS(Cascading Style Sheet)は、本文と文書構造を分離するHTMLに対して、さらに文書構造に対して見栄えを指定する技術です。

下記のような書式で要素に対して見栄えを定義することが出来ます。


セレクタ(要素名など) {
    属性: 値;
    属性: 値;
    ...
}
p {
    color: red;
    background: black;
}

その他

その他、WWWのドキュメントをプログラムで操作するために定義されたデータ構造DOMや、それをブラウザから操作するためのプログラミング言語 Javascript があります。さらに、プログラムでWWWドキュメントを作ることを前提としたサーブレット技術があります。

またセキュリティ技術として HTTPS があります。

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