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


インターネット


Webサイトのしくみについて、概要程度はつかんでおきたいという方のために以前書いた記事を総括して書きなおしてみました。
→「WebサーバとかHTTPとかわからない人のためにWebのしくみを超カンタンに説明してみる
→「とりあえず難しいことは抜きにしてJavascriptっていったい何なの?

インターネットやSNS(Facebook、Instagram、ツイッターなど)などの様々なWebサービス、Webコンテンツを普段当たり前に利用してはいるものの仕組みがよくわからない人のために、Webのしくみを説明しています。難しいことは置いておいて、まずはこんなカンジでイメージしておけば良いのではというレベルの内容となっています。専門家でない人にも理解できるように、できるだけ簡素な表現で説明しています。

インターネットでWebページが表示されるしくみ

■ウェブブラウザ
インターネット上に存在するいろいろなWebページ(ホームページ、Webサイトとも言います)を見る時に「ウェブブラウザ」と呼ばれるソフトウェアを利用します。このウェブブラウザのおかげでWebページを表示することができます。(ウェブブラウザは単にブラウザとも呼ばれています)

スクリーンショット 2016-08-30 1.10.59

ウェブブラウザは今や必須のソフトウェアであるため、パソコンやスマートフォンには標準でインストールされていてすぐに利用することができます。インターネットが今ほど普及していない時期のパソコンにはウェブブラウザはインストールされておらず、利用するには自分でインストールする必要がありました。これはWeb自体がOSに代わる基幹の技術として台頭してきていることを示唆しているものと言えます。
ウェブブラウザの役目は単なる閲覧ソフトウェアからネットワーク資源を活用するための様々な機能を持った高機能クライアントソフトウェアに移り変わりつつあります。

■ウェブブラウザでWebページを表示する
ウェブブラウザ上でURL(「http://〜」の形式でWebページを指し示すものです)やIPアドレス(「192.168.0.1/〜」の形式でWebページを指し示すものです)を指定することで、Webサーバに対して「Webページのデータをください」と要求を送ります。要求がWebサーバに届くと、要求したWebページのデータがWebサーバから送られてきてウェブブラウザ上に表示されます。Webページ上のリンクやボタンをクリックした場合も同様にWebサーバへ要求をしているだけです。

Webサーバ上にはWebページを表示するためのデータファイルが保存されています。HTMLという言語で書かれたファイルや画像ファイル、音声ファイル、動画ファイルなどさまざまなデータファイルが保存されています。Webサーバはこれらのファイル群から要求されたファイルを取り出してウェブブラウザへ送っています。

スクリーンショット 2016-08-30 1.12.34

■Webページがきれいに表⽰されるのはウェブブラウザのおかげ
Webサーバが送ってくるWebページのデータは普段みなさんが⾒ているような整ったWebページの形にはなっていません。これらのデータを整えて⾒やすい形にするのはウェブブラウザの役⽬になります。Webのデータファイルには⽂字や画像の位置、レイアウト、⽂字の⾊、⽂字の⼤きさなどWebページ構成が書かれているので、それに従ってウェブブラウザはWebページを表⽰します。このようなページ構成を指定して書かれた⽂書がHTML(Hyper Text Markup Language)ファイルといわれるファイルです。以下はHTMLファイルの⼀部を抜粋したものです。

HTML では「タグ」という<>で囲われた印で⽂字を装飾したり位置を決めたりします。
スクリーンショット 2015-11-09 17.34.10

このHTMLファイルに書かれた内容をウェブブラウザが適切に解釈して画⾯に表⽰すると以下のようになります。
スクリーンショット 2015-11-09 17.36.03
このようにウェブブラウザがHTMLを適切に解釈して⾒やすいWebページにしてくれるおかげで、整った⾒やすい形でWebページを⾒ることができます。

Webサーバ

これまでの説明の中でWebサーバという⾔葉が出てきましたが、「Webサーバって⼀体なんなの?」という⽅のために簡単に説明します。
スクリーンショット 2016-08-30 1.19.21

■Webサーバってどんなコンピュータ?
Webサーバと聞くと何やら特殊なコンピュータみたいなイメージを持っている⽅もいると思いますが、極端に⾔うと、Webサーバソフトウェアがインストールされたコンピュータというだけで構造⾃体は普通のPCとたいして変わりません。(実際には⾼性能なCPU、⾼速ディスク(SSD)、⼤容量メモリを搭載したハイスペックなコンピュータであることがほとんどです)
スクリーンショット 2016-08-30 1.20.57

Webサーバソフトウェアをインストールして設定すれば普通のノートPCでもWeb サーバとして使うことができます。個⼈で簡単なWebサイトを作ったりする場合はこれでも何とかなったりします。
スクリーンショット 2016-08-30 1.21.48

商⽤やたくさんの⼈が集まるWebサイトを作る場合、「Webページのデータをください」という要求が⼀度にたくさん来ることを想定してWebサーバの性能を⾼めにしておく必要があります。ただ、このような環境を構築するには⾼い費⽤と設定のスキルなどが必要になるため、レンタルサーバやクラウドなどのサービスを利⽤したりします。レンタルサーバやクラウドは専⾨の技術者によって設定された⾼いスペックのマシンを「間借り」するイメージになります。
スクリーンショット 2016-08-30 1.22.50

■WebサーバはWebサイトに必要なデータ資源を管理している
以上、Webサーバをハードウェア的な⾯から簡単に説明しました。機能的な⾯から⾔えば、Webサーバとは、利⽤者側のコンピュータに対しネットワーク(インターネットやLAN)を通じて情報や機能を提供するコンピュータということになります。

WebサーバにはHTML ファイル、画像ファイル、動画ファイル、Web プログラムファイルなどのWebサイトに必要な全てのデータ資源が保存されていて、これらのWebサイトを構成するファイルの送信が主な⽤途となります。このやり取りにはHTTPと呼ばれる通信規約が⽤いられ、データ資源の所在の指定には「http://〜」あるいは「https://〜」で始まるURLと呼ばれる形式が⽤いられます。単純なファイルの送信だけでなく、利⽤者を識別あるいは認証して⼈によって異なる情報や機能を提供したり、データの送受信を暗号化したり、利⽤者側から送られてきたデータやファイルを受け取って保存したりといった機能を備えているものもあります。

また、特定の資源へのアクセス要求を受けると指定されたプログラムを起動・実⾏したり、別のシステムと接続・連携して複雑な処理を⾏う機能を持つものもあります。このようなソフトウェアの実⾏環境や連携機能などを持つものは「Webアプリケーションサーバ」と呼ばれる場合もあります。

■Webサイト構築の流れ
WebサーバはWebサイトを構築する場合には必ず必要なコンピュータ資源であり、⾔い換えればWebサイトを構築するということはWebサイトに必要な全てのデータ資源をWebサーバに保存し、ネットワークを通じてこれらの資源にアクセスできる状態を作り上げることと同義ということになります。
スクリーンショット 2016-08-30 1.31.43

今回はここまでで、次回「Webサイトのしくみをやさしく解説してみる(2)」ではHTTP、ドメイン、HTML、Javascript、PHPあたりの話を書こうと思います。

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

















チャーム本店



価格.com ブロードバンド

価格.com 自動車保険









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