Submit Search
Upload
WEBページを表示するまで
•
Download as PPTX, PDF
•
3 likes
•
8,958 views
S
Shoichi Kakizaki
Follow
WEBページを表示するまでの勉強会をやりました。 どのような仕組みでWEBページが表示されるのかを解説しています。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 19
Download now
Recommended
Rubyはとても「人間的」
Rubyはとても「人間的」
Kazuhiro Serizawa
Crystalで殺せ
Crystalで殺せ
Sachirou Inoue
端末ビジュアライゼーションのすゝめ
端末ビジュアライゼーションのすゝめ
Yuki Ishikawa
ワタナベシェル
ワタナベシェル
xztaityozx
ノリとカンと勢い ドリブン開発
ノリとカンと勢い ドリブン開発
mozyok
意識の低いシンギュラリティの恐怖
意識の低いシンギュラリティの恐怖
chris chambers
Ossで作るwebサイト
Ossで作るwebサイト
Soudai Sone
K初めてのstylus
K初めてのstylus
Kazuki Nakatani
Recommended
Rubyはとても「人間的」
Rubyはとても「人間的」
Kazuhiro Serizawa
Crystalで殺せ
Crystalで殺せ
Sachirou Inoue
端末ビジュアライゼーションのすゝめ
端末ビジュアライゼーションのすゝめ
Yuki Ishikawa
ワタナベシェル
ワタナベシェル
xztaityozx
ノリとカンと勢い ドリブン開発
ノリとカンと勢い ドリブン開発
mozyok
意識の低いシンギュラリティの恐怖
意識の低いシンギュラリティの恐怖
chris chambers
Ossで作るwebサイト
Ossで作るwebサイト
Soudai Sone
K初めてのstylus
K初めてのstylus
Kazuki Nakatani
終わりを出力するコマンドつくった
終わりを出力するコマンドつくった
xztaityozx
Pf borforras
Pf borforras
k_watanabe
Ruby のワンライナーについて
Ruby のワンライナーについて
Tomoya Kawanishi
ワタナベ難読化シェル芸
ワタナベ難読化シェル芸
xztaityozx
Hexo + Github + CircleCI + Netlifyでブログ運用
Hexo + Github + CircleCI + Netlifyでブログ運用
Masaya Morimoto
No More Noprototype Function
No More Noprototype Function
simotin13 Miyazaki
Rubyでやろう。データ解析導入編( CSV, XML, JSON)
Rubyでやろう。データ解析導入編( CSV, XML, JSON)
NAKAOKU Takahiro
CouchDB+OpenSocial - OSC 2009/Fall Tokyo
CouchDB+OpenSocial - OSC 2009/Fall Tokyo
Yohei Sasaki
超多進数変換関数を作ったよ
超多進数変換関数を作ったよ
Shoichi Takahashi
少し未来のコードレビュー
少し未来のコードレビュー
zaru sakuraba
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへ
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへ
Tomohiro Yamasaki
初心者のためのキャラクターの描き方のコツ 入門編
初心者のためのキャラクターの描き方のコツ 入門編
shinta rock
非エンジニア向けHTML勉強会その1
非エンジニア向けHTML勉強会その1
Karino Kyohei
アプリデザインのお勉強 UI/UXのお話
アプリデザインのお勉強 UI/UXのお話
shinta rock
正規表現勉強会
正規表現勉強会
zaru sakuraba
ワクワク電子工作
ワクワク電子工作
Shoichi Kakizaki
今さらながらRSpecに入門してみた
今さらながらRSpecに入門してみた
zaru sakuraba
エンジニアでもできる⁉︎それっぽいデザイン
エンジニアでもできる⁉︎それっぽいデザイン
shinta rock
スマホフロントエンド最速化手法
スマホフロントエンド最速化手法
zaru sakuraba
ほんわかSwift勉強資料
ほんわかSwift勉強資料
kouhei kawamata
0528 kanntigai ui_ux
0528 kanntigai ui_ux
Saori Matsui
どうしてプレゼン研究会を始めたのか
どうしてプレゼン研究会を始めたのか
Masahito Zembutsu
More Related Content
What's hot
終わりを出力するコマンドつくった
終わりを出力するコマンドつくった
xztaityozx
Pf borforras
Pf borforras
k_watanabe
Ruby のワンライナーについて
Ruby のワンライナーについて
Tomoya Kawanishi
ワタナベ難読化シェル芸
ワタナベ難読化シェル芸
xztaityozx
Hexo + Github + CircleCI + Netlifyでブログ運用
Hexo + Github + CircleCI + Netlifyでブログ運用
Masaya Morimoto
No More Noprototype Function
No More Noprototype Function
simotin13 Miyazaki
Rubyでやろう。データ解析導入編( CSV, XML, JSON)
Rubyでやろう。データ解析導入編( CSV, XML, JSON)
NAKAOKU Takahiro
CouchDB+OpenSocial - OSC 2009/Fall Tokyo
CouchDB+OpenSocial - OSC 2009/Fall Tokyo
Yohei Sasaki
超多進数変換関数を作ったよ
超多進数変換関数を作ったよ
Shoichi Takahashi
What's hot
(9)
終わりを出力するコマンドつくった
終わりを出力するコマンドつくった
Pf borforras
Pf borforras
Ruby のワンライナーについて
Ruby のワンライナーについて
ワタナベ難読化シェル芸
ワタナベ難読化シェル芸
Hexo + Github + CircleCI + Netlifyでブログ運用
Hexo + Github + CircleCI + Netlifyでブログ運用
No More Noprototype Function
No More Noprototype Function
Rubyでやろう。データ解析導入編( CSV, XML, JSON)
Rubyでやろう。データ解析導入編( CSV, XML, JSON)
CouchDB+OpenSocial - OSC 2009/Fall Tokyo
CouchDB+OpenSocial - OSC 2009/Fall Tokyo
超多進数変換関数を作ったよ
超多進数変換関数を作ったよ
Viewers also liked
少し未来のコードレビュー
少し未来のコードレビュー
zaru sakuraba
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへ
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへ
Tomohiro Yamasaki
初心者のためのキャラクターの描き方のコツ 入門編
初心者のためのキャラクターの描き方のコツ 入門編
shinta rock
非エンジニア向けHTML勉強会その1
非エンジニア向けHTML勉強会その1
Karino Kyohei
アプリデザインのお勉強 UI/UXのお話
アプリデザインのお勉強 UI/UXのお話
shinta rock
正規表現勉強会
正規表現勉強会
zaru sakuraba
ワクワク電子工作
ワクワク電子工作
Shoichi Kakizaki
今さらながらRSpecに入門してみた
今さらながらRSpecに入門してみた
zaru sakuraba
エンジニアでもできる⁉︎それっぽいデザイン
エンジニアでもできる⁉︎それっぽいデザイン
shinta rock
スマホフロントエンド最速化手法
スマホフロントエンド最速化手法
zaru sakuraba
ほんわかSwift勉強資料
ほんわかSwift勉強資料
kouhei kawamata
0528 kanntigai ui_ux
0528 kanntigai ui_ux
Saori Matsui
どうしてプレゼン研究会を始めたのか
どうしてプレゼン研究会を始めたのか
Masahito Zembutsu
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
Tsutomu Sogitani
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
MOCKS | Yuta Morishige
しょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedee
「MakeLeaps」請求書の作成、管理、郵送
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
MOCKS | Yuta Morishige
色彩センスのいらない配色講座
色彩センスのいらない配色講座
Mariko Yamaguchi
社内勉強会を継続成長させる方法
社内勉強会を継続成長させる方法
NTT Communications Technology Development
最速HTML勉強会
最速HTML勉強会
Chisa Youzaka
Viewers also liked
(20)
少し未来のコードレビュー
少し未来のコードレビュー
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへ
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへ
初心者のためのキャラクターの描き方のコツ 入門編
初心者のためのキャラクターの描き方のコツ 入門編
非エンジニア向けHTML勉強会その1
非エンジニア向けHTML勉強会その1
アプリデザインのお勉強 UI/UXのお話
アプリデザインのお勉強 UI/UXのお話
正規表現勉強会
正規表現勉強会
ワクワク電子工作
ワクワク電子工作
今さらながらRSpecに入門してみた
今さらながらRSpecに入門してみた
エンジニアでもできる⁉︎それっぽいデザイン
エンジニアでもできる⁉︎それっぽいデザイン
スマホフロントエンド最速化手法
スマホフロントエンド最速化手法
ほんわかSwift勉強資料
ほんわかSwift勉強資料
0528 kanntigai ui_ux
0528 kanntigai ui_ux
どうしてプレゼン研究会を始めたのか
どうしてプレゼン研究会を始めたのか
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
しょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedee
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
色彩センスのいらない配色講座
色彩センスのいらない配色講座
社内勉強会を継続成長させる方法
社内勉強会を継続成長させる方法
最速HTML勉強会
最速HTML勉強会
Recently uploaded
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
danielhu54
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
Recently uploaded
(9)
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
WEBページを表示するまで
1.
HTMLとかCSSでWEBページの設計をするけど
2.
人人人人人人人人人人人人人人人人人 > そもそもなんで他のサーバにある < >
ページを表示出来るんだ!? < Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y
3.
♫WEBページを表示するまで♫ 株式会社フルセイル 柿崎 昭一
4.
☠今回登場する2つのキーワード☠ IPアドレス DNSサーバー 今回はこの2つのキーワードにフォーカスを当てて 説明していきたいと思います。
5.
IPアドレスとはなんぞや? ネットワーク上で機器を識別であり インターネットに接続する際や 同じネットワーク上のパソコン間で 通信する際に、必ず必要になる。
6.
グローバルIPとローカルIP ローカルIPアドレス
7.
8.
ん?でもまてよ?
9.
今までページを閲覧するのに グローバルIPなんて見たこと無いな…
10.
とりあえず どっかのページ 見てみよう…
11.
12.
実はwww.~って グローバルIPアドレスを 人間がわかりやすいように置き換えたもの
13.
余談 ドメイン www.basicinc.jp ホスト FQDN
14.
実はwww.~って グローバルIPアドレスを 人間がわかりやすいように置き換えたもの
15.
DNSサーバー 人間がわかるURLとコンピュータが使う グローバルIPアドレスを結びつけるもの
16.
DNSが持っている情報
17.
DNS名前解決の流れ
18.
WEBページにアクセスするには (まとめ) ①FQDNを使ってDNSサーバにアクセス ②DNSサーバがFQDNを使って AレコードからグローバルIPを取得 ③取得したグローバルIPをクライアントに返す ④クライアントはグローバルIPを使って 目的のサーバに接続
19.
ここで少しハンズ・オン! ①実際にターミナルを使って名前解決をしてみよ う!! (digコマンド) ②相手側のサーバーが生きているか試してみよう!! (pingコマンド) ③相手サーバーの情報を所得してみよう!! (whoisコマンド)
Editor's Notes
~グローバルIP~ 世界中にはたくさんのパソコンやネットワーク機器が接続されているのは理解できると思います。 ネットワークというのは、いってみればパソコンやネットワーク機器、サーバーなどが網の目のようにつながっている状態です。 インターネットに参加してホームページをみたりしているのも、どこかのサーバーに保管されているデータを閲覧したりしていることになります。 IPアドレスというのは、こうしたパソコンやネットワーク機器などに1つ1つ分かりやすいように付けられた識別番号だと考えることができます。 分かりやすくいうと、例えばインターネット上では膨大な数のユーザーが行き来しているわけですが、ホームページを見たりアクセスしているのは、どこの誰なのか?というのを示しているのが グローバルIPアドレスです。 つまり1人1人 グローバルIPアドレスが割り当てられていることになります。このグローバルIPアドレスは、固有のものであり世界中で重複することはありません。電話番号や住所が重複しないのと同じです。 逆に言うとこのグローバルIPアドレスがないとインターネットには入ることはできません。 え?でもそんな番号もらった記憶はないけど。と言われるかもしれません。 グローバルIPアドレスは、基本的にプロバイダと契約して使用を開始した時点で割り当てられます。 ~ローカルIP~ さて次は ライベートIPアドレスです。プライベートIPアドレスはローカルIPアドレスともいいます。 例えば、自宅においても会社でも、プロバイダ契約は1つでルーターで複数台のパソコンを使用しているということは多いと思います。 ルーターに2台、3台パソコンがつながっていることはよくあることです。 この場合 グローバルIPアドレスはどうなるのでしょうか? プロバイダとの契約はあくまで1つなので グローバルIPアドレスも1つになります。 単純にいいますと、ルーターが代表してグローバルIPアドレスを1つ持っていることになります。インターネット通信はすべてルーターが行なっていて、パソコンの要求に応じて情報を返していることになります。 パソコンがいかにも直接やりとりしているようにも見えますが、実際はルーターが代表して行なっています。 ルーター側からするとパソコンが2台、3台あると、どれが誰のパソコンなのか分からなくなります。 ここで使われているのが プライベートIPアドレスです。 プライベートIPアドレスは、192.168.A.Bなどの組み合わせになります。 Aの部分はルーターのメーカーによって違いがあります。 Bの部分はそれぞれ割り当てられた固有の番号になるます。基本的に 1はルーター自身が持つ番号になりますので、各パソコンは2以降の数字になります。 つまりプライベートIPアドレスは、ルーターとパソコン間、またパソコンとパソコン間の通信を可能とさせるためのものです。
今北緯35度の21分 東経138度43分にいるんだよ〜 だと全然どこだかわからないですよね でも言い方を変えて富士山の山頂にいるだよ〜といえば一発でわかりますね このようにコンピュータも人間がわかりやすいようjにしてくれている。
ホスト名のところをサブドメインという人もいる
1.まずブラウザで「http://example.com」へアクセスする。するとクライアント側から「リゾルバ」というプログラムを使ってDNSサーバへ問い合わせます。 2.問い合わせを受けたDNSサーバは「http://example.com」のIPアドレスは「192.168.0.1」だと教えてくれます。 3.クライアントはDNSサーバに教えて貰った「192.168.0.1」というサーバへアクセス。 4.目的のサーバから画像やhtmlファイルなどが、クライアントのブラウザに表示される。 このような流れで「名前解決」を行なっています。
Download now