WebサーバーとWebブラウザ。これら2つがやり取りを行うことによって、見たいWebページに接続することが出来る。
この記事では「Webブラウザとは何か」から始まり、最終的にはWebページとWebサーバーのやりとりについて解説し、Webページが表示される流れについて説明していく。
Webブラウザとは
私達がWebページを閲覧しようと思う時、Internet ExplorerやChrome、FirefoxといったWebブラウザを利用する。
Webブラウザとは、htmlという言語で記述されたハーパーテキストを人間が読みやすい様に解釈して、画面に表示してくれるようなソフトウェアのことだ。
htmlはタグと呼ばれるマークを使い記述される。タグによって文字を大きくしたり、色をつけたり出来る。
例えば、当ブログ「俺の履歴書」のトップページのハイパーテキストはこんな感じだ(2019/12/8現在)。
<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 http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<!– ここからOGP –>
<meta property=”og:type” content=”blog”>
<meta property=”og:title” content=”俺の履歴書｜既卒27歳の活動記録”>
<meta property=”og:url” content=”https://ochiman6.com”>
<meta property=”og:description” content=”既卒27歳(男)がエンジニアを目指し就職活動を始めた。これは男の一挙手一投足を記した記録である。”>
<meta property=”og:image” content=”https://ochiman6.com/wp-content/themes/jin/img/bg_default.jpg”>
<meta property=”og:site_name” content=”俺の履歴書”>
<meta property=”fb:admins” content=””>
<meta name=”twitter:card” content=”summary”>
<!– ここまでOGP –>
<meta name=”description” itemprop=”description” content=”既卒27歳(男)がエンジニアを目指し就職活動を始めた。これは男の一挙手一投足を記した記録である。”>
<link rel=”shortcut icon” href=”https://ochiman6.com/wp-content/themes/jin/favicon.ico”>
<title>俺の履歴書｜既卒27歳の活動記録</title>
<link rel=’dns-prefetch’ href=’//ajax.googleapis.com’ />
<link rel=’dns-prefetch’ href=’//cdnjs.cloudflare.com’ />
<link rel=’dns-prefetch’ href=’//use.fontawesome.com’ />
<link rel=’dns-prefetch’ href=’//s.w.org’ />
<link rel=”alternate” type=”application/rss+xml” title=”俺の履歴書 » フィード” href=”https://ochiman6.com/feed” />
<link rel=”alternate” type=”application/rss+xml” title=”俺の履歴書 » コメントフィード” href=”https://ochiman6.com/comments/feed” />
<script type=”text/javascript”>
window._wpemojiSettings = {“baseUrl”:”https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/72×72\/”,”ext”:”.png”,”svgUrl”:”https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/”,”svgExt”:”.svg”,”source”:{“concatemoji”:”https:\/\/ochiman6.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.3″}};
<以下省略>
30行分くらいコピペしてみた。実際は実際は1500行くらいある。このままではとても読めない。
そこで、Webブラウザが見やすいように解釈して、こういう風に見えているというわけだ。
図：ブラウザによるハイパーテキストの解釈
コンテンツを格納する箱(ウェブサーバー)と
コンテンツはブラウザに入っているわけではなく、世界中に存在するWebサーバーの中に入っている。
ウェブブラウザには、Webサーバーにハイパーテキストで書かれたコンテンツを要求する機能が含まれている。URLを指定することで、指定のコンテンツをブラウザに表示させることが出来る。
コンテンツの住所：URL
URLはコンテンツが「どのWebサーバーのどの部分に入っているか」を指定するためのコードである。「当ブログへのアクセス方法」みたいなものだ。
例えばこのページのURLは「https://ochiman6.com/web-page-display」である。このURLは3つの部分に別れていて、それぞれ意味を持つ。
「https」というのは、WebブラウザとWebサーバーのやり取りの手順を示したものだ。「Https」というプロトコルを利用しているコンテンツだということが分かる。
つまり、ある目的地にどうやって行くかが書いてある。バスで行くのか、タクシーで行くのか、移動手段みたいなものだ。
「ochiman6.com」は当ブログのデータが保存されている場所を指定するものだ。住所みたいなもの。
私はとあるレンタルサーバーにおいてochiman6.comというドメイン(Web上の住所)を取得してブログを運営している。ドメイン名を指定すれば当ブログにたどり着けるというわけだ。
「web-page-display」は、コンテンツがその住所の、どの部屋に入っているかを示すものだ。たいがいのコンテンツは2つ以上のページを持っているので、こういった指定が必要になる。
以上の3つ「手順(行き先)」「ドメイン名(住所)」「コンテンツの場所(部屋)」を指定することで、欲しいコンテンツをWebブラウザに表示させることが出来る。
「タクシー//仙台駅/利休」というURLを指定すれば、タクシーに乗って、仙台駅にある利休に行くことができ、おいしい牛タン(コンテンツ)を食べられる。こんなイメージだ。
まとめ：Webページが表示されるまでの流れ
Webブラウザを用いてURLを指定しWebサーバーにコンテンツを指定する。そうすることで、見たいコンテンツをブラウザで閲覧できる。
URLにはコンテンツが格納されているサーバーにアクセスするための手順が示してある。主に「どうやって(手順)」「どの場所にある(場所：ドメイン名)」「どの部屋(どのコンテンツ)」といった指定をする。
