どうしてブラウザから世界中のwebページが見れるの?
TRANSCRIPT
どうしてブラウザから世界中のWebページを⾒ることができるの?
ブラウザはの役割は?
ファイルを読み取ってHTML
CSSJavaScript
ブラウザの役割 ⇒ HTML/CSS/JSを読み込んで画⾯に表⽰してくれる!
ファイルを読み取って
画⾯に 表⽰してくれる!
HTMLCSS
JavaScript
じゃあどこのファイルを読み込むの…??
じゃあどこのファイルを読み込むの…??↓
その「どこ?」を⽰すのがURLURL=ファイルの住所!
URLは住所!…ってどうゆうこと?
URLは住所!…ってどうゆうこと?
このURLが表すのは、file:///C:/Users/y-kinoshita/Desktop/profile.html
URLは住所!…ってどうゆうこと?
このURLが表すのは、file:///C:/Users/y-kinoshita/Desktop/profile.html
「y-kinoshitaというこのコンピューターの中の、
URLは住所!…ってどうゆうこと?
このURLが表すのは、file:///C:/Users/y-kinoshita/Desktop/profile.html
「y-kinoshitaというこのコンピューターの中の、 デスクトップにある、
URLは住所!…ってどうゆうこと?
このURLが表すのは、file:///C:/Users/y-kinoshita/Desktop/profile.html
「y-kinoshitaというこのコンピューターの中の、 デスクトップにある、 profile.htmlというファイルを読み込んで表⽰してますよ!」という意味
URLをもう少し細かく⾒てみると…
file:///C:/Users/y-kinoshita/Desktop/profile.htmlが表すのは…??
click!!
URLをもう少し細かく⾒てみると…
フォルダ開いて…
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
file:///C:/Users/y-kinoshita/Desktop/profile.htmlが表すのは…??
click!!
URLをもう少し細かく⾒てみると…
フォルダ開いて…
ここが「file:///C:」
で、
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
file:///C:/Users/y-kinoshita/Desktop/profile.htmlが表すのは…??
click!!
URLをもう少し細かく⾒てみると…
フォルダ開いて…
ここが「file:///C:」
で、
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
file:///C:/Users/y-kinoshita/Desktop/profile.htmlが表すのは…??
click!!
click!!
URLをもう少し細かく⾒てみると…
フォルダ開いて…
ここが「file:///C:」
で、
その中にユーザー(Users)
があって
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
file:///C:/Users/y-kinoshita/Desktop/profile.htmlが表すのは…??
click!!
click!!
URLをもう少し細かく⾒てみると…
フォルダ開いて…
ここが「file:///C:」
で、
その中にユーザー(Users)
があって
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
file:///C:/Users/y-kinoshita/Desktop/profile.htmlが表すのは…??
click!!
click!!
click!!
URLをもう少し細かく⾒てみると…
フォルダ開いて…
ここが「file:///C:」
で、
その中にユーザー(Users)
があって
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
その中にy-kinoshita
があって
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
file:///C:/Users/y-kinoshita/Desktop/profile.htmlが表すのは…??
click!!
click!!
click!!
URLをもう少し細かく⾒てみると…
フォルダ開いて…
ここが「file:///C:」
で、
その中にユーザー(Users)
があって
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
その中にy-kinoshita
があって
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
file:///C:/Users/y-kinoshita/Desktop/profile.htmlが表すのは…??
click!!
click!!
click!!
click!!
URLをもう少し細かく⾒てみると…
フォルダ開いて…
ここが「file:///C:」
で、
その中にユーザー(Users)
があって
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
その中にy-kinoshita
があって
その中にデスクトップがあって
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
file:///C:/Users/y-kinoshita/Desktop/profile.htmlが表すのは…??
click!!
click!!
click!!
click!!
URLをもう少し細かく⾒てみると…
フォルダ開いて…
ここが「file:///C:」
で、
その中にユーザー(Users)
があって
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
その中にy-kinoshita
があって
その中にデスクトップがあって
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
file:///C:/Users/y-kinoshita/Desktop/profile.htmlが表すのは…??
click!!
click!!
click!!
click!!
click!!
URLをもう少し細かく⾒てみると…
フォルダ開いて…
ここが「file:///C:」
で、
その中にユーザー(Users)
があって
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
その中にy-kinoshita
があって
その中にデスクトップがあって
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
その中にprofile.html
があって
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク
file:///C:/Users/y-kinoshita/Desktop/profile.htmlが表すのは…??
これが表⽰される!
click!!
click!!
click!!
click!!
click!!
URLをいろいろ変えると⾃分 PC内 あらゆるところにあるファイルに
アクセスできる
URLをいろいろ変えると⾃分 PC内 あらゆるところにあるファイルに
アクセスできる↓
アクセスできるなら、そのURLをブラウザに⼊⼒すれば、
表⽰可能!
でも、隣の⼈のPCのファイルを⾒たいときは…??
隣のPCはそのままでは繋がってない(=アクセスできない)ので、
隣のPCのファイルを読むことはできない!
profile.html
A B
AさんのPCの中のprofile.htmlにはアクセスできない!!
HTMLCSS
JavaScript
じゃあどうやったらAさんのファイルを⾒れるの?
profile.html
A B
AさんのPCの中のprofile.htmlにはアクセスできない!!
HTMLCSS
JavaScript
レンタルサーバを借りて、そこに置く!
※出展:http://gigazine.net/news/20110408_facebook_opencompute/
これ全部、コンピュータ!!
レンタルサーバを借りて、そこに置く!
※出展:http://gigazine.net/news/20110408_facebook_opencompute/
レンタルサーバとは?? ⇒ みんながアクセス可能なところ
A B
ネット経由でアクセスでき
る!!
DC
ネット経由でアクセス
できる!!
ネット経由でアクセス
できる!!
ネット経由でアクセス
できる!!
http://www.ume.ne.jp
みんながアクセス可能な
ところ
AさんのファイルをBさんが⾒れるようになるまで
A B
http://www.ume.ne.jp
A 借 http://www.ume.ne.jp/Asan
profile.html
Aさんがレンタルサーバを借りる
A B
http://www.ume.ne.jp
A 借 http://www.ume.ne.jp/Asan
profile.html
profile.html
ファイルを預ける
借りたレンタルサーバに、Aさんがファイルを置く
A B
http://www.ume.ne.jp
A 借 http://www.ume.ne.jp/Asan
profile.html
アクセスを要求
Aさんが借りたレンタルサーバに、Bさんがアクセスする
http://www.ume.ne.jp/Asan/profile.html
ここにAさんのページへのURLを⼊⼒する
アクセスするとはつまり、ブラウザからURLを⼊⼒するってこと
ブラウザにAさんのページへのURLを⼊⼒!!↓
http://www.ume.ne.jp/Asan/profile.html
レンタルサーバの中の Aさんが借りた場所にある
profile.htmlにアクセス!!
B
A B
http://www.ume.ne.jp
A 借 http://www.ume.ne.jp/Asan
profile.html
http://www.ume.ne.jp
⼊⼒したURLをたどると、Aさんのファイルが⾒れる
A B
http://www.ume.ne.jp
A 借 http://www.ume.ne.jp/Asan
profile.html
http://www.ume.ne.jp
/Asan
⼊⼒したURLをたどると、Aさんのファイルが⾒れる
A B
http://www.ume.ne.jp
A 借 http://www.ume.ne.jp/Asan
profile.html
http://www.ume.ne.jp
/Asan
/profile.html
⼊⼒したURLをたどると、Aさんのファイルが⾒れる
A B
http://www.ume.ne.jp
A 借 http://www.ume.ne.jp/Asan
profile.html Aさんのprofile.htmlが⾒れた!!
http://www.ume.ne.jp
/Asan
/profile.html
⼊⼒したURLをたどると、Aさんのファイルが⾒れる
A B
http://www.ume.ne.jp
A 借 http://www.ume.ne.jp/Asan
profile.html
もちろんBさん以外も⾒れる!!
D
⾒れた!!
C
⾒れた!!
⾒れた!!
さらに!!
⽇本各地にサーバがあってそれが繋がってるので…
A
レンタルサーバ
サーバ
サーバ
⾒れた!!
profile.html
F
⾒れた!!
⽇本中から⾒れる!!H
A
サーバ
⾒れた!!
サーバ
サーバ
E
M
⾒れた!!
profile.html
もちろん世界中からも⾒れる!!
サーバ
サーバ
まさにWorld Wide Web!!(世界中に張り巡らされた蜘蛛の巣)
ということで、せっかく⾃分がつくったWebページを
世界に公開したい⽅は、レンタルサーバを借りましょう:)
月額129円 借
ちなみに…
海をまたいだ⼤陸同⼠はどうやって繋がっているのでしょう??
海底ケーブル
※画像出展:http://www.gizmodo.jp/2015/05/post_17037.html
海底ケーブルが安定してるおかげで衛⽣通信とかはなくなったらしい(http://time-space.kddi.com/special/specialreport/20121201/index.html)
※写真出展:http://www.gizmodo.jp/2015/05/post_17037.html
※画像出展:http://dna.chuden.jp/sp/sum14/
⽔深何千メートルの海底に張り巡らされたケーブル…かっこいい(・∀・)