初めての方から本格的ビジネス用途まで簡単シンプルに美しいWebサイトが作成できるQHM学習教室です。 ちょっと勇気を出して「自分の中の壁」を乗り越えてみませんか?

Web技術の基本知識

Web技術の基本知識

Webについて

ホームページとWebサイトの違い

ホームページとは本来複数のページで構成される起点となるページ、つまりトップページを表す意味の言葉だったのですが、日本ではそれが広く流通していて馴染み深いのですが、本来の意味から言うと誤用となります。

正式には「Webサイト」あるいは「Webページ」という言い方が正しい名称となります。

英語圏では「Official Website」と表記されていますし、日本の業界でも「公式サイト」とか「公式ウェブサイト」と表記されるのが通例です。

ですので、プロやエンジニアの間では「ホームページ」という表現はあまり使われず、自分のことをWebデザイナーとかWebサイト制作者と名乗ったりします。

Web(www)の語源

Webサイトの「Web」の語源である「World Wide Web」は、1980年代にCERN(セルン:欧州合同素粒子原子核研究機構)に所属していたティム・バーナーズ・リーによって開発されました。ハイパーテキストと呼ばれる、複数の文書(テキスト)を相互に結び付けたテキストをインターネットで流す仕組みで、これにより世界中の大学や研究所に分散する情報を共有することが可能となりました。その相互の結びつき(リンク)が蜘蛛の巣のように見えたことから、「世界中に張り巡らされた蜘蛛の巣」という意味でWorld Wide Webと名づけられました。

World Wide Webのイメージ
world Wide Web

 World Wide Webで配信されるハイパーテキストのことを「Webページ」と呼び、特定のドメイン(組織)の下に集合したWebページ群のことを「Webサイト」と呼びます。

WebサーバとWebブラウザの関係

 Webサイトを公開するには、Web(WWW)サーバと呼ばれる環境が必要となります。サーバとは、データや情報など他のシステムにサービスを提供することを目的としたコンピュータのことで、Webサーバとは文字通り「WWWのサービスを提供するコンピュータ」となります。

 逆に、一般の利用者(ユーザー)がWebサイトにアクセスするには、Webブラウザと呼ばれる閲覧ソフトが必要になります。インターネットエクスプローラー、Google Chrome、FireFox、Safariが有名なところでしょう。これらのソフトは、WebサーバにWebページを要求し、受け取ったハイパーテキスト(HTML)を人間がわかりやすい形で描写(レンダリング)するという役目をします。

WebブラウザとWebサーバーの関係
Web Browser&Web Server

HTMLについて

タグによって記述されるWebページ

 WebページはHTML(Hyper Text Markup Language:ハイパーテキスト記述言語)と呼ばれる言語で作成します。HTMLでは、ページに関する情報やコンテンツをタグと呼ばれる「<>」を用いて記述します。ページの見出しなら「<h1>~</h1>」、段落なら「<p>~</p>」、といった具合です。タグで囲まれた各部分を要素を呼びます。

HTMLのイメージ
画像の説明

 HTMLは、ページのタイトルや文字コードなど「ページに関する情報」が記載されているHTMLヘッダと、ページの内容そのものを含むHTMLボディの2つに分かれます。「ページに関する情報」というのがピンと来ない方は、「書籍の末尾にある『奥付』みたいなもの」と考えるとわかりやすいでしょう。

書籍の奥付のイメージ
Web Technolozy

高度なビジュアル表現を支えるHTMLの技術

 文字だけで構成されたWebページは味気ないため、HTMLには動画画像など文字以外の情報を埋め込むことができます。また、ページの見出しや文章の見た目を調整するCSSや、アニメーションを表現するFlashなど、高機能で表現力豊かなWebページを実現するための技術が活用されています。

Webページを彩る様々な技術と表現
WebPage&Html

JavaScript

 JavaScriptとは、Webブラウザで動作するプログラミング言語のことで、Webページ上で計算(演算)結果を出力するために使われます。HTMLに「1+1」と記載すればブラウザには「1+1」とそのまま表示されますが、JavaScriptを使うことで「2」という計算結果を出力できます。下記はブラウザでJavaScriptを実行した結果となります。ちなみに、「document.write()」とは「ページに文字を出力しなさい」というJavaScriptの命令(関数)です。

JavaScriptの実行結果
画像の説明

CMSについて

Webページのテンプレート化

 通常、Webサイトは複数のWebページによって構成されるため、Webサーバの内部にはWebページの数だけHTMLファイルが存在しますが、複数のページがヘッダやフッタなどに同じデザインやメニュー項目を適用することは多々あります。

Webページの共通部分
Web Page Intersection

 こういったページの共通部分が各WebページのHTMLファイルに含まれているわけですが、これをそのまま記述してしまうと、共通部分を修正する際に全てのHTMLファイルに手を加えなくてはならなくなるため、効率が非常に悪いのです。

 そのため、規模が大きなWebサイトではテンプレート(「ひな形ともいう」)となるHTMLファイルを用意し、その中にWebページの本文を当てはめてからWebページを出力する技術が開発されました。これを「Webページのテンプレート化」と呼びます。

「Webページのテンプレート化」のイメージ
Web Page Template

CMS(Contents Management System:コンテンツ管理システム)

 前述のWebページのテンプレート化技術を活用、応用化したのが「CMS」と思っていただいても良いでしょう。

 例えば、複数のページに共通なメニュー項目を追加、変更したい時、あるいはサイト全体のデザインを変えたいと思った時、これまでの技術では、たった一つのメニュー項目を追加/変更する際に、全てのWebページの更新作業が必要であり、大変面倒でした。

 また、それらの追加/変更する際には、その都度Web製作者にページ制作更新を依頼する必要があり、時間やコストが掛かってしまい、迅速な対応が困難でした。

Webサイト更新のイメージ

Web Site Reviced

こうした問題、課題を解決するために生まれたのが、CMSです。

CMS」技術を使ったWeb制作システムでは、メニューやサイト情報、デザインなどの編集機能がページ編集機能と独立しているため、追加/変更した更新内容が一瞬で全てのWebページに反映されるのが特徴です。

これまで何時間も掛かった更新作業が、CMSを使うとわずか数分で実現できてしまう! ということが可能になります。

 そこで、最近では原稿(ページ本文)を作成するだけでWebページの追加や更新が簡単に行えるCMS(Contents Management System:コンテンツ管理システム)を利用することが多くなってきています。

HTMLを入力することなく、ワープロ感覚でWebページを作成することができるため、社内に専属のWeb制作者がいない場合やスタッフが日々コンテンツを更新する必要がある場合に重宝されます。

CMSの動作イメージ

CMS Act Image

 CMSは、無償で利用できるものから数千万円かかるものまでピンキリです。MobableTypeやWordPressなどに代表される「ブログ」もCMSの一種です。そのほか、ECサイトやニュースサイトの運営に特化したもの、アンケートや会員管理といった機能を含むものなど目的・用途・予算に応じて多種多様なCMSが存在します。

数多くのCMSのなかから、初心者から本格的なビジネスユースまで、商用に使えるクオリティと機能を合せ持ち、しかも簡単、優しく、楽しく作成できるWebサイト作成ツールとして「(QHM)Quick Homepage Maker」をご紹介いたします。

「Quick Homepage Maker(QHM)」の紹介はこちら

HTTPについて

HTTPの役割

 WebサーバとWebブラウザは、HTTP(Hyper Text Transfer Protocol)と呼ばれるプロトコル(手順)に従ってWebページを送受信します。HTTPは、通信に必要な内容を含む「HTTPヘッダ」と、HTMLコンテンツを含む「HTTPボディ」で構成されます。郵便物に例えると、封筒に書いてある宛先や差出人の情報がHTTPヘッダ、封筒の中身がHTTPボディとなります。

HTTPヘッダとHTTPボディ
HTTP Head&HTTP Body

 HTTPボディはWebブラウザの描写結果としてユーザーの目に直接触れますが、HTTPヘッダをユーザが見ることはありません。下記はFireFoxのHTTPFoxというプラグインを使って表示したHTTPヘッダの内容です。HTMLファイル以外にも、画像やCSS・JavaScriptなど様々なデータがやり取りされていることに気づくでしょう。

HTTPヘッダの内容
HTTP Head Content

 なお、HTTPヘッダとHTMLヘッダは名前が似ているために混同されることが多いですが別物です。注意しましょう。

HTTPの要求ヘッダと応答ヘッダ

 HTTPヘッダには、WebブラウザからWebサーバにコンテンツを要求するときに送信される要求ヘッダと、WebサーバからWebブラウザから配信されるコンテンツと一緒に送られる応答ヘッダの2種類があります。

HTTPの要求ヘッダ

HTTP Request Header

HTTPの応答ヘッダ

HTTP Response Header

URL

 Webサイトにアクセスするには、そのサイトのURLが必要となります。URLとは「Uniformed Resource Locater」の略称で、Webページにアクセスするための「アドレス(住所)」とも言えます。郵便物に誤った住所を記載すると宛先不明で戻ってくるように、不適切なURLをWebブラウザに入力してもWebサイトへアクセスできません。下記はURLの構成です。

URLの構成

URL Constitution

参照元(Referer)

 アクセス解析で「どのページから訪問してきたのか?」「どんなキーワードで検索されたのか?」といったことを調べるときに使われるのが参照元(リファラー/Referer)と呼ばれるリンク元ページのURLです。利用者がページAにあるリンクをクリックしてページBに移動(遷移)した場合、ページBの参照元はページAとなります。

参照元のイメージ
Referer Image

 参照元はHTTPの要求ヘッダに含まれるため、Webサーバは要求されたページがどこから参照されたのかを知ることができます。

参照元のやりとり
Referer Action

Cookieについて

Cookieの動作原理

 Cookieとは、WebサーバがWebブラウザに保存できる情報(もしくは情報を入れる枠)のことです。

Cookieの動作イメージ

Cookie Image

 Cookieを使うことで、Webサーバはアクセスしてくる無数のWebブラウザを「色分け」することができます。これにより、会員ページのように利用者ごとにカスタマイズされたWebページを配信したり、ショッピングカートのように利用者の行動(カート投入)を保持することが可能となります。

Cookieの活用例

Cookie example

ファーストパーティCookieとサードパーティCookie

 サイト運営者には便利な技術とも言えるCookieですが、自分の知らないところで情報のやりとりが発生していることに違和感を感じるユーザーも少なくありません。なぜなら、Cookieを利用すれば、複数のWebサイトにまたがったユーザーの行動を、ユーザーが意識しない『第三者』が追跡することが可能となります。

第三者によるユーザー行動の追跡
User Behavior

 だからといって、すべてのCookieを無効にしてしまうと、ショッピングカートなどWebサイトの機能が使えなくなってしまうため、自分がアクセスしたサイト(ドメイン)で発行されるCookieをファーストパーティCookie、それ以外のサーバ(ドメイン)でやり取りされるCookieをサードパーティCookieと区別し、ユーザーが利用できるCookieを選択できるようになりました。これにより、ユーザーはWebサイトを利用するために必要なCookieだけを許可することができます。

 各ブラウザの標準状態におけるサードパーティCookieの受け入れ可否は次の通りです。

  1. ChromeとFirefox:(現時点では)サードパーティCookieを受け入れ
  2. インターネットエクスプローラ:P3Pという規格に従ったサードパーティCookieのみ受け入れ
  3. Safari:デフォルトでサードパーティCookieを拒否

ブラウザのCookie対応状況
Cookie Support Status

動的(ダイナミック)なコンテンツと静的(スタティック)なコンテンツ

 JavaScritpの項でも軽く触れましたが、プログラミングとは計算(演算)結果を出力するための記述のことです。Webの世界では、サーバで計算を実行することをサーバサイドプログラミングと呼び、ブラウザで実行することをクライアントサイドプログラミングと呼びます。そして、計算結果によって表示されるWebページを動的(ダイナミック)なコンテンツ(Webページ)と呼びます。

「動的なコンテンツ」のイメージ
Dynamic Contents Image

 動的の対語として、HTMLに記載された内容をそのままブラウザに表示するWebページを静的(スタティック)なWebページ(コンテンツ)と呼びます。

 HTMLの描写(レンダリング)やCSSによる装飾もWebブラウザが内部で計算して出力していますが、一般的には「動的」と呼びません。広義ではJavaScriptによるクライアントサイドの計算結果の出力も「動的」なコンテンツと言えるのですが、Webサイトの開発現場ではサーバサイドで計算された結果によって出力されるWebページを「動的」と呼ぶことが多いです。

「静的なコンテンツ」のイメージ
Static Contents Image

 Yahoo!やGoogleに代表される「検索サイト」も、利用者が入力したキーワードに合わせて検索結果を表示する「動的」なコンテンツと言えます。

Googleの検索結果
Google Search Result

 動的なコンテンツを実現するプログラミング言語にはPerl/PHP/JAVA/Python/Ruby/C#、などがあげられますが、Webサーバによって対応できる言語は異なります。

(出典:MarkeZine)

最新の更新 RSS  Valid XHTML 1.0 Transitional