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

2015.11.26.

2

自己紹介• 國島丈生– 本職：ソフトウェアや

Web に関する教育研究• 岡山国際交流センター館内案内 Web システム「 Space View 」など

– 本職以外：合唱に関する Web サイトを長らく運営国島丈生

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

3

インターネット大好き

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

4

通信，インターネットインターネットの仕組み

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

5

コンピュータと周辺機器を接続する1. 決められたケーブルでコンピュータと機器とを繋ぐ2. ドライバをインストール

でも、これって何してるの ?2015/11/26 吉備創生カレッジ平成 27 年度後期

6

機器同士の“会話” 通信≒1. 決められたケーブルでコンピュータと機器とを繋ぐコンピュータと機器と≒で “会話” する “道”　を作った2. ドライバをインストールプリンタドライバ “プ≒リンタ語”への翻訳機

機器同士の“会話” → より正確には「機器同士のデータのやり取り」2015/11/26 吉備創生カレッジ平成 27 年度後期

7

通信（ communication ）• 2 つ以上の機器がなんらかの取決めに従ってデータをやり取りすること– データのやり取りは双方向– 取り決め：プロトコル（ protocol ）

• 通信には様々なレベルのプロトコルが必要– どのような「道具」（ハードウェア）を使うか ?– どのような「言葉」を使うか ?– どのような「文脈」でやり取りするか ?

• これらのプロトコルを層（レイヤ , layer ）状に重ねることで通信が成立する2015/11/26 吉備創生カレッジ平成 27 年度後期

8

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

2 台用意する，など）2015/11/26 吉備創生カレッジ平成 27 年度後期

9

インターネット（ the Internet ）• Internet = inter ( 相互の ) + net ( ネットワーク )– 最初は大学や企業（の組織内ネットワーク）を相互につなぐネットワークとして始まった• 性善説で構築されている技術が多い

• インターネットに参加する機器のルール– IP アドレスを割り当てられていなければならない– TCP/IP ( と UDP/IP) により通信しなければならない• TCP/IP ( と UDP/IP) : インターネットの標準プロトコル

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

10

インターネットのプロトコルアプリケーション層メール（ SMTP, POP, IMAP, etc. ）

Web （ HTTP, HTTPS ）その他（ DNS, NTP, etc. ）トランスポート層： TCP, UDPインターネット層： IP

リンク層イーサネット , WiFi, PPP, etc.

文脈

言葉

道具

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

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 年度後期

12

IPv4

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

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 年度後期

14

TCP, UDP

送り出し側1. 一定サイズのデータ（パケット）に分割2. パケットに通し番号をつける3. 送り主，送り先の IP アドレスを付与4. パケットを複製して送信

受け取り側1. 受け取ったパケットを通し番号順に並べて元のデータを復元2. 足りないパケットがあったら…1. TCP ：パケットの再送要求を出す2. UDP: 通信失敗

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

15

IP （ Internet Protocol ）• インターネット 道路網≒– 通信路が網の目のように張り巡らされている– 通信路：イーサネット，光ファイバーなど

• インターネットと道路網の違い– 通信路の新設，閉鎖，（障害による）通行止などが頻繁に起こる→“道路地図”が作れない–解決策：交差点に必ず “道案内人” を置く

• 交差点に来る度，“道案内人”に目的地までの道を聞く→“道案内人”は次の交差点までの道を教えてくれる• “ 道案内人”つき交差点＝ルータ（ router ）

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

16

通信の形態• サーバ・クライアント型– サービスを提供するコンピュータ（サーバ） と– サービスを受けるコンピュータ（クライアント）　とで通信– 通常，サーバよりクライアントが相当数多い

• ピア・ツー・ピア型（ P2P ）– 役割の平等な多数のコンピュータ（ピア）間で通信– ファイル交換， Skype などのインターネット電話などで使われている

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

17

WWWインターネットの仕組み

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

18

WWW （ World Wide Web ）• Web ：クモの巣– Webページが互いにリンクで繋がっている様子をクモの巣に例えた

• 比較的新しいインターネット技術– 1991年， CERN （欧州合同原子核共同機構）で開発

• 現状– 最もよく利用されているインターネット技術– Web ブラウザ以外にも様々なところで利用（スマートフォンのアプリなど）

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

19

WWW の仕組み• HTTP （ Hypertext Transfer Protocol ）によって，

Web クライアント（ブラウザなど）と Web サーバ間でデータをやり取り• 手順– Web クライアント→ Web サーバ： URI で示される資源へのリクエスト（データ取得など）– Web サーバ→ Web クライアント：リクエストされたデータを返送（エラーの場合はその原因等も送信）– Web クライアント上で：返送されたデータを加工（ページの整形ほか）

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

20

URI （ Uniform Resource Identifier ）

• URL （ Uniform Resource Locator ）とも言う• インターネット上の資源（リソース）の識別子– 資源 データ（文書，画像，≒ etc. ）• 本当はもっと抽象的な概念

–識別子：集合の要素を一意に定められる値• 例：職員の識別子… ○ 職員番号，△ 氏名

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

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 年度後期

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 年度後期

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 年度後期

24

HTML のここだけは知っておこう• リンク– <a

href=“http://another.example.com/”>http://www.example.com</a>

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

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 年度後期

26

HTML のここだけは知っておこう• ブラウザでプログラムを動かす– ユーザ操作などのタイミングで， JavaScript というプログラミング言語で書かれたプログラムを実行させることができる

• 例$(function() { $('#click').click(function() { $('#text').toggle(); });});

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

27

Web アプリケーション• Web 上で動くアプリケーションソフトウェア• 例– アマゾン…在庫を反映して自動的に表示が変わる– Google Docs…Web 上で動くオフィスアプリ（ワープロ，スプレッドシートなど）– スマートフォンアプリ…データの取得は HTTP で，加工はスマートフォン上の（ブラウザでない）ソフトで

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