HTML 5 は、2000年以降初めて、HTML に新しい要素を導入します。新しい構成要素には asidefigure、そして section があります。新しいインライン要素には timemeter、そして progress があります。新しい埋め込み要素には videoaudio があります。新しい対話要素には detailsdatagrid、そして command があります。

Elliotte Rusty Harold (elharo@metalab.unc.edu), Adjunct Professor, Polytechnic University

Photo of Elliot Rusty HaroldElliotte Rusty Haroldはニューオーリンズ出身であり、時たま、おいしいgumbo(オクラ入りのスープ)を食べに帰っています。ただし現在はニューヨークのブルックリン近郊のProspect Heightsに、妻のBethと猫のCharm(charmed quarkからとりました)とMarjorie(義理の母の名前からとりました)と一緒に住んでいます。彼はPolytechnic Universityのコンピューター・サイエンスの非常勤教授として、Java技術とオブジェクト指向プログラミングを教えています。彼のCafe au Lait Webサイトは、インターネット上で最も人気のある独立系Javaサイトの一つです。また、そこから派生したCafe con Lecheは、最も人気のあるXMLサイトの一つです。彼の著作にはEffective XMLProcessing XML with JavaJava Network Programming 、それにThe XML 1.1 Bible があります。現在はXML処理用のXOM APIやJaxen XPathエンジン、Jesterテスト・カバレッジ・ツールなどに取り組んでいます。



2007年 8月 07日

HTML の開発は 1999年に HTML 4 で止まりました。W3C は、HTML の基礎となる構文を、SGML (Standard Generalized Markup Language)から XML やまったく新しいマークアップ言語 (SVG (Scalable Vector Graphics) やXForms、MathML など) に変更する作業に専念しました。ブラウザーのベンダーはタブや RSS リーダーといったブラウザー機能に集中しました。Web デザイナーは、既存のフレームワークの上に Ajax (Asynchronous JavaScript + XML) を使った彼ら独自のアプリケーションを構築するために CSS や JavaScript™ 言語を習い始めました。しかし HTML そのものは、その後の 8 年間、ほとんどまったく成長しませんでした。

頻繁に使われる略語

  • CSS: Cascading Style Sheets
  • HTML: Hypertext Markup Language
  • W3C: World Wide Web Consortium
  • XML: Extensible Markup Language

最近、この怪物が息を吹き返しました。主要なブラウザー・ベンダー 3 社 (Apple と Opera、そして Mozilla Foundation) が、従来の HTML を更新してアップグレードしたバージョンを開発するために、WhatWG (Web Hypertext Application Technology Working Group) として集まりました。もっと最近では、W3C がこうした動きに気付き、その同じメンバーの多くと共に W3C 独自の次世代 HTML のための作業を開始しました。この 2 つの作業は、最終的には統合される可能性があります。詳細な点の多くについてはまだ議論の余地がありますが、HTML の次期バージョンの大要は明らかになりつつあります。

この新しいバージョンの HTML (通常は HTML 5 と呼ばれますが、Web Applications 1.0 という名前も持っています) は、1999年に氷づけにされて今日氷を解かされた Web デザイナーが見れば即座に気が付く特徴を持っています。名前空間やスキーマはありません。要素を閉じる必要はありません。ブラウザーはエラーに対して寛容です。p は相変わらず p であり table は相変わらず table です。

同時に、この氷を解かされた評判の洞窟人間である Web デザイナーは、いくつかの新しい、そしてわかりにくい要素に突き当たるはずです。確かに div のような古い友人は残っていますが、今や HTML には sectionheaderfooter、それに nav も含まれています。emcodestrong は 相変わらずありますが、metertime、そして m もあります。imgembed は相変わらず使われていますが、今や videoaudio もあります。しかし、この洞窟人間である Web デザイナーがよく調べてみれば、これらの新旧の要素がそれほど異なるものではないことも明らかになります。これらの多くは、1999年当時、このデザイナーが必要としながら入手できなかったものかもしれません。これらの新しい要素は、このデザイナーが既に理解している要素から単純に類推すれば容易に習得することができます。実際これらは、Ajax や CSS よりもずっと容易に習得することができます。

そして最後に、この洞窟人間が、同じく1999年に氷づけにされた Windows 98 を実行する 300MHz のノート・パソコンを起動すると、新しいページが Netscape 4 と Windows® Internet Explorer® 5 で適切に表示できるのを見て驚くかもしれません。もちろん、ブラウザーは新しい要素を認識せず、それらに対して何もしませんが、ページは相変わらず表示され、ページの内容はすべてそのままです。

これは幸運な偶然によるものではありません。HTML 5 は、HTML 5 をサポートしないブラウザーでも、最低限、表示はできる (degrade gracefully) ように明示的に設計されているのです。その理由は簡単で、私達は全員洞窟人間だからです。ブラウザーには今やタブがあり、CSS とXmlHttpRequest がありますが、ブラウザーの HTML レンダラーは 1999年のままで止まっています。Web は、インストール・ベースを考慮しない限り前進できません。HTML 5 はそれを理解しています。HTML 5 は、今日のページ作成者に真の利益を提供する一方、ブラウザーがゆっくりとアップグレードされるのに従って、より多くを明日のページの閲覧者に提供することを約束するのです。それを念頭に置いて、HTML 5 が何をもたらすのかを調べてみましょう。

構造

たとえ整形式の HTML ページであっても、本来予想される以上に処理は困難ですが、その理由は構造がないためです。セクション区切りがどこにあるのかを、ヘッダー・レベルで判断しなければなりません。サイドバーやフッター、ヘッダー、ナビゲーション・メニュー、メインのコンテンツ・セクション、そして個々の話題が、どのような内容に対しても使える div要素でマークアップされます。HTML 5 は、これらの一般的な構成体それぞれを明確に識別するために、いくつかの新しい要素を追加しています。

  • section: 本の一部あるいは章、章のセクション、あるいは基本的に HTML 4 で独自の見出しを持つすべてのもの。
  • header: ページに表示されるページ・ヘッダー。head 要素と同じではありません。
  • footer: 細かい文字での説明が入るページ・フッター。E メール・メッセージの署名。
  • nav: 他のページへのリンクの集まり。
  • article: ブログや Web マガジン、一覧記事などに掲載されている個々のエントリー。

例えば、ブログの先頭ページとして典型的なものを考えてみましょう。このページは最上部にヘッダー、最下部にフッターがあり、いくつかのエントリーがあり、ナビゲーション・セクションがあり、そしてサイドバーがあります (リスト 1)。

リスト 1. 今日の典型的なブログ・ページ
<html>
  <head>
    <title>Mokka mit Schlag </title>
 </head>
<body>
<div id="page">
  <div id="header">
    <h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
  </div>
  <div id="container">
    <div id="center" class="column">               
      <div class="post" id="post-1000572">
        <h2><a href=
      "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
      Spring Comes (and Goes) in Sussex County</a></h2>
        
        <div class="entry">
          <p>Yesterday I joined the Brooklyn Bird Club for our
          annual trip to Western New Jersey, specifically Hyper
          Humus, a relatively recently discovered hot spot. It
          started out as a nice winter morning when we arrived
          at the site at 7:30 A.M., progressed to Spring around
          10:00 A.M., and reached early summer by 10:15. </p>
        </div>
      </div>


      <div class="post" id="post-1000571">
        <h2><a href=
          "/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
           But does it count for your life list?</a></h2>
        
        <div class="entry">
          <p>Seems you can now go <a
          href="http://www.wired.com/science/discoveries/news/
          2007/04/cone_sf">bird watching via the Internet</a>. I
          haven't been able to test it out yet (20 user
          limit apparently) but this is certainly cool.
          Personally, I can't imagine it replacing
          actually being out in the field by any small amount.
          On the other hand, I've always found it quite
          sad to meet senior birders who are no longer able to
          hold binoculars steady or get to the park. I can
          imagine this might be of some interest to them. At
          least one elderly birder did a big year on TV, after
          he could no longer get out so much. This certainly
          tops that.</p>
        </div>
      </div>

      </div>
    
    <div class="navigation">
      <div class="alignleft">
         <a href="/blog/page/2/">&laquo; Previous Entries</a>
       </div>
      <div class="alignright"></div>
    </div>
  </div>

  <div id="right" class="column">
    <ul id="sidebar">
      <li><h2>Info</h2>
      <ul>
        <li><a href="/blog/comment-policy/">Comment Policy</a></li>
        <li><a href="/blog/todo-list/">Todo List</a></li>
      </ul></li>
      <li><h2>Archives</h2>
        <ul>
          <li><a href='/blog/2007/04/'>April 2007</a></li>
          <li><a href='/blog/2007/03/'>March 2007</a></li>
          <li><a href='/blog/2007/02/'>February 2007</a></li>
          <li><a href='/blog/2007/01/'>January 2007</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div id="footer">
    <p>Copyright 2007 Elliotte Rusty Harold</p>
  </div>
</div>
  
</body>
</html>

適切に字下げしたとしても、非常にわかりにくい、ネストした div が大量にあります。HTML 5 では、これらをもっと直接的なセマンティック要素で置き換えることができます (リスト 2)。

リスト 2. HTML 5 での典型的なブログ・ページ
<html>
 <head>
    <title>Mokka mit Schlag </title>
 </head>
<body>
  <header>
    <h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
  </header>
  <section>               
      <article>
        <h2><a href=
        "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
         Spring Comes (and Goes) in Sussex County</a></h2>
        
        <p>Yesterday I joined the Brooklyn Bird Club for our
        annual trip to Western New Jersey, specifically Hyper
        Humus, a relatively recently discovered hot spot. It
        started out as a nice winter morning when we arrived at
        the site at 7:30 A.M., progressed to Spring around 10:00
        A.M., and reached early summer by 10:15. </p>
      </article>


      <article>
        <h2><a href=
          "/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
          But does it count for your life list?</a></h2>
        
          <p>Seems you can now go <a
          href="http://www.wired.com/science/discoveries/news/
          2007/04/cone_sf">bird watching via the Internet</a>. I
          haven't been able to test it out yet (20 user
          limit apparently) but this is certainly cool.
          Personally, I can't imagine it replacing
          actually being out in the field by any small amount.
          On the other hand, I've always found it quite
          sad to meet senior birders who are no longer able to
          hold binoculars steady or get to the park. I can
          imagine this might be of some interest to them. At
          least one elderly birder did a big year on TV, after
          he could no longer get out so much. This certainly
          tops that.</p>
      </article>    
    <nav>
      <a href="/blog/page/2/">&laquo; Previous Entries</a>
    </nav>
  </section>

  <nav>
    <ul>
      <li><h2>Info</h2>
      <ul>
        <li><a href="/blog/comment-policy/">Comment Policy</a></li>
        <li><a href="/blog/todo-list/">Todo List</a></li>
      </ul></li>
      <li><h2>Archives</h2>
        <ul>
          <li><a href='/blog/2007/04/'>April 2007</a></li>
          <li><a href='/blog/2007/03/'>March 2007</a></li>
          <li><a href='/blog/2007/02/'>February 2007</a></li>
          <li><a href='/blog/2007/01/'>January 2007</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <footer>
    <p>Copyright 2007 Elliotte Rusty Harold</p>
  </footer>
  
</body>
</html>

もう div は必要ありません。そのサイト専用のクラス属性を使わなくても、さまざまなセクションの意味を標準的な名前から推論することができます。これはオーディオ機器や携帯電話など、非標準のブラウザーでは特に重要です。


ブロック・セマンティック要素

HTML 5 は、構造要素と同様に、次のような純粋なブロック・レベルのセマンティック要素を追加しています。

  • aside
  • figure
  • dialog

私はこの記事のような記事や本を書く場合に、最初の 2 つを必ず使います。私自身は 3 番目をあまり使いませんが、文書化したテキストでは非常によく使われます。

aside

aside 要素は、注記やヒント、サイドバー、引用、括弧によるコメントなど、話の流れから外れたものを表します。例えば developerWorks の記事の中では、サイドバー (囲み記事) が表としてエンコードされていることがよくあります (リスト 3)。

リスト 3. HTML 4 での developerWorks のサイドバー
<table align="right" border="0" cellpadding="0" cellspacing="0" width="40%">
<tbody><tr><td width="10">
<img alt="" src="//www.ibm.com/i/c.gif" height="1" width="10"></td>
<td>
<table border="1" cellpadding="5" cellspacing="0" width="100%">
<tbody><tr><td bgcolor="#eeeeee">
<p><a name="xf-value"><span class="smalltitle">.xf-value</span></a></p>
<p>
The <code type="inline">.xf-value</code> selector used here styles the input
field value but not its label. This is actually inconsistent
with the current CSS3 draft. The example really should use the
<code type="inline">::value</code> pseudo-class instead like so:
</p>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr><td class="code-outline">
<pre class="displaycode">input::value { width: 20em; }
#ccnumber::value { width: 18em }
#zip::value { width: 12em }
#state::value { width: 3em  }</pre>
</td></tr></tbody></table><br>

<p>
However, Firefox doesn't yet support this syntax. 
</p>
</td></tr></table>

HTML 5 では、これをもっとずっとわかりやすく書くことができます (リスト 4)。

リスト 4. HTML 5 での developerWorks のサイドバー
<aside>
<h3>.xf-value</h3>
<p>
The <code type="inline">.xf-value</code> selector used here styles the input
field value but not its label. This is actually inconsistent
with the current CSS3 draft. The example really should use the
<code type="inline">::value</code> pseudo-class instead like so:
</p>
  
<pre class="displaycode">input::value { width: 20em; }
#ccnumber::value { width: 18em }
#zip::value { width: 12em }
#state::value { width: 3em  }</pre>

<p>
However, Firefox doesn't yet support this syntax. 
</p>
</aside>

ブラウザーは、(場合によっては少し CSS の助けを借りることで) どこにサイドバーを置くかを判断することができます。

figure

figure 要素は、標題と共にブロック・レベルの画像を表します。例えば、developerWorks の多くの記事では、リスト 5 のようなマークアップがあります。その結果を図 1 に示します。

リスト 5. HTML 4 でのdeveloperWorks の図
<a name="fig2"><b>Figure 2. Install Mozilla XForms dialog</b></a><br />
<img alt="A Web site is requesting permission to install the following item: 
   Mozilla XForms 0.7 Unsigned" 
  src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" />
<br />
図 1. Mozilla XForms をインストールするダイアログ
Mozilla XForms をインストールするダイアログ

HTML 5 では、これをもっとセマンティックに書くことができます (リスト 6)。

リスト 6. HTML 5 でのdeveloperWorks の図
<figure id="fig2">
  <legend>Figure 2. Install Mozilla XForms dialog</legend>
  <img alt="A Web site is requesting permission to install the following item: 
    Mozilla XForms 0.7 Unsigned" 
    src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" />
</figure>

最も重要なことは、ブラウザー、特にスクリーン・リーダーが、標題と図を明確に、曖昧さを排して関連付けられることです。

figure 要素は画像専用に制限されているわけではありません。audiovideoiframeobjectembed などの要素にも figure 要素を使うことができます。

dialog

dialog 要素は、何人かの人の間での会話を表します。HTML 5 の dt 要素は話し手を示すために何度も使用され、また HTML 5 の dd要素は話の内容を示すために何度も使用されます。これによって、レガシーのブラウザーでも適切な表示をすることができます。リスト 7 は、ガリレオの『Dialogue Concerning the Two Chief World Systems (二大世界体系についての対話)』から引用した有名な対話の一部を示しています。

リスト 7. HTML 5 でのガリレオの対話
<dialog>
        <dt>Simplicius </dt> 
    <dd>According to the straight line AF,
        and not according to the curve, such being already excluded
        for such a use.</dd>

        <dt>Sagredo </dt> 
    <dd>But I should take neither of them,
        seeing that the straight line AF runs obliquely. I should
        draw a line perpendicular to CD, for this would seem to me
        to be the shortest, as well as being unique among the
        infinite number of longer and unequal ones which may be
        drawn from the point A to every other point of the opposite
        line CD. </dd>

        <dt>Salviati </dt> 
    <dd><p> Your choice and the reason you
        adduce for it seem to me most excellent. So now we have it
        that the first dimension is determined by a straight line;
        the second (namely, breadth) by another straight line, and
        not only straight, but at right angles to that which
        determines the length. Thus we have defined the two
        dimensions of a surface; that is, length and breadth. </p>

        <p> But suppose you had to determine a height—for
        example, how high this platform is from the pavement down
        below there. Seeing that from any point in the platform we
        may draw infinite lines, curved or straight, and all of
        different lengths, to the infinite points of the pavement
        below, which of all these lines would you make use of? </p>
        </dd>
</dialog>

この要素の厳密な構文については、まだ議論が続いています。一部の人は、dialog 要素の中に会話以外のテキスト (例えば「ト書き」など) を追加して埋め込みたいと考え、また一部の人は dtdd を何度も使用することに不満を持っています。厳密な構文についてはまだ同意されていないものの、その一方でこのような会話のセマンティックな表現をすることは良いことだと、ほぼ全員が同意しています。


インライン・セマンティック要素

HTML 4 には、微妙に異なるコンピューター・コードのバリエーションを表現する 5 種類のインライン要素があります (varcodekbdtt、そして samp)。しかし、時刻や数字、あるいは皮肉 (sarcasm) といったような、対象部分の基本的な性質を表す方法が何もありません。HTML 5 は、このエンジニアと通常のライターとの間での不均衡を、いくつかのインライン要素で修正しようとしています。

mark

m 要素は、何らかの形で「マーキング」されていても必ずしも強調されるわけではないテキストを示します。これは、本の中の強調された一節のようなものと考えることができます。この正規の使い方としては Google のキャッシュ・ページがあります。キャッシュされたコピーへのリンクをたどると、検索対象の用語がマーキングされています。例えば「Egret」を検索したとすると、キャッシュされた Google のページは次のようにマークアップされています。

The Great <m>Egret</m> (also known as the
American <m>Egret</m>)  is a large white wading bird found worldwide.
The Great <m>Egret</m> flies with slow wing beats. The
scientific name of the Great <m>Egret</m> is <i>Casmerodius
albus</i>.

この要素の名前は、現在少し議論の対象になっています。HTML 5 の仕様がリリースされる前に、この要素の名前は m ではなく mark に変更されるかもしれません。

time

time 要素は歴史上の特定の瞬間を示します。例えば 2007年4月23日 EST (アメリカ東海岸標準時) 午後 5時35分は次のようになります。

<p>I am writing this example at
<time>5:35 P.M. on April 23rd</time>.
</p>

time 要素はブラウザーなどが HTML ページで時刻を認識する上で役立ちます。time 要素は、要素の内容に関して何も特定のフォーマットを要求しません。しかし各 time 要素は、マシンが認識可能な形式で時刻を含む datetime 属性を持つ必要があります。下記はその一例です。

<p>I am writing this example at
<time datetime="2007-04-23T17:35:00-05:00">5:35 P.M. on April 23rd</time>.
</p>

マシンが読み取り可能な時刻は検索エンジンやカレンダー・プログラムなどにも便利かもしれません。

meter

meter 要素は指定された範囲内の数値を表します。meter 要素は、例えば給料や、フランスでルペン (Le Pen) 候補に投票した選挙民の割合、あるいはテストの得点などに使うことができます。私が Software Development 2007 で Google のプログラマーからもらったデータを meter を使ってマークアップすると、次のようになります。

<p>An entry level programmer in Silicon Valley 
can expect to start around <meter>$90,000</meter> per year.
</p>

meter 要素は、ブラウザーなどのクライアントが HTML ページ内の数量を認識する上で役立ちますが、要素の内容に関して特別なフォーマットを要求しません。その一方で各 meter 要素は、この数量に関する情報を機械で認識可能な形式で提供するために、6 つまで以下に示す属性を持つことができます。

  • value
  • min
  • low
  • high
  • max
  • optimum

これらの属性はそれぞれ、対象の範囲を示す十進数を含む必要があります。例えば、期末試験の成績を次のようにマークアップすることができます。

<p>Your score was 
<meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter>.
</p>

これは、この生徒の得点が 100 点中の 88.7 点だったことを示しています。最低の成績だと 0 点になりますが、全員の中で実際の最低の成績は 65 点でした。全員の中で最高の成績は 96 点でしたが、もちろん理想的な最高得点は 100 点です。ユーザー・エージェントは、何らかの meter コントロールを使ってこの情報を表示したり、あるいはツールチップにデータを追加したりすることができます。しかし大抵の場合は、他のインライン要素と同じように、この要素をスタイリングするでしょう。

progress

progress 要素は、GUI (graphical user interface) アプリケーションのプログレス・バーと同じように継続中のプロセスの状態を表します。progress 要素は、例えばファイルを何パーセントダウンロードしたか、あるいは映画をどこまで見たか、などを示すことができます。下記のプログレス・コントロールはダウンロードが 33% 完了したことを示しています。

<p>Downloaded: 
  <progress value="1534602" max="4603807">33%</progress>
</p>

value 属性は、現在のオペレーションの状態を示します。max 属性は、このプログレスを続けた結果到達する合計量を示します。ここでは progress 要素は、合計 4,603,807 バイト中の 1,534,602 バイトがダウンロードされたことを示しています。

max 属性を省略すると、無限のプログレス・バーを表示することができます。

JavaScript 言語を使って、オペレーションの継続と共にプログレス・バーを動的に更新する必要があります。この要素は静的に表示してもまったく面白くありません。


埋め込みメディア

Web でのビデオがブームになっていますが、ほとんどすべてが独自フォーマットです。YouTube は Flash を使い、Microsoft は Windows Media® を使い、そして Apple は QuickTime を使っています。そうしたコンテンツを 1 つのブラウザーに埋め込むために使用できるマークアップは、別のブラウザーには使えません。そのため WhatWG は、任意のビデオ・フォーマットを埋め込める、新しい video 要素を提案しています。例えば、(著者の住む) Prospect Park での Sora の QuickTime ムービーを埋め込む場合には次のようになります。

<video src="http://www.cafeaulait.org/birds/sora.mov" />

どれか 1 つのフォーマットとコーデックを優先するかどうかについては、まだ議論が行われています。おそらく、少なくとも Ogg Theora をサポートすることが、(必須ではなくても) 強く推奨されるでしょう。QuickTime などの独自フォーマットや、特許で縛られた MPEG-4 などのフォーマットはオプションとなるでしょう。最も可能性が高いシナリオとして、img 要素に対して BMP や X-Bitmap、JPEG 2000 などの競争相手よりも GIF や JPEG、PNG などが好まれるフォーマットになったになったのと同じように、実際のフォーマットは市場で決定されることでしょう。

video を補完する audio 要素も提案されています。例えば、次のようにすると Web ページに BGM を付加することができます。

<audio src="spacemusic.mp3"
    autoplay="autoplay" loop="20000" />

autoplay 属性はブラウザーに対して、ページがロードされたらユーザーからの明示的な要求を待たずに即座に再生を開始するように命令します。そして 20,000 回ループしてから (あるいはユーザーがウィンドウを閉じたら、あるいはユーザーが別のページに行ったら) シャットオフします。もちろんブラウザーは、そのページの作成者がどのように作成したかによらず、埋め込まれたメディアの音をミュートしたり再生を一時停止したりできる機能をユーザーに提供することができ、また提供する必要があります。

ブラウザーは WAV フォーマットをサポートする必要があります。またブラウザーは、必要に応じて MP3 など他のフォーマットもサポートすることができます。

これらの要素はレガシー・ブラウザーではサポートされておらず、また目の見えない人や耳の聞こえないユーザーには利用できません。そのため audio 要素と video 要素は、その音声とビデオの内容を記述する追加のマークアップを含むかもしれません。これは検索エンジンにとっても役立ちます。理想的には、これらの要素は音声とビデオの内容を完全に記述したものであって欲しいものです。例えば、リスト 8 は、John F. Kennedy の就任演説のマークアップ方法を示しています。

リスト 8. HTML 5 で表現した John F. Kennedy の就任演説
<audio src="kennedyinauguraladdrees.mp3">
    <p>
    Vice President Johnson, Mr. Speaker, Mr. Chief Justice,
    President Eisenhower, Vice President Nixon, President Truman,
    Reverend Clergy, fellow citizens:
    </p>
    
    <p>
    We observe today not a victory of party, but a celebration of
    freedom -- symbolizing an end, as well as a beginning -- 
   signifying renewal, as well as change. For I have sworn before
    you and Almighty God the same solemn oath our forebears
    prescribed nearly a century and three-quarters ago.
    </p>
    
    <p>
    The world is very different now. For man holds in his mortal
    hands the power to abolish all forms of human poverty and all
    forms of human life. And yet the same revolutionary beliefs for
    which our forebears fought are still at issue around the globe -- 
    the belief that the rights of man come not from the
    generosity of the state, but from the hand of God.
    </p>
    
    <p>
    ...
    </p>
    
    </audio>

対話性

HTML 5 は Web Applications 1.0 の規則にも従います。この目的のために、次のようないくつかの新しい要素が Web ページの対話型エクスペリエンスに焦点を当てています。

  • details
  • datagrid
  • menu
  • command

これらの要素はすべて、表示されているものを、サーバーから新しいページをロードせずにユーザーのアクションと選択に基づいて変更できる可能性を持っています。

details

details 要素は、デフォルトでは表示されないかもしれない追加情報を表します。オプションの legend 要素は、この詳細を要約することができます。details の 1 つの使い方として、フットノートやエンドノートに使う方法があります。例えば次のような使い方です。

The bill of a Craveri's Murrelet is about 10% thinner 
than the bill of a Xantus's Murrelet. 
<details>
<legend>[Sibley, 2000]</legend>
<p>Sibley, David Allen, The Sibley Guide to Birds, 
(New York: Chanticleer Press, 2000) p. 247
 </p>
</details>

厳密なレンダリング方法は指定されません。あるブラウザーはフットノートを使うかもしれず、別のブラウザーはエンドノートを、また別のブラウザーはツールチップを使うかもしれません。

details 要素は open 属性を持つことができます。もし details 要素がこの属性を持っている場合には、詳細が最初からリーダーに表示されます。もしこの属性を持っていない場合には、詳細はユーザーが要求するまで非表示にされます。どちらの場合にも、ユーザーがアイコンやその他のインジケーターをクリックすれば、詳細を表示したり非表示にすることができます。

datagrid

datagrid 要素は、グリッドをコントロールする役割を持ちます。この要素は、ユーザーとスクリプトの両方が更新できる、ツリーやリスト、表などに使うためのものです。対照的に、従来の表は大部分の場合、静的なデータを対象としています。

datagrid はその初期データを、この要素の内容 (tableselect その他の HTML 要素群) から取得します。例えば、リスト 9 は成績表を含む datagrid を示しています。この例では、datagridtable からデータを入力します。もっと簡単な 1 次元の datagrid であれば、select 要素を使ってデータを入力することもできます。他の HTML 要素が使われる場合には、各子要素がそのグリッドの 1 行になります。

リスト 9. 成績表の datagrid
<datagrid>
  <table>
    <tr><td>Jones</td><td>Allison</td><td>A-</td><td>B+</td><td>A</td></tr>
    <tr><td>Smith</td><td>Johnny</td><td>A</td><td>C+</td><td>A</td></tr>
    <tr><td>Willis</td><td>Sydney</td><td>C-</td><td>D</td><td>F</td></tr>
    <tr><td>Wilson</td><td>Frank</td><td>B-</td><td>B+</td><td>A</td></tr>
  </table>
</datagrid>

この表が通常の表と異なるのは、ユーザーが行と列とセルを選択でき、行と列とセルを非表示にでき、セルを編集でき、行と列とセルを削除でき、グリッドをソートできる他、クライアントのブラウザーでデータと直接操作できる点です。JavaScript コードは、その更新状況をモニターします。これをサポートするために、DOM (Document Object Model) に HTMLDataGridElement (リスト 10) インターフェースが追加されています。

リスト 10. HTMLDataGridElement
interface HTMLDataGridElement : HTMLElement {
           attribute DataGridDataProvider data;
  readonly attribute DataGridSelection selection;
           attribute boolean multiple;
           attribute boolean disabled;
  void updateEverything();
  void updateRowsChanged(in RowSpecification row, in unsigned long count);
  void updateRowsInserted(in RowSpecification row, in unsigned long count);
  void updateRowsRemoved(in RowSpecification row, in unsigned long count);
  void updateRowChanged(in RowSpecification row);
  void updateColumnChanged(in unsigned long column);
  void updateCellChanged(in RowSpecification row, in unsigned long column);
};

DOM は、グリッドの中に動的にデータをロードするためにも使うことができます。つまり datagrid は、初期データを提供する子を持つ必要はありません。代わりに DataGridDataProvider オブジェクトを使って初期データを設定することができます (リスト 11)。この機能があるため、データベースや XmlHttpRequest など、JavaScript コードが通信できる任意のものからデータをロードすることができます。

リスト 11. DataGridDataProvider
interface DataGridDataProvider {
  void initialize(in HTMLDataGridElement datagrid);
  unsigned long getRowCount(in RowSpecification row);
  unsigned long getChildAtPosition(in RowSpecification parentRow, 
      in unsigned long position);
  unsigned long getColumnCount();
  DOMString getCaptionText(in unsigned long column);
  void getCaptionClasses(in unsigned long column, in DOMTokenList classes);
  DOMString getRowImage(in RowSpecification row);
  HTMLMenuElement getRowMenu(in RowSpecification row);
  void getRowClasses(in RowSpecification row, in DOMTokenList classes);
  DOMString getCellData(in RowSpecification row, in unsigned long column);
  void getCellClasses(in RowSpecification row, in unsigned long column, 
      in DOMTokenList classes);
  void toggleColumnSortState(in unsigned long column);
  void setCellCheckedState(in RowSpecification row, in unsigned long column, 
      in long state);
  void cycleCell(in RowSpecification row, in unsigned long column);
  void editCell(in RowSpecification row, in unsigned long column, in DOMString data);
};

menu と command

実は menu 要素は、少なくともバージョン 2 から HTML に存在しています。この要素は HTML 4 では推奨されていませんでしたが、HTML 5 では新たな重要性をもって復活を遂げています。HTML 5 では、1 つの menu が複数の command 要素を含み、それぞれが即座にアクションを起こします。例えば、リスト 12 はアラートをポップアップする menu を示しています。

リスト 12. HTML 5 の menu
<menu>
    <command onclick="alert('first command')"  label="Do 1st Command"/>
    <command onclick="alert('second command')" label="Do 2nd Command"/>
    <command onclick="alert('third command')"  label="Do 3rd Command"/>
</menu>

checked="checked" 属性を使って command をチェック・ボックスに変えることもできます。チェック・ボックスをラジオ・ボタンに変更するには、radiogroup 属性を指定し、その値を相互排他的なボタン群の名前にします。

単純なコマンド・リストに加え、menu 要素を使うと、toolbar あるいは popuptype 属性を設定することで、ツールバー、あるいはポップアップするコンテキスト・メニューを作ることができます。例えばリスト 13 は、WordPress などのブログ・エディターにあるようなツールバーを示しています。ここでは icon 属性を使ってボタンの図にリンクしています。

リスト 13. HTML 5 のツールバー
<menu type="toolbar">
    <command onclick="insertTag(buttons, 0);"  label="strong" icon="bold.gif"/>
    <command onclick="insertTag(buttons, 1);"  label="em" icon="italic.gif"/>
    <command onclick="insertLink(buttons, 2);" label="link" icon="link.gif"/>
    <command onclick="insertTag(buttons, 3);"  label="b-quote" icon="blockquote.gif"/>
    <command onclick="insertTag(buttons, 4);"  label="del" icon="del.gif"/>
    <command onclick="insertTag(buttons, 5);"  label="ins" icon="insert.gif"/>
    <command onclick="insertImage(buttons);"   label="img" icon="image.gif"/>
    <command onclick="insertTag(buttons, 7);"  label="ul" icon="bullet.gif"/>
    <command onclick="insertTag(buttons, 8);"  label="ol" icon="number.gif"/>
    <command onclick="insertTag(buttons, 9);"  label="li" icon="item.gif"/>
    <command onclick="insertTag(buttons, 10);" label="code" icon="code.gif"/>
    <command onclick="insertTag(buttons, 11);" label="cite" icon="cite.gif"/>
    <command onclick="insertTag(buttons, 12);" label="abbr" icon="abbr.gif"/>
    <command onclick="insertTag(buttons, 13);" label="acronym" icon="acronym.gif"/>
</menu>

label 属性はメニューの項目名を表します。例えば、リスト 14 は Edit メニューの一例です。

リスト 14. HTML 5 の Edit メニュー
<menu type="popup" label="Edit">
    <command onclick="undo()"   label="Undo"/>
    <command onclick="redo()"   label="Redo"/>
    <command onclick="cut()"    label="Cut"/>
    <command onclick="copy()"   label="Copy"/>
    <command onclick="paste()"  label="Paste"/>
    <command onclick="delete()" label="Clear"/>
</menu>

メニューを他のメニューの中でネストし、階層構造のメニューを作成することもできます。


まとめ

HTML 5 は将来の Web を構成する一部です。HTML 5 の新しい要素によって、ページをより明確に表す、明瞭かつ単純なマークアップが可能になります。Divspan は相変わらずありますが、その位置づけはこれまでよりもずっと制限されています。多くのページは、もはやそれらを必要としないのです。

最初は、すべてのブラウザーがこれらの新しい要素をサポートすることはないでしょう。これは HTML が最初に考案された後に導入された大部分の要素 (imgtableobject その他) の場合も同じでした。サポートは時間の経過と共に実現されます。しかし完全にサポートされるようになるまでの間も、HTML は「認識できない要素は必ず無視」という動作をするため、レガシー・ブラウザーのユーザーでもHTML 5 のページを読めるはずです。実際ユーザーは、現在そのようにしています。新しいブラウザーのユーザーは強化されたエクスペリエンスを得ることができますが、誰かが置いてきぼりになるわけではありません。

新しい機能を待つにしては、特に目まぐるしく変化する Web の世界では、8 年は長い時間です。HTML 5 は、Netscape と Microsoft その他が一週間毎に新しい要素を導入していた初期の頃の興奮を思い起こさせてくれます。同時に HTML 5 は、全員が新しい機能を互換性を保ったまま利用できるように、これらの要素を定義する際に非常に注意深い方法をとっています。将来は明るいようです。

参考文献

学ぶために

  • 「HTML の将来、パート 1: WHATWG」(Edd Dumbill 著、developerWorks、2005年12月) は、開発者やデザイナー、Web 作成者、ベンダー、標準化団体その他が提案した、HTML の今後のさまざまな方向性を解説しています。
  • 「HTML の将来、パート 2: XHTML 2.0」(Edd Dumbill 著、developerWorks、2006年1月) は、次世代バージョンの XHTML (Extensible Hypertext Markup Language) と、Ajax で実現されているリッチ・クライアントの動作への要求に対する W3C の反応を検証しています。
  • 「XHTML 1.0: Marking up a new dawn」(Molly Holzschlag 著、developerWorks、2006年1月) を読み、XHTML 1.0 の整形式性と妥当性要件について学んでください。
  • WhatWG and HTML 5 FAQでは、WhatWG が何を、なぜ行っているのかに関する多くの一般的な質問への答えを見ることができます。
  • Web Applications 1.0で HTML 5 仕様の現在のワーキング・ドラフトを調べてみてください。
  • Stillman Drake が翻訳し、S. E. Sciortino が注釈を入れて要約したバージョンの『Dialogue Concerning the Two Chief World Systems (二大世界体系についての対話)』を読んでください。
  • 次世代のオープンなビデオ・フォーマット、Ogg Theoraを試してみてください。
  • XML および関連技術において IBM 認証開発者になる方法については、IBM XML certificationを参照してください。
  • developerWorks の XML ゾーンは、XML や XML Schemaを含め、広範な話題を網羅した技術記事やヒント、チュートリアル、技術標準、IBM レッドブックなどを用意しています。
  • developerWorks technical events and Web castsで最新情報を入手してください。

製品や技術を入手するために

  • 皆さんの次期開発プロジェクトをIBM trial softwareで構築してください。developerWorks から直接ダウンロードすることができます。

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=XML, Web development
ArticleID=258236
ArticleTitle=HTML 5 の新要素
publish-date=08072007