Chapter02 OSI参照モデルとは_"Webの仕組み"

筆者が大学の講義で手に入れた情報をクラウド上(note上)に残すために書いています。講義ノートに近いものです。せっかくインプットしたので、アウトプットしときたいという目的も含まれています。

その道のプロではありません。誤情報が含まれていたり、厳密さに欠けている可能性があります。


Chapter01はインターネットの特徴とOSI参照モデル定義・特徴についてでした。


今回はOSI参照モデルに入ってく前にWebの仕組みについて書いています。

OSI参照モデルにすぐに入りたい場合は、次のChapter03へ

Webブラウザ

Webブラウザ、ブラウザと呼ばれるものはすでに使っていると思う。

Chrome Safari Firefox IE....
色んなブラウザと呼ばれるソフトウェアがあるが、twitterやnote、Youtubeググったりして使ったことがあると思う。

これは何をしているものなのだろうか。

Webブラウザ
HTMLファイルを解析し、見やすい状態にして表示するソフトウェア

HTMLファイルというWebサイトやサービスを作る際に使う、マークアップ言語がある。

HTMLを知らない人は、なんとなく、HTMLとは何かググってみてから読んでみたほうが理解しやすいと思います。

Wikipedia
https://ja.wikipedia.org/wiki/HyperText_Markup_Language

HTMLファイルの中は以下のような感じで出来上がっている

<html>
<head>
    <meta charset="utf-8">
    <title>たいとるたいとる</title>
</head>
<body>
    <h1>OSI参照モデルについて</h1>
    <p>なんかすごい</p>
</body>
</html>

google chromeの場合ページを右クリックして、「検証」という項目を押してもらうと実際にHTMLファイルをみることができる。

例えばググってこれがでてきたらどうだろうか?
読みづらいだろう。
これをレンダリングという処理をブラウザを行なってくれて、実際いつもみるようなページを表示してくれている。


URL(Uniform Resource Locater)

ブラウザ上でURLというのはよく見かけるだろう。今も上に表示されているだろう。
これはインターネット上の情報の場所を指し示すためのものである。

http://www.example.co.jp/test/index.html

というURLがあったとする。これは3つに分けて読むことができる。

プロトコル
「http:」
WebページをHTTP(HyperText Transfer Protocol)というルールに従って送信することを表す部分
ドメイン名
「www.example.ac.jp」
インターネットに接続されたどのコンピュータに対して通信を行えばよいのかを表す部分
パス
「test/index.html」
Webサーバーの中で、どこにWebページが存在するのかを指定する部分


Webサーバー設定

特定のWebページを開くとき、
Webブラウザは特定のWebサーバに保存されたHTMLファイルを取得する

ならば、HTMLファイルを作ったひとは、サーバにファイルを保存する必要がある。

サーバにHTMLをアップロードする方法例
サーバにアップロードするためのアプリケーションを利用する

ex : WinSCP, FFFTP, Cyberduck


なぜこういったアプリケーションを使うことでファイルのアップロード・ダウンロードができるのか・

プロトコルに準拠したアップロード・アップロードプログラムとなっているため

ここで使われる、ファイル転送のためのプロトコルの例

FTP(File Transfer Protocol) / SFTP(SSH FTP)
SCP(Secure Copy Protocol)
HTTP(Hypertext Transfer Protocol)


Webサーバの動作

ブラウザにURLを指定する
http://www.example.co.jp/tests/test01/index.html
というURLを指定したとする。

そうすると、ブラウザは

「www.example.co.jp」のサーバに対し、「tests/test01」というフォルダにある「index.html」というファイルをください

とリクエストを出す。

webサーバはそれに対して、index.htmlと言うファイルを返してくる

こういった一連の流れがあって表示されている

※このWebサーバの動作方法についてはHTTPプロトコルでルールが決定されている。


HTTPとは


webサーバからHTMLを受け取り、
webブラウザで表示するためのプロトコル

OSI参照モデルとしては、アプリケーション層で動作

主な機能は、
サーバに対し、特定のHTMLを下さいという
サーバからHTMLをもらう

HTTPシーケエンス

Webサーバの動作で話した一連の動作、これをHTTPシーケンスと呼ぶ。

つまり

・「www.example.co.jp」のサーバに対し、「tests/test01」というフォルダにある「index.html」というファイルを下さい
・サーバ「あげるよ」

この二つの動作に名前がついている。

一つ目をHTTPリクエスト、二つ目をHTTPレスポンス

HTTPリクエスト
・特定のサーバに対し、HTMLをもらうため要求
・WebブラウザのアドレスバーにURLが入力されたり、リンクが押されたりした際に行われる。
・「リクエストライン」「リクエストヘッダ」という情報が送られる

HTTPレスポンス
・クライアントからのHTTPリクエストに対する返答
・要求されたHTMLファイルを送る
・「レスポンスライン(ステータスライン)」「レスポンスヘッダ」「レスポンスボディ(データ本体)」と言う情報が帰ってくる

※これらはWiresharkで見ることができる

HTTPレスポンス内の、レスポンスライン(ステータスライン)という箇所にHTTPリクエストの結果がざっくりと書かれている。

少し紹介する

100 Continue
クライアントは続けてリクエストを送る必要がある
200 OK
リクエスト成功
202 Accepted
リクエストを受け入れたが処理は完了していない
400 Bad Request
リクエストが不正構文のためサーバは理解不能
403 Forbidden
リクエストを理解したが実行を拒否
404 Not Found
リクエストのURLに一致するファイルなし
503 Service Unavailable
サーバの状況によりリクエストを扱えない

404 Not Foundはよくみたことある人もいるだろう。

ここらへんの一連のHTTPシーケンスの分かりやすい参考リンクもあったので貼っておく

https://wa3.i-3-i.info/word1846.html


Webにまつわるプログラミング言語 javascript / PHP

HTML  / CSSという言語はよく知っていると思う。
これらの言語以外にWebによく使われるプログラミング言語がいくつかある。

 Javascript と PHPと呼ばれるプログラミング言語だ。

これら二つの言語でプログラミングをしたことがある人は、同じようなことができるどっちでもいい言語のように思える。

だが少しそれぞれWebに対して扱い方が異なってくる

Javascript(よくjQueryで使われる)
webブラウザ上で動作するプログラミング
・Javaとは異なる
PHP
Webサーバで動作するプログラミング言語

webブラウザとwebサーバと違う場所で動作されているのである

つまりはどう言うことなのか関係を見ていこう。

例としてURLは「http://www.example.co.jp/tests/test01/js-version.html」「js-version.html」というHTMLファイルには

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>js test</title>

    <script src="http://www.google.com/jsapi"></scrip>

</head>

<body>
 .
 .
 .
</body>
</html>

みたいなJavascriptが使用されているhtmlファイルとする。

それではHTTPシーケンスがどうなるか考えてみる

1 : まずは、ブラウザは「www.example.co.jp」というサーバに対して、「tests/test01」というフォルダにある「js-version.html」のファイルを下さいというHTTPリクエストを送る。
2 : サーバからHTTPレスポンスをもらいhtmlファイルをブラウザは手に入れる。
3 : htmlファイルの中にJavascriptの記述があり、それをブラウザが処理を行なう。

大事なのはブラウザが処理を行うという点である。


次に、PHPの方も考えてみよう

例としてURLは「http://www.example.co.jp/tests/test01/php-version.php」「php-version.php」というphpファイルには

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php test</title>
</head>

<body>
    <?php
        $a = "Hello note";
        echo "<p>{$a}</p>";
    ?>
</body>
</html>

みたいなphpが使用されているphpファイルとする。

それではHTTPシーケンスがどうなるか考えてみる

1 : まずは、ブラウザは「www.example.co.jp」というサーバに対して、「tests/test01」というフォルダにある「php-version.php」のファイルを下さいというHTTPリクエストを送る。
2 : サーバは「php-version.php」を実行し、処理する。phpが変換される。コードが変わる。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php test</title>
</head>

<body>
    <p>Hello note</p>
</body>
</html>
3 : サーバからHTTPレスポンスをもらいphpがすでにサーバ側で実行され変換されたphpファイルをブラウザは手に入れる。

大事なのはphpはサーバが処理する点である


Javascriptはブラウザで処理する

phpはサーバが処理する


これらの違いによって細かい仕様が異なってくる。
例えば、
・phpはサーバ側で処理を行うため、データベースにもアクセス可能となっている
・日付を出すプログラムの場合、javascriptはブラウザ(パソコン)の時間設定が使われて、phpはサーバの時間設定が使われる。



次回、Chpater03では、OSI参照モデルの1層目の物理層に入る






この記事が気に入ったらサポートをしてみませんか?