Webサイトのしくみをやさしく解説してみる(2)


Earth_AsiaSide


前回記事「Webサイトのしくみをやさしく解説してみる(1)」の続きです。

通信の決まり事

■通信プロトコル(HTTP)

Webページを表⽰するときには、クライアント(みなさんのパソコンを指します)はインターネットという通信網を利⽤してWebサーバと通信を⾏っていますが、この通信はHTTP(Hyper Text Transfer Protocol)というプロトコル(規約、決まり事)に従って⾏われています。

スクリーンショット 2016-08-31 20.47.36

実際にWeb サーバに「Webページのデータをください」と要求する場合もこのHTTP の決まりに従ってデータの塊(かたまり)を送信します。Web サーバがWebページのデータを送ってくる場合もHTTP の決まりに従ってデータの塊を送ってきます。このデータの塊がいわゆる「パケット」というものになります。

スクリーンショット 2016-08-31 20.49.57

メールを送るときにもやはりメール⽤の決まり事があってその際にやりとりされるデータの塊も「パケット」です。スマホの通信料でよく出てくる「パケット」はこのようなWebの通信やメールの通信でやり取りされるデータの塊のことを指しています。

HTTPでは1 つのパケットのサイズが決められているため、⼤きなデータの場合は複数のパケットに分割されて送信されます。例えばWebサーバがファイルを1つ送信する時、ほとんどの場合、複数に分割されたパケットとして送信されます。受信側であるウェブブラザはこれらの分割されたパケットを1つのファイルにまとめたりすることもしてくれます。 (メールの場合はメーラーと呼ばれるメールのソフトウェアがやってくれています)

【備考】

厳密には、ネットワーク技術の世界では上述の「データの塊」全てを「パケット」と呼んではいませんが、⼀般的に流通している⾔葉として「パケット」を使⽤して説明しました。詳細な通信の標準規格では「イーサネットパケット」、「イーサネットフレーム」、「IPパケット」、「TCP パケット(またはTCPセグメント)」などの⾔葉を使⽤して説明が記述されています。

(参考) パケットとフレームは同じもの?

http://itpro.nikkeibp.co.jp/article/COLUMN/20060327/233396/?rt=nocnt

■HTTPSってHTTPと違うの?

URLが「https://〜」で始まっているページはHTTPS(Hyper text Transfer Protocol Secure)通信を利⽤して通信を⾏います。通常のHTTPによる通信をより安全に(セキュアに)⾏うためのプロトコルです。厳密にはHTTPSはプロトコルそのものの名称ではなく、SSL/TLSプロトコルを組み合わせてHTTP通信を⾏うことをHTTPS と呼んでいます。

スクリーンショット 2016-08-31 21.08.37

HTTPSを使った通信では、データを平⽂のままで送受信する標準のHTTP通信と異なり、SSL/TLS プロトコルを⽤いて、サーバの認証・通信内容の暗号化・改ざん検出などを⾏います。これによって、なりすましや盗聴などのインターネット上でのサイバー攻撃を防ぐことができます。

■世界とつながるインターネット

インターネットでWebページを⾒る場合、Webサーバとの通信をしているという話をしましたが、これらのWebサーバは⽇本国内だけでなく世界中に存在します。当然、⽇本から海外のWebサーバへ通信していることも多々あります。通信するには⽷電話のように何かしら通信網でつながっている必要があります。では、海で隔てられた海外のWebサーバとはどのようにつながっているのでしょうか?あまり意識することはありませんが、実はこれらの通信網は海底ケーブルや通信衛星を利⽤してつながっています。余談ですが海底ケーブルはサメに噛まれたり、船のイカリで破損したり、漁の網が引っかかることもあるようです。

ドメインとは?

■ドメインはインターネット上の住所

URLやメールアドレスに含まれるドメインは、インターネットにおける住所のような役割をもっています。

スクリーンショット 2016-09-01 20.21.23

これらのドメインは登録制で運⽤されていて、同⼀のドメインは存在しません。実世界の住所に同じものが存在しないのと同様です。当然、既に使⽤されているドメインは他の⼈が使⽤することができないようになっています。世の中に存在するWeb サーバにはこの住所あたるドメインがそれぞれ設定されているため、クライアントは⽬的のWeb サーバに対してリクエストを送ることができます。

■ドメインって誰が管理しているの?

ドメインは正しくはドメイン名と呼びます。ドメイン名はいくつか種類があります。「.jp」や「.com」にあたる⼀番右側のブロックは、トップレベルドメイン(TLD)といいます。TLD は「国や地域に属するもの」と「属さないもの」の2 種類に分類することができます。国別のドメイン名は末尾に「.jp」など、その国を表す⽂字がついています。各国、地域にそれぞれ割り当てられていて約250 種類もの国別TLDが存在します。

ちなみに国別ドメインはその国・地域に住所を持つ個⼈・団体しか登録ができません。そのため「.jp」が付くJPドメインは⽇本に住所がある個⼈・団体にしか使⽤できません。また、JPドメインは世界で最も安全な国別ドメインとされています。(セキュリティー企業の⽶マカフィー社の調べではWebサイトの危険度ランキングにおいて、最も安全な国別ドメインと評価しました)

他に、国や地域に属さない「.com」「.net」のようなTLDも20 種類ほどあります。これらドメイン名の管理はこのTLDごとに「レジスリ」と呼ばれる管理会社が⾏っています。例として、「.com」はアメリカのベリサイン社が管理していて、⽇本のドメイン名「.jp」は⽇本レジストリサービス(JPRS)が管理しています。全てのTLDとその管理会社を管理しているのが、ICANN(アイキャン)という⾮営利の国際組織で、ドメイン名のほかにIPアドレスなどのインターネット資源を⼀元管理しています。

ドメイン管理を簡単に⾔うと「ドメイン名を誰が登録しているか」という情報を適正に管理することです。ドメイン名を登録する場合、これらレジストリと呼ばれる管理会社に直接申請すれば良いかというと、そうではありません。通常、管理会社との間に⼊っている代理店(お前.com やムームードメインなど)に対して申請を⾏います。代理店を介して様々なTLD を登録することができますが、どの代理店がどのTLDを扱えるのかはTLD によります。例えば、「.jp」のドメイン名は、⽇本国内に住所がある⼈しか登録できないので⽇本の代理店でしか扱うことができません。「.com」や「.net」は、海外のドメイン名ですが、世界中から登録を受け付けているので⽇本の代理店でも扱うことができます。

HTMLとJavascript

「WebページはHTMLに書かれた内容がウェブブラウザによって表⽰されている」という説明をしましたが、Webページを作り上げるための技術としてHTMLの他にJavascriptというものがあります。多くのWebページで使⽤されているので名前は聞いたことがあるという⽅もいると思います。現在のWeb関連の技術として⾮常に良く使⽤されている技術ですので、ここではそのJavascriptについて説明しようと思います。

■まずはHTMLについて

HTMLファイルはウェブブラウザ上に表⽰したい⽂字や画像・動画などを書式指定付きで書かれた⽂書ファイルです。「書式指定付き」というのは、段落や⽂字の位置や⼤きさ、⾊、装飾などを指定して書かれているという意味です。例えば「あいうえお」という⽂字を太字で表⽰したい場合はHTML書式に従って書くと「<strong>あいうえお</strong>」(または「<b>あいうえお</b>」)となります。

スクリーンショット 2016-08-31 21.23.30

このような「<>」で囲まれたものをHTMLタグ(または単純にタグ)と呼びます。HTMLタグは⾮常にたくさんの種類があり、⽂章や⽂字、画像などブラウザ上に表⽰したいものに対してさまざまな効果を与えることができます。「HTMLタグ」でGoogle検索などをしてみるとHTMLタグの⼀覧サイトなどがたくさん出てきますし、書籍等も⾮常に多く出版されています。全てを覚える必要はありませんが、代表的なものは頭に⼊れておくとWebページの構造を理解する場合に役⽴ちます。

(参考) HTMLクイックリファレンス:http://www.htmq.com/html/

スクリーンショット 2016-08-31 21.26.10

HTMLの記法は以下のように開始タグ(<タグ名>)と終了タグ(</タグ名>)で囲むような形になっています。

スクリーンショット 2016-08-31 21.29.13

このように開始タグと終了タグで囲んだものが⼀つの要素となります。この要素を組み合わせることによって構造を作っていきます。

■動きのあるページと動きのないページ

インターネット上にあるWebページの中にはユーザのクリックなどによって、ページ内の⽂字の⾊や⼤きさが変わったり、背景が動いたりなど「動きのあるページ」が多く存在します。逆に⽂章がズラッとひたすら書いてあるだけの「動きのないページ」もあります。「動きのあるページ」を動的コンテンツ(動的ページ)、「動きのないページ」を静的コンテンツ(静的ページ)と呼びます。HTMLは基本的に「動きのない」静的コンテンツしか記述することができません。(厳密にはHTMLは進化し続けていて、ある程度であれば動的なページを作ることも可能ですがまだ発展途上の状態です)そこで登場するのがJavascriptということになります。Javascriptを使うと「動きのある」動的コンテンツを作ることができます。

■Javascriptとは

簡単に⾔うとJavascriptはHTMLと⾮常に親和性の⾼い(組み合わせて使いやすい)プログラム⾔語です。プログラム⾔語という性質上、プログラムの⽂法に従って記述する必要がありますが、プログラム⾃体はHTMLファイルの中に直接書くことができます。(HTMLファイルとJavascriptファイルに分けて書くこともできます)特別な設定なども必要なく⾮常に⼿軽にプログラムを動作させることができます。以下はJavascriptが書かれたHTMLファイルです。

スクリーンショット 2016-08-31 21.34.40

このJavascript が実⾏されると以下のように画⾯に小さなダイアログウインドウが表⽰されます。

スクリーンショット 2016-08-31 21.36.11

ここでは、ページが表⽰されるとウインドウが開いて⽂字を表⽰させています。このようにJavascriptを使うことで、HTMLでは実現できなかったさまざまな効果をWebページに与えることができます。

HTMLファイル内にJavascriptを記述する場合は以下のように<script>タグを記述します。このタグに囲まれた部分に書かれた記述はJavascriptプログラムとして認識されます。

スクリーンショット 2016-08-31 21.38.05

このようにHTMLにはJavascriptが記述できるように<script>〜</script>タグが⽤意されているのでHTMLファイル内にJavascriptプログラムを書くことができます。

JavaScriptはネットスケープ社によって開発され、同社が開発していたウェブブラウザNetscape Navigator 2.0で動作するプログラム⾔語でした。開発当初はLiveScriptと呼ばれていましたが、1995 年にサン・マイクロシステムズ社(現オラクル・アメリカ社)が開発したプログラミング⾔語Javaが当時⼤きな注⽬を浴びており、ネットスケープ社とサン・マイクロシステムズ社が業務提携していた事もあったため、JavaScriptという名前に変更されましたJavascriptとJavaは名前は似ていますが、プログラム⾔語としての関連性はなく、全く異なるプログラム⾔語です。

■Javascriptが動くのもウェブブラウザのおかげ

ウェブブラウザはHTMLタグを解釈してWebページを表⽰することができるという説明をしましたが、実はウェブブラザはHTMLだけでなくJavascriptというプログラムを理解して動作させることもできます。Javascriptが正しく動作してページに効果を与えることができるのもやはりウェブブラウザのおかげと⾔えます。つまりウェブブラウザはHTMLタグを理解し、Javascriptというプログラムも理解できるように作られているということになります。

スクリーンショット 2016-09-01 1.45.41

現在、ウェブブラウザにはIE、Chrome、Safari、Firefox など種類がいくつかありますがこれらのウェブブラウザはHTMLを正しく解釈し、Javascriptを動作させることができるようになっています。ただウェブブラウザによってはHTMLとJavascriptの解釈のしかたが若⼲異なる場合があり、⽂字は太くなるけれど太さが異なる、解釈できないHTMLタグがある等、使⽤するウェブブラウザによっては表⽰されたページが異なって⾒える場合があります。最近ではこのようなケースは少なくなりましたが、数年前までは各ウェブブラウザ間での表⽰や動作の違いに開発者が悩まされていました。特にJavascriptに関する動作の違いが顕著で、⼀時期はWebページを作る際にはJavascriptは使わないほうが望ましいという時期があったぐらいです。現在でも特定のウェブブラウザでしか解釈できないHTMLタグやJavascriptのプログラム命令が存在しますが、開発者はそういうものは極⼒使⽤しないことで、どのウェブブラウザでもきちんと表⽰され、動作するWebページを作り上げています。

プログラム⾔語PHP

PHP(Hypertext Preprocessor)は、Webサーバの機能を拡張し、動的にWebページを⽣成するために⽤いられるプログラム⾔語の⼀つです。いわゆるスクリプト⾔語の⼀つで、インタプリタ型のプログラム⾔語です。主にWebサーバ上に実⾏環境を組み込んで利⽤されます。

【スクリプト⾔語】※特に知らなくてもプログラミングには⽀障ありません
スクリプト⾔語とは、プログラミング⾔語のうち、プログラムの記述や実⾏を⽐較的簡易に⾏うことができる⾔語の総称です。多くの場合、スクリプト⾔語はインタプリタ型⾔語であり、コンパイラ型⾔語に⽐べて実⾏までの処理の⼿間がかからないという特徴を持っています。通常、スクリプト⾔語と⾔った場合は、Webブラウザ上で動作する簡易プログラムを記述するための⾔語を指す場合がほとんどで、代表的なスクリプト⾔語としてはJavaScript、Perl、Python、PHP、Ruby などがあります。
【インタプリタ型とコンパイラ型】※特に知らなくてもプログラミングには⽀障ありません
プログラミング⾔語は実⾏する⽅式の違いから、インタプリタ型⾔語とコンパイラ型⾔語に分類することができます。プログラムは元々⼈間が理解できるように書かれているため、そのままではコンピュータにその指⽰内容を理解させることはできません。ですからそれをコンピュータに理解できるような命令(機械語)に変換をする必要があります。プログラムを機械語に変換して実⾏させる⽅法にはインタプリタ⽅式とコンパイラ⽅式があり、プログラム⾔語によってそれぞれ⽅式が決まっています。インタプリタ⽅式のものはインタプリタ型⾔語、コンパイラ⽅式のものはコンパイラ型⾔語と呼ばれます。
インタープリタ型⾔語は、⼈間がプログラミング⾔語で記述したソースコードを、コンピューターが実⾏できる機械語の形式へと逐次変換しながら、そのプログラムを実⾏してゆく⽅式のプログラム⾔語です。例としてJavaScript、PHP、Ruby、Python などがあります。実⾏しながら変換していくのでコンパイラ⽅式より処理速度が遅くなります。コンパイラ型⾔語では、ソースコードをコンパイルおよびリンクという作業により機械語形式の実⾏⽤ファイルを⽣成してから実⾏します。実⾏前に変換が完了しているため、実⾏しながら変換するインタープリタ型⾔語と⽐べて処理速度に優れているという特徴があります。代表的なものとしてC ⾔語やC++、Java、FORTRAN、Pascal などがあります。

■HTMLで実現できない機能はプログラムが必要

Webサイトと⼀⼝に⾔ってもさまざまな種類のWeb サイトが存在します。単なるお知らせや情報のみを表⽰しているサイト、会員制ショッピングサイト、ブログ、掲⽰板、企業サイト、あげればキリがないですが、これらのサイトの中にはHTMLだけでは実現できない機能を持つサイトがあります。例えば会員制のWebサイトは会員登録という機能を持っていますが、この機能はHTML だけでは実現できない機能です。会員登録の際には利⽤者に必要な情報を⼊⼒してもらい登録ボタンを押すというのが通常の流れになりますが、この⼊⼒された会員情報はどこかに保存しておく必要があります。この「保存」するというアクションはHTMLでは実現できません。このような機能を実現させるためにはPHPなどのプログラム⾔語の⼒を借りることになります。

■PHPプログラムを使って会員情報を保存する

ここでは、「会員情報の保存」(利⽤者に必要な情報を⼊⼒してもらい、登録ボタンをクリックすると会員情報がWebサーバ上のファイルに保存される)という機能を例にとり、これをプログラムで実現する場合の仕組みについて説明します。会員登録のおおまかな流れは以下のようになります。
スクリーンショット 2016-09-01 16.46.34

■PHPプログラムがやっていること

上記、会員登録の流れを(1)〜(5)までタスクに分割して表現しました。ここで注⽬して欲しいのが「(4)Webサーバは会員情報を受け取りファイルに保存する」の部分で、ここでPHPプログラムが動作しています。PHPプログラムが⼊⼒データを受け取りファイルへ保存しています。(4)の図を少しだけ詳しく書くと以下の様になります。
スクリーンショット 2016-09-01 16.49.23

PHPプログラムの中ではさまざまな処理がプログラムの⽂法に従って記述されています。これらのHTMLでは実現できない処理をPHPプログラムで実現しています。

ここではプログラムはデータの受け取りからファイルへの保存までを⾏っていますが、プログラムを使⽤すると他にもさまざまな事が実現できます。メールの送受信をすることもできます。他のコンピュータにファイルを送信することもできます。ユーザの使っているブラウザの名前やIPアドレスを取得することもできます。このようにプログラムを使う事によりHTMLでは実現できなかった、さまざまな機能を持ったWebサイトを作り上げることができます。

■PHPプログラムはWeb サーバ上で動いている

PHPはWebサーバ上で動作するプログラムです。そのためWebサーバにPHPプログラムが動作するための環境が準備されている必要があります。プログラムを正しく記述してもWebサーバに動かすための準備がされていなければプログラムは全く動きません。(具体的にはプログラムを動作させるために必要
なファイル群をインストールして正しい設定を⾏います)PHPを動かしたい場合はPHP⽤の準備を、Javaを動かしたい場合はJava が動く準備をする必要があります。レンタルサーバなどのサービスでもプログラムが動く準備が整えられているものが多く、特にPHPはほとんどのレンタルサーバで使⽤できます。

■クライアントサイドスクリプトとサーバサイドスクリプト

PHPはWebサーバ上で動作するプログラムですが、これに対してJavascriptはウェブブラウザ上で動作するプログラムです。このように動作する環境という視点からJavascriptはクライアントサイドスクリプト、PHPはサーバサイドスクリプトと呼ばれます。

クライアントサイドスクリプトは、その名のとおり、クライアント上(ウェブブラウザ上)で動作するスクリプト技術をいいます。「クライアントサイドスクリプト」といった場合、必ずしもある特定のプログラム⾔語を表すものではありませんが、主要なウェブブラウザが対応していることから、Javascriptを採⽤するのが⼀般的です。

サーバサイドスクリプトはPHPに代表されるWebサーバで動作するスクリプト技術です。PHPの他にもJavaのJSP&サーブレットやASP.NET、Perl などがあります。スクリプト実⾏の流れとしては、クライアントからリクエストを受け取ると、スクリプトの実⾏結果をクライアントへ送信します。

【備考】
Javascriptはクライアント上で動作するので、利⽤者側のPC のCPUやメモリを使⽤して動きます。また、クライアン
トサイドスクリプトはWebサーバ上のファイルやデータベースにはアクセスできません。PHPはWeb サーバ上で動作するのでWebサーバ側のCPU やメモリを使⽤して動きます。

クライアントサイドスクリプトとサーバサイドスクリプトは共にWebサイト上で動作するプログラム技術ですが、利⽤局⾯という観点から、クライアントサイド技術とサーバサイド技術は以下のように使い分けるのが妥当です。
スクリーンショット 2016-09-01 16.56.52
具体的には、Javascriptで画⾯の⼊⼒チェック等をウェブブラウザ上で⾏い、PHPで⼊⼒データの保存処理等をサーバ上で⾏う。といった実装をします。

シェアして頂けると嬉しいです

















チャーム本店



価格.com ブロードバンド

価格.com 自動車保険









■コメントはお気軽にどうぞ