Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
インターネットの仕組み
第1回:インターネットの仕組み
國島丈生(岡山県立大学)
Email: t.kunishi@gmail.com
2015.11.26.
自己紹介
• 國島丈生
– 本職:ソフトウェアや
Webに関する教育研究
• 岡山国際交流センター館
内案内Webシステム
「Space View」など
– 本職以外:合唱に関す
るWebサイトを長らく運
営
国島丈生
2015/11/26 吉...
インターネット大好き
2015/11/26 吉備創生カレッジ平成27年度後期 3
通信,インターネット
インターネットの仕組み
2015/11/26 吉備創生カレッジ平成27年度後期 4
コンピュータと周辺機器を接続する
1. 決められたケーブルでコ
ンピュータと機器とを繋ぐ
2. ドライバをインストール
でも、これって何してるの?
2015/11/26 吉備創生カレッジ平成27年度後期 5
機器同士の“会話”≒通信
1. 決められたケーブルでコ
ンピュータと機器とを繋ぐ
≒コンピュータと機器とで
“会話” する “道” を作っ
た
2. ドライバをインストール
プリンタドライバ≒“プリン
タ語”への翻訳機
機器同士の“会話” → ...
通信(communication)
• 2つ以上の機器がなんらかの取決めに従って
データをやり取りすること
– データのやり取りは双方向
– 取り決め:プロトコル(protocol)
• 通信には様々なレベルのプロトコルが必要
– どのような「...
ネットワーク(network)
• 互いに通信できる機器の集まり
• ネットワークはなぜ必要?
– 資源の共有(ファイルの共有,プリンタの共有,
etc.)
– ユーザのコミュニケーション(メールetc.)
– 処理の分散,負荷の分散(多くのユ...
インターネット(the Internet)
• Internet = inter (相互の) + net (ネットワーク)
– 最初は大学や企業(の組織内ネットワーク)を相
互につなぐネットワークとして始まった
• 性善説で構築されている技術が...
インターネットのプロトコル
アプリケーション層
メール(SMTP, POP, IMAP, etc.)
Web(HTTP, HTTPS)
その他(DNS, NTP, etc.)
トランスポート層:TCP, UDP
インターネット層:IP
リンク層...
IPアドレス
• IPアドレス:インターネット中で一意に決まる番号
– TCP/IP, UDP/IPでは,通信相手をIPアドレスで指定
• IPv4:0〜255の数字4つ(例:172.16.254.1)
– 32ビット→232個のアドレスが用意...
IPv4
2015/11/26 吉備創生カレッジ平成27年度後期 12
ホスト名,ドメイン名
• IPアドレスは人間には覚えにくい
• 人間に覚えやすい名前の付け方?
– 例:www.example.jp
– 正式にはFQDN(Fully Qualified Domain Name)という
• FQDNとIPアドレ...
TCP, UDP
送り出し側
1. 一定サイズのデータ(パケット)に分割
2. パケットに通し番号をつける
3. 送り主,送り先のIPアドレスを付与
4. パケットを複製して送信
受け取り側
1. 受け取ったパケットを通し番号順に並べ
て元のデ...
IP(Internet Protocol)
• インターネット≒道路網
– 通信路が網の目のように張り巡らされている
– 通信路:イーサネット,光ファイバーなど
• インターネットと道路網の違い
– 通信路の新設,閉鎖,(障害による)通行止など...
通信の形態
• サーバ・クライアント型
– サービスを提供するコンピュータ(サーバ) と
– サービスを受けるコンピュータ(クライアント) とで通
信
– 通常,サーバよりクライアントが相当数多い
• ピア・ツー・ピア型(P2P)
– 役割の平...
WWW
インターネットの仕組み
2015/11/26 吉備創生カレッジ平成27年度後期 17
WWW(World Wide Web)
• Web:クモの巣
– Webページが互いにリンクで繋がっている様子をクモ
の巣に例えた
• 比較的新しいインターネット技術
– 1991年,CERN(欧州合同原子核共同機構)で開発
• 現状
– 最も...
WWWの仕組み
• HTTP(Hypertext Transfer Protocol)によって,
Webクライアント(ブラウザなど)とWebサーバ間
でデータをやり取り
• 手順
– Webクライアント→Webサーバ:URIで示される資源へ
の...
URI(Uniform Resource Identifier)
• URL(Uniform Resource Locator)とも言う
• インターネット上の資源(リソース)の識別子
– 資源≒データ(文書,画像,etc.)
• 本当はもっと...
URI(Uniform Resource Identifier)
• 例
– http://www.example.jp/blog/entry/11
– http://www.example.jp/search?q=tokushima
– ht...
HTML(Hypertext Markup Language)
• Webページを記述するための
書式
• テキストに、タグと呼ばれる特
別な記号を埋め込み、テキス
トの各部分の意味を明確にす
る
• タグの例
– <title>〜</titl...
HTMLのここだけは知っておこう
• Webページの素材はあちこちのサーバに分
散していてもよい
– 例:http://www.example.com/sample.html で
<img src=“http://another.example...
HTMLのここだけは知っておこう
• リンク
– <a
href=“http://another.example.com/”>http://www.
example.com</a>
2015/11/26 吉備創生カレッジ平成27年度後期 24
HTMLのここだけは知っておこう
• HTMLフォーム:ユーザからの入力をサーバに
送る手段
<form method=“post” action=“http://example.com/another_url”>
<input type=“t...
HTMLのここだけは知っておこう
• ブラウザでプログラムを動かす
– ユーザ操作などのタイミングで,JavaScriptという
プログラミング言語で書かれたプログラムを実行
させることができる
• 例
$(function() {
$('#c...
Webアプリケーション
• Web上で動くアプリケーションソフトウェア
• 例
– アマゾン…在庫を反映して自動的に表示が変わ
る
– Google Docs…Web上で動くオフィスアプリ(ワープ
ロ,スプレッドシートなど)
– スマートフォン...
Upcoming SlideShare
Loading in …5
×

20151126 吉備創生カレッジ第1回資料

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

  • Be the first to comment

20151126 吉備創生カレッジ第1回資料

  1. 1. インターネットの仕組み 第1回:インターネットの仕組み 國島丈生(岡山県立大学) Email: t.kunishi@gmail.com 2015.11.26.
  2. 2. 自己紹介 • 國島丈生 – 本職:ソフトウェアや Webに関する教育研究 • 岡山国際交流センター館 内案内Webシステム 「Space View」など – 本職以外:合唱に関す るWebサイトを長らく運 営 国島丈生 2015/11/26 吉備創生カレッジ平成27年度後期 2
  3. 3. インターネット大好き 2015/11/26 吉備創生カレッジ平成27年度後期 3
  4. 4. 通信,インターネット インターネットの仕組み 2015/11/26 吉備創生カレッジ平成27年度後期 4
  5. 5. コンピュータと周辺機器を接続する 1. 決められたケーブルでコ ンピュータと機器とを繋ぐ 2. ドライバをインストール でも、これって何してるの? 2015/11/26 吉備創生カレッジ平成27年度後期 5
  6. 6. 機器同士の“会話”≒通信 1. 決められたケーブルでコ ンピュータと機器とを繋ぐ ≒コンピュータと機器とで “会話” する “道” を作っ た 2. ドライバをインストール プリンタドライバ≒“プリン タ語”への翻訳機 機器同士の“会話” → より正確には「機器同士のデータのやり取り」 2015/11/26 吉備創生カレッジ平成27年度後期 6
  7. 7. 通信(communication) • 2つ以上の機器がなんらかの取決めに従って データをやり取りすること – データのやり取りは双方向 – 取り決め:プロトコル(protocol) • 通信には様々なレベルのプロトコルが必要 – どのような「道具」(ハードウェア)を使うか? – どのような「言葉」を使うか? – どのような「文脈」でやり取りするか? • これらのプロトコルを層(レイヤ, layer)状に重ね ることで通信が成立する 2015/11/26 吉備創生カレッジ平成27年度後期 7
  8. 8. ネットワーク(network) • 互いに通信できる機器の集まり • ネットワークはなぜ必要? – 資源の共有(ファイルの共有,プリンタの共有, etc.) – ユーザのコミュニケーション(メールetc.) – 処理の分散,負荷の分散(多くのユーザが快適 に使えるようにサーバを複数台用意する,など) – 信頼性の向上(同じように使えるプリンタを2台用 意する,など) 2015/11/26 吉備創生カレッジ平成27年度後期 8
  9. 9. インターネット(the Internet) • Internet = inter (相互の) + net (ネットワーク) – 最初は大学や企業(の組織内ネットワーク)を相 互につなぐネットワークとして始まった • 性善説で構築されている技術が多い • インターネットに参加する機器のルール – IPアドレスを割り当てられていなければならない – TCP/IP (とUDP/IP) により通信しなければならない • TCP/IP (とUDP/IP) : インターネットの標準プロトコル 2015/11/26 吉備創生カレッジ平成27年度後期 9
  10. 10. インターネットのプロトコル アプリケーション層 メール(SMTP, POP, IMAP, etc.) Web(HTTP, HTTPS) その他(DNS, NTP, etc.) トランスポート層:TCP, UDP インターネット層:IP リンク層 イーサネット, WiFi, PPP, etc. 文脈 言葉 道具 2015/11/26 吉備創生カレッジ平成27年度後期 10
  11. 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. 12. IPv4 2015/11/26 吉備創生カレッジ平成27年度後期 12
  13. 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. 14. TCP, UDP 送り出し側 1. 一定サイズのデータ(パケット)に分割 2. パケットに通し番号をつける 3. 送り主,送り先のIPアドレスを付与 4. パケットを複製して送信 受け取り側 1. 受け取ったパケットを通し番号順に並べ て元のデータを復元 2. 足りないパケットがあったら… 1. TCP:パケットの再送要求を出す 2. UDP: 通信失敗 2015/11/26 吉備創生カレッジ平成27年度後期 14
  15. 15. IP(Internet Protocol) • インターネット≒道路網 – 通信路が網の目のように張り巡らされている – 通信路:イーサネット,光ファイバーなど • インターネットと道路網の違い – 通信路の新設,閉鎖,(障害による)通行止など が頻繁に起こる→“道路地図”が作れない – 解決策:交差点に必ず “道案内人” を置く • 交差点に来る度,“道案内人”に目的地までの道を聞く →“道案内人”は次の交差点までの道を教えてくれる • “道案内人”つき交差点=ルータ(router) 2015/11/26 吉備創生カレッジ平成27年度後期 15
  16. 16. 通信の形態 • サーバ・クライアント型 – サービスを提供するコンピュータ(サーバ) と – サービスを受けるコンピュータ(クライアント) とで通 信 – 通常,サーバよりクライアントが相当数多い • ピア・ツー・ピア型(P2P) – 役割の平等な多数のコンピュータ(ピア)間で通信 – ファイル交換,Skypeなどのインターネット電話などで 使われている 2015/11/26 吉備創生カレッジ平成27年度後期 16
  17. 17. WWW インターネットの仕組み 2015/11/26 吉備創生カレッジ平成27年度後期 17
  18. 18. WWW(World Wide Web) • Web:クモの巣 – Webページが互いにリンクで繋がっている様子をクモ の巣に例えた • 比較的新しいインターネット技術 – 1991年,CERN(欧州合同原子核共同機構)で開発 • 現状 – 最もよく利用されているインターネット技術 – Webブラウザ以外にも様々なところで利用(スマート フォンのアプリなど) 2015/11/26 吉備創生カレッジ平成27年度後期 18
  19. 19. WWWの仕組み • HTTP(Hypertext Transfer Protocol)によって, Webクライアント(ブラウザなど)とWebサーバ間 でデータをやり取り • 手順 – Webクライアント→Webサーバ:URIで示される資源へ のリクエスト(データ取得など) – Webサーバ→Webクライアント:リクエストされたデー タを返送(エラーの場合はその原因等も送信) – Webクライアント上で:返送されたデータを加工(ペー ジの整形ほか) 2015/11/26 吉備創生カレッジ平成27年度後期 19
  20. 20. URI(Uniform Resource Identifier) • URL(Uniform Resource Locator)とも言う • インターネット上の資源(リソース)の識別子 – 資源≒データ(文書,画像,etc.) • 本当はもっと抽象的な概念 – 識別子:集合の要素を一意に定められる値 • 例:職員の識別子… ○ 職員番号,△ 氏名 2015/11/26 吉備創生カレッジ平成27年度後期 20
  21. 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. 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. 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. 24. HTMLのここだけは知っておこう • リンク – <a href=“http://another.example.com/”>http://www. example.com</a> 2015/11/26 吉備創生カレッジ平成27年度後期 24
  25. 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. 26. HTMLのここだけは知っておこう • ブラウザでプログラムを動かす – ユーザ操作などのタイミングで,JavaScriptという プログラミング言語で書かれたプログラムを実行 させることができる • 例 $(function() { $('#click').click(function() { $('#text').toggle(); }); }); 2015/11/26 吉備創生カレッジ平成27年度後期 26
  27. 27. Webアプリケーション • Web上で動くアプリケーションソフトウェア • 例 – アマゾン…在庫を反映して自動的に表示が変わ る – Google Docs…Web上で動くオフィスアプリ(ワープ ロ,スプレッドシートなど) – スマートフォンアプリ…データの取得はHTTPで,加 工はスマートフォン上の(ブラウザでない)ソフトで 2015/11/26 吉備創生カレッジ平成27年度後期 27

×