2015年11月26日に開催した「吉備創生カレッジ」第1回の講演資料

1. インターネットの仕組み
第1回：インターネットの仕組み
國島丈生（岡山県立大学）
Email: t.kunishi@gmail.com
2015.11.26.

2. 自己紹介
• 國島丈生
– 本職：ソフトウェアや
Webに関する教育研究
• 岡山国際交流センター館
内案内Webシステム
「Space View」など
– 本職以外：合唱に関す
るWebサイトを長らく運
営
国島丈生
2015/11/26 吉備創生カレッジ平成27年度後期 2

3. インターネット大好き
2015/11/26 吉備創生カレッジ平成27年度後期 3

4. 通信，インターネット
インターネットの仕組み
2015/11/26 吉備創生カレッジ平成27年度後期 4

5. コンピュータと周辺機器を接続する
1. 決められたケーブルでコ
ンピュータと機器とを繋ぐ
2. ドライバをインストール
でも、これって何してるの?
2015/11/26 吉備創生カレッジ平成27年度後期 5

6. 機器同士の“会話”≒通信
1. 決められたケーブルでコ
ンピュータと機器とを繋ぐ
≒コンピュータと機器とで
“会話” する “道” を作っ
た
2. ドライバをインストール
プリンタドライバ≒“プリン
タ語”への翻訳機
機器同士の“会話” → より正確には「機器同士のデータのやり取り」
2015/11/26 吉備創生カレッジ平成27年度後期 6

7. 通信（communication）
• 2つ以上の機器がなんらかの取決めに従って
データをやり取りすること
– データのやり取りは双方向
– 取り決め：プロトコル（protocol）
• 通信には様々なレベルのプロトコルが必要
– どのような「道具」（ハードウェア）を使うか?
– どのような「言葉」を使うか?
– どのような「文脈」でやり取りするか?
• これらのプロトコルを層（レイヤ, layer）状に重ね
ることで通信が成立する
2015/11/26 吉備創生カレッジ平成27年度後期 7

8. ネットワーク（network）
• 互いに通信できる機器の集まり
• ネットワークはなぜ必要?
– 資源の共有（ファイルの共有，プリンタの共有，
etc.）
– ユーザのコミュニケーション（メールetc.）
– 処理の分散，負荷の分散（多くのユーザが快適
に使えるようにサーバを複数台用意する，など）
– 信頼性の向上（同じように使えるプリンタを2台用
意する，など）
2015/11/26 吉備創生カレッジ平成27年度後期 8

9. インターネット（the Internet）
• Internet = inter (相互の) + net (ネットワーク)
– 最初は大学や企業（の組織内ネットワーク）を相
互につなぐネットワークとして始まった
• 性善説で構築されている技術が多い
• インターネットに参加する機器のルール
– IPアドレスを割り当てられていなければならない
– TCP/IP (とUDP/IP) により通信しなければならない
• TCP/IP (とUDP/IP) : インターネットの標準プロトコル
2015/11/26 吉備創生カレッジ平成27年度後期 9

10. インターネットのプロトコル
アプリケーション層
メール（SMTP, POP, IMAP, etc.）
Web（HTTP, HTTPS）
その他（DNS, NTP, etc.）
トランスポート層：TCP, UDP
インターネット層：IP
リンク層
イーサネット, WiFi, PPP, etc.
文脈
言葉
道具
2015/11/26 吉備創生カレッジ平成27年度後期 10

11. IPアドレス
• IPアドレス：インターネット中で一意に決まる番号
– TCP/IP, UDP/IPでは，通信相手をIPアドレスで指定
• IPv4：0〜255の数字4つ（例：172.16.254.1）
– 32ビット→232個のアドレスが用意されている
– 特殊なアドレス
• プライベートアドレス：家庭内LANなどでの使用を目的
• ほかにもあります
• IPv6：128ビット
– 例：2001:0db8:bd05:01d2:288a:1fc0:0001:10ee
2015/11/26 吉備創生カレッジ平成27年度後期 11

12. IPv4
2015/11/26 吉備創生カレッジ平成27年度後期 12

13. ホスト名，ドメイン名
• IPアドレスは人間には覚えにくい
• 人間に覚えやすい名前の付け方?
– 例：www.example.jp
– 正式にはFQDN（Fully Qualified Domain Name）という
• FQDNとIPアドレスの変換サービス：DNS
– Domain Name Service
– インターネットを使うときには裏で頻繁に利用してい
る
– 例：http://www.example.com/ → 192.0.43.10
2015/11/26 吉備創生カレッジ平成27年度後期 13

14. TCP, UDP
送り出し側
1. 一定サイズのデータ（パケット）に分割
2. パケットに通し番号をつける
3. 送り主，送り先のIPアドレスを付与
4. パケットを複製して送信
受け取り側
1. 受け取ったパケットを通し番号順に並べ
て元のデータを復元
2. 足りないパケットがあったら…
1. TCP：パケットの再送要求を出す
2. UDP: 通信失敗
2015/11/26 吉備創生カレッジ平成27年度後期 14

15. IP（Internet Protocol）
• インターネット≒道路網
– 通信路が網の目のように張り巡らされている
– 通信路：イーサネット，光ファイバーなど
• インターネットと道路網の違い
– 通信路の新設，閉鎖，（障害による）通行止など
が頻繁に起こる→“道路地図”が作れない
– 解決策：交差点に必ず “道案内人” を置く
• 交差点に来る度，“道案内人”に目的地までの道を聞く
→“道案内人”は次の交差点までの道を教えてくれる
• “道案内人”つき交差点＝ルータ（router）
2015/11/26 吉備創生カレッジ平成27年度後期 15

16. 通信の形態
• サーバ・クライアント型
– サービスを提供するコンピュータ（サーバ） と
– サービスを受けるコンピュータ（クライアント） とで通
信
– 通常，サーバよりクライアントが相当数多い
• ピア・ツー・ピア型（P2P）
– 役割の平等な多数のコンピュータ（ピア）間で通信
– ファイル交換，Skypeなどのインターネット電話などで
使われている
2015/11/26 吉備創生カレッジ平成27年度後期 16

17. WWW
インターネットの仕組み
2015/11/26 吉備創生カレッジ平成27年度後期 17

18. WWW（World Wide Web）
• Web：クモの巣
– Webページが互いにリンクで繋がっている様子をクモ
の巣に例えた
• 比較的新しいインターネット技術
– 1991年，CERN（欧州合同原子核共同機構）で開発
• 現状
– 最もよく利用されているインターネット技術
– Webブラウザ以外にも様々なところで利用（スマート
フォンのアプリなど）
2015/11/26 吉備創生カレッジ平成27年度後期 18

19. WWWの仕組み
• HTTP（Hypertext Transfer Protocol）によって，
Webクライアント（ブラウザなど）とWebサーバ間
でデータをやり取り
• 手順
– Webクライアント→Webサーバ：URIで示される資源へ
のリクエスト（データ取得など）
– Webサーバ→Webクライアント：リクエストされたデー
タを返送（エラーの場合はその原因等も送信）
– Webクライアント上で：返送されたデータを加工（ペー
ジの整形ほか）
2015/11/26 吉備創生カレッジ平成27年度後期 19

20. URI（Uniform Resource Identifier）
• URL（Uniform Resource Locator）とも言う
• インターネット上の資源（リソース）の識別子
– 資源≒データ（文書，画像，etc.）
• 本当はもっと抽象的な概念
– 識別子：集合の要素を一意に定められる値
• 例：職員の識別子… ○ 職員番号，△ 氏名
2015/11/26 吉備創生カレッジ平成27年度後期 20

21. URI（Uniform Resource Identifier）
• 例
– http://www.example.jp/blog/entry/11
– http://www.example.jp/search?q=tokushima
– https://www.example.jp:8080/post
– ftp://ftp.example.jp/files/document.docx
• 構成要素
– URIスキーム：資源にアクセスするためのプロトコル
– ホスト名（FQDN，IPアドレス）：資源が置かれているサーバ
名
– パス：サーバ上での資源の識別子（ディレクトリ名など）
– ポート番号やパラメータを指定する場合もある
2015/11/26 吉備創生カレッジ平成27年度後期 21

22. HTML（Hypertext Markup Language）
• Webページを記述するための
書式
• テキストに、タグと呼ばれる特
別な記号を埋め込み、テキス
トの各部分の意味を明確にす
る
• タグの例
– <title>〜</title>：ページのタイ
トル
– <p>〜</p>：段落
– <a href=“…”>〜</a>：リンク
– <img src=“…”>：画像の貼り込
み
<!DOCTYPE html>
<html>
<head>
<title>はじめてのHTML文書
</title>
</head>
<body>
<p>Hello world!</p>
<a
href=“http://www.example.com”
>Example Com.</a>
</body>
</html>
2015/11/26 吉備創生カレッジ平成27年度後期 22

23. HTMLのここだけは知っておこう
• Webページの素材はあちこちのサーバに分
散していてもよい
– 例：http://www.example.com/sample.html で
<img src=“http://another.example.com/logo.jpg”>
と指定しても構わない
• sample.html は www.example.com から取得
• logo.jpg は another.example.com から取得
– 例：HTMLページの中に別のHTMLページを埋め
込む（frame, iframe）
2015/11/26 吉備創生カレッジ平成27年度後期 23

24. HTMLのここだけは知っておこう
• リンク
– <a
href=“http://another.example.com/”>http://www.
example.com</a>
2015/11/26 吉備創生カレッジ平成27年度後期 24

25. HTMLのここだけは知っておこう
• HTMLフォーム：ユーザからの入力をサーバに
送る手段
<form method=“post” action=“http://example.com/another_url”>
<input type=“text” name=“user_id”>
<input type=“hidden” name=“title” value=“1”>
<input type=“submit” value=“送信”>
</form>
“hidden”と指定された項目は
ブラウザに表示されない
2015/11/26 吉備創生カレッジ平成27年度後期 25

26. HTMLのここだけは知っておこう
• ブラウザでプログラムを動かす
– ユーザ操作などのタイミングで，JavaScriptという
プログラミング言語で書かれたプログラムを実行
させることができる
• 例
$(function() {
$('#click').click(function() {
$('#text').toggle();
});
});
2015/11/26 吉備創生カレッジ平成27年度後期 26

27. Webアプリケーション
• Web上で動くアプリケーションソフトウェア
• 例
– アマゾン…在庫を反映して自動的に表示が変わ
る
– Google Docs…Web上で動くオフィスアプリ（ワープ
ロ，スプレッドシートなど）
– スマートフォンアプリ…データの取得はHTTPで，加
工はスマートフォン上の（ブラウザでない）ソフトで
2015/11/26 吉備創生カレッジ平成27年度後期 27