HOME > Webと検索エンジンの仕組み > ２、Webサイトの仕組み

２、Webサイトの仕組み

URL(Uniform Resource Locator)

Webサイトにアクセスするためにはドメイン名を含むURLをブラウザ上で打ち込むか、URLが書かれているリンクをクリックする必要があります。

URLとはUniform Resource Locator(ユニフォームリソースロケーター)の略で、Web上に存在するWebサイトの場所を示すものでWeb上の住所を意味することからWebアドレス、またはホームページアドレスとも呼ばれます。

URLの主な構成は:

(1)スキーム名

(2)ドメイン名

(3)ディレクトリ名(フォルダ名)

(4)ファイル名

(5)ファイル拡張子

の5つがあり、それぞれは「/」(スラッシュ)や「.」(ドット)で区切られます。

【URLの構成】

Webサイトのツリー構造

Webサイトは通常1ページだけではなく、複数のWebページから構成されます。

トップページから直接、サブページリンクにリンクを張る二層構造のものや、情報をよりわかり易く整理するために三層構造かそれ以上の構造にする多層構造のものもあります。

この構造は木の形に似ていることから「ツリー構造」と呼ばれることがあります。

【二層構造のWebサイト】

【多層構造のWebサイト】

トップページ＝インデックスページ

トップページとはWebサイトを雑誌や本に例えた場合、表紙にあたる最上層のページの事です。

トップページは正式にはインデックスページと呼ばれるものでインデックス(index)とは英語で索引という意味です。そのためWebサイトのトップページのファイル名はindex.htmlまたはindex.htmという名前をつけます。

WWWが始まったばかりの初期のWebサイトのトップページはまさにインデックス(索引)のようにWebサイトの中にどのようなWebページがあるかが一目でわかる目次のような作りでした。

下の図は日本でも最古のWebサイトの1つである慶應義塾大学の公式サイトの1997年当時のトップページです。

ご覧のように装飾がほとんど無くシンプルな画像とテキスト、テキストリンクで作られたインデックス状のページになっています。

Webサイトの制作技術が進歩するにつれトップページは本来のインデックスページの役割から逸れてデザイン性の高いページにするために画像や特殊効果を出すビジュアルが多用されるようになりました。

しかし、SEOが企業のWebマーケティングにおいて重要な課題になるにつれ、過度な装飾をやめて本来の意味であるインデックスのような形にして、検索エンジンに理解してもらいやすくするために本来の形に戻りつつあります。

実際に非常に多くのユーザーが利用する人気サイトであるアマゾン、ヤフージャパン、楽天、価格コム等のトップページを見ると一定の装飾はあるもののサイトの下層ページにユーザーや検索エンジンロボットがアクセスしやすいように多数のテキストリンクや画像リンクを配したインデックスページになっていることが分かります。

サブページ

サブページというのはサイト内にあるトップページ以外のページのことを意味します。

カテゴリページ

しかし、サブページが増えていけばいくほどユーザーが見たいページに辿り着くのが困難になります。わかりやすくするためには同じ系統の情報毎にカテゴリ分けをすることです。

カテゴリ分けをする際に、各カテゴリの入り口となるページの事を「カテゴリページ」、または「カテゴリトップ」、「カテゴリトップページ」と呼びます。

Webページの技術要素

Webページは次の技術要素により構成されます：

(1)HTML

(2)JavaScript

(3)CSS(スタイルシート)

(4)その他技術

WWWが始まったばかりのころはHTML言語だけでほとんどのWebページが作られていましたが、Webページをよりユーザーにとって便利にするための機能や、見た目を良くするために様々な技術が考案され普及してきました。

HTML

HTMLとは、Webページを記述するためのマークアップ言語です。文書の論理構造や表示の仕方などを記述することができるもので世界統一規格を管理するW3C(World Wide Web Consortium：ワールド・ワイド・ウェブ・コンソーシアム)によって標準化されています。

HTMLでは、文書の一部を“<”と“>”で挟まれた「タグ」と呼ばれる特別な文字列で囲うことにより、文章の構造や修飾についての情報を文書に埋め込んで記述することができます。文章の中で表題や段落の区切りを指定したり、箇条書きの項目を列挙したり、文書の一部として画像や音声、動画を埋め込んだり、他の文書へのハイパーリンクを設定することができます。(IT用語辞典 e-Wordsより)

【HTMLの例】

JavaScript(ジャバスクリプト)

その後、HTMLだけでは実現できないユーザーの動作に応じた動きを提供するために、簡易プログラミング言語であるJavaScriptが考案され広く普及するようになりました。

JavaScriptの特徴は、特別な開発環境は必要とせず、HTMLファイルに書き込むだけで簡単に実行出来ることです。JavaScriptでは主にマウスの動きにあわせてデザインが変化する動作や、単純な計算などを実現することが出来ます。

【JavaScriptの例】

CSS(スタイルシート)

WWWの発展に伴ってより見栄えを良くするためにデザイン性の高いWebページが求められるようになりました。見栄えを記述する専用の言語としてCSS(Cascading Style Sheet：通称スタイルシート)が考案され、構造の記述をHTMLの見栄えを良くするための記述をCSSに分けて記述するようになっています。CSSの普及によりWebページは従来の単純なレイアウト、デザインから、より印刷物など高いデザイン性のある媒体に近づくようになり洗練されたものになってきました。

【CSSの例】

その他の技術

これらの技術以外にも様々な技術がWebページの構成要素として使用されるようになりました。

CGI

CGIとは、Common Gateway Interface(コモン・ゲートウェイ・インターフェイス)の略で、WWWサーバの中で外部プログラムを実行するための仕組みをいいます。

CGIは、ブラウザからのアクセスによってWWWサーバ内でCGIプログラムが実行され、その結果がブラウザへ返されるという仕組みになっています。

双方向性のあるWebページはJavaScriptである程度まで作る事はできますが、JavaScriptはユーザーのパソコン内でプログラムが実行されるため大規模なプログラムになるほど動作が重くなり実用的ではありません。

ユーザーがアクセスするサーバ側で実行されるCGIを用いることにより、大規模なプログラムを実行するにはCGIのほうが適しています。

CGIの代表的な種類としてはPHP、Perl等があり、多くのWebサイトのショッピングカートや予約システム、検索システム、フォーム等で利用されています。

Java

Javaは、Sun Microsystems社が開発したプログラミング言語でC言語に似た表記法を採用しています。既存の言語の欠点を踏まえて一から設計された言語であり、最初からオブジェクト指向性を備えています。

また、強力なセキュリティ機構や豊富なネットワーク関連の機能が標準で用意されており、ネットワーク環境で利用されることを強く意識した仕様になっており双方向性の高いWebサイトで利用されています。(IT用語辞典 e-Wordsより)

Ajax

Ajax(エイジャックス)とは、Asynchronous JavaScript + XMLの略で、非同期通信を利用してデータを取得したり、動的にWebページの内容を書き換える技術のことです。アジャックスと発音することもあります。

Ajaxを取り入れるとバックグラウンドでサーバと非同期通信することができページを切り替えることなくWebページ上で動作を実現できます。それによりユーザーはストレスを感じることなく、快適に操作出来ることが特徴です。

Ajax初心者入門講座より：

http://ajax.pgtop.net/category/4229716-1.html

静的ページと動的ページ

静的ページ

Webページには静的ページと動的ページがあります。

静的ページは、index.htmlなどのように、URL中に指定されたhtmlなどのデータが変化することなくそのまま送信される方式のWebページのことです。

例えば、会社概要や事業内容など、誰が見る場合でも常に同じ内容を提供する場合に使われます。

【静的ページのURL例】

http://www.aaaaa.co.jp/index.html

http://www.aaaaa.co.jp/aboutus.html

動的ページ

PHPや、Perl等のCGIを実行して生成されるWebページの事を動的ページと呼びます。

search.php?q=pentagon などのように、パスと共にクエリと呼ばれるパラメータが要求データとして送信され、これを受信したWebサーバは、スクリプトと呼ばれるプログラムに渡されたパラメータを指定して実行することで結果を生成し、それを応答のデータとしてブラウザに送信する方式のWebページのことです。

上越教育大学より

http://juen-cs.dl.juen.ac.jp/html/www/005/

【動的ページのURL例】

http://www.aaaaa.co.jp/index.php

http://www.aaaaa.co.jp/cart.cgi=?id=1