【社内勉強会】HTTPの基礎 (2017/07/20) 作成中


# 0.はじめに

------------------
## 伝えたいこと
* telnetでHTTPのやりとりを確認
* GET,POSTの違い


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



------------------
## 参考図書

![webを支える技術.jpg](https://qiita-image-store.s3.amazonaws.com/0/37903/9fc0ff49-d2ce-3e68-ad6d-e5c245d18df0.jpeg)
[『Webを支える技術
～HTTP、URI、HTML、そしてREST～』技術評論社](https://gihyo.jp/magazine/wdpress/plus/978-4-7741-4204-3)


![real world http.jpeg](https://qiita-image-store.s3.amazonaws.com/0/37903/205b40b6-99df-d987-0c29-f589dc2bc870.jpeg)
[『Real World HTTP～歴史とコードに学ぶインターネットとウェブ技術～』O'Reilly](https://www.oreilly.co.jp/books/9784873118048/)

[3分間 Net Working](http://www5e.biglobe.ne.jp/aji/3min/)

------------------
## 目次


------------------
# 1. HTTP, URIの概要


------------------
## Webを支える技術

> WWWは、次の3つの要素からなります。
> * URI(Uniform Resource Identifier)： データはどこにあるか？
> * HTTP(Hypertext Transfer Protocol)： データはどうやって手にいれるか？
> * HTML(Hypertext Markup Language)： データはどうやって表現するのか？
> 
> この3つは、誕生から20年を経た今も、整理整頓はされど、まったく変化していません。

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



![http_uri_htmlの関係.jpg](https://qiita-image-store.s3.amazonaws.com/0/37903/d700d52d-0750-1194-9129-fe32406eefbc.jpeg)
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](https://ja.wikipedia.org/wiki/Hypertext_Transfer_Protocol) 引用

### HTTPの歴史
* 1990年：HTTP/0.9
* 1996年：HTTP/1.0
* 1997年：HTTP/1.1
* 2015年：HTTP/2



-------------------
## URIの基本構文

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

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

-------------------
### URIのポート番号

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

* ポート番号：8080

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

-------------------
### URIのクエリパラメータ

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

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

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

```txt
「http」で検索したときのURI
https://www.google.co.jp/search?safe=off&q=http&oq=http&…
```
「クエリ文字列」とも呼ぶ。


-------------------
# telnetでHTTPのやりとりを確認

------------------
## telnet

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

※ [Wikipedia telnet](https://ja.wikipedia.org/wiki/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を使う。

```html: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で確認する。

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

```txt
GET /hello.html HTTP/1.1
HOST:localhost

```

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

```txt
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行目がリクエストライン。

```txt
GET /hello.html HTTP/1.1
```

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

### リクエストヘッダ
2行目以降。
「名前:値」という形式。
付加的な情報を表現する。

```txt
HOST:localhost
```

### リクエストボディ
今回の例では存在しない。


------------------
## レスポンスメッセージ

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

```txt
HTTP/1.1 200 OK
```

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

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

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

### レスポンスボディ
空行以降。

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


------------------
## ステータスコード
3ケタの数字。先頭の数字によって分類される。

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

※[Wikipedai HTTPステータスコード](https://ja.wikipedia.org/wiki/HTTP%E3%82%B9%E3%83%86%E3%83%BC%E3%82%BF%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89) 参考

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

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

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

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

[ジョークRFC](http://www.wdic.org/w/WDIC/%E3%82%B8%E3%83%A7%E3%83%BC%E3%82%AFRFC)のひとつ。


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

```html
<!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の綴り間違い