ホスト側のリクエストの受信からクライアント側でのレスポンスの処理までを見ていきます。
下記のページの続きです。
インターネット通信のしくみ ③ リクエストとレスポンス 1/2
WAN（World Area Network） を踏まえ、これから2回に分けてリクエストとレスポンスをもう少し詳しくみていきます。前回はインターネットのネットワー…
HekaTimeBox
このシリーズは インターネット通信のしくみ のタグでまとめています。
Indexx
リクエストの処理
リクエストが届いたら、サーバーはそのリクエストの内容を処理してレスポンスを返します。
バーチャルホスティング
IP アドレスは TCP/IP に割り当てられています。
そのため一般的には PC 1台につき IP アドレスは一つです。
WEB サイトにアクセスるには IP アドレスが必要なため、
それでは世界中の WEB サイトの数だけ PC が必要になります。
ロリポップはこのサイトのためだけに PC を1台用意しているかっていうと、
していません。
ホスティングとよばれる仕組みを使って一つの PC 内に複数の WEB サイトを運用しています。
ホスティングとはドメインとディレクトリの対応を取り、サーバーがリクエストのドメインによって振り分ける、というものです。
ホスティングを行うことで1台の PC で複数の WEB サイトを扱えます。
ひとつのホストがホスティングのみで複数のサイトを運営している場合、
全てのサイトで IP アドレスが同じになります。
一つの TCP/IP やサーバーソフトウェアを複数のサイトが共有して運用します。
ホスティングのみでサイトを運用している PC に限っては、
IP アドレスをホストのネットワーク上での住所、
ドメインをルートディレクトリの場所、と解釈できます。
下記のページでロリポップがホスティングを利用していることがわかります。
サーバーの仕様 | LOLIPOP! レンタルサーバー
このホストに入ってるすべての WEB サイトがこの IP アドレスになっています。
ドメインがないとサーバーがどのディレクトリにアクセスすればいいかわからないため、
IP アドレスの118.27.125.236でアクセスした場合にアクセス禁止の 403 エラーを返すようになっています。
VPS ( Vertual Private Server )
VPS は PC の中に仮想の PC をつくる仕組みです。
バーチャルホスティングは 1台で複数の WEB サイトを運用するための仕組みでした。
これに対し VPS は1台の PC で複数の仮想環境を構築し、それぞれ別の OS を入れられます。
別の OS を入れられるため個別の TCP/IP を持ち、個別の IP アドレスを割り振れます。
OS から違うため、サーバーも種類から個別に設定できます。
この仮想環境ひとつひとつを個別に貸し出しているサービスが VPS レンタルサーバーです。
ディレクトリではなく仮想環境の貸し出しを行っています。
ホスティング形式のレンタルサーバーよりも割高になりますが、
自分でサーバーを建ててアプリケーションに活用できるのが VPS です。
ネットワークを利用したアプリケーション開発で利用されているほか、WEB サイトでもトラフィックが多かったり リソース要件が高い場合は VPS でサーバーから設計されることがあります。
レスポンスの送信
クライアントの IP アドレス
レスポンスはクライアントにデータを送ることです。
ここで再度 IP アドレスの問題がでてきます。
IP アドレス = サブネット上での PC の住所です。
サーバーはクライアントの IP アドレスを知りません。
クライアントはリクエストを送る際、自身の IP アドレスをリクエストメッセージに付け加えてサーバーへ送信しています。
クライアント自身の PC にも IP アドレスが割り振られており、
ホスト側でそれを知ることができます。
つまり、悪意のあるサイトを閲覧しようとした場合、自身の IP アドレスを知られて悪用されるケースがあります。
IP アドレスの送信と対策
IPアドレスが流出したとしても、詳細な住所や個人情報は特定されません。
IP アドレスはあくまでインターネット上での住所であり、実際の地図上の住所とは全く違います。個人情報も紐づいていません。
個人情報の流出には繋がらないものの、不正アクセスやサイバー攻撃などに利用される可能性はあります。
完璧にリスクが 0 になっているわけはありませんが、対策を 2点ご紹介しておきます。
ファイアウォール
IP アドレスがサーバー側にバレるのはある意味しょうがないんです。
こちらの IP アドレスを送信しないと Web サイトが見れないわけですから。
ファイアウォールはその後の不正アクセスやサイバー攻撃を防ぐためのものです。
許可されたアクセスのみを通過させ、不正なアクセスをブロックすることでネットワークのセキュリティを強化します。
一番有名なのは Windows ファイアウォールです。
Windows 10 以降は Windows Defender ファイアウォールとして Windows Security の一部に組み込まれるようになり、保護機能の範囲が広がっています。
WAN からクライアントに向かって入ってくるアクセスは任意のタイミングだけではありません。
例えば Slack。Slack で通知が入ると「カカッ」っていいますが、あの時 Slack のサーバー側ののタイミングでクライアントにデータが送信されています。
この時、クライアントとサーバーは常に通信が開いた状態になっています。クライアントからのリクエストでいつでも通信ができる状態になっているため、サーバーから自由にデータを送れます。
もし誤ってクライアントが悪意のあるサーバーと通信を開いてしまった場合、
② の段階でホスト側に IP アドレスが知られ、
③ の段階でホスト側から自由にアクセスできるようになります。（内容は限られますが）
ファイアウォールは悪意のあるサーバーからのアクセスを遮断したり、クライアントから悪意のあるサーバーへのリクエストを遮断することにより、自身の PC を守る働きをします。
補足 : サーバーからのランダムアクセスは発生しない
自身の PC をサーバー化していない限り、WAN からのランダムアクセスは発生しません。
サーバーとクライアントのとのアクセスは必ずクライアントからの初期リクエストで始まります。
上記の図の場合、②を送らない限り③のリアルタイム通信は開始されません。
IP アドレスを隠ぺいする
お金や手間をかければ自身の IP アドレスを隠せます。
ただ、今の時代にわざわざ個人で IP アドレスを隠ぺいする人は少ないような気はします。
VPN （Vertual Private Network）
VPN は契約している VPN サーバーが割り当てる IP アドレスで通信できます。
有料です。有名なところだと下記のサービスがあります。
VPN はリモートワークで一気に広がりました。
目的は IP アドレスを隠ぺいするためではなく、安全な通信経路を確保することです。
インターネット上にトンネリングと呼ばれるプライベートな通信経路を確立させ、そこを通じで通信が行われます。
その過程で VPN が提供する IP アドレスを利用します。
また、オプションで VPN サーバーが割り振る静的 IP アドレスを利用した通信方法も提供されています。
プロキシサーバー
有料と無料のサービスがあります。
プロキシサーバーはクライアントのリクエストを代行してくれるサーバーです。
一旦プロキシサーバーに接続し、そこからプロキシサーバーが代行してホストへリクエストを投げます。
プロキシサーバーを中継するため、ホストに届く IP アドレスはプロキシサーバーのものになります。
IP アドレスは隠ぺいできますが、VPN よりもセキュリティ面では落ちます。
個人的には無料のものはおすすめしません。
プロキシサーバーのサービス自体に悪意があった場合に結局悪用されます。
Tor（The Onion Router）
Tor は無料の WEB ブラウザの名前です。
詳しい参考サイトがあったので置いておきます。
上記の参考サイトは VPN サービスを提供している NordVPN のブログです。
なので VPN との併用を最後の方で勧めていますが、VPN 契約するなら VPN だけでアクセスしていいと思います。
VPN で Tor を使う意味とは・・・？
モバイルネットワーク（ 4G / 5G / LTE ）
4G / 5G / LTE の IP アドレスはキャリアのものになります。
キャリアの回線を使用して WEB サイトにアクセスするとき、そのリクエストはまず基地局の NAT と呼ばれる装置で公開IPアドレスに変換され、その公開 IP アドレスでホストへリクエストを送ります。
そのためホストに届くのは自身の IP アドレスではなく NAT で変換されたアドレスが届きます。
プロキシサーバーと似ているんですが、NAT は IP アドレスの変換に特化しています。
レスポンスの処理
返ってきたリクエストの内容を Google Chrome が処理します。
ここでは実際に GET リクエストを送り、そのレスポンスの内容を見てみようと思います。
プログラムによるリクエストの送信
色々と書いてきましたが GET リクエストは数行で終わります。
名前解決や実際のリクエストの送信などを TCP/IP が行っているためです。
これから書いていくのは TCP/IP への依頼文です。
Google Chrome などの Web ブラウザでサイトを見る際は裏で同じようなことを行っています。
Windows Powershell
$response = Invoke-WebRequest -Uri "https://hekatimebox.main.jp/wordpress/2024/02/network-1/" $response.Content
コマンドプロンプト
curl を利用して GET リクエストを送ります。
ただ、コマンドプロンプトではレスポンスを直接出力できません。
そのため response.html に書き出します。
下記を実行する前に cd コマンドで任意の場所へ移動してください。
curl https://hekatimebox.main.jp/wordpress/2024/02/network-1/ > response.html
Python の requests
requests のインストールは pip install requests です。
import requests # 送りたいURL url = 'https://hekatimebox.main.jp/wordpress/2024/02/network-1/' # GET リクエストを送信 response = requests.get(url) # 応答の本文を表示 print(response.text)
レスポンスの内容
レスポンスは 1ページ分の html コードが返ってきます。
一応貼っておきますが WordPress を利用してるのもあって長いです。
スペースキーで開閉できます。
レスポンス
この部分はスペースキーで開閉できます。
<!DOCTYPE html>
<html lang="ja"><head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,user-scalable=yes" /><meta name="description" content="インターネット通信についておおまかに見ていきます。内容としては このページのリクエストを送信 サーバからこのページの html を返してもらう という内容を何回かに分けて書いていきます。次回以降は Python コードもでてきます。最終的にはソケットを利用した通信にも触れていきます。 インターネット通信の概観 今回は A さんの PC からこのページを Google Chrome を利用して閲覧する流れを見ていきます。 このサイトは ロリポップ のサーバーをレンタルしています。そのためロリポップが持っている PC の中にこのサイトやページがあります。あとで出てきますが、このサーバーは福岡にあり..." /><meta name="keywords" content="インターネット通信のしくみ" /><meta property="og:title" content="インターネット通信のしくみ ① 通信の概観" /><meta property="og:type" content="article" /><meta property="og:url" content="https://hekatimebox.main.jp/wordpress/2024/02/network-1/" /><meta property="og:image" content="https://hekatimebox.main.jp/wordpress/wp-content/themes/dp-voyageur/img/post_thumbnail/noimage.png" /><meta property="og:image:width" content="1600" /><meta property="og:image:height" content="1066" /><meta property="og:description" content="インターネット通信についておおまかに見ていきます。内容としては このページのリクエストを送信 サーバからこのページの html を返してもらう という内容を何回かに分けて書いていきます。次回以降は Python コードもでてきます。最終的にはソケットを利用した通信にも触れていきます。 インターネット通信の概観 今回は A さんの PC からこのページを Google Chrome を利用して閲覧する流れを見ていきます。 このサイトは ロリポップ のサーバーをレンタルしています。そのためロリポップが持っている PC の中にこのサイトやページがあります。あとで出てきますが、このサーバーは福岡にあり..." /><meta property="og:site_name" content="HekaTimeBox" /><link rel="canonical" href="https://hekatimebox.main.jp/wordpress/2024/02/network-1/" /><title>インターネット通信のしくみ ① 通信の概観 | HekaTimeBox</title>
<meta name='robots' content='max-image-preview:large' />
<link rel="dns-prefetch" href="//connect.facebook.net" /><link rel="dns-prefetch" href="//secure.gravatar.com" /><link rel="dns-prefetch" href="//api.pinterest.com" /><link rel="dns-prefetch" href="//jsoon.digitiminimi.com" /><link rel="dns-prefetch" href="//b.hatena.ne.jp" /><link rel="dns-prefetch" href="//platform.twitter.com" /><meta http-equiv="Last-Modified" content="Fri, 16 Feb. 2024 20:50:17 +0900" /><link rel="pingback" href="https://hekatimebox.main.jp/wordpress/xmlrpc.php" /><link rel='dns-prefetch' href='//ajax.googleapis.com' />
<link rel="alternate" type="application/rss+xml" title="HekaTimeBox » フィード" href="https://hekatimebox.main.jp/wordpress/feed/" />
<link rel="alternate" type="application/rss+xml" title="HekaTimeBox » コメントフィード" href="https://hekatimebox.main.jp/wordpress/comments/feed/" />
<link rel="alternate" type="application/rss+xml" title="HekaTimeBox » インターネット通信のしくみ ① 通信の概観 のコメントのフィード" href="https://hekatimebox.main.jp/wordpress/2024/02/network-1/feed/" />
<script>
/* <![CDATA[ */
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/14.0.0\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/14.0.0\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/hekatimebox.main.jp\/wordpress\/wp-includes\/js\/wp-emoji-release.min.js?ver=6.4.3"}};
/*! This file is auto-generated */
!function(i,n){var o,s,e;function c(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function p(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data),r=(e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0),new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data));return t.every(function(e,t){return e===r[t]})}function u(e,t,n){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\uddfa\ud83c\uddf3","\ud83c\uddfa\u200b\ud83c\uddf3")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!n(e,"\ud83e\udef1\ud83c\udffb\u200d\ud83e\udef2\ud83c\udfff","\ud83e\udef1\ud83c\udffb\u200b\ud83e\udef2\ud83c\udfff")}return!1}function f(e,t,n){var r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):i.createElement("canvas"),a=r.getContext("2d",{willReadFrequently:!0}),o=(a.textBaseline="top",a.font="600 32px Arial",{});return e.forEach(function(e){o[e]=t(a,e,n)}),o}function t(e){var t=i.createElement("script");t.src=e,t.defer=!0,i.head.appendChild(t)}"undefined"!=typeof Promise&&(o="wpEmojiSettingsSupports",s=["flag","emoji"],n.supports={everything:!0,everythingExceptFlag:!0},e=new Promise(function(e){i.addEventListener("DOMContentLoaded",e,{once:!0})}),new Promise(function(t){var n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),p.toString()].join(",")+"));",r=new Blob([e],{type:"text/javascript"}),a=new Worker(URL.createObjectURL(r),{name:"wpTestEmojiSupports"});return void(a.onmessage=function(e){c(n=e.data),a.terminate(),t(n)})}catch(e){}c(n=f(s,u,p))}t(n)}).then(function(e){for(var t in e)n.supports[t]=e[t],n.supports.everything=n.supports.everything&&n.supports[t],"flag"!==t&&(n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&n.supports[t]);n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&!n.supports.flag,n.DOMReady=!1,n.readyCallback=function(){n.DOMReady=!0}}).then(function(){return e}).then(function(){var e;n.supports.everything||(n.readyCallback(),(e=n.source||{}).concatemoji?t(e.concatemoji):e.wpemoji&&e.twemoji&&(t(e.twemoji),t(e.wpemoji)))}))}((window,document),window._wpemojiSettings);
/* ]]> */
</script>
<style id='wp-emoji-styles-inline-css' type='text/css'>
img.wp-smiley, img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 0.07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<link rel='stylesheet' id='wp-block-library-css' href='https://hekatimebox.main.jp/wordpress/wp-includes/css/dist/block-library/style.min.css?ver=6.4.3' type='text/css' media='all' />
<link rel='stylesheet' id='arkhe-blocks-front-css' href='https://hekatimebox.main.jp/wordpress/wp-content/plugins/arkhe-blocks/dist/css/front.css?ver=2.22.1' type='text/css' media='all' />
<style id='arkhe-blocks-front-inline-css' type='text/css'>
body{--arkb-marker-color:#ffdc40;--arkb-marker-start:1em;--arkb-marker-style:linear-gradient(transparent var(--arkb-marker-start), var(--arkb-marker-color) 0)}
</style>
<link rel='stylesheet' id='arkhe-blocks-accordion-style-css' href='https://hekatimebox.main.jp/wordpress/wp-content/plugins/arkhe-blocks/dist/gutenberg/blocks/accordion/index.css?ver=2.22.1' type='text/css' media='all' />
<link rel='stylesheet' id='arkhe-blocks-blog-card-style-css' href='https://hekatimebox.main.jp/wordpress/wp-content/plugins/arkhe-blocks/dist/gutenberg/blocks/blog-card/index.css?ver=2.22.1' type='text/css' media='all' />
<link rel='stylesheet' id='arkhe-blocks-button-style-css' href='https://hekatimebox.main.jp/wordpress/wp-content/plugins/arkhe-blocks/dist/gutenberg/blocks/button/index.css?ver=2.22.1' type='text/css' media='all' />
<link rel='stylesheet' id='arkhe-blocks-columns-style-css' href='https://hekatimebox.main.jp/wordpress/wp-content/plugins/arkhe-blocks/dist/gutenberg/blocks/columns/index.css?ver=2.22.1' type='text/css' media='all' />
<link rel='stylesheet' id='arkhe-blocks-container-style-css' href='https://hekatimebox.main.jp/wordpress/wp-content/plugins/arkhe-blocks/dist/gutenberg/blocks/container/index.css?ver=2.22.1' type='text/css' media='all' />
<link rel='stylesheet' id='arkhe-blocks-faq-style-css' href='https://hekatimebox.main.jp/wordpress/wp-content/plugins/arkhe-blocks/dist/gutenberg/blocks/faq/index.css?ver=2.22.1' type='text/css' media='all' />
<link rel='stylesheet' id='arkhe-blocks-dl-style-css' href='https://hekatimebox.main.jp/wordpress/wp-content/plugins/arkhe-blocks/dist/gutenberg/blocks/dl/index.css?ver=2.22.1' type='text/css' media='all' />
<link rel='stylesheet' id='arkhe-blocks-icon-style-css' href='https://hekatimebox.main.jp/wordpress/wp-content/plugins/arkhe-blocks/dist/gutenberg/blocks/icon/index.css?ver=2.22.1' type='text/css' media='all' />
<link rel='stylesheet' id='arkhe-blocks-notice-style-css' href='https://hekatimebox.main.jp/wordpress/wp-content/plugins/arkhe-blocks/dist/gutenberg/blocks/notice/index.css?ver=2.22.1' type='text/css' media='all' />
<link rel='stylesheet' id='arkhe-blocks-section-style-css' href='https://hekatimebox.main.jp/wordpress/wp-content/plugins/arkhe-blocks/dist/gutenberg/blocks/section/index.css?ver=2.22.1' type='text/css' media='all' />
<link rel='stylesheet' id='arkhe-blocks-section-heading-style-css' href='https://hekatimebox.main.jp/wordpress/wp-content/plugins/arkhe-blocks/dist/gutenberg/blocks/section-heading/index.css?ver=2.22.1' type='text/css' media='all' />
<link rel='stylesheet' id='arkhe-blocks-step-style-css' href='https://hekatimebox.main.jp/wordpress/wp-content/plugins/arkhe-blocks/dist/gutenberg/blocks/step/index.css?ver=2.22.1' type='text/css' media='all' />
<link rel='stylesheet' id='arkhe-blocks-tab-style-css' href='https://hekatimebox.main.jp/wordpress/wp-content/plugins/arkhe-blocks/dist/gutenberg/blocks/tab/index.css?ver=2.22.1' type='text/css' media='all' />
<link rel='stylesheet' id='arkhe-blocks-timeline-style-css' href='https://hekatimebox.main.jp/wordpress/wp-content/plugins/arkhe-blocks/dist/gutenberg/blocks/timeline/index.css?ver=2.22.1' type='text/css' media='all' />
<link rel='stylesheet' id='arkhe-blocks-toc-style-css' href='https://hekatimebox.main.jp/wordpress/wp-content/plugins/arkhe-blocks/dist/gutenberg/blocks/toc/index.css?ver=2.22.1' type='text/css' media='all' />
<style id='classic-theme-styles-inline-css' type='text/css'>
/*! This file is auto-generated */
.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}
</style>
<style id='global-styles-inline-css' type='text/css'>
body{--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}
.wp-block-navigation a:where(:not(.wp-element-button)){color: inherit;}
:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}
:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}
.wp-block-pullquote{font-size: 1.5em;line-height: 1.6;}
</style>
<link rel='stylesheet' id='parent-style-css' href='https://hekatimebox.main.jp/wordpress/wp-content/themes/dp-voyageur/style.css?ver=6.4.3' type='text/css' media='all' />
<link rel='stylesheet' id='base-structure-css' href='https://hekatimebox.main.jp/wordpress/wp-content/themes/dp-voyageur-child/css/base-structure.css?ver=6.4.3' type='text/css' media='all' />
<link rel='stylesheet' id='single-page-css' href='https://hekatimebox.main.jp/wordpress/wp-content/themes/dp-voyageur-child/css/single-page.css?ver=6.4.3' type='text/css' media='all' />
<link rel='stylesheet' id='toc-style-css' href='https://hekatimebox.main.jp/wordpress/wp-content/themes/dp-voyageur-child/css/toc-style.css?ver=6.4.3' type='text/css' media='all' />
<link rel='stylesheet' id='global-nav-css' href='https://hekatimebox.main.jp/wordpress/wp-content/themes/dp-voyageur-child/css/global-nav.css?ver=6.4.3' type='text/css' media='all' />
<link rel='stylesheet' id='code-css' href='https://hekatimebox.main.jp/wordpress/wp-content/themes/dp-voyageur-child/css/block/code.css?ver=6.4.3' type='text/css' media='all' />
<link rel='stylesheet' id='p-css' href='https://hekatimebox.main.jp/wordpress/wp-content/themes/dp-voyageur-child/css/block/p.css?ver=6.4.3' type='text/css' media='all' />
<link rel='stylesheet' id='list-css' href='https://hekatimebox.main.jp/wordpress/wp-content/themes/dp-voyageur-child/css/block/list.css?ver=6.4.3' type='text/css' media='all' />
<link rel='stylesheet' id='img-css' href='https://hekatimebox.main.jp/wordpress/wp-content/themes/dp-voyageur-child/css/block/img.css?ver=6.4.3' type='text/css' media='all' />
<link rel='stylesheet' id='header-css' href='https://hekatimebox.main.jp/wordpress/wp-content/themes/dp-voyageur-child/css/block/header.css?ver=6.4.3' type='text/css' media='all' />
<link rel='stylesheet' id='hide-block-css' href='https://hekatimebox.main.jp/wordpress/wp-content/themes/dp-voyageur-child/css/block/hide-block.css?ver=6.4.3' type='text/css' media='all' />
<link rel='stylesheet' id='accordion-css' href='https://hekatimebox.main.jp/wordpress/wp-content/themes/dp-voyageur-child/css/arkhe-brock/accordion.css?ver=6.4.3' type='text/css' media='all' />
<link rel='stylesheet' id='photo-css' href='https://hekatimebox.main.jp/wordpress/wp-content/themes/dp-voyageur-child/css/top-page/photo.css?ver=6.4.3' type='text/css' media='all' />
<link rel='stylesheet' id='child-style-css' href='https://hekatimebox.main.jp/wordpress/wp-content/themes/dp-voyageur-child/style.css?ver=6.4.3' type='text/css' media='all' />
<link rel='stylesheet' id='digipress-css' href='https://hekatimebox.main.jp/wordpress/wp-content/themes/dp-voyageur/css/style.css?ver=20240201081011' type='text/css' media='all' />
<link rel='stylesheet' id='wow-css' href='https://hekatimebox.main.jp/wordpress/wp-content/themes/dp-voyageur/css/animate.css?ver=2.1.6.6' type='text/css' media='all' />
<link rel='stylesheet' id='dp-visual-css' href='https://hekatimebox.main.jp/wordpress/wp-content/uploads/digipress/voyageur/css/visual-custom.css?ver=20240215114704' type='text/css' media='all' />
<link rel='stylesheet' id='fancybox-css' href='https://hekatimebox.main.jp/wordpress/wp-content/plugins/easy-fancybox/fancybox/1.5.4/jquery.fancybox.min.css?ver=6.4.3' type='text/css' media='screen' />
<link rel='stylesheet' id='enlighterjs-css' href='https://hekatimebox.main.jp/wordpress/wp-content/plugins/enlighter/cache/enlighterjs.min.css?ver=TuVKmYOe1W53vsx' type='text/css' media='all' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js?ver=6.4.3" id="jquery-js"></script>
<link rel="https://api.w.org/" href="https://hekatimebox.main.jp/wordpress/wp-json/" /><link rel="alternate" type="application/json" href="https://hekatimebox.main.jp/wordpress/wp-json/wp/v2/posts/185" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://hekatimebox.main.jp/wordpress/xmlrpc.php?rsd" />
<link rel='shortlink' href='https://hekatimebox.main.jp/wordpress/?p=185' />
<link rel="alternate" type="application/json+oembed" href="https://hekatimebox.main.jp/wordpress/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fhekatimebox.main.jp%2Fwordpress%2F2024%2F02%2Fnetwork-1%2F" />
<link rel="alternate" type="text/xml+oembed" href="https://hekatimebox.main.jp/wordpress/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fhekatimebox.main.jp%2Fwordpress%2F2024%2F02%2Fnetwork-1%2F&format=xml" />
<meta name="generator" content="Site Kit by Google 1.113.0" /><link rel="preconnect" href="https://fonts.gstatic.com" /><link href="https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap" rel="stylesheet" /><script>var j$=jQuery;</script>
<script>
(function(d) {
var config = {
kitId: 'hlb7ijk',
scriptTimeout: 3000,
async: true
},
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
})(document);
</script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
</head><body class="post-template-default single single-post postid-185 single-format-standard main-body" data-loader-bg-color="#000000" data-ct-sns-cache="true" data-ct-sns-cache-time="86400000"><div class="main-wrap"><header id="header_container" class="header_container">
<div class="header_content clearfix">
<div class="h_group"><h1 class="hd_title txt wow fadeInDown"><a href="https://hekatimebox.main.jp/wordpress/" title="HekaTimeBox" data-wpel-link="internal">HekaTimeBox</a></h1></div><nav id="global_menu_nav" class="global_menu_nav wow fadeInLeft"><ul id="global_menu_ul" class="global_menu_ul"><li id="menu-item-552" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home"><a href="https://hekatimebox.main.jp/wordpress/" class="menu-link" data-wpel-link="internal"><span class="menu-title">ホーム</span><span class="gnav-bd"></span></a></li>
<li id="menu-item-551" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent"><a href="https://hekatimebox.main.jp/wordpress/category/web-%e3%83%8d%e3%83%83%e3%83%88%e3%83%af%e3%83%bc%e3%82%af/" class="menu-link" data-wpel-link="internal"><span class="menu-title">WEB / ネットワーク</span><span class="gnav-bd"></span></a></li>
</ul></nav><div id="hd_misc_div" class="hd_misc_div"><input type="checkbox" aria-hidden="true" id="search-modal-trigger" class="search-modal-trigger" /><label for="search-modal-trigger" role="button" id="header-search" class="header-search wow fadeInUp"><i class="modal-trigger icon-search"></i></label><div class="search-modal-window"><form role="search" method="get" class="search-form no-params" target="_top" action="https://hekatimebox.main.jp/wordpress/"><div class="words-area"><label><span class="screen-reader-text">検索</span><input type="search" class="search-field" placeholder="キーワードを入力して検索" value="" name="s" title="検索" required /></label><button type="submit" class="search-btn"><i class="icon-search"></i></button></div></form></div></div><div class="copyright wow fadeInUp" data-wow-delay="0.3s"><div class="inner">© 2024 <a href="https://hekatimebox.main.jp/wordpress/" data-wpel-link="internal"><small>HekaTimeBox</small></a>
</div></div>
</div><div id="header_toggle" class=" wow fadeInUp" data-wow-delay="0.3s"><i class="toggle tgbtn icon-cross"></i><i id="gotop" class="tgbtn icon-up-light"></i></div>
</header>
<i id="mq_menu_tgl" class="toggle tgbtn icon-left-light"></i><div id="header-banner-outer" class="header-banner-outer hd_img"><div id="header-banner-inner" class="header-banner-inner hd_img no_widget" style="background-image:url('');"></div></div><div id="container" class="dp-container singular clearfix"><div class="content-wrap clearfix"><div id="content" class="content two-col right"><article id="post-185" class="single-article post-185 post type-post status-publish format-standard category-web- tag-5"><header>
<h1 class="entry-title single-title"><span class="wow fadeInDown">インターネット通信のしくみ ① 通信の概観</span></h1><div class="single_post_meta wow fadeInUp"><div class="first_row clearfix"><div class="meta meta-cat"><a href="https://hekatimebox.main.jp/wordpress/category/web-%e3%83%8d%e3%83%83%e3%83%88%e3%83%af%e3%83%bc%e3%82%af/" rel="tag" class=" cat-color3">WEB / ネットワーク</a></div><div class="meta meta-date"><time datetime="2024-02-14T06:51:45+09:00" class="published icon-clock eng"><span class="date_month_en_full">February</span> <span class="date_day">14</span>, <span class="date_year">2024</span></time></div><div class="meta meta-author vcard"><span class="author-by">By </span><a href="https://hekatimebox.main.jp/wordpress/author/tomonosuke/" rel="author" title="Show articles of this user." class="fn" data-wpel-link="internal"><span class="name">tomonosuke</span></a></div><div class="meta time_for_reading icon-alarm">約6分</div></div></div></header><div class="entry entry-content">
<p></p>
<p>インターネット通信についておおまかに見ていきます。<br>内容としては</p>
<ol>
<li>このページのリクエストを送信</li>
<li>サーバからこのページの html を返してもらう</li>
</ol>
<p>という内容を何回かに分けて書いていきます。<br>次回以降は Python コードもでてきます。<br>最終的にはソケットを利用した通信にも触れていきます。</p>
<div class="dp_toc_container pos-before_first_h allow-toggle" role="navigation" data-margin="30"><p class="toc_title_block"><span class="toc_title icon-list">INDEX</span><span class="toc_toggle icon-up-open" role="button"></span></p><ul class="dp_toc_ul has_title"><li><a href="#e382a4e383b3e382bfe383bce3838de38383e38388e9809ae4bfa1e381aee6a682e8a6b3-1">インターネット通信の概観</a><ul><li><a href="#lan-e381a8-wan-2">LAN と WAN</a></li><li><a href="#e382b5e383bce38390e383bce38282-lan-3">サーバーも LAN</a></li><li><a href="#wan-e381a8e38397e383ade38390e382a4e38380-4">WAN とプロバイダ</a></li></ul></li><li><a href="#e383aae382afe382a8e382b9e38388e381a8e383ace382b9e3839de383b3e382b9-5">リクエストとレスポンス</a><ul><li><a href="#e383aae382afe382a8e382b9e38388-e382b5e383bce38390e383bce381b8e381aee98081e4bfa1-6">リクエスト : サーバーへの送信</a></li><li><a href="#e383ace382b9e3839de383b3e382b9-e382b5e383bce38390e383bce3818be38289e381aee8bf94e4bfa1-7">レスポンス : サーバーからの返信</a></li></ul></li><li><a href="#e381bee381a8e38281-8">まとめ</a></li></ul></div><div id="toc_container" class="toc_transparent no_bullets"><p class="toc_title">Contents</p><ul class="toc_list"><li><a href="#i">インターネット通信の概観</a><ul><li><a href="#LAN_WAN">LAN と WAN</a></li><li><a href="#_LAN">サーバーも LAN</a></li><li><a href="#WAN">WAN とプロバイダ</a></li></ul></li><li><a href="#i-2">リクエストとレスポンス</a><ul><li><a href="#i-3">リクエスト : サーバーへの送信</a></li><li><a href="#i-4">レスポンス : サーバーからの返信</a></li></ul></li><li><a href="#i-5">まとめ</a></li></ul></div>
<h2 class="wp-block-heading" id="e382a4e383b3e382bfe383bce3838de38383e38388e9809ae4bfa1e381aee6a682e8a6b3-1"><span id="i">インターネット通信の概観</span></h2>
<p>今回は A さんの PC からこのページを Google Chrome を利用して閲覧する流れを見ていきます。</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img fetchpriority="high" decoding="async" width="962" height="229" src="https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/bc3ded98a3b0504f28467781a9b3288d-1.png" alt="" class="wp-image-425" srcset="https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/bc3ded98a3b0504f28467781a9b3288d-1.png 962w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/bc3ded98a3b0504f28467781a9b3288d-1-300x71.png 300w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/bc3ded98a3b0504f28467781a9b3288d-1-768x183.png 768w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/bc3ded98a3b0504f28467781a9b3288d-1-450x107.png 450w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/bc3ded98a3b0504f28467781a9b3288d-1-900x214.png 900w" sizes="(max-width: 962px) 100vw, 962px" /></figure></div>
<p>このサイトは <a href="https://lolipop.jp/" data-wpel-link="external" target="_blank" rel="external noopener noreferrer">ロリポップ</a> のサーバーをレンタルしています。<br>そのためロリポップが持っている PC の中にこのサイトやページがあります。<br>あとで出てきますが、このサーバーは福岡にあります。<br>A さんは Chorme を利用して福岡の PC にアクセスすることでこのページを閲覧できます。</p>
<p>東京にいようがアメリカにいようがアフリカにいようが、<br>このページを見るには福岡の PC にアクセスする必要があります。<br>今現在のあなたも、PC や Chromeではないかもしれませんが同じことをしています。<br>iphone や PS5、Safari や Edge からでもこれから書いていく仕組みは同じです。</p>
<h3 class="wp-block-heading" id="lan-e381a8-wan-2"><span id="LAN_WAN">LAN と WAN</span></h3>
<p>A さんの家庭は奥さんの iphone や PS5、無線 Wifi などがあるとします。<br>これらはひとつのルーターから繋がっており、<br>このルーターから伸びるひとかたまりのネットワークを<br><strong>LAN（ Local Area Network ）</strong>と呼びます。</p>
<p>LAN ケーブルの LAN です。<br></p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="582" height="532" src="https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/bf57aa33b802c89f225dd29a2a647ca2-1.png" alt="" class="wp-image-460" srcset="https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/bf57aa33b802c89f225dd29a2a647ca2-1.png 582w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/bf57aa33b802c89f225dd29a2a647ca2-1-300x274.png 300w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/bf57aa33b802c89f225dd29a2a647ca2-1-350x320.png 350w" sizes="(max-width: 582px) 100vw, 582px" /></figure></div>
<p>また、ネットワークの文脈では<br>PC や iphone など、サーバーにアクセスする端末をクライアントと呼びます。</p>
<h3 class="wp-block-heading" id="e382b5e383bce38390e383bce38282-lan-3"><span id="_LAN">サーバーも LAN</span></h3>
<p><a href="https://www.google.com/search?q=%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%83%AB%E3%83%BC%E3%83%A0&sca_esv=f61bafd3095e347f&hl=ja&tbm=isch&sxsrf=ACQVn0-O5tiftnBVPbBrW7oD8e9feXP4Ng%3A1707950290502&source=hp&biw=1920&bih=911&ei=0kDNZa-fHP3f2roPur6ooAI&iflsig=ANes7DEAAAAAZc1O4uTZ9r-H6RMj6ougIG1hyE-y122d&ved=0ahUKEwiv0O3S8quEAxX9r1YBHTofCiQQ4dUDCA8&uact=5&oq=%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%83%AB%E3%83%BC%E3%83%A0&gs_lp=EgNpbWciFeOCteODvOODkOODvOODq-ODvOODoDIEECMYJzIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgAQyBRAAGIAEMgUQABiABEiaElAAWMwOcAB4AJABAJgBYKABvgeqAQIxMrgBA8gBAPgBAYoCC2d3cy13aXotaW1nwgIKEAAYgAQYBBixA8ICCBAAGIAEGLEDwgIHEAAYgAQYBMICBhAAGAMYBMICDRAAGIAEGAQYsQMYgwE&sclient=img" data-wpel-link="external" target="_blank" rel="external noopener noreferrer">「サーバールーム」</a>で画像検索するとサーバーが置かれている部屋の画像がでてきます。<br>一般的にサーバールームの PC は 1台ではなく複数台あります。<br>これらの PC も A さんの家庭と同じようにルーターを基準にした LAN を構築しています。</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="550" height="532" src="https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/797dbe1616e4ccdfb4e4a7e22013bacd-3.png" alt="" class="wp-image-462" srcset="https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/797dbe1616e4ccdfb4e4a7e22013bacd-3.png 550w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/797dbe1616e4ccdfb4e4a7e22013bacd-3-300x290.png 300w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/797dbe1616e4ccdfb4e4a7e22013bacd-3-331x320.png 331w" sizes="(max-width: 550px) 100vw, 550px" /></figure></div>
<p>ここでは PC-01 という PC の中にこのページが保存されていると仮定します。</p>
<p>ネットワークの文脈では何かを提供する側の端末をホストと呼びます。</p>
<h3 class="wp-block-heading" id="wan-e381a8e38397e383ade38390e382a4e38380-4"><span id="WAN">WAN とプロバイダ</span></h3>
<p>つまり、インターネット通信はクライアント側の LAN とホスト側の LAN を繋げて通信します。<br>一般的には。</p>
<p>そしてこの LAN と LAN の間には<br>WAN（ World Area Network ）と呼ばれるネットワークの中核があり、<br>WAN と LAN を結ぶ役割をしているのが ISP（ Internet Service Provider ）<br>通称 プロバイダ です。</p>
<div class="wp-block-image">
<figure data-wp-context="{ "core":
{ "image":
{ "imageLoaded": false,
"initialized": false,
"lightboxEnabled": false,
"hideAnimationEnabled": false,
"preloadInitialized": false,
"lightboxAnimation": "zoom",
"imageUploadedSrc": "https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/47ca769da4dbedeccf9bdc9c6eee45ea-20240215-053659.png",
"imageCurrentSrc": "",
"targetWidth": "1784",
"targetHeight": "552",
"scaleAttr": "",
"dialogLabel": "拡大された画像"
}
}
}" data-wp-interactive class="aligncenter size-full wp-lightbox-container"><img loading="lazy" decoding="async" width="1784" height="552" data-wp-effect--setStylesOnResize="effects.core.image.setStylesOnResize" data-wp-effect="effects.core.image.setButtonStyles" data-wp-init="effects.core.image.initOriginImage" data-wp-on--click="actions.core.image.showLightbox" data-wp-on--load="actions.core.image.handleLoad" src="https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/47ca769da4dbedeccf9bdc9c6eee45ea-20240215-053659.png" alt="" class="wp-image-458" srcset="https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/47ca769da4dbedeccf9bdc9c6eee45ea-20240215-053659.png 1784w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/47ca769da4dbedeccf9bdc9c6eee45ea-20240215-053659-300x93.png 300w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/47ca769da4dbedeccf9bdc9c6eee45ea-20240215-053659-1024x317.png 1024w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/47ca769da4dbedeccf9bdc9c6eee45ea-20240215-053659-768x238.png 768w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/47ca769da4dbedeccf9bdc9c6eee45ea-20240215-053659-1536x475.png 1536w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/47ca769da4dbedeccf9bdc9c6eee45ea-20240215-053659-450x139.png 450w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/47ca769da4dbedeccf9bdc9c6eee45ea-20240215-053659-900x278.png 900w" sizes="(max-width: 1784px) 100vw, 1784px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="画像を拡大"
data-wp-on--click="actions.core.image.showLightbox"
data-wp-style--right="context.core.image.imageButtonRight"
data-wp-style--top="context.core.image.imageButtonTop"
>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
</svg>
</button> <div data-wp-body="" class="wp-lightbox-overlay zoom"
data-wp-bind--role="selectors.core.image.roleAttribute"
data-wp-bind--aria-label="selectors.core.image.dialogLabel"
data-wp-class--initialized="context.core.image.initialized"
data-wp-class--active="context.core.image.lightboxEnabled"
data-wp-class--hideAnimationEnabled="context.core.image.hideAnimationEnabled"
data-wp-bind--aria-modal="selectors.core.image.ariaModal"
data-wp-effect="effects.core.image.initLightbox"
data-wp-on--keydown="actions.core.image.handleKeydown"
data-wp-on--touchstart="actions.core.image.handleTouchStart"
data-wp-on--touchmove="actions.core.image.handleTouchMove"
data-wp-on--touchend="actions.core.image.handleTouchEnd"
data-wp-on--click="actions.core.image.hideLightbox"
tabindex="-1"
>
<button type="button" aria-label="閉じる" style="fill: #000" class="close-button" data-wp-on--click="actions.core.image.hideLightbox">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>
</button>
<div class="lightbox-image-container"><div class="wp-block-image">
<figure class="aligncenter size-full responsive-image"><img decoding="async" data-wp-bind--src="context.core.image.imageCurrentSrc" data-wp-style--object-fit="selectors.core.image.lightboxObjectFit" src="" alt="" class="wp-image-458"/></figure></div></div>
<div class="lightbox-image-container"><div class="wp-block-image">
<figure class="aligncenter size-full enlarged-image"><img decoding="async" data-wp-bind--src="selectors.core.image.enlargedImgSrc" data-wp-style--object-fit="selectors.core.image.lightboxObjectFit" src="" alt="" class="wp-image-458"/></figure></div></div>
<div class="scrim" style="background-color: #fff" aria-hidden="true"></div>
</div></figure></div>
<p>これが身近なインターネットの通信を最も俯瞰した図です。<br>一般的な家庭と一般的なサーバーにおいてはこの形で通信しています。</p>
<h2 class="wp-block-heading" id="e383aae382afe382a8e382b9e38388e381a8e383ace382b9e3839de383b3e382b9-5"><span id="i-2">リクエストとレスポンス</span></h2>
<p>ルーターってなんやねん？とか、<br>プロバイダって具体的になんやねん？とか、<br>外で Wifi 繋がるやんけ<br>っていう話はここではしません。</p>
<p>ここではブラウザがサーバーとどういった流れで通信しているか、に焦点を当てていきます。</p>
<div class="wp-block-image">
<figure data-wp-context="{ "core":
{ "image":
{ "imageLoaded": false,
"initialized": false,
"lightboxEnabled": false,
"hideAnimationEnabled": false,
"preloadInitialized": false,
"lightboxAnimation": "zoom",
"imageUploadedSrc": "https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/2a73458543dc50df3a665185abac8e09-20240215-054848.png",
"imageCurrentSrc": "",
"targetWidth": "1058",
"targetHeight": "508",
"scaleAttr": "",
"dialogLabel": "拡大された画像"
}
}
}" data-wp-interactive class="aligncenter size-full wp-lightbox-container"><img loading="lazy" decoding="async" width="1058" height="508" data-wp-effect--setStylesOnResize="effects.core.image.setStylesOnResize" data-wp-effect="effects.core.image.setButtonStyles" data-wp-init="effects.core.image.initOriginImage" data-wp-on--click="actions.core.image.showLightbox" data-wp-on--load="actions.core.image.handleLoad" src="https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/2a73458543dc50df3a665185abac8e09-20240215-054848.png" alt="" class="wp-image-470" srcset="https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/2a73458543dc50df3a665185abac8e09-20240215-054848.png 1058w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/2a73458543dc50df3a665185abac8e09-20240215-054848-300x144.png 300w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/2a73458543dc50df3a665185abac8e09-20240215-054848-1024x492.png 1024w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/2a73458543dc50df3a665185abac8e09-20240215-054848-768x369.png 768w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/2a73458543dc50df3a665185abac8e09-20240215-054848-450x216.png 450w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/2a73458543dc50df3a665185abac8e09-20240215-054848-900x432.png 900w" sizes="(max-width: 1058px) 100vw, 1058px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="画像を拡大"
data-wp-on--click="actions.core.image.showLightbox"
data-wp-style--right="context.core.image.imageButtonRight"
data-wp-style--top="context.core.image.imageButtonTop"
>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
</svg>
</button> <div data-wp-body="" class="wp-lightbox-overlay zoom"
data-wp-bind--role="selectors.core.image.roleAttribute"
data-wp-bind--aria-label="selectors.core.image.dialogLabel"
data-wp-class--initialized="context.core.image.initialized"
data-wp-class--active="context.core.image.lightboxEnabled"
data-wp-class--hideAnimationEnabled="context.core.image.hideAnimationEnabled"
data-wp-bind--aria-modal="selectors.core.image.ariaModal"
data-wp-effect="effects.core.image.initLightbox"
data-wp-on--keydown="actions.core.image.handleKeydown"
data-wp-on--touchstart="actions.core.image.handleTouchStart"
data-wp-on--touchmove="actions.core.image.handleTouchMove"
data-wp-on--touchend="actions.core.image.handleTouchEnd"
data-wp-on--click="actions.core.image.hideLightbox"
tabindex="-1"
>
<button type="button" aria-label="閉じる" style="fill: #000" class="close-button" data-wp-on--click="actions.core.image.hideLightbox">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>
</button>
<div class="lightbox-image-container"><div class="wp-block-image">
<figure class="aligncenter size-full responsive-image"><img decoding="async" data-wp-bind--src="context.core.image.imageCurrentSrc" data-wp-style--object-fit="selectors.core.image.lightboxObjectFit" src="" alt="" class="wp-image-470"/></figure></div></div>
<div class="lightbox-image-container"><div class="wp-block-image">
<figure class="aligncenter size-full enlarged-image"><img decoding="async" data-wp-bind--src="selectors.core.image.enlargedImgSrc" data-wp-style--object-fit="selectors.core.image.lightboxObjectFit" src="" alt="" class="wp-image-470"/></figure></div></div>
<div class="scrim" style="background-color: #fff" aria-hidden="true"></div>
</div></figure></div>
<p>プロバイダはここでは説明しないので省略しました。<br>省略しただけで実際には存在します。</p>
<p>ロリポップは Apache というサーバーソフトウェアを使用しています。<br>サーバーとはサーバールームにある PC のことを指しますが、<br>「サーブ」と呼ばれる仕組みを制御するソフトウェアも指します。</p>
<p>実際にはこのサーブを行うソフトウェアがサーバーの本体です。<br>サーブを行うからサーバーです。<br>今後ここではサーバーとはサーブを行うソフトウェア（Apache）を指します。</p>
<p>これからクライアント（A さんの PC）の Google Chrome と<br>ホスト（ロリポップの PC）の Apache との通信の流れを追っていきます。</p>
<div class="ark-block-accordion" data-icon-type="plus">
<details class="ark-block-accordion__item" data-ark-acc="wrapper"><summary class="ark-block-accordion__title" data-ark-acc="header"><span class="ark-block-accordion__label">補足</span><span class="ark-block-accordion__icon" aria-hidden="true"></span></summary><div class="ark-block-accordion__body ark-keep-mt--s" data-ark-acc="body">
<p>最近のサーバーソフトウェアは Apache よりも Nginx が主流になりました。</p>
<ul>
<li><a href="https://manuon.com/webserver-share-ranking/" data-wpel-link="external" target="_blank" rel="external noopener noreferrer">【2024調査】Webサーバーの人気シェアランキング【日本/海外、Nginx/Apache】 | MANUON</a></li>
</ul>
<p>私もこのサーバーのほかに VPS を借りていますが、それには Nginx を使用しています。<br>だけどこのサイトが契約しているサーバーは Apache。<br>そのため Apache で進めていきます。<br>Apache で進めていきますが私に Apache の知識はありません。</p>
</div></details>
</div>
<p></p>
<h3 class="wp-block-heading" id="e383aae382afe382a8e382b9e38388-e382b5e383bce38390e383bce381b8e381aee98081e4bfa1-6"><span id="i-3">リクエスト : サーバーへの送信</span></h3>
<p>このページはサーバー側にファイルとして保存されています。<br>Chrome はサーバーの PC の中にあるファイルを読むことでこのページを表示できます。</p>
<figure data-wp-context="{ "core":
{ "image":
{ "imageLoaded": false,
"initialized": false,
"lightboxEnabled": false,
"hideAnimationEnabled": false,
"preloadInitialized": false,
"lightboxAnimation": "zoom",
"imageUploadedSrc": "https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/357abbc49cd2f15485c0f7e204e7ad20-2.png",
"imageCurrentSrc": "",
"targetWidth": "1058",
"targetHeight": "508",
"scaleAttr": "",
"dialogLabel": "拡大された画像"
}
}
}" data-wp-interactive class="wp-block-image size-full wp-lightbox-container"><img loading="lazy" decoding="async" width="1058" height="508" data-wp-effect--setStylesOnResize="effects.core.image.setStylesOnResize" data-wp-effect="effects.core.image.setButtonStyles" data-wp-init="effects.core.image.initOriginImage" data-wp-on--click="actions.core.image.showLightbox" data-wp-on--load="actions.core.image.handleLoad" src="https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/357abbc49cd2f15485c0f7e204e7ad20-2.png" alt="" class="wp-image-477" srcset="https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/357abbc49cd2f15485c0f7e204e7ad20-2.png 1058w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/357abbc49cd2f15485c0f7e204e7ad20-2-300x144.png 300w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/357abbc49cd2f15485c0f7e204e7ad20-2-1024x492.png 1024w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/357abbc49cd2f15485c0f7e204e7ad20-2-768x369.png 768w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/357abbc49cd2f15485c0f7e204e7ad20-2-450x216.png 450w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/357abbc49cd2f15485c0f7e204e7ad20-2-900x432.png 900w" sizes="(max-width: 1058px) 100vw, 1058px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="画像を拡大"
data-wp-on--click="actions.core.image.showLightbox"
data-wp-style--right="context.core.image.imageButtonRight"
data-wp-style--top="context.core.image.imageButtonTop"
>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
</svg>
</button> <div data-wp-body="" class="wp-lightbox-overlay zoom"
data-wp-bind--role="selectors.core.image.roleAttribute"
data-wp-bind--aria-label="selectors.core.image.dialogLabel"
data-wp-class--initialized="context.core.image.initialized"
data-wp-class--active="context.core.image.lightboxEnabled"
data-wp-class--hideAnimationEnabled="context.core.image.hideAnimationEnabled"
data-wp-bind--aria-modal="selectors.core.image.ariaModal"
data-wp-effect="effects.core.image.initLightbox"
data-wp-on--keydown="actions.core.image.handleKeydown"
data-wp-on--touchstart="actions.core.image.handleTouchStart"
data-wp-on--touchmove="actions.core.image.handleTouchMove"
data-wp-on--touchend="actions.core.image.handleTouchEnd"
data-wp-on--click="actions.core.image.hideLightbox"
tabindex="-1"
>
<button type="button" aria-label="閉じる" style="fill: #000" class="close-button" data-wp-on--click="actions.core.image.hideLightbox">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>
</button>
<div class="lightbox-image-container">
<figure class="wp-block-image size-full responsive-image"><img decoding="async" data-wp-bind--src="context.core.image.imageCurrentSrc" data-wp-style--object-fit="selectors.core.image.lightboxObjectFit" src="" alt="" class="wp-image-477"/></figure>
</div>
<div class="lightbox-image-container">
<figure class="wp-block-image size-full enlarged-image"><img decoding="async" data-wp-bind--src="selectors.core.image.enlargedImgSrc" data-wp-style--object-fit="selectors.core.image.lightboxObjectFit" src="" alt="" class="wp-image-477"/></figure>
</div>
<div class="scrim" style="background-color: #fff" aria-hidden="true"></div>
</div></figure>
<div class="ark-block-accordion" data-icon-type="plus">
<details class="ark-block-accordion__item" data-ark-acc="wrapper"><summary class="ark-block-accordion__title" data-ark-acc="header"><span class="ark-block-accordion__label">補足</span><span class="ark-block-accordion__icon" aria-hidden="true"></span></summary><div class="ark-block-accordion__body ark-keep-mt--s" data-ark-acc="body">
<p>実際にはこのページは WordPress で動的に生成しています。<br>ここでは説明のため、便宜上このページがひとつの html ファイルとして存在するとして進めていきます。</p>
</div></details>
</div>
<p>A さんが Chrome でこのページのリンクをクリックしたとき、<br>Chrome は「このファイルの内容を見せてほしい」というメッセージをサーバーへ送ります。<br>この動作をリクエストと呼びます。</p>
<div class="wp-block-image">
<figure data-wp-context="{ "core":
{ "image":
{ "imageLoaded": false,
"initialized": false,
"lightboxEnabled": false,
"hideAnimationEnabled": false,
"preloadInitialized": false,
"lightboxAnimation": "zoom",
"imageUploadedSrc": "https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/55798bb9927740a2e09be9e79de4b367-2.png",
"imageCurrentSrc": "",
"targetWidth": "1058",
"targetHeight": "508",
"scaleAttr": "",
"dialogLabel": "拡大された画像"
}
}
}" data-wp-interactive class="aligncenter size-full wp-lightbox-container"><img loading="lazy" decoding="async" width="1058" height="508" data-wp-effect--setStylesOnResize="effects.core.image.setStylesOnResize" data-wp-effect="effects.core.image.setButtonStyles" data-wp-init="effects.core.image.initOriginImage" data-wp-on--click="actions.core.image.showLightbox" data-wp-on--load="actions.core.image.handleLoad" src="https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/55798bb9927740a2e09be9e79de4b367-2.png" alt="" class="wp-image-484" srcset="https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/55798bb9927740a2e09be9e79de4b367-2.png 1058w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/55798bb9927740a2e09be9e79de4b367-2-300x144.png 300w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/55798bb9927740a2e09be9e79de4b367-2-1024x492.png 1024w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/55798bb9927740a2e09be9e79de4b367-2-768x369.png 768w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/55798bb9927740a2e09be9e79de4b367-2-450x216.png 450w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/55798bb9927740a2e09be9e79de4b367-2-900x432.png 900w" sizes="(max-width: 1058px) 100vw, 1058px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="画像を拡大"
data-wp-on--click="actions.core.image.showLightbox"
data-wp-style--right="context.core.image.imageButtonRight"
data-wp-style--top="context.core.image.imageButtonTop"
>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
</svg>
</button> <div data-wp-body="" class="wp-lightbox-overlay zoom"
data-wp-bind--role="selectors.core.image.roleAttribute"
data-wp-bind--aria-label="selectors.core.image.dialogLabel"
data-wp-class--initialized="context.core.image.initialized"
data-wp-class--active="context.core.image.lightboxEnabled"
data-wp-class--hideAnimationEnabled="context.core.image.hideAnimationEnabled"
data-wp-bind--aria-modal="selectors.core.image.ariaModal"
data-wp-effect="effects.core.image.initLightbox"
data-wp-on--keydown="actions.core.image.handleKeydown"
data-wp-on--touchstart="actions.core.image.handleTouchStart"
data-wp-on--touchmove="actions.core.image.handleTouchMove"
data-wp-on--touchend="actions.core.image.handleTouchEnd"
data-wp-on--click="actions.core.image.hideLightbox"
tabindex="-1"
>
<button type="button" aria-label="閉じる" style="fill: #000" class="close-button" data-wp-on--click="actions.core.image.hideLightbox">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>
</button>
<div class="lightbox-image-container"><div class="wp-block-image">
<figure class="aligncenter size-full responsive-image"><img decoding="async" data-wp-bind--src="context.core.image.imageCurrentSrc" data-wp-style--object-fit="selectors.core.image.lightboxObjectFit" src="" alt="" class="wp-image-484"/></figure></div></div>
<div class="lightbox-image-container"><div class="wp-block-image">
<figure class="aligncenter size-full enlarged-image"><img decoding="async" data-wp-bind--src="selectors.core.image.enlargedImgSrc" data-wp-style--object-fit="selectors.core.image.lightboxObjectFit" src="" alt="" class="wp-image-484"/></figure></div></div>
<div class="scrim" style="background-color: #fff" aria-hidden="true"></div>
</div></figure></div>
<p>URL の<br><code>https://hekatimebox.main.jp/wordpress/2024/02/network-1/</code><br>はこのページのファイルの場所を指しています。</p>
<h3 class="wp-block-heading" id="e383ace382b9e3839de383b3e382b9-e382b5e383bce38390e383bce3818be38289e381aee8bf94e4bfa1-7"><span id="i-4">レスポンス : サーバーからの返信</span></h3>
<p>リクエストを受けたサーバーは対象のファイルにアクセスし、そのファイルを読み取ります。</p>
<div class="wp-block-image">
<figure data-wp-context="{ "core":
{ "image":
{ "imageLoaded": false,
"initialized": false,
"lightboxEnabled": false,
"hideAnimationEnabled": false,
"preloadInitialized": false,
"lightboxAnimation": "zoom",
"imageUploadedSrc": "https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/5cdc88e3bfc98d7020ae4418460902f0-1.png",
"imageCurrentSrc": "",
"targetWidth": "1058",
"targetHeight": "508",
"scaleAttr": "",
"dialogLabel": "拡大された画像"
}
}
}" data-wp-interactive class="aligncenter size-full wp-lightbox-container"><img loading="lazy" decoding="async" width="1058" height="508" data-wp-effect--setStylesOnResize="effects.core.image.setStylesOnResize" data-wp-effect="effects.core.image.setButtonStyles" data-wp-init="effects.core.image.initOriginImage" data-wp-on--click="actions.core.image.showLightbox" data-wp-on--load="actions.core.image.handleLoad" src="https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/5cdc88e3bfc98d7020ae4418460902f0-1.png" alt="" class="wp-image-486" srcset="https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/5cdc88e3bfc98d7020ae4418460902f0-1.png 1058w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/5cdc88e3bfc98d7020ae4418460902f0-1-300x144.png 300w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/5cdc88e3bfc98d7020ae4418460902f0-1-1024x492.png 1024w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/5cdc88e3bfc98d7020ae4418460902f0-1-768x369.png 768w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/5cdc88e3bfc98d7020ae4418460902f0-1-450x216.png 450w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/5cdc88e3bfc98d7020ae4418460902f0-1-900x432.png 900w" sizes="(max-width: 1058px) 100vw, 1058px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="画像を拡大"
data-wp-on--click="actions.core.image.showLightbox"
data-wp-style--right="context.core.image.imageButtonRight"
data-wp-style--top="context.core.image.imageButtonTop"
>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
</svg>
</button> <div data-wp-body="" class="wp-lightbox-overlay zoom"
data-wp-bind--role="selectors.core.image.roleAttribute"
data-wp-bind--aria-label="selectors.core.image.dialogLabel"
data-wp-class--initialized="context.core.image.initialized"
data-wp-class--active="context.core.image.lightboxEnabled"
data-wp-class--hideAnimationEnabled="context.core.image.hideAnimationEnabled"
data-wp-bind--aria-modal="selectors.core.image.ariaModal"
data-wp-effect="effects.core.image.initLightbox"
data-wp-on--keydown="actions.core.image.handleKeydown"
data-wp-on--touchstart="actions.core.image.handleTouchStart"
data-wp-on--touchmove="actions.core.image.handleTouchMove"
data-wp-on--touchend="actions.core.image.handleTouchEnd"
data-wp-on--click="actions.core.image.hideLightbox"
tabindex="-1"
>
<button type="button" aria-label="閉じる" style="fill: #000" class="close-button" data-wp-on--click="actions.core.image.hideLightbox">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>
</button>
<div class="lightbox-image-container"><div class="wp-block-image">
<figure class="aligncenter size-full responsive-image"><img decoding="async" data-wp-bind--src="context.core.image.imageCurrentSrc" data-wp-style--object-fit="selectors.core.image.lightboxObjectFit" src="" alt="" class="wp-image-486"/></figure></div></div>
<div class="lightbox-image-container"><div class="wp-block-image">
<figure class="aligncenter size-full enlarged-image"><img decoding="async" data-wp-bind--src="selectors.core.image.enlargedImgSrc" data-wp-style--object-fit="selectors.core.image.lightboxObjectFit" src="" alt="" class="wp-image-486"/></figure></div></div>
<div class="scrim" style="background-color: #fff" aria-hidden="true"></div>
</div></figure></div>
<p><br>そして読み取った内容をクライアントに返送します。<br>この返送の動作をレスポンスと呼びます。</p>
<div class="wp-block-image">
<figure data-wp-context="{ "core":
{ "image":
{ "imageLoaded": false,
"initialized": false,
"lightboxEnabled": false,
"hideAnimationEnabled": false,
"preloadInitialized": false,
"lightboxAnimation": "zoom",
"imageUploadedSrc": "https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/919c9d12494497fcc03eaaa239085d10-2.png",
"imageCurrentSrc": "",
"targetWidth": "1058",
"targetHeight": "508",
"scaleAttr": "",
"dialogLabel": "拡大された画像"
}
}
}" data-wp-interactive class="aligncenter size-full wp-lightbox-container"><img loading="lazy" decoding="async" width="1058" height="508" data-wp-effect--setStylesOnResize="effects.core.image.setStylesOnResize" data-wp-effect="effects.core.image.setButtonStyles" data-wp-init="effects.core.image.initOriginImage" data-wp-on--click="actions.core.image.showLightbox" data-wp-on--load="actions.core.image.handleLoad" src="https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/919c9d12494497fcc03eaaa239085d10-2.png" alt="" class="wp-image-503" srcset="https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/919c9d12494497fcc03eaaa239085d10-2.png 1058w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/919c9d12494497fcc03eaaa239085d10-2-300x144.png 300w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/919c9d12494497fcc03eaaa239085d10-2-1024x492.png 1024w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/919c9d12494497fcc03eaaa239085d10-2-768x369.png 768w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/919c9d12494497fcc03eaaa239085d10-2-450x216.png 450w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/919c9d12494497fcc03eaaa239085d10-2-900x432.png 900w" sizes="(max-width: 1058px) 100vw, 1058px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="画像を拡大"
data-wp-on--click="actions.core.image.showLightbox"
data-wp-style--right="context.core.image.imageButtonRight"
data-wp-style--top="context.core.image.imageButtonTop"
>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
</svg>
</button> <div data-wp-body="" class="wp-lightbox-overlay zoom"
data-wp-bind--role="selectors.core.image.roleAttribute"
data-wp-bind--aria-label="selectors.core.image.dialogLabel"
data-wp-class--initialized="context.core.image.initialized"
data-wp-class--active="context.core.image.lightboxEnabled"
data-wp-class--hideAnimationEnabled="context.core.image.hideAnimationEnabled"
data-wp-bind--aria-modal="selectors.core.image.ariaModal"
data-wp-effect="effects.core.image.initLightbox"
data-wp-on--keydown="actions.core.image.handleKeydown"
data-wp-on--touchstart="actions.core.image.handleTouchStart"
data-wp-on--touchmove="actions.core.image.handleTouchMove"
data-wp-on--touchend="actions.core.image.handleTouchEnd"
data-wp-on--click="actions.core.image.hideLightbox"
tabindex="-1"
>
<button type="button" aria-label="閉じる" style="fill: #000" class="close-button" data-wp-on--click="actions.core.image.hideLightbox">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>
</button>
<div class="lightbox-image-container"><div class="wp-block-image">
<figure class="aligncenter size-full responsive-image"><img decoding="async" data-wp-bind--src="context.core.image.imageCurrentSrc" data-wp-style--object-fit="selectors.core.image.lightboxObjectFit" src="" alt="" class="wp-image-503"/></figure></div></div>
<div class="lightbox-image-container"><div class="wp-block-image">
<figure class="aligncenter size-full enlarged-image"><img decoding="async" data-wp-bind--src="selectors.core.image.enlargedImgSrc" data-wp-style--object-fit="selectors.core.image.lightboxObjectFit" src="" alt="" class="wp-image-503"/></figure></div></div>
<div class="scrim" style="background-color: #fff" aria-hidden="true"></div>
</div></figure></div>
<p>レスポンスを受け取った Google Chrome は内容を<br>ブラウザに表示することでこのページを表示します。</p>
<h2 class="wp-block-heading" id="e381bee381a8e38281-8"><span id="i-5">まとめ</span></h2>
<p>今回のポイントは下記です。</p>
<ul>
<li>インターネット通信は LAN と LAN を WAN で繋いで通信している</li>
<li>クライアントからサーバーへの依頼をリクエスト</li>
<li>サーバーからクライアントへの返信をレスポンスと呼ぶ</li>
</ul>
<div class="wp-block-image">
<figure data-wp-context="{ "core":
{ "image":
{ "imageLoaded": false,
"initialized": false,
"lightboxEnabled": false,
"hideAnimationEnabled": false,
"preloadInitialized": false,
"lightboxAnimation": "zoom",
"imageUploadedSrc": "https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/b00075091a602c06ec36e299dbee6315.png",
"imageCurrentSrc": "",
"targetWidth": "1784",
"targetHeight": "552",
"scaleAttr": "",
"dialogLabel": "拡大された画像"
}
}
}" data-wp-interactive class="aligncenter size-full wp-lightbox-container"><img loading="lazy" decoding="async" width="1784" height="552" data-wp-effect--setStylesOnResize="effects.core.image.setStylesOnResize" data-wp-effect="effects.core.image.setButtonStyles" data-wp-init="effects.core.image.initOriginImage" data-wp-on--click="actions.core.image.showLightbox" data-wp-on--load="actions.core.image.handleLoad" src="https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/b00075091a602c06ec36e299dbee6315.png" alt="" class="wp-image-542" srcset="https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/b00075091a602c06ec36e299dbee6315.png 1784w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/b00075091a602c06ec36e299dbee6315-300x93.png 300w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/b00075091a602c06ec36e299dbee6315-1024x317.png 1024w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/b00075091a602c06ec36e299dbee6315-768x238.png 768w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/b00075091a602c06ec36e299dbee6315-1536x475.png 1536w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/b00075091a602c06ec36e299dbee6315-450x139.png 450w, https://hekatimebox.main.jp/wordpress/wp-content/uploads/2024/02/b00075091a602c06ec36e299dbee6315-900x278.png 900w" sizes="(max-width: 1784px) 100vw, 1784px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="画像を拡大"
data-wp-on--click="actions.core.image.showLightbox"
data-wp-style--right="context.core.image.imageButtonRight"
data-wp-style--top="context.core.image.imageButtonTop"
>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
</svg>
</button> <div data-wp-body="" class="wp-lightbox-overlay zoom"
data-wp-bind--role="selectors.core.image.roleAttribute"
data-wp-bind--aria-label="selectors.core.image.dialogLabel"
data-wp-class--initialized="context.core.image.initialized"
data-wp-class--active="context.core.image.lightboxEnabled"
data-wp-class--hideAnimationEnabled="context.core.image.hideAnimationEnabled"
data-wp-bind--aria-modal="selectors.core.image.ariaModal"
data-wp-effect="effects.core.image.initLightbox"
data-wp-on--keydown="actions.core.image.handleKeydown"
data-wp-on--touchstart="actions.core.image.handleTouchStart"
data-wp-on--touchmove="actions.core.image.handleTouchMove"
data-wp-on--touchend="actions.core.image.handleTouchEnd"
data-wp-on--click="actions.core.image.hideLightbox"
tabindex="-1"
>
<button type="button" aria-label="閉じる" style="fill: #000" class="close-button" data-wp-on--click="actions.core.image.hideLightbox">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>
</button>
<div class="lightbox-image-container"><div class="wp-block-image">
<figure class="aligncenter size-full responsive-image"><img decoding="async" data-wp-bind--src="context.core.image.imageCurrentSrc" data-wp-style--object-fit="selectors.core.image.lightboxObjectFit" src="" alt="" class="wp-image-542"/></figure></div></div>
<div class="lightbox-image-container"><div class="wp-block-image">
<figure class="aligncenter size-full enlarged-image"><img decoding="async" data-wp-bind--src="selectors.core.image.enlargedImgSrc" data-wp-style--object-fit="selectors.core.image.lightboxObjectFit" src="" alt="" class="wp-image-542"/></figure></div></div>
<div class="scrim" style="background-color: #fff" aria-hidden="true"></div>
</div></figure></div>
<p>ホストとクライアントの PC の仕組みに違いはありません。</p>
<p>ネットに繋がっている PC にサーバーソフトウェアをインストールして設定すれば<br>世界中のクライアントからリクエストを受け入れられるようになります。</p>
<p>ただしサーバー化して大量のリクエストや処理負荷の高いリクエストがあった場合、<br>それを捌いていくには相応の性能が PC に求められます。 </p>
<p>想定するリクエストの数に応じて PC の性能や<br>レンタルするサーバーのプランを選ぶ必要があります。</p>
</div><footer class="single_post_meta bottom"><div class="first_row"><div class="meta meta-date"><time datetime="2024-02-14T06:51:45+09:00" class="published icon-clock eng"><span class="date_month_en_full">February</span> <span class="date_day">14</span>, <span class="date_year">2024</span></time></div><div class="meta meta-author vcard"><span class="author-by">By </span><a href="https://hekatimebox.main.jp/wordpress/author/tomonosuke/" rel="author" title="Show articles of this user." class="fn" data-wpel-link="internal"><span class="name">tomonosuke</span></a></div><div class="meta meta-comment icon-comment"><a href="https://hekatimebox.main.jp/wordpress/2024/02/network-1/#respond" title="Comment on インターネット通信のしくみ ① 通信の概観" data-wpel-link="internal">No comment</a></div><div class="meta leave-comment icon-edit"><a href="#respond">Leave a comment</a></div></div><div class="second_row"><div class="meta meta-cat"><a href="https://hekatimebox.main.jp/wordpress/category/web-%e3%83%8d%e3%83%83%e3%83%88%e3%83%af%e3%83%bc%e3%82%af/" rel="tag" class=" cat-color3">WEB / ネットワーク</a></div><div class="meta meta-cat tag"><a href="https://hekatimebox.main.jp/wordpress/tag/%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%8d%e3%83%83%e3%83%88%e9%80%9a%e4%bf%a1%e3%81%ae%e3%81%97%e3%81%8f%e3%81%bf/" rel="tag" title="1 topics of this tag." data-wpel-link="internal">インターネット通信のしくみ</a> </div></div></footer></article><aside class="dp_related_posts clearfix vertical two-col"><h3 class="inside-title wow fadeInDown"><span>YOU MIGHT ALSO LIKE</span></h3><ul><li>関連する投稿はまだありません。</li></ul></aside> <div id="respond" class="comment-respond">
<h3 id="reply-title" class="comment-reply-title"><span>LEAVE A REPLY</span> <small><a rel="nofollow" id="cancel-comment-reply-link" href="/wordpress/2024/02/network-1/#respond" style="display:none;" data-wpel-link="internal"><span>CANCEL REPLY</span></a></small></h3><form action="https://hekatimebox.main.jp/wordpress/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><div class="pencil"><label for="comment">Comment</label> <span class="required">*</span><div id="comment-comment"><textarea id="comment" name="comment" aria-required="true"></textarea></div></div><div class="user"><label for="author">Name</label> <span class="required">*</span><div id="comment-author"><input id="author" name="author" type="text" value="" size="30"1 /></div></div>
<div class="mail"><label for="email">E-mail</label> <span class="required">*</span> (公開されません)<div id="comment-email"><input id="email" name="email" type="email" value="" size="30"1 /></div></div>
<div class="globe"><label for="url">URL</label><div id="comment-url"><input id="url" name="url" type="url" value="" size="30" /></div></div>
<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。</label></p>
<p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="SEND" /> <input type='hidden' name='comment_post_ID' value='185' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p></form> </div><!-- #respond -->
</div><aside id="sidebar" class="sidebar right first"><div id="toc-widget-2" class="widget-box toc_widget slider_fx"><h3 class="inside-title"><span>Contents</span></h3><ul class="toc_widget_list no_bullets"><li><a href="#i">インターネット通信の概観</a><ul><li><a href="#LAN_WAN">LAN と WAN</a></li><li><a href="#_LAN">サーバーも LAN</a></li><li><a href="#WAN">WAN とプロバイダ</a></li></ul></li><li><a href="#i-2">リクエストとレスポンス</a><ul><li><a href="#i-3">リクエスト : サーバーへの送信</a></li><li><a href="#i-4">レスポンス : サーバーからの返信</a></li></ul></li><li><a href="#i-5">まとめ</a></li></ul></div></aside></div><nav id="dp_breadcrumb_nav" class="dp_breadcrumb_nav"><ul><li><a href="https://hekatimebox.main.jp/wordpress/" class="nav_home" data-wpel-link="internal"><span>HOME</span></a></li><li><a href="https://hekatimebox.main.jp/wordpress/category/web-%e3%83%8d%e3%83%83%e3%83%88%e3%83%af%e3%83%bc%e3%82%af/" data-wpel-link="internal"><span>WEB / ネットワーク</span></a></li><li><a href="https://hekatimebox.main.jp/wordpress/2024/02/network-1/" data-wpel-link="internal"><span>インターネット通信のしくみ ① 通信の概観</span></a></li></ul></nav><footer id="footer" class="clearfix wow fadeInDown"><div class="ft-widget-content"></div></footer></div></div><script>function dp_theme_noactivate_copyright(){return;}</script><script src="https://hekatimebox.main.jp/wordpress/wp-content/plugins/data-tables-generator-by-supsystic/app/assets/js/dtgsnonce.js?ver=0.01" id="dtgs_nonce_frontend-js"></script>
<script id="dtgs_nonce_frontend-js-after">
/* <![CDATA[ */
var DTGS_NONCE_FRONTEND = "5a9d1aa59d"
/* ]]> */
</script>
<script id="toc-front-js-extra">
/* <![CDATA[ */
var tocplus = {"smooth_scroll":"1"};
/* ]]> */
</script>
<script src="https://hekatimebox.main.jp/wordpress/wp-content/plugins/table-of-contents-plus/front.min.js?ver=2309" id="toc-front-js"></script>
<script src="https://hekatimebox.main.jp/wordpress/wp-content/themes/dp-voyageur/js/script.js?ver=6.4.3" id="my-script-js"></script>
<script src="https://hekatimebox.main.jp/wordpress/wp-content/themes/dp-voyageur-child/js/follow-toc.js?ver=6.4.3" id="follow-toc-js"></script>
<script src="https://hekatimebox.main.jp/wordpress/wp-content/themes/dp-voyageur/inc/js/wow.min.js?ver=2.1.6.6" id="wow-js"></script>
<script src="https://hekatimebox.main.jp/wordpress/wp-content/themes/dp-voyageur/inc/js/jquery/jquery.easing.min.js?ver=2.1.6.6" id="easing-js"></script>
<script src="https://hekatimebox.main.jp/wordpress/wp-includes/js/imagesloaded.min.js?ver=5.0.0" id="imagesloaded-js"></script>
<script src="https://hekatimebox.main.jp/wordpress/wp-content/themes/dp-voyageur/inc/js/jquery/jquery.masonry.min.js?ver=2.1.6.6" id="dp-masonry-js"></script>
<script src="https://hekatimebox.main.jp/wordpress/wp-content/themes/dp-voyageur/inc/js/jquery/jquery.fitvids.min.js?ver=2.1.6.6" id="fitvids-js"></script>
<script src="https://hekatimebox.main.jp/wordpress/wp-content/themes/dp-voyageur/inc/js/jquery/jquery.sharecount.min.js?ver=2.1.6.6" id="sns-share-count-js"></script>
<script src="https://hekatimebox.main.jp/wordpress/wp-content/themes/dp-voyageur/inc/js/theme-import.min.js?ver=20240201081011" id="dp-js-js"></script>
<script src="https://hekatimebox.main.jp/wordpress/wp-includes/js/comment-reply.min.js?ver=6.4.3" id="comment-reply-js" async="async" data-wp-strategy="async"></script>
<script src="https://hekatimebox.main.jp/wordpress/wp-content/plugins/easy-fancybox/fancybox/1.5.4/jquery.fancybox.min.js?ver=6.4.3" id="jquery-fancybox-js"></script>
<script id="jquery-fancybox-js-after">
/* <![CDATA[ */
var fb_timeout, fb_opts={'overlayShow':true,'hideOnOverlayClick':true,'showCloseButton':true,'margin':20,'enableEscapeButton':true,'autoScale':true };
if(typeof easy_fancybox_handler==='undefined'){
var easy_fancybox_handler=function(){
jQuery([".nolightbox","a.wp-block-fileesc_html__button","a.pin-it-button","a[href*='pinterest.com\/pin\/create']","a[href*='facebook.com\/share']","a[href*='twitter.com\/share']"].join(',')).addClass('nofancybox');
jQuery('a.fancybox-close').on('click',function(e){e.preventDefault();jQuery.fancybox.close()});
/* IMG */
var fb_IMG_select=jQuery('a[href*=".jpg" i]:not(.nofancybox,li.nofancybox>a),area[href*=".jpg" i]:not(.nofancybox),a[href*=".png" i]:not(.nofancybox,li.nofancybox>a),area[href*=".png" i]:not(.nofancybox),a[href*=".webp" i]:not(.nofancybox,li.nofancybox>a),area[href*=".webp" i]:not(.nofancybox)');
fb_IMG_select.addClass('fancybox image');
var fb_IMG_sections=jQuery('.gallery,.wp-block-gallery,.tiled-gallery,.wp-block-jetpack-tiled-gallery');
fb_IMG_sections.each(function(){jQuery(this).find(fb_IMG_select).attr('rel','gallery-'+fb_IMG_sections.index(this));});
jQuery('a.fancybox,area.fancybox,.fancybox>a').each(function(){jQuery(this).fancybox(jQuery.extend(true,{},fb_opts,{'transitionIn':'elastic','transitionOut':'elastic','opacity':false,'hideOnContentClick':false,'titleShow':true,'titlePosition':'over','titleFromAlt':true,'showNavArrows':true,'enableKeyboardNav':true,'cyclic':false}))});
};};
var easy_fancybox_auto=function(){setTimeout(function(){jQuery('a#fancybox-auto,#fancybox-auto>a').first().trigger('click')},1000);};
jQuery(easy_fancybox_handler);jQuery(document).on('post-load',easy_fancybox_handler);
jQuery(easy_fancybox_auto);
/* ]]> */
</script>
<script src="https://hekatimebox.main.jp/wordpress/wp-content/plugins/easy-fancybox/vendor/jquery.easing.min.js?ver=1.4.1" id="jquery-easing-js"></script>
<script src="https://hekatimebox.main.jp/wordpress/wp-content/plugins/easy-fancybox/vendor/jquery.mousewheel.min.js?ver=3.1.13" id="jquery-mousewheel-js"></script>
<script id="q2w3_fixed_widget-js-extra">
/* <![CDATA[ */
var q2w3_sidebar_options = [{"sidebar":"sidebar","use_sticky_position":false,"margin_top":0,"margin_bottom":0,"stop_elements_selectors":"","screen_max_width":0,"screen_max_height":0,"widgets":["#toc-widget-2"]}];
/* ]]> */
</script>
<script src="https://hekatimebox.main.jp/wordpress/wp-content/plugins/q2w3-fixed-widget/js/frontend.min.js?ver=6.2.3" id="q2w3_fixed_widget-js"></script>
<script id="wpfront-scroll-top-js-extra">
/* <![CDATA[ */
var wpfront_scroll_top_data = {"data":{"css":"#wpfront-scroll-top-container{display:none;position:fixed;cursor:pointer;z-index:9999;opacity:0}#wpfront-scroll-top-container div.text-holder{padding:3px 10px;border-radius:3px;-webkit-border-radius:3px;-webkit-box-shadow:4px 4px 5px 0 rgba(50,50,50,.5);-moz-box-shadow:4px 4px 5px 0 rgba(50,50,50,.5);box-shadow:4px 4px 5px 0 rgba(50,50,50,.5)}#wpfront-scroll-top-container a{outline-style:none;box-shadow:none;text-decoration:none}#wpfront-scroll-top-container {right: 20px;bottom: 20px;} #wpfront-scroll-top-container img {\n width: auto;\n height: auto;\n }\n ","html":"<div id=\"wpfront-scroll-top-container\"><img src=\"https:\/\/hekatimebox.main.jp\/wordpress\/wp-content\/plugins\/wpfront-scroll-top\/images\/icons\/1.png\" alt=\"\" title=\"\" \/><\/div>","data":{"hide_iframe":false,"button_fade_duration":0,"auto_hide":false,"auto_hide_after":2,"scroll_offset":100,"button_opacity":0.80000000000000004,"button_action":"top","button_action_element_selector":"","button_action_container_selector":"html, body","button_action_element_offset":0,"scroll_duration":400}}};
/* ]]> */
</script>
<script src="https://hekatimebox.main.jp/wordpress/wp-content/plugins/wpfront-scroll-top/js/wpfront-scroll-top.min.js?ver=2.2.10081" id="wpfront-scroll-top-js"></script>
<script src="https://hekatimebox.main.jp/wordpress/wp-content/plugins/enlighter/cache/enlighterjs.min.js?ver=TuVKmYOe1W53vsx" id="enlighterjs-js"></script>
<script id="enlighterjs-js-after">
/* <![CDATA[ */
!function(e,n){if("undefined"!=typeof EnlighterJS){var o={"selectors":{"block":"pre.EnlighterJSRAW","inline":"code.EnlighterJSRAW"},"options":{"indent":4,"ampersandCleanup":true,"linehover":true,"rawcodeDbclick":true,"textOverflow":"scroll","linenumbers":true,"theme":"wpcustom","language":"generic","retainCssClasses":false,"collapse":false,"toolbarOuter":"","toolbarTop":"{BTN_RAW}{BTN_COPY}{BTN_WINDOW}{BTN_WEBSITE}","toolbarBottom":""}};(e.EnlighterJSINIT=function(){EnlighterJS.init(o.selectors.block,o.selectors.inline,o.options)})()}else{(n&&(n.error||n.log)||function(){})("Error: EnlighterJS resources not loaded yet!")}}(window,console);
/* ]]> */
</script>
<script src="https://hekatimebox.main.jp/wordpress/wp-includes/js/dist/interactivity.min.js?ver=6.4.3" id="wp-interactivity-js" defer="defer" data-wp-strategy="defer"></script>
<script src="https://hekatimebox.main.jp/wordpress/wp-includes/blocks/image/view.min.js?ver=32caaf5e7c6834efef4c" id="wp-block-image-view-js" defer="defer" data-wp-strategy="defer"></script>
<script src="https://hekatimebox.main.jp/wordpress/wp-content/plugins/arkhe-blocks/dist/js/ol_start.min.js?ver=2.22.1" id="arkhe-blocks-ol_start-js"></script>
<script src="https://hekatimebox.main.jp/wordpress/wp-content/plugins/arkhe-blocks/dist/gutenberg/blocks/accordion/script.js?ver=2.22.1" id="arkhe-blocks-accordion-script-js"></script>
<!-- Arkhe Blocks -->
<noscript><style>[data-arkb-linkbox]{cursor:auto}[data-arkb-link][aria-hidden="true"]{visibility:visible;color:transparent;z-index:0;width:100%;height:100%;pointer-events:auto}a.arkb-boxLink__title{text-decoration:underline}</style></noscript>
<!-- / Arkhe Blocks -->
<script>new WOW().init();</script><script async src="https://platform.twitter.com/widgets.js"></script><script type="application/ld+json">{"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@type":"WebPage","@id":"https://hekatimebox.main.jp/wordpress/2024/02/network-1/"},"headline":"インターネット通信のしくみ ① 通信の概観","image":{"@type":"ImageObject","url":"https://hekatimebox.main.jp/wordpress/wp-content/themes/dp-voyageur/img/post_thumbnail/noimage.png","width":696,"height":0},"datePublished":"2024-02-14T06:51:45+09:00","dateModified":"2024-02-16T20:50:17+09:00","articleSection":"WEB / ネットワーク","author":{"@type":"Person","name":"tomonosuke"},"publisher":{"@type":"Organization","name":"HekaTimeBox","logo":{"@type":"ImageObject","url":"https://hekatimebox.main.jp/wordpress/wp-content/themes/dp-voyageur/img/json-ld/nologo.png","width":600,"height":60}},"description":"インターネット通信についておおまかに見ていきます。内容としては このページのリクエストを送信 サーバからこのページの html を返してもらう という内容を何回かに分けて書いていきます。次回以降は Python コードもでてきます。最終的にはソケットを利用した通信にも触れていきます。 インターネット通信の概観 今回は A さんの PC からこのページを Google Chrome を利用して閲覧す"}</script><script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"WEB / ネットワーク","item":"https://hekatimebox.main.jp/wordpress/category/web-%e3%83%8d%e3%83%83%e3%83%88%e3%83%af%e3%83%bc%e3%82%af/"},{"@type":"ListItem","position":2,"name":"インターネット通信のしくみ ① 通信の概観","item":"https://hekatimebox.main.jp/wordpress/2024/02/network-1/"}]}</script><script type="application/ld+json">{"@context":"http://schema.org","@type":"WebSite","inLanguage":"ja","name":"HekaTimeBox","alternateName":"","image":"https://hekatimebox.main.jp/wordpress/wp-content/themes/dp-voyageur/img/json-ld/nologo.png","url":"https://hekatimebox.main.jp/wordpress/"}</script></body>
</html>
Web ブラウザの仕事
上記の通り、Web ブラウザ（今回の場合だと Google Chrome ）が TCP/IP から受け取るレスポンスはただのコードです。
そこからレンダリングを行うことで普段見ている Web サイトになります。
レンダリング
Google Chorme の場合だと F12 を押してみてください。そのサイトの html を Chrome で見れます。解除はもう一度 F12。
このコードから普段見ている視覚化された（？）Web サイトへ変換することをレンダリングと呼びます。
レンダリングはレンダリングエンジンによって行われますが、このエンジンは Web ブラウザごとに違います。
Chrome は Blink、Edge も Blink、Firefox は Gecko というレンダリングエンジンを使用しています。
レンダリングエンジンが違うため Chrome と FireFox で見た目が変わることがあります。
同じ Blink の Chrome と Edge でもブラウザ独自の機能の拡張や最適化を行っており、差異がでることがあります。
どんなコードで差異がでるかを調べられるサイトもあります。
有名なのは Can I use…
LEAVE A REPLY