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

» 2008年04月14日 00時00分公開

Webページを表示するまで

　Webページが表示されるまでに、WebブラウザがHTMLファイルを読み取ってから表示するまで、3つのステップがあります。

■（1）HTMLファイルの属性を解析（HTMLパーサー）

　まずはWebブラウザが情報の属性を解析します。Webページは基本的にHTMLで書かれたファイルです。HTMLはHyperText Markup Language（ハイパーテキストマークアップラングエージ）の略です。

　「ハイパーテキスト」は一言でまとめると文章と文章を結び付ける「リンク」のことで、「マークアアップランゲージ」は「文章構造の指定」を意味します。もともと「マークアップ」は印刷用語で「組版指示」という意味です。「ここは大きな見出し」とか「ここは本文なのでフォントはこの大きさ」という属性の指示を与えていきます。

　いま皆さんが見ているこのページも、Webブラウザの［表示］→［ソース］から選べば、HTMLのソースが直接見られますので、どんな情報が文章構造として書かれていたり、リンクされたりしているのか確認してみましょう。

画面7　［表示］→［ソース］から選べば以下のようなHTMLのソースコードが見られる

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>リッチクライアント & 帳票 － ＠IT</title>
<meta http-equiv="Content-Type" content="text/html;CHARSET=SHIFT_JIS">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="Set-Cookie" content="cookie=set; path=/">
<meta name="description" content="リッチクライアント、帳票テクノロジの総合情報フォーラム。魅力的で直感的なUI開発の情報が満載">
<meta name="keywords" content="Ajax,JavaScript,Flash,Flex,Adobe AIR,Silverlight,Aptana,Firebug,Webオーサリングツール,Web2.0,マッシュアップ,リッチクライアント,RIA,Laszlo,Curl,帳票,PDF,Webデザイン,ユーザーインターフェイス">
<script type="text/javascript" src="/javascript/newmark.js"></script>
<link rel="stylesheet" href="/stylesheet/ftop.css" type="text/css" media="all">
<link rel="stylesheet" href="/fwcr/stylesheet/fwcr.css" type="text/css" media="all">
<link rel="alternate" type="application/rss+xml" title="＠IT RSS 0.91" href="http://www.atmarkit.co.jp/rss/rss091.xml">
<link rel="alternate" type="application/rss+xml" title="＠IT RSS 1.0" href="http://www.atmarkit.co.jp/rss/rss2dc.xml">
 
<link rel="alternate" type="application/rss+xml" title="＠IT RSS 2.0" href="http://www.atmarkit.co.jp/rss/rss.xml">
</head>
<body>
……
……

　HTMLファイルを読み込んだWebブラウザは、きちんとHTMLの文法に沿って書かれているかチェックをしながら本文・見出し、脚注や画像といった要素を解析しています。このHTMLを解析するパートを「HTMLパーサー」と呼びます。

　パーサーは「parse」（パース）に「er」が付いて擬人化したもので、parseは「文法・構文を解剖する」という意味です。余談になりますが、parseはHTMLだけでなく、XMLやJavaScriptといったほかの言語に対しても利用します。