情報通信システム論b
World Wide Web の技術要素
•	コンテンツの記述言語：HTML
　
•	Webサーバのアドレス・場所：URL

•	通信プロトコル：HTTP

HTML（Hyper Text Markup Language）
•	W3C (World Wide Web　Consortium) が標準化を推進
•	WHATWG （Web Hypertext Application Technology Working Group） 
   業界団体．Apple, Mozilla, Opera (2004)
　
•	SGML (Standard Generalized Markup Language) がベース
　　－マークアップ言語：特定文字で文章の論理構造を表す

•	Webページﾞをテキストファイルとして作成

•	文章=要素（ｴﾚﾒﾝﾄ）の集合 
            /  ヘッダ部 + ボディ部　
	　　　要素：　開始タグ　+　内容（コンテント）+　終了タグ　
HTMLの展開
SGML - HTML …- HTML5(WHATWG) – HTML Living Standard
          - XML         
WHATWG : Apple, Mozilla, Opera

・XML (eXtensible Markup　Language): 論理構造を持つ,  テキスト型のデータ形式を定義する。曖昧な記述が削除されコンピュータ処理がより容易

参考）データ記述方式
　  XML, JSON, YAML, TOML

HTML
　要素：　開始タグ　+　内容（コンテント）　+　終了タグ　
　
<html>  (親要素）
     <head>　（html の子要素）
　　　　　ヘッダﾞ部（タイトルなど，headの子要素）　　       　　　　　　　　
      </head>
       <body> 　（html の子要素）
　　　　　ボディ部（見出しなど， bodyの子要素）
       </body>
　</html>
記述例
URL
(Uniform Resource Locator)
ｈｔｔｐ：//www.hogebar.jp:80/abc/index.html
   http ：プロトコル    
   www.hogebar.jp  : FQDN（Case Insensitive）
　 80 : ポート番号 (省略可）
   /abc/index.html :　（ドキュメントルート）/ディレクトリ名/ファイル名

参考
URI  =  URL + URN
    URI :  世の中のすべてのリソースを識別する．
    URL： 位置を示す． URN： 名前を示す．

　  UUID： 世の中のすべてのリソースを識別するためのID
       １２８bit   例）GUID: 6fc39073-84d7-4aa9-8299-7965c89aae3b
　
　
HTTP
(Hyper Text Transfer Protocol)
•	初期のWWWシステム
Webブラウザ　-- リクエスト　-- Webサーバ
Webブラウザ -- レスポンス -- Webサーバ

行って（リクエスト），返って（レスポンス），それで終わり. Simple is Best!

HTTP
•	HTMLで記述したドキュメントを送受信する為のプロトコル　　
•	テキストベース   
•	ステートがない１回ごとの転送（1リクエストに1レスポンス）
但し持続型接続（TCP/IPは維持，HTTP1.1で標準化）もある

HTTPの問題点
問題点
–	セッションの概念が無い
–	通信内容が第3者に見られてしまう
–	サーバに負荷が掛かる
–	常に問い合わせは，クライアントから
•	Cookie 
•	HTTPS
•	クライアント側スクリプト（Java Script）
•	WebSocket

HTTPの発展
•	Cookie
 サーバから整理券（クッキー）をブラウザに渡す
 ブラウザは次以降の接続時に整理券（クッキー）をサーバに渡す

Cookie は書き換え可能なので，通常はランダムな文字列を渡し，その内容をサーバ側で管理する

HTTPの発展
•	クライアント側スクリプト
 サーバからプログラムををブラウザに渡す．
ブラウザでプログラムを実行
•	サーバの仕事量が減る．
•	クライアント（Webブラウザ）の操作効率も上がる

HTTPの発展
•	WebSocket　（双方向通信）
サーバ側：
いつもWebブラウザの問いかけに答えるだけで不満だ！
こっちからも問いかけしたい．

HTTP
(Hyper Text Transfer Protocol)
初期 → HTTP1.0 → HTTP1.1 → HTTP2 → HTTP3

•	HTTP1.0
–	ヘッダの追加
•	複数のデータが送信可能に．
•	HTML以外のデータ転送．
–	メソッドの追加（GET, PUT, POST, DELETE,…）
•	ほぼ適当な使い方
–	ステータスコード（レスポンス）

•	現在メソッドについて見直しが行われている？
–	REST
HTTP
•	HTTP1.1
–	通信の高速化（Keep- Alive）がデフォルト
–	パイプラインライイング
•	リクエストの送信が完了する前に次のリクエスト送信
–	TLSのサポート
–	チャンクエンコーディング

•	HTTP２
–	バイナリベース
–	ストリーム
•	一つのTCPセッションで複数の通信を行う
–	ヘッダ圧縮

HTTP
•	HTTP3
–	QUICプロトコル
•	QUIC： UDP上に実装．By Google
–	TLS1.3 の必須化
–	新しいヘッダ圧縮方法

HTTPの構造
•	リクエスト（Webブラウザから）の形式　

	リクエストライン　[要求メソッド（GET等）　要求対象　ＨＴＴＰバージョン]　
	ヘッダフィールド部	
		一般ヘッダ フィールド
		リクエストヘッダ フィールド
		エンティティヘッダ フィールド
	空行　　
	メッセージボディ部（テキスト/バイナリデータ）
リクエストメッセージ例
  GET   /index.html  HTTP/1.1　　　　　　
  User-Agent　:　Mozilla/4.0　　　　　　　
  If-Modified-Since　:　Mon,4 Oct 2021 6:15:20 GMT　　　　　　　　　
  Host　:　rsch.tuis.ac.jp　　　　　　　　　　　
　　　　
主なメソッド
•	主なメソッドﾞ（クライアントからサーバへ）
　-　GET：URLで指示されているデータをサーバに要求．（取得）
　　	本来（REST）であれば，同じURLのデータは同じ．キャッシ可能．
　-　POST：サーバにデータを送信する．（作成）
		Body部にデータを格納して送る．結果が変わる（動的なページ）
　-　PUT：サーバ上のデータを更新する．（更新） 
　　　　 Body部にデータを格納して送る．　　
　-　DELETE：サーバ上のデータを削除．（削除）

　-　HEAD：HTTPのヘッダ部分だけを要求． （取得）

                           REST: http://yohei-y.blogspot.com/2005/04/rest_23.html

HTTPの構造
•	レスポンス（Webサーバから）の形式　

	ステータスライン　
		[ＨＴＴＰバージョン　ステータスコード　ステータスメッセージ]　
	ヘッダフィールド部	
		一般ヘッダ フィールド
		レスポンスヘッダ フィールド
		エンティティヘッダ フィールド
	空行　　
	メッセージボディ部（テキスト/バイナリデータ）
レスポンスメッセージ例

   HTTP/1.1  200   OK　　　　　　　　　　　　　　　　
   Date:  Mon, 4 Oct 2021 10:50:20 GMT　
   Server: Apache/2.23　　　　　　　　　　　　　　
   Content-Length:356　　　　　　　　　　　　　　
   Content-Type: text/html　　　　　　　　　　　

  	<html>
	<head>
	……  
</head>
	……

ステータスコードの種類
1xx :暫定: リクエストが受信された事を知らせる。そのリクエストの処理を継続中
2xx: 成功：リクエストが成功　　（例：200 OK）
3xx: リダイレクト：クエストを完了するには追加動作が
必要
4xx: クライアントエラー:リクエストに誤りが含まれているか，指定したサーバではこのリクエストを実行できない　（例：404　Not Found）
5xx: サーバエラー：サーバエラー
サーバが実行に失敗　（例：500　 Internal Server Error）
主なステータスコードの意味
•	200:OK:正常に処理された
•	301:Moved Permanently:新しいURLが割り当てられている
•	304:Not Modified:リクエストの条件が満たされてない
•	404:Not Found:リクエストされた対象（例：ファイル）が存在しない
•	500:Internal Server Error:サーバでエラーが発生した
•	503:Service  Unavailable: サーバﾞが一時的な過負荷や保守の為，リクエストの処理が出来ない　

ヘッダ（1）
•	サーバやクライアントに動作環境を伝えたり，補足的な動作の指示を行う

•	一般ヘッダ
•	クライアントからのリクエストとサーバからのからのレスポンスに使われる

-	主なヘッダ
　 ・ Date：メッセージが生成された日時
		Date:  Mon, 4 Oct 2021 10:50:20 GMT

 	・ Via：メッセージの経路を示す　
　　　	Via : 1.0  Proxy.lab.com
ヘッダ（2）
•	リクエストヘッダ
•	クライアントの情報や希望するデータ形式をサーバに送る

-	主なヘッダ
•	 Accept : サーバに送信してほしいデータタイプを指定
•	 Accept-Charset/Encoding/Language:　
	サーバに文字セット/エンコード方式方法/言語を指定
•	 If-Modified-Since：ＧＥＴと共に使い，指定時間以降変	更がなかった場合，データを送らない
•	 User-Agent：ブラウザのタイプ　　　

ヘッダ（3）
•	レスポンスヘッダ
•	サーバの情報を通知するのに使用  

- 主なﾍｯﾀﾞ
　・ Server：サーバの名前とバージョン
　　　　Server: Apache/2.23　
ヘッダ（4）
•	エンティティヘッダ
•	転送されるデータに関する情報を指定するのに使用

-	主なヘッダ
・ Content-Encoding/Language/Length/Location:
データに適用したエンコード方法/データの言語/データのバイト長/場所
・ Last-Modified:
		サーバ上のデータが最後に変更された日付の通知