0.はじめに

伝えたいこと

telnetでHTTPのやりとりを確認
GET,POSTの違い

前提知識

応用技術者試験レベルのネットワーク知識
- プロトコル
- ポート番号
HTMLの基本的なタグ
- aタグ

参考図書

『Webを支える技術
～HTTP、URI、HTML、そしてREST～』技術評論社

『Real World HTTP～歴史とコードに学ぶインターネットとウェブ技術～』O'Reilly

3分間 Net Working

目次

1. HTTP, URIの概要

Webを支える技術

WWWは、次の3つの要素からなります。

URI(Uniform Resource Identifier)：データはどこにあるか？

HTTP(Hypertext Transfer Protocol)：データはどうやって手にいれるか？

HTML(Hypertext Markup Language)：データはどうやって表現するのか？

この3つは、誕生から20年を経た今も、整理整頓はされど、まったく変化していません。

※ 『Web開発の基礎』P3 引用

HTML, URI, HTMLの関係
※ http://gihyo.jp/magazine/wdpress/plus/978-4-7741-4204-3/0002 引用

HTTPを学ぶことについて

Webシステムでできること/できないことが分かる
新しい技術がたくさん出てくる中で、陳腐化しない技術を学ぶことは無駄ではない

HTTPとは

Hypertext Transfer Protocol（ハイパーテキスト・トランスファー・プロトコル、略称 HTTP）とは、HTMLなどのコンテンツの送受信に用いられる通信プロトコルである。主としてWorld Wide Webにおいて、WebブラウザとWebサーバとの間での転送に用いられる。ハイパーテキスト転送プロトコルとも呼ばれる。

※ Wikipedia HTTP 引用

HTTPの歴史

1990年：HTTP/0.9
1996年：HTTP/1.0
1997年：HTTP/1.1
2015年：HTTP/2

URIの基本構文

http://blog.example.jp/entries/1

URIスキーム：http
ホスト名：blog.example.jp
パス：/entries/1

URIのポート番号

http://blog.example.jp:8080/entries/1

ポート番号：8080

ポート番号がない場合は、スキームのデフォルトのポート番号として扱われる。スキームはhttpで、HTTPのデフォルトポート番号(well-known port numbers)は、80。

URIのクエリパラメータ

http://blog.example.jp/entries/1?safe=off&q=test

クエリパラメータ：safe=off&q=test

名前=値の形式で、&で区切る。
クライアントからサーバにパラメータを渡すのに使われる。
(例) Google検索の検索キーワードなど。を渡すときなどに使われる。

「http」で検索したときのURI
https://www.google.co.jp/search?safe=off&q=http&oq=http&…

「クエリ文字列」とも呼ぶ。

telnetでHTTPのやりとりを確認

telnet

Telnet（テルネット Teletype network）とは、汎用的な双方向8ビット通信を提供する端末間およびプロセス間の通信プロトコルである。
より具体的には、IPネットワークにおいて、遠隔地（リモート）にあるサーバを端末から操作できるようにする仮想端末ソフトウェア（プログラム）、またはそれを可能にするプロトコルのことを指す。

※ Wikipedia telnet 引用

サーバと直接対話ができるコマンド。
ブラウザが送信/受信していることを、素手で確認してみよう！

環境構築

IISのインストール：http://www.wannko.net/windows10/iis/iis_00.html
IISにWebサイトを追加。https://creativeweb.jp/personal-site/web-site/
- 以下のhello.htmlを追加
- http://localhost/hello.htmlにアクセスできることを確認
teratermのインストール. teraterm上でtelnetを使う。

hello.html

<!DOCTYPE html>
<html>
<body>
Hello
</body>
</html>

teratermの設定

新しい接続
- ホスト: local
- TCPポート: 80
- サービス：Telnet
端末の設定
- 改行コード(受信)： CR+LF
- 改行コード(送信)： CR+LF
- ローカルエコー：ON
TCP/IPの設定
- 自動的にウィンドウを閉じる：ON

http://blog2.k05.biz/2013/10/tera-term-web-site.html 参考

telnetでHTTPリクエスト

ブラウザがhttp://localhost/hello.htmlにアクセスしたときの動作を、telnetで確認する。

リクエスト

クライアントがリクエストをサーバに送る。
※最後に改行が必要

GET /hello.html HTTP/1.1
HOST:localhost

レスポンス

サーバからレスポンスがクライアントに返る。

HTTP/1.1 200 OK
Content-Type: text/html
Last-Modified: Wed, 19 Jul 2017 16:04:17 GMT
Accept-Ranges: bytes
ETag: "cdf9b2aca80d31:0"
Server: Microsoft-IIS/10.0
Date: Wed, 19 Jul 2017 16:10:57 GMT
Content-Length: 56

<!DOCTYPE html>
<html>
<body>
Hello
</body>
</html>

リクエストメッセージ

リクエストライン

1行目がリクエストライン。

GET /hello.html HTTP/1.1

メソッド：GET
- 他にはPOST, PUT, DELETEなどがある
リクエストURI：/hello.html
プロトコルバージョン：HTTP/1.1

リクエストヘッダ

2行目以降。
「名前:値」という形式。
付加的な情報を表現する。

HOST:localhost

リクエストボディ

今回の例では存在しない。

レスポンスメッセージ

ステータスライン

1行目がステータスライン。

HTTP/1.1 200 OK

プロトコルバージョン：HTTP/1.1
ステータスコード：200
テキストフレーズ：OK

レスポンスヘッダ

2行目から空行まで。
形式はリクエストヘッダと同じ。

Content-Type: text/html
Last-Modified: Wed, 19 Jul 2017 16:04:17 GMT
…

レスポンスボディ

空行以降。

HTMLなど、コンテンツの中身。
画像ファイルなどバイナリデータもOK。

ステータスコード

3ケタの数字。先頭の数字によって分類される。

1xx：処理中
2xx: 成功
3xx：リダイレクト
4xx：クライアントエラー
5xx：サーバエラー

※Wikipedai HTTPステータスコード参考

[私見]覚えておいてほしいコード

200：OK
304：Not Modified
403：Forbidden：アクセス禁止
404：Not Found
500：Internal Server Error

[補足] ジョークのステータスコード

「418」は「I'm a teapot」というジョークのコード。

ジョークRFCのひとつ。

Form要素でGET,POSTメソッドを確認

<!DOCTYPE html>
<html>
<body>
<form action="/" method="GET">
  <input name="country" placeholder="country">
  <input name="location" placeholder="location">
  <input type="submit" >
</form>
</body>
</html>

name属性の値
value属性の値
クエリ文字列 or リクエストボディ

付録

Refereの綴り間違い