「ブラウザ」WEB表示の仕組み。レンダリングはいかにして行われるか?

レンダリング中

WEBサイトが表示される時に起きている事

ブラウザ。ネットワークをリクエスト

 多分、ネットを見るのにあなたは、『Google Chrome(グーグルクローム)』、『Firefox(ファイアフォックス)』、『Microsoft Edge(マイクロソフトエッジ)』、『Internet Explorer(インターネットエクスプローラー)』、『Safari(サファリ)』などの『ブラウザソフト』を使ってると思う。

 ブラウザとは『ネットワーク・アプリケーション』と呼ばれるソフトウェアである。
ネットワーク・アプリケーションとは呼ばれるものの、実はブラウザ自体はネットワークをコントロールする機能を持っていない。
ブラウザとはOS(オペレーティングシステム)に、ネットワークをコントロールさせるソフトなのである。
「OSとは何か」直感的なGUI、仮想の領域。アプリケーションの裏で起きてること
 その役割が、まるでサービスを頼む依頼人なので、ブラウザのような仕組みを『クライアント(依頼人)』と言う。
つまりブラウザはOSに、ネットワークコントロールをリクエスト(依頼)しているのである。
ネットワークのイメージ 「ネットワークの仕組みの基礎知識」OSI参照モデル、IPアドレスとは何か

URL。https:とは何か

 URL(uniform resource locator)を日本語に訳したら「統一資源位置指定子」というような意味になる
「http:」とか「https:」とかで始まる、このURLをブラウザに打ち込めば、それに応じて画面にはwebサイトとかが表示される。

 まずhttp:とhttps: の違いだが、これは利用される情報が暗号化されてるかどうかである。
https:は暗号化されセキュリティレベルが高い。
もちろん、ネット犯罪などが横行する現在では、https:推奨である。

 URLの最初の部分だが、https:以外にも「file:」とか「mailto:」とか、いろいろある。

サーバー。ドメインは目印

 ネットなどを介して、ユーザーにサービスを提供するコンピューターやソフトウェアを『サーバー』と言う。
コンピュータの操作 「コンピューターの構成の基礎知識」1と0の極限を目指す機械
ブラウザを使ったアクセス先は、もちろんWEBサイトなどのデータが入れられた『webサーバー』が多い。
しかしブラウザは、『ファイル』の『ダウンロード』や『アップロード』をする為の『FTP(file transter protocol。ファイル送信プロトコル)』などのファイルサーバー。(プロトコルは「接続手順」とか「通信ルール」の意)
メール送信の為の『SMTP(Simple Mail Transfer Protocol。簡易メールプロトコル)や、受信の為の『POP(Post Office Protocol)』のようなメールサーバー。
などweb以外へのクライアント機能も持つ。

 そこで、webへのアクセスならhttps:、FTPへのアクセスなら「ftp:」というように、アクセス先を区別する為に、URLは種類分けされてるのである。

 https:などの後に続くのは、より詳細にアクセス先を指定する為の『ドメイン名』やファイル名や『メールアドレス』、時にはユーザー名やパスワードになる。
ドメイン名やメールアドレスは、いわば住所的な「言葉の目印」である。
それらがどのように組合わさっているかはURLによって異なる。
しかしどのURLであっても、最初の「:」までの部分が、アクセスするプロトコルの種類を示しているのは共通である。

URLの解読。htmlファイルまで

 ブラウザにURLが打ち込まれた場合、ブラウザはそのURLの意味をまず解読する。
解読はURLごとの要素それぞれを分解し、それら全てが当てはまる、たったひとつのエリアを見いだすといいもの。
URLの要素は、基本的に「/」で区切られている。

 例えば、「https://gamethankyou.com/history/culture/santa-claus/」というURLをブラウザに打ち込んだとする。
ブラウザはURLを以下のように分解する。
https:(使用プロトコル)。
gamethankyou.com(ドメイン名)。
history(ディレクトリ)。
culture(ディレクトリ)。
santa-claus(ファイル名(?))。
ドメイン名の前だけは/がふたつあるのは、そういう決まりだから。
ディレクトリは『フォルダ』と同義であり、ファイルの保管場所に当たる。
つまりhistoryに保管されたcultureに保管されたsanta-clausのファイルなわけである。

 しかし最後のファイル名であるsanta-clausの後にも/がついているのはなぜか?
これは最後の/以降を省略している場合につく。
実のところsanta-clausというのもディレクトリで、実際にURLが指定しているのは、そのさらに中のHTMLファイルなのである。
『HTML』とは、webサイトなどのビジュアル描画をコントロールするプログラム。
ファイル名を省いた場合でも、サーバーはあらかじめ、ディレクトリの中のどのファイルを開くかが指定されているので問題は生じない。

 /がさらに省かれてる場合もあり、その場合、URLの最後がディレクトリかファイルかは、ブラウザが独自に判断する。

URL、URI、URN。違いと関係

 URLは、URI(Uniform Resource Identifier。統一資源識別子) の1タイプである。
URIには他に、名前だけを指定するURN(Uniform Resource Name)というのもある。
URLが、あるデータがサーバー上のどこにあるのかを探し当てる為の識別コードで、URNはそのデータ自体を個として示す為の名称のようなもの。
当然、ネット利用者にとって重要なのはURLの方である。
URNを使うのは、様々なデータの管理者など。

メソッド。サーバーへの命令

 ブラウザのようなクライアントがプロトコルを介して、サーバーにリクエストするのは「何を、どうするのか」というもの。
URLのプロトコル名以降が示しているのが、「何を」の部分。

 ブラウザがサーバーへ送るリクエストには、URLと『メソッド(method。方法)』というのが送られる。
このメソッドというのが「どうするのか」という指示である。

 メソッドの指示には、指定した(ファイルなどの)情報を取り出す『GET』や、(フォームに入力したデータなどを)サーバーに送信する『POST』。
指定した情報を消去する『DELETE』や、ファイルのいくつかの情報だけを記録するメッセージ・ヘッダーのみを取得する『HEAD』。
指定したファイルを新規に作るか、既存のファイルに上書きする『PUT』など、いろいろある。

 フォームとは、ショッピングサイトやアンケートなどでよく見かける、入力エリアの名称。
メッセージ・ヘッダーに記録されてるのは、ファイル名や更新日時などの属性情報。

ネット注文はどう成り立っているのか

 メソッドで使用されるのはたいていGETかPOST。
もちろん、我々がブラウザにURLを打ち込んだ時に、リクエストとしてサーバーに送られるメソッドはGETである。
そしてHTMLなどのデータを取得したブラウザは、そのプログラムを作動させ、その作動させられたプログラムが、モニター画面などにWEBサイトを表示させる。

 ブラウザの上の方にあるURL入力欄にURLが打ち込まれた時、HTMLに書かれたURLのリンク(ハイパーリンク)をクリックした時などには、URLと共に、自動的にGETメソッドがサーバーに送られるようになっているわけだ。

 POSTメソッド使用時は、URLで指定されるのはサーバー内に置かれた情報管理の為のアプリケーションである。
普通そのアプリケーションは、受け取った入力情報を(ショップの経営者のような)大元のクライアントへと送ってくるようになっている。
こうしてネット注文は実現している。

 アプリケーションとは、操作して利用するタイプのソフトウェアを指す名称。

404 not found

 リクエストを受け付けたサーバーは、リクエスト通りに動作し、結果、生成されたデータをレスポンス(対応。返信)してくる。

 https(web)の場合、生成されたデータには必ず、エラーを示す『ステータス・コード(httpステータスコード)』というのが含まれ、それはデータに異常があった場合などに表示されたりする。
ステータス・コードはレスポンス内容を示すコードで、消去されたサイトなどにアクセスした時に表示される「404 not found」というのが、エラー(404)のステータス・コードである。

 「not found(見つかりません)」のテキストは、404のような数字3つだけでわかりにくいステータス・コードの意味を、人間にわかりやすくテキスト化したもので、『レスポンスフレーズ』と呼ばれる。
404のエラー画面は例えば、GETで取得するはずのファイルがすでに存在してなかったり、プログラム内容に異常があった場合に表示される。

レンダリング。取得されたプログラムの仕事

 WEB表示の為のプログラムデータの中にはたいてい『タグ』というものがあり、ブラウザは、取得したデータ内にタグを探す。

 タグには例えば、画像を表示するというもの(imgタグ)があり、その画像も、サーバー上にある。(ないなら画像は表示されない)
画像のタグなら必ずサーバー上にある特定の画像ファイルを指定しているので、ブラウザは再びリクエストメッセージを作成、画像をサーバーから送ってもらい、そして表示する。

 そうしてリクエストとレスポンスが短い間に何度も繰り返され、鮮やかなデザインのWEBサイトが表示されるという訳である。
この取得されたプログラムが画像などでWEBサイトなどを構築していく過程は『レンダリング(rendering。描画)』と呼ばれる。

 当たり前の話だが、オフライン上に全データ揃ってるWEBサイトプログラムを、ブラウザで表示する場合は、リクエスト、レスポンスのやりとりがない為に、かなり表示が早くなる。
重いデータをやりとりするゲームなどでは、これは非常に実感出来る。
例えば、同じゲームでも、オンライン版(データがサーバー上)とダウンロード版(データが自分の機器)で、全く快適さが違ったり。

メッセージのフォーマット

リクエストライン、ステータスライン

 ブラウザがサーバーにリクエストするのに、メッセージをどのように書くか、つまりフォーマット(format。書式)は決まっている。
1ビット 「ビットとは何か」情報量の原子は本質的にも原子であるのか
フォーマットという言葉は、データなどの初期化を示す意味で使われる場合もあるので、混同に注意である。

 ブラウザが作るリクエストメッセージの1行目は『リクエスト・ライン』と言われる。
リクエスト・ラインの一番前に書かれるのがメソッドとなる。
それからURL(URI)、httpsのVer(バージョン)と続けられる。
「メソッド>  」というような並びである。

 一方でサーバーからのレスポンスメッセージの一行目は『ステータス・ライン』と言われる。
これは「 ステータスコード> レスポンスフレーズ>」という並びである。

メッセージ・ヘッダー、メッセージ・ボディ

 リクエスト、レスポンス、どちらのメッセージも、2行目から何行目かまではメッセージ・ヘッダーとなる。
メッセージ・ヘッダーは1行ずつに、データの種類や更新日。
使用言語や、クライアント側の利用ソフトウェアなどの情報が記入される。
メッセージ・ヘッダーの終わりは空白の一行で示される。

 そしてそのヘッダー終わりの空白のさらに下に書かれるのが『メッセージ・ボディ』である。
リクエストメッセージのボディには、クライアントからサーバーに送信するデータや、POSTメソッドにより送られる入力データなどが入る。
レスポンスメッセージのボディにはサーバーからクライアントへのデータや、サーバーのファイルや、アプリケーションが出力したデータなどが入る。

HTTPステータスコード

 レスポンスメッセージは3桁の数字だが、1桁目で概要は判断出来る。
1xxが処理の経過状況。
2xxが正常終了。
3xxが何らかのアクションが必要である事。
4xxがクライアント側のエラー。
5xxがサーバー側のエラー。
という風になっている。

 以下に、レスポンスフレーズと共に一覧を列挙する。
(ぶっちゃけ、サイバーパンク系のSFの創作とかにもってこいと思う)

「100 Continue(継続)」
クライアントはリクエストを継続可能。
「101 Switching Protocols(プロトコル切替え)」
サーバーがリクエスト遂行のため。プロトコル切替えを求めている。
「102 Processing(処理中)」
処理は継続されている。
「103 Early Hints (早期のヒント)」
最終的なレスポンスが確定する前に、予想を提示。

「200 OK(成功)」
リクエストに応じたレスポンスを作成出来た。
「201 Created(作成)」
リクエストされた、新たなデータ作成に成功。
「202 Accepted(受理)」
リクエストは受理されたが、処理は未完。
「203 Non-Authoritative Information(信頼出来ない情報)」
おそらくデータがオリジナルでない。
「204 No Content(内容なし)」
リクエストを受理したが、返すべきレスポンスが作成されなかった。
「205 Reset Content(内容リセット)」
リクエストを受理し、ユーザーの画面をリセットした。
「206 Partial Content(部分的内容)」
部分的なGETリクエストを受理した。
「207 Multi-Status(複数ステータス)」
「208 Already Reported(既に報告)」
「226 IM Used(IM使用)」

「300 Multiple Choices(複数の選択)」
リクエスト先が複数存在し、選択肢を提示。
「301 Moved Permanently(恒久的に移動した)」
リクエスト先がよく移動されているときに返される。
「302 Found(発見)」
リクエスト先が一時的に移動されている。
「303 See Other(他を参照)」
相応しいレスポンスが他のURLに存在する
「304 Not Modified(未更新)」
リクエスト先は更新されていない。
「305 Use Proxy(プロキシを使用せよ)」
特定の『プロキシ(中継サーバー)』を使用してリクエストを行わないといけない。
「306 (Unused(使われてない))」
「307 Temporary Redirect(一時的リダイレクト)」
リクエスト先は一時的に移動されている。
302と同じみたいだが、こちらの方が基準が厳しいとされる。
「308 Permanent Redirect(恒久的リダイレクト)」

「400 Bad Request(不正リクエスト)」
リクエスト内容がおかしい。
「401 Unauthorized(認証が必要)」
「402 Payment Required(支払いが必要)」
「403 Forbidden(禁止されてる)」
リクエスト先がアクセスを拒否してるか、リクエストはしたが処理出来ない。
「404 Not Found」
「405 Method Not Allowed(許可されていないメソッド)」
使用が禁止されてるメソッドがリクエストに含まれてる。
「406 Not Acceptable(受理できない)」
「407 Proxy Authentication Required(プロキシ認証が必要)」
「408 Request Timeout(リクエストの時間切れ)」
リクエストが一定の時間以内に完了しなかった。
「409 Conflict(競合)」
リクエストが他の何らかのデータやプログラムと競合するので完了出来ない。
「410 Gone(消滅してる)」
404と被っているような気がするが、こちらは文字通り完全に消失している事を示す。
「411 Length Required(長さが必要)」
「412 Precondition Failed(前提条件で失敗)」
そもそも前提条件から間違っている。
「413 Payload Too Large (ペイロードが大きすぎる)」
『ペイロード』とはヘッダーの属性情報などを除いた、送受信されるデータそのもの。
「414 URI Too Long (URIが長すぎる)」
「415 Unsupported Media Type(サポートされてないメディアタイプ)」
「416 Range Not Satisfiable(レンジが範囲外)」
リクエスト先の本来のデータサイズ以上のサイズを要求した。
「417 Expectation Failed(期待された拡張の失敗(?))」
「418 I’m a teapot(私はティーポット)」
ジョークコード。
「421 Misdirected Request(誤ったリクエスト)」
「422 Unprocessable Entity(処理できないエンティティ)」
実際的に何か処理出来ない(?)
「423 Locked(ロックされている)」
「424 Failed Dependency(依存関係で失敗(?))」
「425 Too Early(早すぎる)」
「426 Upgrade Required(アップグレード要求)」
「428 Precondition Required(事前条件が必要)」
「429 Too Many Requests(要求が多すぎる)」
「431 Request Header Fields Too Large(リクエストヘッダーフィールドが大きすぎる)」
「451 Unavailable For Legal Reasons(法的理由により利用不可)」

「500 Internal Server Error(サーバ内部エラー)」
「501 Not Implemented(実装されていない)」
実装されていないメソッドをリクエストした。
「502 Bad Gateway(不正ゲートウェイ)」
『ゲートウェイ』とは『ルータ』とも呼ばれ、プロキシとは違い、単に情報の出入口としてだけ機能する中継機器。
「503 Service Unavailable(サービスか利用不可)」
「504 Gateway Timeout(ゲートウェイ時間切れ)」
リクエスト送ったけど、ゲートウェイにレスポンス返ってこない。
「505 HTTP Version Not Supported(サポートしていないHTTPのバージョン)」
「506 Variant Also Negotiates(取り決めともまた異なる(?))」
「507 Insufficient Storage(容量不足)」
リクエスト通りの処理を行えるだけのデータスペースがない。
「508 Loop Detected(ループを検出)」
「509 Bandwidth Limit Exceeded(帯域幅制限超過)」
サーバーに設定された帯域幅(転送量)を使い切った。
「510 Not Extended(拡張できない)」
「511 Network Authentication Required(ネットワークに対する認証が必要)」

コメントを残す

初投稿時は承認されるまで数日かかる場合があります。
「※」の項目は必須項目となります。
記事内容の質問などについて、(残念ながら管理人の知識的に)お答えできない場合もあると思います。予めご了承ください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)