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

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

アプリのテストを書かなければならないと分かっているけども、書けていない人たちへ
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへアプリのテストを書かなければならないと分かっているけども、書けていない人たちへ
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへ
Tomohiro Yamasaki
 

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

Recently uploaded (12)

Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsUtilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
 
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
 
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
 

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ファイルなどが、クライアントのブラウザに表示される。 このような流れで「名前解決」を行なっています。