社内勉強会用資料 初心者向け 前回の勉強会で要望があった内容について書いてます。

1. 2017/9/28
佐々木 健
ネットワークの基本について学ぶ
第2回
プロトコル/NAT/HTTP通信の中身

2. この文書について
前回の勉強会で沢山お菓子をもらえて嬉しかったの
ですが、沢山のお菓子がいつの間にか減ってきた
ので、また勉強会をやる気になりました。
前回質問を受けたことに関して説明をする、という
内容になっています。

3. お願い
定時後の勉強会なので気楽に行きましょう。
飲食、雑談は自由にしてください。
みんなであれこれ雑談してくれるほうが私もおやつ
を食べやすいです。
わからないことがあったら遠慮せずに聞いてね。
#beginner-net-study というSlackチャンネルを
作ったので雑談に使ってくださいませ。

4. 本日のタイムスケジュール(予定)
●
参加者の自己紹介(5分)
– 人数が少なかったら全員
– 人数が多かったら近くにいる5人に自己紹介
●
前回のおさらい(5分)
●
本編(15分)
●
質疑(5分)

5. 自己紹介タイム
●
参加者の自己紹介(5分)
– 人数が少なかったら全員
– 人数が多かったら近くにいる5人に自己紹介
●
前回のおさらい(5分)
●
本編(15分)
●
質疑(10分)

6. 前回のおさらい
説明したこと、疑問点のまとめ

7. パケット通信とは何か？
郵便でデータを運ぶイメージ
封筒には、宛先、差出元が書いてある

8. インターネットの基本アイディア
●
データをパケット通信で送る
●
パケットには宛先と差出元を書いておく
●
パケットを受けとった人は各自が適切に判断して
処理をする
●
宛先、差出元はユニーク(世界でひとつだけ)

9. 疑問点1
●
宛先、差出元はユニーク(世界でひとつだけ)
いろいろなところで、同じIPアドレス
を使ってる気がするけど、、、、
192.168.xxx.xxx とか
具体的には
何が書いてあるの？

10. RFC:791
INTERNET PROTOCOL
0 1 2 3
0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|Version| IHL |Type of Service| Total Length |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| Identification |Flags| Fragment Offset |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| Time to Live | Protocol | Header Checksum |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| Source Address |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| Destination Address |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| Options | Padding |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
Example Internet Datagram Header
差出元
宛先
???

11. 今日のお題1
プロトコルって何？

12. そもそも通信とは何か？
●
オブジェクトとオブジェクトが協調動作を行なうための
手段
●
情報をやりとりする
●
なにかを媒体としてやりとりする
●
なんらかの目的があって行なわれる
●
決まった手順、約束事に従って行なわれる

13. そもそも通信とは何か？
●
オブジェクトとオブジェクトが協調動作を行なうための
手段
●
情報をやりとりする
●
なにかを媒体としてやりとりする
●
なんらかの目的があって行なわれる
●
決まった手順、約束事に従って行なわれる
プロトコル

14. (例)ハンバーガーを買いに行こう!!
いらっしゃいませ
ご注文は何になさいますか？
ビッグマックセットで
お飲み物は何になさいますか？
オレンジジュース
600円にいただきます。
スイカで払います
ありがとうございました

15. (例)ハンバーガーを買いに行こう!!
目的:
ハンバーガーや飲み物を買いたい、売りたい
やりとりするもの:
買うもの、値段
媒体:
日本語、音声、空気
手順、約束事:
接客マニュアル、商品メニュー、
日本円決済、電子決済

16. 通信条件が合わないと通信できない
いらっしゃいませ
ご注文は何になさいますか？
(私、セルクナム族!!)
(日本語良くわからない!!)
..........

17. プロトコルの階層構造
日本の社会常識
ハンバーガーの注文
日本語
通信を正しく行なうためには、
その通信を支えるプロトコルを
お互いに理解している必要がある

18. インターネットプロトコルの階層構造
TCP
HTTP
IP
Ethernet
Webを実現するためのHTTPの下には、
TCP、IP、Ethernet等の下位プロトコルがある

19. インターネットプロトコルの階層構造
TCP
HTTP
IP
Ethernet
前回説明したところ

20. 今日のお題2
NATの仕組み

21. インターネットの基本アイディア
●
データをパケット通信で送る
●
パケットには宛先と差出元を書いておく
●
パケットを受けとった人は各自が適切に判断して
処理をする
●
宛先、差出元はユニーク(世界でひとつだけ)

22. 具体的なパケットのイメージ
送信元IPアドレス
src IP
宛先IPアドレス
dest IP
データ

23. 1990年代
●
宛先、差出元はユニーク(世界でひとつだけ)
●
アドレスの数足りなくね？？
●
IPv6でアドレスの数を増やす
●
NAT技術で延命？

24. プライベートIPアドレス
●
プライベートネットワーク（外部から利用できな
い社内LANなど）のアドレスとして使うことがで
きる。
– 10.0.0.0〜10.255.255.255
– 172.16.0.0〜172.31.255.255
– 192.168.0.0〜192.168.255.255

25. NATの考え方
●
自分達の組織の中はプライベートアドレスを使
う。
●
外と通信するときだけグローバルアドレス(ユ
ニークに割り当てられたIPアドレス)を使う。
●
プライベートネットワークとグローバルネットワー
クの繋ぎ目にはルータを配置し、そこでアドレス
の変換を行なう。

26. 良くある構成
IPアドレス
192.168.0.10
ウェブサーバルータ
IPアドレス
192.168.0.1
IPアドレス
198.51.100.1
IPアドレス
203.0.113.1
※ルータは複数のIPアドレスを持っている
クライアントPC
クライアントPCからウェブサーバへの通信を考える
※ルータは複数のIPアドレスを持っている

27. インターネットの基本アイディア(再掲)
●
データをパケット通信で送る
●
パケットには宛先と差出元を書いておく
●
パケットを受けとった人は各自が適切に判断して
処理をする
●
宛先、差出元はユニーク(世界でひとつだけ)

28. 1.クライアントPCから送信
IPアドレス
192.168.0.10
IPアドレス
192.168.0.1
IPアドレス
198.51.100.1
IPアドレス
203.0.113.1
192.168.0.10
data
203.0.113.1

29. 2.ルータが変換テーブルに記録
IPアドレス
192.168.0.10
IPアドレス
192.168.0.1
IPアドレス
198.51.100.1
IPアドレス
203.0.113.1
192.168.0.10
data
203.0.113.1
192.168.0.10 203.0.113.1

30. 3.ルータがアドレスを書き換えて送信
IPアドレス
192.168.0.10
IPアドレス
192.168.0.1
IPアドレス
198.51.100.1
IPアドレス
203.0.113.1
192.51.100.1
data
203.0.113.1
192.168.0.10 203.0.113.1

31. 4.サーバから返信(送信)
IPアドレス
192.168.0.10
IPアドレス
192.168.0.1
IPアドレス
198.51.100.1
IPアドレス
203.0.113.1
203.0.113.1
data
192.51.100.1
192.168.0.10 203.0.113.1

32. 5.変換テーブルと付き合わせ
IPアドレス
192.168.0.10
IPアドレス
192.168.0.1
IPアドレス
198.51.100.1
IPアドレス
203.0.113.1
203.0.113.1
data
192.51.100.1
192.168.0.10 203.0.113.1

33. 6.ルータがアドレスを書き換えて送信
IPアドレス
192.168.0.10
IPアドレス
192.168.0.1
IPアドレス
198.51.100.1
IPアドレス
203.0.113.1
203.0.113.1
data
192.168.0.10
192.168.0.10 203.0.113.1

34. 実際に使われてるNAT
●
この資料で説明した、IPアドレスだけを変換す
る、原始的なNAT(Network Address
Translation)は現在はほとんど使われていない。
●
IPアドレスに加えて、ポート番号の変換を行な
う、NAPT(Network Address Port Transation)
を使うのが普通。今では、NATと言えばNAPTの
ことを指すのが一般的。
●
NAPTの説明は、ポート番号について説明してか
らのほうが良いかな。

35. 今日のお題3
HTTP通信を見てみよう
Webの裏側を覗いてみる

36. Google Chrome の Developer Tools
F12
を押す!!

37. F12を押すとこうなる
Developer Tools(DevTools)

38. Webの中身がいろいろ見れる

39. 今回は通信を見てみる
Networkを押す

40. DMMを見てみよう
URLを入力

41. どどどどっと出力される!!

42. Webページの表示の仕方
●
ブラウザからウェブサーバにHTMLを取りにいく
●
取ってきたHTML情報を元に、さらに必要なデー
タをウェブサーバに取りにいく
●
取ってきたデータを全部組み合わせて表示する
1ページを表示するだけでも、
沢山の通信が発生する

43. 表示エリアの説明
全ての通信の様子
横軸は時間
並列で複数の通信がされている

44. 表示エリアの説明
1つ1つの通信の羅列
ウェブの構成要素毎に通信が
行なわれていることがわかる
クリックすることで各通信の
詳細を確認できる

45. Web通信プロトコル、HTTPの概要
こういう情報ください
こういう情報あげるよ

46. Web通信プロトコル、HTTPの概要
こういう情報ください
こういう情報あげるよ
Request Header
Respons Header
+
データ本体

47. Request/Response Headerを見よう
DevToolsで
要素を選択して
Headersを押す

48. どのぐらい時間がかかっているか
Timingを選べばわかる

49. ゴチャゴチャしてきたら
Clearすれば消えます

50. インターネットプロトコルの階層構造
TCP
HTTP
IP
Ethernet
Chrome WebToolsで見ることができるのは
HTTPだけ

51. インターネットプロトコルの階層構造
TCP
HTTP
IP
Ethernet
全部見るツールもある
↓
Wireshark等

52. Wiresharkのデモ

53. 質疑応答

54. 拾った疑問への回答1
●
講義資料のイラストが手紙っぽい感じだったからボンヤリとEmail
の話なのかと感じていたけど、多分違う。
– うん、違う。
– メールは、SMTP等のメール用のプロトコルについて調べると良いんだけ
どいろいろと複雑なので、まったくもってもはや初心者向き教材にはなら
ないですw
●
差出人の情報はあまり要らないってコトだったけど、何かを送るっ
てことは、送りっぱなしじゃなくてレスポンス欲しいことが多くな
い？なのに不要？
– まったくその通りです。
– レスポンス用に使います。
– 不要ってのは言い過ぎでしたね。

55. 拾った疑問への回答2
●
パケットを「送る」ことばっかり考えていたけど、
「受取る」こともあるよね？具体的に何を行うの
が「送る」で、何が「受取る」なのかな？
– 送信側はパケットを作って送る
– パケットを受けとったら適切に判断して処理する
– 実際の通信においては、双方でパケットを送信しあっ
て、双方で受けとって、うまいことやる感じです。