第07回 - 08年度春学期

HTMLと構造化文書

HTMLと構造化文書について

今年の授業の後半は、WWWに情報を公開するということについて学びます。実際にみなさんが手を動かして作業をする前に、現在のWWWの発達について簡単に説明します。そしてHTML文書の作成にあたり、予備知識として構造化文書について説明します。

1990年代前半のことですが、コンピュータと、コンピュータネットワークの発達によって、そこに参加している「全員が」同じように共有できるという情報のあり方が必要になってきました。それまでは、例えばWindowsとMacintoshという機種の違い、またMicrosoft Wordと一太郎というようなアプリケーションの違いによって、情報を共有できない状態。つまり、プラットフォーム依存という状態が多かったのですが、そのような状態では困るので何とかしなくては、という訳です。
そこでTim Berners-Leeによって開発されたのがWorld Wide Webという仕組みです。WWWという仕組みを成立させるには、実はいくつかのキーとなる要素があります。URIと、HTTPと、HTML、そしてWebブラウザです。ちょっと簡単に説明してみると、以下のようになります。

  • URI（Uniform Resource Identifiers）
    • ネットワーク上の情報を一意に特定するアドレスの指定方法
    • URL（Uniform Resource Locator）はURIの部分集合
  • HTTP（Hyper Text Transfer Protocol）
    • コンピュータ同士が情報をやりとりするためのルール
    • 「プロトコル」とは約束事、ルール
  • HTML（Hyper Text Markup Language）
    • 環境に依存せずに情報が一貫した方法で表現される文書記述方式。「タグ」と呼ばれる方法を用いて、それぞれの文字列の要素（タイトルなのか、中見出しなのか、本文なのか、など）を示す
      • 例えば、「自己紹介」がページのタイトルであることを示すには、自己紹介のように表記する

HTMLとは何か

HTMLとは、WWW で利用される構造化文書の一種であり、その仕様については、W3Cという団体によって定義されています。HTMLはそもそもWebページの内容を記述するためのマークアップ言語として開発されました。近年、HTMLは文書の構造のみを記すことに特化しています（そのためにXHTMLという規格に進化しています。本授業では XHTML 1.0 という規格のものを利用します。）。Webページの見栄えは別の文書（カスケーディングスタイルシート＝CSS）で定義することになっています。HTMLで表記された文書は、ウェブブラウザというソフトウェアなどで解釈され、Webページという形で表示されることになります。
さて、HTMLとはHyper Text Markup Languageの略称ですが、そもそもHyper Textとは何を示すかを少し書いておきます。Hyper Textを日本語に訳すと、「超」テキストとでもいえば良いでしょうか。つまり通常のテキストではできないことがHyper Textの「超」な部分な訳です。それはテキストの線形性を超越しているという点に集約されるでしょう。
そもそもテキストとは、始まりから終わりに向かって一直線に進んでいくという性質を持っています。これを線形性ということにしましょう。Hyper Textではこの線形性をHyper Linkという方法によって克服しています。ある文書の一部から別の文書（または別の文書の一部）へのリンクを設定することで、関連づけがなされるという点がHyper Linkの概念です。このHyper Link機能を持つ文書システムをHyper Textといいます。現状，最も知られているHyper Textの実装がWWWです。

HTML文書の目的と作成方法

さて、WWWの目的は、情報の公開と共有です。その際に、先述のようなコンピュータ環境への依存という問題を解決し、またコンピュータの専門家ではない研究者にも扱えるように設計がなされました。つまり、

  • 普遍性（どのコンピュータでも記述・解読できる）
  • 簡便性（素人でも扱える）


という二つの目的が含まれている訳です。また、WWWの目的の一つとして、文書処理にコンピュータを導入するという点がありましたので、コンピュータが処理しやすい形で文書を記すように設計されています。
次にHTML文書の作成するための方法ですが、HTML文書自体が、どのコンピュータでも記述・解読できるようにするという目的を持って作られています。従って、ファイルフォーマットは最もありふれたものを用いるようになっています。それはテキストファイルです。テキストファイルはコンピュータにとって最も基本的なファイルであり、全て文字だけで書き表されます（画像などは含まれません）。従って、HTML文書を作成するためのアプリケーションも「テキストエディタ」と呼ばれるジャンルのものがあれば十分です。一方で「オーサリングツール（HTMLエディタなど）」と呼ばれるWebページ構築用のアプリケーションが販売されていますが、この授業ではそれらを用いることはしません。Windows系OSであれば「メモ帳」というアプリケーションがテキストエディタとして付属していますし、MacOS Xであれば、TextEditというアプリケーションでテキストファイルを編集することができます。

Webブラウザのふるまいについて

さて、HTMLで書かれた文書があったとします。これを読み込み、人間に対して読みやすい形で表示してくれる（それを「レンダリングする」といいます）アプリケーションが、Webブラウザです。
皆さんが普段目にしているWebページは、実際には単独のファイルではありません。つまり、送られてくるデータは，実際には細かいパーツに分かれており、実際に目にする前には、

  1. WebブラウザがWebサーバにデータを要求する
  2. Webサーバからデータが送られてくる
  3. 最初にHTML文書が送られる
  4. 続いて各種要素（グラフィックイメージなど）が送られる
  5. パーツを組み合わせて表示（レンダリング）
  6. 見栄えの定義（スタイルシート）に従って見栄えを調整

といった手続きが行われているのです。

Webページ構築について

さて、既に皆さんはMicrosoft PowerPointで発表資料を作成しました。こちらの資料は、一つのファイルから成り立っていました。しかし先ほどから述べているように、Webページは複数のファイルから成立しています。そこでレンダリングのための素材を個別に用意すると同時に、本文とそれらの素材の配置情報をHTMLというかたちで表記する必要があります。

HTMLで表現されたWebページは、原理的に「全ての環境で同一の見栄え」にすることはできません。そもそも表示をするための環境が各人異なっているため、「同一の見栄え」を追求すること自体がHTMLの考え方と矛盾していると考えることもできます。これはドキュメントのデザイン方法の違いとしても表れています。

視覚デザインと論理デザイン

多くの書籍や雑誌などは、「視覚デザイン」というデザイン方法でデザインが行われています。これは最終的な出力結果が固定されている媒体に対するデザインの考え方です。たとえば以下のような媒体に対するデザインが視覚デザインに相当します。

  • 絵画
  • 写真
  • 書籍や雑誌の紙面デザイン
  • ワープロで作られた文書
  • パワーポイントの資料

これらのデザインでは、今見ている状態が完成品の姿に相当します。WYSWYG（What you see is what you get.の略語）ともいいます。一方、HTMLやLaTeX（組版システムの一つ）などの「文書の中にその構造をマーキングしていく」ようなタイプのデザインを「論理デザイン」といいます。なお、多くの場合、このマーキングは「タグ」で行われます。
このタイプのデザインでも、最終的な出力結果は、視覚デザインに落とし込まれます（LaTeXを用いて書籍の組版を行う場合などがそうです）。その視覚デザインはスタイルシートという形で定義されます。しかしWebページの場合はブラウズするコンピュータのブラウザ環境に表示を依存していますので、結局のところデザインは補助的なものだと考えた方が良いでしょう。

論理デザインを用いて文書構造を明示的にして記した文書を構造化文書と呼びます。構造化文書では、文書を構成している要素が明確化されます。文書を構成している要素には、以下のようなものがあります。

  • 大見出し
  • 中見出し
  • 段落
  • 箇条書き

HTML文書を作成する場合には、このような文書の論理構造に従って文書を作成することになります。

なお、勘違いしてはいけない点は、視覚デザインと論理デザインは相反しないということです。それは視覚デザインの方法論であっても、元々の文書の作成には、構造化文書の方法論が必要となるということであり、文章の要素や構造を意識して記述する必要があるということでもあります。構造化文書のメリットとしては以下のようなものがあります。

  • 論理構造が恣意的ではないため理解しやすい
  • 文書構築のための時間が短くなる
  • 比較的見通しの良い文書を作成可能
  • コンピュータ時代の文書活用に適している

これらの要素は一般的な文書作成でも必至となる能力であることは自明のことでしょう。また、構造化された文書は、様々なメディアに対して応用が利きます。

メディアと見栄え

言うまでもないことですが、文書を表示する際には、メディアによって最適な見栄えがあります。また、それぞれの文書は、それぞれの異なったメディアでも，最低限「文書」として可読であり、また論理構造が維持されている必要があります。あるメディアでは文書として成立するが、別のメディアでは文書として成立しない、ということはあってはならないでしょう。構造化文書であれば、その心配はありません。もちろん最適な見栄えの要素はメディアによって異なりますので、構造化文書として書かれた文書は、一度ソフトウェアによって、読み込まれ、解釈され、最適な形で出力（レンダリング）されます。書籍などの場合はその上で印刷行程に移る訳です。

構造化文書を書籍に応用した場合を考えてみましょう。書籍には様々な判型の違いがあり、また文書の記述方向も複数種類あります。たとえば、ある小説を雑誌で連載しているとします。この小説が単行本になる場合には、ハードカバーの四六判の書籍かもしれません。またしばらくしたら文庫本になるかもしれません。連載時には横書きだったかもしれません。単行本では縦書きかもしれません。このように見栄えはそれぞれのメディアで異なる訳ですが、文書自体の論理構造は変わらないので，伝達すべき内容に違いは無いという訳です。

また、コンピュータ時代の文書活用としては、

  • 定義された要素のみを自動的に抜き出す
  • 自動的に要約を作成する
  • レポートなどの目次を自動作成する
  • 引用資料などを自動抽出する
  • 人名のみを自動抽出する

などということも可能になってきています。これらも構造化文書の恩恵です。さらに発展的にいえば、音声による文書の再生なども視野に含まれます。

なお、構造化文書において生成物の見栄えを定義するには、構造を記した文書を解釈し、それぞれに見栄えを与えるための設計図を用意する必要があります。つまり、メディアごとに異なる最適の見栄えが用意される必要があります。これらのデザインは手間がかかりますので、専門のデザイナーが作業に当たることが多くあります。

HTMLの活用

さて、HTML文書はWebページを構築する構造化文書です。適切に書かれたHTML文書は、特に意識しなくても複数のウェブブラウザに適切に対応します。ここでいうブラウザでは、PC以外にも携帯電話の画面なども含みます。このように複数のブラウザでも文書として可読性を維持することをクロスブラウズといいます。適切に書かれたHTML文書は、クロスブラウズが容易となります。



ネットワークサービス基礎

英辞郎と翻訳サイト（ask.jp, ）


参考文献

The Web KanzakiにあるHTMLに関しての解説文。とてもよくまとまっているので必読でしょう。なお、The Web Kanzakiには次週以降に活用するXHTMLの詳しい解説も記載されています。

課題

  • 先週発表した発表者は、来週までの間に日記に質問等のコメントをまとめ、回答等を行う日記を書き込むこと。
  • 30分間HTML入門 -- ごく簡単なHTMLの説明を必ず読んでおくこと。
  • 来週から具体的にWebの製作に入るので、素材となる文章や画像などをファイルの形式で用意しておくこと。なお、画像等は課題製作者自身に著作権があるものに限定する。
    • 内容は自分のプレゼンテーションで発表したことを基本とする。質問等で新たに調査した内容などを含むことを推奨する。
    • リンクをしたいページ等はリストアップしておくこと。