SlideShare a Scribd company logo
1 of 62
ネットワーク超入門
HTML5勉強会 名古屋#5
2013.06.27 @ A-team
自己紹介
•とある名古屋のSIerで働くSE
•Java(not JavaScript)書いたり、サーバの
面倒見たり...
• twitter →@xyzplus_net
WebPage → http://www.xyzplus.net/
•HTML5とはあまり縁がない
(´・ω・`)
第5回の
テーマ
脱 線
普段の
HTML5
勉強会
http://www.hoge.com/html5.html
今回の
発表
http://www.hoge.com/html5.html
Webページ
を表示
裏 側
おことわり
ネットワーク超入門
HTML5勉強会 名古屋#5
2013.06.27 @ A-team
MACアドレス、TCP、プ
ロキシサーバ、ファイア
ウォール、プロトコル、
ポート番号、3ウェイハン
ドシェイク、DHCP、
NAPT、ARP、and more
カット
超基礎知識 その1
•ネットワーク上のコンピュータと
データのやり取り
IPアドレスが必要
Webページの閲覧、メールの送信、
ネットワークフォルダ、IP通話 ...
IPアドレスの基礎知識
•aaa.bbb.ccc.ddd という表記
(IPv4の場合)
•ネットワーク上の識別番号
•0.0.0.0~255.255.255.255まで存在
(但し、実際に使えるIPアドレスは
ずっと少ない)
•グローバルIPアドレスと
プライベートIPアドレスの2種類
Windowsの場合
Webサーバ(Linux)の場合
http://www.hoge.com/html5.html
IPアドレス
はどこ?
変 換
超基礎知識 その2
•ホスト名 ←→ IPアドレス
の変換
DNSサーバが必要
(Domain Name System)
Windowsの場合
Webサーバ(Linux)の場合
具体例
とあるネットワーク図
www.yahoo.co.jp
???.???.???.???
PC
192.168.0.100
DNSサーバ
192.168.0.11
DNS
サーバへ
問い合わせ
DNSサーバのお仕事
www.yahoo.co.jpのIPアドレス教えて!
あいよ!
IPアドレス変換帳
(やべぇわかんねぇ…)
www.twitter.com ⇔ aaa.bbb.ccc.ddd
www.google.com ⇔ aaa.bbb.yyy.zzz
…(中略)
[End Of File]
知らない
なら?
知っている
サーバに
聞けばいい
DNSの基礎知識
•IPアドレス⇔ホスト名の変換
•階層の頂点(ルートサーバ)から
順次下位のDNSサーバへ
問い合わせる
•変換情報は、大→中→小分類…と
言う具合に、階層単位で保持
[root]
… jp
co
yahoo
mail www
… google
maps www
…
… com
… twitter
… www
DNSの階層
[root]
jp
co
yahoo
www
DNSの階層
www.yahoo.co.jp
DNSの階層
ドメイン名=
ルート
サーバーに
問い合わせ
DNSサーバのお仕事
www.yahoo.co.jpのIPアドレス教えて!
.jpの事ならxx.yy.1.1に聞いてみな!
[root]
… jp org com
xx.yy.1.1
DNSサーバのお仕事
www.yahoo.co.jpのIPアドレス教えて!
.co.jpの事なら
xx.yy.2.10に聞いてみな!
[root]
jp
co.jp ne.jp or.jp …
xx.yy.2.10
xx.yy.1.1
DNSサーバのお仕事
www.yahoo.co.jpのIPアドレス教えて!
yahoo.co.jpの事なら
xx.yy.3.100に聞いてみな!
jp
co.jp
google.co.jp yahoo.co.jp …
xx.yy.3.100
xx.yy.2.10
DNSサーバのお仕事
www.yahoo.co.jpのIPアドレス教えて!
203.216.231.189だよ
jp
co.jp
yahoo.co.jp
mail.yahoo.co.jp www.yahoo.co.jp
203.216.231.189
xx.yy.3.100
DNSサーバのお仕事
IPアドレス変換帳
203.216.231.189だよ!
ありがとう!
www.twitter.com ⇔ aaa.bbb.ccc.ddd
www.google.com ⇔ aaa.bbb.yyy.zzz
…(中略)
www.yahoo.co.jp ⇔ 203.216.231.189
[End Of File]
とあるネットワーク
www.yahoo.co.jp
203.216.231.189
PC
192.168.0.100
DNSサーバ
192.168.0.11
Webサーバのやりとり
宛先:203.216.231.189
本文:
index.html
が見たい!
宛先:192.168.0.100
本文:
<html>
~
</html>
192.168.0.100 203.216.231.189
ネットワーク拡大図
……
…
PC (A)
192.168.0.100
PC (B)
192.168.0.101
……
…
そもそも
ご近所
って?
超基礎知識 その3
•直接データ(パケット)を送る事が
可能な範囲を表す値
サブネットマスク
Windowsの場合
052-123-4567
ネットワーク拡大図
PC (A)
192.168.0.100
PC (B)
192.168.0.101
直接
送れない
なら?
送れる
マシンに
頼む
超基礎知識 その4
•直接送れない宛先(IPアドレス)へ
データ(パケット)を送る際の
受付窓口(=出入口)
デフォルトゲートウェイ
Windowsの場合
超基礎知識 その5
•データ(パケット)の中継役
ルーター
宛先:
本文:
ルーターの基礎知識
•宛先(IPアドレス)を見て中継
•自身が管轄する宛先(IPアドレス)
なら、そのコンピュータへ配達
•管轄しない宛先(IPアドレス)なら、
知っていそうなルーターへ中継
•大抵の場合、
デフォルトゲートウェイ…ルーター
具体例
ルーターのお仕事
宛先:
203.216.231.189
本文:
…
Route-1
203.216.231.*宛 → Route-1
203.216.232.*宛 → Route-2
…
PC
192.168.0.100
ルーターA
(デフォルトゲートウェイ)
ルーターのお仕事
Route-1
203.216.231.*宛 → Route-4
203.216.232.*宛 → Route-3
…
ルーターB
ルーターのお仕事
www.yahoo.co.jp
203.216.231.189
203.216.231.*宛 → 管轄内
203.216.232.*宛 → Route-5
…
ルーターC
とあるネットワーク
www.yahoo.co.jp
203.216.231.189
PC
192.168.0.100
DNSサーバ
192.168.0.11
超おすすめサイト・書籍
•3分間ネットワーキング
http://www5e.biglobe.ne.jp/%257eaji/3min/
•日経NETWORK(雑誌)
http://itpro.nikkeibp.co.jp/NNW/
終html5nagoya

More Related Content

What's hot

ネットワークエンジニアはどこでウデマエをみがくのか?
ネットワークエンジニアはどこでウデマエをみがくのか?ネットワークエンジニアはどこでウデマエをみがくのか?
ネットワークエンジニアはどこでウデマエをみがくのか?
Yuya Rin
 
CyberAgentのプライベートクラウド Cycloudの運用及びモニタリングについて #CODT2020 / Administration and M...
CyberAgentのプライベートクラウド Cycloudの運用及びモニタリングについて #CODT2020 / Administration and M...CyberAgentのプライベートクラウド Cycloudの運用及びモニタリングについて #CODT2020 / Administration and M...
CyberAgentのプライベートクラウド Cycloudの運用及びモニタリングについて #CODT2020 / Administration and M...
whywaita
 

What's hot (20)

ネットワークエンジニアはどこでウデマエをみがくのか?
ネットワークエンジニアはどこでウデマエをみがくのか?ネットワークエンジニアはどこでウデマエをみがくのか?
ネットワークエンジニアはどこでウデマエをみがくのか?
 
CyberAgentのプライベートクラウド Cycloudの運用及びモニタリングについて #CODT2020 / Administration and M...
CyberAgentのプライベートクラウド Cycloudの運用及びモニタリングについて #CODT2020 / Administration and M...CyberAgentのプライベートクラウド Cycloudの運用及びモニタリングについて #CODT2020 / Administration and M...
CyberAgentのプライベートクラウド Cycloudの運用及びモニタリングについて #CODT2020 / Administration and M...
 
Go入門
Go入門Go入門
Go入門
 
宅内10G化にむけて
宅内10G化にむけて宅内10G化にむけて
宅内10G化にむけて
 
がんばれ PHP Fiber
がんばれ PHP Fiberがんばれ PHP Fiber
がんばれ PHP Fiber
 
いまさら聞けないselectあれこれ
いまさら聞けないselectあれこれいまさら聞けないselectあれこれ
いまさら聞けないselectあれこれ
 
機械学習モデルフォーマットの話:さようならPMML、こんにちはPFA
機械学習モデルフォーマットの話:さようならPMML、こんにちはPFA機械学習モデルフォーマットの話:さようならPMML、こんにちはPFA
機械学習モデルフォーマットの話:さようならPMML、こんにちはPFA
 
Telemetry事始め
Telemetry事始めTelemetry事始め
Telemetry事始め
 
DockerコンテナでGitを使う
DockerコンテナでGitを使うDockerコンテナでGitを使う
DockerコンテナでGitを使う
 
[Cloud OnAir] BigQuery の仕組みからベストプラクティスまでのご紹介 2018年9月6日 放送
[Cloud OnAir] BigQuery の仕組みからベストプラクティスまでのご紹介 2018年9月6日 放送[Cloud OnAir] BigQuery の仕組みからベストプラクティスまでのご紹介 2018年9月6日 放送
[Cloud OnAir] BigQuery の仕組みからベストプラクティスまでのご紹介 2018年9月6日 放送
 
GraphQLのsubscriptionで出来ること
GraphQLのsubscriptionで出来ることGraphQLのsubscriptionで出来ること
GraphQLのsubscriptionで出来ること
 
ネットワーク機器のAPIあれこれ入門 (NetOpsCoding#2)
ネットワーク機器のAPIあれこれ入門(NetOpsCoding#2)ネットワーク機器のAPIあれこれ入門(NetOpsCoding#2)
ネットワーク機器のAPIあれこれ入門 (NetOpsCoding#2)
 
Apache Hadoop & Hive 入門 (マーケティングデータ分析基盤技術勉強会)
Apache Hadoop & Hive 入門 (マーケティングデータ分析基盤技術勉強会)Apache Hadoop & Hive 入門 (マーケティングデータ分析基盤技術勉強会)
Apache Hadoop & Hive 入門 (マーケティングデータ分析基盤技術勉強会)
 
YOLO V3で独自データセットを学習させて物体検出 / Yolo V3 with your own dataset
YOLO V3で独自データセットを学習させて物体検出 / Yolo V3 with your own datasetYOLO V3で独自データセットを学習させて物体検出 / Yolo V3 with your own dataset
YOLO V3で独自データセットを学習させて物体検出 / Yolo V3 with your own dataset
 
545人のインフラを支えたNOCチーム!
545人のインフラを支えたNOCチーム!545人のインフラを支えたNOCチーム!
545人のインフラを支えたNOCチーム!
 
目grep入門 +解説
目grep入門 +解説目grep入門 +解説
目grep入門 +解説
 
Geekなぺーじ ネットワーク技術者ではない方々向けIPv6セミナー2
Geekなぺーじ ネットワーク技術者ではない方々向けIPv6セミナー2Geekなぺーじ ネットワーク技術者ではない方々向けIPv6セミナー2
Geekなぺーじ ネットワーク技術者ではない方々向けIPv6セミナー2
 
ネットワークコンフィグ分析ツール Batfish との付き合い方
ネットワークコンフィグ分析ツール Batfish との付き合い方ネットワークコンフィグ分析ツール Batfish との付き合い方
ネットワークコンフィグ分析ツール Batfish との付き合い方
 
【Interop Tokyo 2018】 Telemetryの匠が解説~オープン技術を用いたマイクロバースト検知の最前線~
【Interop Tokyo 2018】 Telemetryの匠が解説~オープン技術を用いたマイクロバースト検知の最前線~【Interop Tokyo 2018】 Telemetryの匠が解説~オープン技術を用いたマイクロバースト検知の最前線~
【Interop Tokyo 2018】 Telemetryの匠が解説~オープン技術を用いたマイクロバースト検知の最前線~
 
BigQuery Query Optimization クエリ高速化編
BigQuery Query Optimization クエリ高速化編BigQuery Query Optimization クエリ高速化編
BigQuery Query Optimization クエリ高速化編
 

Similar to ネットワーク超入門

HTML5時代のwebクリエイターに必要なこと
HTML5時代のwebクリエイターに必要なことHTML5時代のwebクリエイターに必要なこと
HTML5時代のwebクリエイターに必要なこと
Masakazu Muraoka
 
JavaScript on GitHub (#kyotojs)
JavaScript on GitHub  (#kyotojs)JavaScript on GitHub  (#kyotojs)
JavaScript on GitHub (#kyotojs)
y_uuki
 
あなたはどのタイプがお好き? イケメンHtml5系男子 ゲットのしかた
あなたはどのタイプがお好き?  イケメンHtml5系男子 ゲットのしかたあなたはどのタイプがお好き?  イケメンHtml5系男子 ゲットのしかた
あなたはどのタイプがお好き? イケメンHtml5系男子 ゲットのしかた
Masakazu Muraoka
 
パンダの会 Html5概説
パンダの会 Html5概説パンダの会 Html5概説
パンダの会 Html5概説
Masakazu Muraoka
 
Html5でOpen Dataをやってみる
Html5でOpen DataをやってみるHtml5でOpen Dataをやってみる
Html5でOpen Dataをやってみる
Masakazu Muraoka
 

Similar to ネットワーク超入門 (20)

スクレイピングその後
スクレイピングその後スクレイピングその後
スクレイピングその後
 
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
 
HTML5時代のwebクリエイターに必要なこと
HTML5時代のwebクリエイターに必要なことHTML5時代のwebクリエイターに必要なこと
HTML5時代のwebクリエイターに必要なこと
 
JavaScript on GitHub (#kyotojs)
JavaScript on GitHub  (#kyotojs)JavaScript on GitHub  (#kyotojs)
JavaScript on GitHub (#kyotojs)
 
ゲームの通信をつくる仕事はどうなるのだろう?
ゲームの通信をつくる仕事はどうなるのだろう?ゲームの通信をつくる仕事はどうなるのだろう?
ゲームの通信をつくる仕事はどうなるのだろう?
 
Serverlessに触れてみる
Serverlessに触れてみるServerlessに触れてみる
Serverlessに触れてみる
 
これからHTML5を書く人のためのセキュリティ - HTML5など勉強会
これからHTML5を書く人のためのセキュリティ - HTML5など勉強会これからHTML5を書く人のためのセキュリティ - HTML5など勉強会
これからHTML5を書く人のためのセキュリティ - HTML5など勉強会
 
Webrtc最新動向
Webrtc最新動向Webrtc最新動向
Webrtc最新動向
 
20140903groonga発表資料
20140903groonga発表資料20140903groonga発表資料
20140903groonga発表資料
 
JSON吸って吐く機械
JSON吸って吐く機械JSON吸って吐く機械
JSON吸って吐く機械
 
Webページが表示されるまで
Webページが表示されるまでWebページが表示されるまで
Webページが表示されるまで
 
あなたはどのタイプがお好き? イケメンHtml5系男子 ゲットのしかた
あなたはどのタイプがお好き?  イケメンHtml5系男子 ゲットのしかたあなたはどのタイプがお好き?  イケメンHtml5系男子 ゲットのしかた
あなたはどのタイプがお好き? イケメンHtml5系男子 ゲットのしかた
 
パンダの会 Html5概説
パンダの会 Html5概説パンダの会 Html5概説
パンダの会 Html5概説
 
20120525 mt websocket
20120525 mt websocket20120525 mt websocket
20120525 mt websocket
 
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
 
Attractive HTML5
Attractive HTML5Attractive HTML5
Attractive HTML5
 
Html5でOpen Dataをやってみる
Html5でOpen DataをやってみるHtml5でOpen Dataをやってみる
Html5でOpen Dataをやってみる
 
AWSによるサーバーレスアーキテクチャ
AWSによるサーバーレスアーキテクチャAWSによるサーバーレスアーキテクチャ
AWSによるサーバーレスアーキテクチャ
 
今さら聞けないWebサーバの基本知識と選び方
今さら聞けないWebサーバの基本知識と選び方今さら聞けないWebサーバの基本知識と選び方
今さら聞けないWebサーバの基本知識と選び方
 
Spark Streaming と Spark GraphX を使用したTwitter解析による レコメンドサービス例
Spark Streaming と Spark GraphX を使用したTwitter解析による レコメンドサービス例Spark Streaming と Spark GraphX を使用したTwitter解析による レコメンドサービス例
Spark Streaming と Spark GraphX を使用したTwitter解析による レコメンドサービス例
 

ネットワーク超入門