【2/17】今年は「濃厚」技術トーク！＠ITメールセミナー スラッシュドット    はてなブックマーク  Yahoo!ブックマークに登録  印刷


いまさら聞けないリッチクライアント技術（11）
いまさら聞けない「Webブラウザ」超入門


江原顕雄
2008/4/14

新人に捧げる「Webブラウザの仕組み」

- PR -

　皆さんが毎日利用している「Webブラウザ」。インターネットの創成期から現在まで進化を続けながら、一線で活躍する技術です。今回はこのWebブラウザについてあらためて見てみましょう。

　前編・後編2回に分けて、前編ではWebブラウザとサーバの通信の仕組みや役割、後編ではWebブラウザやHTMLの歴史と未来について説明します。

　基本的な説明ですが、読めば新しい発見があるかもしれません。

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

　インターネットを通じてWebブラウジングするとき、私たちはInternet Explorer（以下、IE）やFirefoxといった「Webブラウザ」ソフトを使ってWebサーバにアクセスします。Webサーバが画像やテキストといったデータをWebブラウザに送り、Webブラウザが情報を解釈して表示します。では、ここでのWebサーバとWebブラウザのやりとりを見てみましょう。

　Webサーバからサービスを受ける私たちのPCことをクライアント（Client）PCといいます。

　クライアントは元来「依頼人・顧客」という意味で、サーバにとってはサービスをする「お客さん」という意味合いで命名されています。

　このサービスを提供する「サーバ」とそれを受ける「クライアント」の関係を「サーバクライアントシステム（ネットワーク）」と呼びます。

図1　Webサーバとクライアントの関係
図1　Webサーバとクライアントの関係

　Webサーバが提供するサービスは、基本的に2つしかありません。

　1つはWebサーバ上に置いてあるファイルをクライアントに渡すこと。もう1つは、PerlやPHPといった取り扱いが容易なプログラミング言語を用いて、Webサーバ上でプログラムを動かし、実行された結果をクライアントに伝えて、その情報を表示させることです。

図2　ファイル・データをクライアントに提供（上）し、プログラムの実行結果をクライアントに提供する（下）
図2　ファイル・データをクライアントに提供（上）し、プログラムの実行結果をクライアントに提供する（下）

具体的にどんな通信をしているの？

　WebブラウザのURL欄にアドレスを打ち込んで、エンター・キーを押すと、お目当てのページが表示されます。このときにユーザーの目には触れませんが、いろいろな通信がサーバ／クライアント間で行われています。では実際にどんなデータのやりとりが行われているかチェックしてみましょう。

　WebブラウザはWebサイトと通信する度に、以下のようなやりとりをしてます。HTMLファイルや画像ファイルなど、Webサーバとクライアント間でたくさんの通信を行っていますが、今回は通信のはじまりの部分のみを見てみます。

図3　「HTMLを表示せよ」という命令のWebブラウザとクライアントPCのやりとり
図3　「HTMLを表示せよ」という命令のWebブラウザとクライアントPCのやりとり

　 ここでは、Firefoxを使って＠ITのサイトにアクセスをしたときの通信を見てみましょう。Webブラウザでは表示されないデーターをみるために、今回はFirefoxのプラグイン「LiveHTTPHeaders」を利用します。

　実際に試してみたい方のために、LiveHTTPHeadersの導入と簡単な使い方の説明をします。

■ LiveHTTPHeadersの導入と簡単な使い方

画面1　「Installation」をクリック
画面1　「Installation」をクリック

　LiveHTTPHeadersのページにアクセスをします。画面上部に「LiveHTTPHeaders」と書かれた大きなロゴの下にある「Installation」をクリックして、ダウンロード画面に移ります。

画面2　「Install version 0.13.1 of LiveHTTPHeaders now」をクリック
画面2　「Install version 0.13.1 of LiveHTTPHeaders now」をクリック

　ダウンロード画面です。最新バージョンの「Install version 0.13.1 of LiveHTTPHeaders now」をクリックすると、インストールが始まります（ただし、これは原稿執筆時の最新版です）。

画面3　「ツール」→「LiveHTTPHeaders」で通信が表示される
画面3　「ツール」→「LiveHTTPHeaders」で通信が表示される

　インストール完了後、Firefoxを再起動させます。［メニュー］バーから［ツール］→［LiveHTTPHeaders］を選ぶと、LiveHTTPHeadersのウィンドウが立ち上がります。Webブラウザが通信をする度に、このウィンドウ内にWebサーバとクライアントの通信のやりとりが表示されます。

　 LiveHTTPHeadersのウィンドウ内には画像やFlashデータなどいろいろな通信が表示されますが、ここではHTMLファイルとの通信をチェックしてみましょう。

  1-2-3

　INDEX
いまさら聞けないリッチクライアント技術（11）　
いまさら聞けない「Webブラウザ」超入門
Page1
新人に捧げる「Webブラウザの仕組み」
WebサーバとWebブラウザの甘い関係
具体的にどんな通信をしているの？
  LiveHTTPHeadersの導入と簡単な使い方
  Page2
Webブラウザって何をしているの？
  クライアントからのリクエスト通信
  サーバからクライアントへの通信
Webブラウザの役割は3つ
  （1）Webページの場所を指定する機能
  （2）Webページを表示する機能
  （3）Webページの閲覧をサポート
  Page3
Webページを表示するまで
  （1）HTMLファイルの属性を解析（HTMLパーサー）
  （2）解析したデータを整理する
  （3）画面に表示する（レンダリング）
どんなファイルが読み取れるの
  表示だけでなく、動的にプログラムを実行できる

関連記事
どこが違うの？ いまさら学ぶWebメール

いまさら聞けないリッチクライアント技術 バックナンバー



リッチクライアント＆帳票 全記事一覧へ

ホワイトペーパー（TechTargetジャパン）

リッチクライアント & 帳票 フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

スキルアップ／キャリアアップ（JOB@IT）

＠IT Special -PR-
操作もマニュアルも分かりやすい！
ユーザー視点で開発されたPC管理ツール
New！
【CTC事例】約30の基幹システムを統合！
膨大なバッチジョブを制御した方法は？
「どこでもオフィス」で業務効率アップ！
PHP研究所モバイルシンクライアント事例
コスト削減・信頼性向上をまとめて満たす
“高信頼Linux”を構築する方法とは？
世界に通用するストレージの作り方とは？
製品に込めた思いを富士通の開発者に聞く
急速に広がるHyper-Vでのサーバ仮想化
そのベストプラクティスをデルが解説
＠IT「Windows 7」 特設サイトオープン！
最新情報・移行ノウハウを公開しています

→＠IT Special ヘ

お勧め求人情報

キャリアアップ　〜JOB＠IT
＠IT Special -PR-
◆ 　 企業の仮想化に足りない“発想”とは？
仮想化運用管理のキモは意外なところに！
New！
◆ 　 操作もマニュアルも分かりやすい！
ユーザー視点で開発されたPC管理ツール
New！
◆ 　 仮想化すればコストは削減できるか？
仮想化に必要な「3つの視点」を解説する

◆ 　 セキュリティを知り尽くす上野氏が登壇！
＠ITメールソリューションLive! in Tokyo
◆ 　 運用管理の課題を“2つの観点”から分析
ユーザー満足度の高い「仮想環境」とは？
◆ 　 世界に通用するストレージの作り方とは？
製品に込めた思いを富士通の開発者に聞く

◆ 　 OSSで手間も時間も、障害も減った――
「マピオンの事例」オープンソース活用法
◆ 　 「ノートPCの持ち出し禁止」で大丈夫？
情報漏えいを防ぐ管理手法とインフラは？
◆ 　 1日の処理を1秒に――MySQLの達人が語る
「コスト削減」できるチューニング

◆ 　 ドキュメント作成を自動化して、SEの作業
効率を大幅アップ！ Visio 2007の魅力
◆ 　 急速に広がるHyper-Vでのサーバ仮想化
そのベストプラクティスをデルが解説
◆ 　 ＠IT主催セミナーで語られた、「担当者に
求められるセキュリティ対策」をレポート

◆ 　 ＠IT「Windows 7」 特設サイトオープン！
最新情報・移行ノウハウを公開しています

→＠IT Special ヘ