SlideShare a Scribd company logo
1 of 19
HTMLとかCSSでWEBページの設計をするけど
人人人人人人人人人人人人人人人人人
> そもそもなんで他のサーバにある <
> ページを表示出来るんだ!? <
Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y
♫WEBページを表示するまで♫
株式会社フルセイル
柿崎 昭一
☠今回登場する2つのキーワード☠
IPアドレス
DNSサーバー
今回はこの2つのキーワードにフォーカスを当てて
説明していきたいと思います。
IPアドレスとはなんぞや?
ネットワーク上で機器を識別であり
インターネットに接続する際や
同じネットワーク上のパソコン間で
通信する際に、必ず必要になる。
グローバルIPとローカルIP
ローカルIPアドレス
ん?でもまてよ?
今までページを閲覧するのに
グローバルIPなんて見たこと無いな…
とりあえず
どっかのページ
見てみよう…
実はwww.~って
グローバルIPアドレスを
人間がわかりやすいように置き換えたもの
余談
ドメイン
www.basicinc.jp
ホスト
FQDN
実はwww.~って
グローバルIPアドレスを
人間がわかりやすいように置き換えたもの
DNSサーバー
人間がわかるURLとコンピュータが使う
グローバルIPアドレスを結びつけるもの
DNSが持っている情報
DNS名前解決の流れ
WEBページにアクセスするには
(まとめ)
①FQDNを使ってDNSサーバにアクセス
②DNSサーバがFQDNを使って
AレコードからグローバルIPを取得
③取得したグローバルIPをクライアントに返す
④クライアントはグローバルIPを使って
目的のサーバに接続
ここで少しハンズ・オン!
①実際にターミナルを使って名前解決をしてみよ
う!!
(digコマンド)
②相手側のサーバーが生きているか試してみよう!!
(pingコマンド)
③相手サーバーの情報を所得してみよう!!
(whoisコマンド)

More Related Content

What's hot

終わりを出力するコマンドつくった
終わりを出力するコマンドつくった終わりを出力するコマンドつくった
終わりを出力するコマンドつくったxztaityozx
 
Ruby のワンライナーについて
Ruby のワンライナーについてRuby のワンライナーについて
Ruby のワンライナーについてTomoya Kawanishi
 
ワタナベ難読化シェル芸
ワタナベ難読化シェル芸ワタナベ難読化シェル芸
ワタナベ難読化シェル芸xztaityozx
 
Hexo + Github + CircleCI + Netlifyでブログ運用
Hexo + Github + CircleCI + Netlifyでブログ運用Hexo + Github + CircleCI + Netlifyでブログ運用
Hexo + Github + CircleCI + Netlifyでブログ運用Masaya Morimoto
 
Rubyでやろう。データ解析導入編( CSV, XML, JSON)
Rubyでやろう。データ解析導入編( CSV, XML, JSON)Rubyでやろう。データ解析導入編( CSV, XML, JSON)
Rubyでやろう。データ解析導入編( CSV, XML, JSON)NAKAOKU Takahiro
 
CouchDB+OpenSocial - OSC 2009/Fall Tokyo
CouchDB+OpenSocial - OSC 2009/Fall TokyoCouchDB+OpenSocial - OSC 2009/Fall Tokyo
CouchDB+OpenSocial - OSC 2009/Fall TokyoYohei Sasaki
 
超多進数変換関数を作ったよ
超多進数変換関数を作ったよ超多進数変換関数を作ったよ
超多進数変換関数を作ったよShoichi Takahashi
 

What's hot (9)

終わりを出力するコマンドつくった
終わりを出力するコマンドつくった終わりを出力するコマンドつくった
終わりを出力するコマンドつくった
 
Pf borforras
Pf borforrasPf borforras
Pf borforras
 
Ruby のワンライナーについて
Ruby のワンライナーについてRuby のワンライナーについて
Ruby のワンライナーについて
 
ワタナベ難読化シェル芸
ワタナベ難読化シェル芸ワタナベ難読化シェル芸
ワタナベ難読化シェル芸
 
Hexo + Github + CircleCI + Netlifyでブログ運用
Hexo + Github + CircleCI + Netlifyでブログ運用Hexo + Github + CircleCI + Netlifyでブログ運用
Hexo + Github + CircleCI + Netlifyでブログ運用
 
No More Noprototype Function
No More Noprototype FunctionNo More Noprototype Function
No More Noprototype Function
 
Rubyでやろう。データ解析導入編( CSV, XML, JSON)
Rubyでやろう。データ解析導入編( CSV, XML, JSON)Rubyでやろう。データ解析導入編( CSV, XML, JSON)
Rubyでやろう。データ解析導入編( CSV, XML, JSON)
 
CouchDB+OpenSocial - OSC 2009/Fall Tokyo
CouchDB+OpenSocial - OSC 2009/Fall TokyoCouchDB+OpenSocial - OSC 2009/Fall Tokyo
CouchDB+OpenSocial - OSC 2009/Fall Tokyo
 
超多進数変換関数を作ったよ
超多進数変換関数を作ったよ超多進数変換関数を作ったよ
超多進数変換関数を作ったよ
 

Viewers also liked

少し未来のコードレビュー
少し未来のコードレビュー少し未来のコードレビュー
少し未来のコードレビューzaru sakuraba
 
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへ
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへアプリのテストを書かなければならないと分かっているけども、書けていない人たちへ
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへTomohiro Yamasaki
 
初心者のためのキャラクターの描き方のコツ 入門編
初心者のためのキャラクターの描き方のコツ 入門編初心者のためのキャラクターの描き方のコツ 入門編
初心者のためのキャラクターの描き方のコツ 入門編shinta rock
 
非エンジニア向けHTML勉強会その1
非エンジニア向けHTML勉強会その1非エンジニア向けHTML勉強会その1
非エンジニア向けHTML勉強会その1Karino Kyohei
 
アプリデザインのお勉強 UI/UXのお話
アプリデザインのお勉強 UI/UXのお話アプリデザインのお勉強 UI/UXのお話
アプリデザインのお勉強 UI/UXのお話shinta rock
 
正規表現勉強会
正規表現勉強会正規表現勉強会
正規表現勉強会zaru sakuraba
 
今さらながらRSpecに入門してみた
今さらながらRSpecに入門してみた今さらながらRSpecに入門してみた
今さらながらRSpecに入門してみたzaru sakuraba
 
エンジニアでもできる⁉︎それっぽいデザイン
エンジニアでもできる⁉︎それっぽいデザインエンジニアでもできる⁉︎それっぽいデザイン
エンジニアでもできる⁉︎それっぽいデザインshinta rock
 
スマホフロントエンド最速化手法
スマホフロントエンド最速化手法スマホフロントエンド最速化手法
スマホフロントエンド最速化手法zaru sakuraba
 
ほんわかSwift勉強資料
ほんわかSwift勉強資料ほんわかSwift勉強資料
ほんわかSwift勉強資料kouhei kawamata
 
0528 kanntigai ui_ux
0528 kanntigai ui_ux0528 kanntigai ui_ux
0528 kanntigai ui_uxSaori Matsui
 
どうしてプレゼン研究会を始めたのか
どうしてプレゼン研究会を始めたのかどうしてプレゼン研究会を始めたのか
どうしてプレゼン研究会を始めたのかMasahito Zembutsu
 
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識Tsutomu Sogitani
 
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版MOCKS | Yuta Morishige
 
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】MOCKS | Yuta Morishige
 
色彩センスのいらない配色講座
色彩センスのいらない配色講座色彩センスのいらない配色講座
色彩センスのいらない配色講座Mariko Yamaguchi
 

Viewers also liked (20)

少し未来のコードレビュー
少し未来のコードレビュー少し未来のコードレビュー
少し未来のコードレビュー
 
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへ
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへアプリのテストを書かなければならないと分かっているけども、書けていない人たちへ
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへ
 
初心者のためのキャラクターの描き方のコツ 入門編
初心者のためのキャラクターの描き方のコツ 入門編初心者のためのキャラクターの描き方のコツ 入門編
初心者のためのキャラクターの描き方のコツ 入門編
 
非エンジニア向けHTML勉強会その1
非エンジニア向けHTML勉強会その1非エンジニア向けHTML勉強会その1
非エンジニア向けHTML勉強会その1
 
アプリデザインのお勉強 UI/UXのお話
アプリデザインのお勉強 UI/UXのお話アプリデザインのお勉強 UI/UXのお話
アプリデザインのお勉強 UI/UXのお話
 
正規表現勉強会
正規表現勉強会正規表現勉強会
正規表現勉強会
 
ワクワク電子工作
ワクワク電子工作ワクワク電子工作
ワクワク電子工作
 
今さらながらRSpecに入門してみた
今さらながらRSpecに入門してみた今さらながらRSpecに入門してみた
今さらながらRSpecに入門してみた
 
エンジニアでもできる⁉︎それっぽいデザイン
エンジニアでもできる⁉︎それっぽいデザインエンジニアでもできる⁉︎それっぽいデザイン
エンジニアでもできる⁉︎それっぽいデザイン
 
スマホフロントエンド最速化手法
スマホフロントエンド最速化手法スマホフロントエンド最速化手法
スマホフロントエンド最速化手法
 
ほんわかSwift勉強資料
ほんわかSwift勉強資料ほんわかSwift勉強資料
ほんわかSwift勉強資料
 
0528 kanntigai ui_ux
0528 kanntigai ui_ux0528 kanntigai ui_ux
0528 kanntigai ui_ux
 
どうしてプレゼン研究会を始めたのか
どうしてプレゼン研究会を始めたのかどうしてプレゼン研究会を始めたのか
どうしてプレゼン研究会を始めたのか
 
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
 
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
 
しょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedeeしょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedee
 
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
 
色彩センスのいらない配色講座
色彩センスのいらない配色講座色彩センスのいらない配色講座
色彩センスのいらない配色講座
 
社内勉強会を継続成長させる方法
社内勉強会を継続成長させる方法社内勉強会を継続成長させる方法
社内勉強会を継続成長させる方法
 
最速HTML勉強会
最速HTML勉強会最速HTML勉強会
最速HTML勉強会
 

Recently uploaded

[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[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」の紹介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 の勉強会で発表されたものです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論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNetToru Tamaki
 
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdfTSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdftaisei2219
 
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A surveyToru Tamaki
 
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...論文紹介: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 DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Danieldanielhu54
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムsugiuralab
 

Recently uploaded (9)

[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
 
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介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 の勉強会で発表されたものですSOPを理解する       2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
 
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet論文紹介: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.pdfTSAL 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論文紹介: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...論文紹介: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 DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
 

WEBページを表示するまで

Editor's Notes

  1. ~グローバル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アドレスは、ルーターとパソコン間、またパソコンとパソコン間の通信を可能とさせるためのものです。
  2. 今北緯35度の21分  東経138度43分にいるんだよ〜 だと全然どこだかわからないですよね でも言い方を変えて富士山の山頂にいるだよ〜といえば一発でわかりますね このようにコンピュータも人間がわかりやすいようjにしてくれている。
  3. ホスト名のところをサブドメインという人もいる
  4. 1.まずブラウザで「http://example.com」へアクセスする。するとクライアント側から「リゾルバ」というプログラムを使ってDNSサーバへ問い合わせます。 2.問い合わせを受けたDNSサーバは「http://example.com」のIPアドレスは「192.168.0.1」だと教えてくれます。 3.クライアントはDNSサーバに教えて貰った「192.168.0.1」というサーバへアクセス。 4.目的のサーバから画像やhtmlファイルなどが、クライアントのブラウザに表示される。 このような流れで「名前解決」を行なっています。