この記事は5/23に掲載された「A HTML5 Primer for the Overwhelmed」を訳したものです

---

HTML5がグーグルやアップルにより、リッチインターネットアプリケーション（RIA）のためのソリューションとして強力にサポートされ始めた結果、HTML5という言葉がバスワード化しています（特にGoogle I/O以降）。そして、HTML5という言葉が広く流布するにしたがって、その言葉本来の意味とは違う意味で使われ始めていることも、驚きではなくなっています。「HTML5の経験があること」が採用条件となっているような採用情報も既に存在しますし、シンプルなJavaScriptアニメーションもCSS3によるアニメーションもひっくるめてHTML5のサンプルとして紹介されていたりします。 ちょうど00年代中頃に「次世代のWeb開発」を指すバズワードとして「AJAX」や「Web2.0」といった言葉が便利に使われていたように、HTML5という言葉は多くの意味を持たされた言葉になっています。 さらに、 HTML5そのものについての解説も世の中に既にたくさん存在しているのですが（例：W3Cによる基本仕様そのもの）、それらは大抵技術的なものであり、多くの文書は現在の仕様と同期がとれていないものとなってしまっています。そこで、今回我々の方で、短めのHTML5入門を書いてみようと思い立ったわけです。

HTML5コア vs. HTML5ファミリー

技術者じゃない人たちが「HTML5」という言葉を使う場合（特に「Flashを置き換える」というフレーズと一緒に使われる場合）、彼らはWebKit、Opera、あるいはFirefoxに実装され始めている様々な次世代技術のことをまとめてHTML5と言っています（少なくとも私はそう思います）。それらの技術のいくつかは（例えばCSS3など）、HTML5標準化プロセスには含まれていませんでしたし、あるいは他の技術（例えばWeb Workersなど）はHTML5の仕様に元々含まれていたものの、途中でスピンアウトしたものだったりします。こういった技術も含めた場合の言葉として「HTML5ファミリー」と呼ぶのが適しているように我々は考えています。そして、このHTML5ファミリーを構成するそれぞれの技術はその実装と成熟度において（実際の家族と同じように）、かなりバラバラな状況です。いくつかの技術は最新のブラウザーにおいて完全に実装されている一方で、日の目を見なさそうな技術や、主要なブラウザに実装される前に別の技術に代替されてしまうものまであるかもしれません。

先にも述べた、W3Cが定義しているHTML5の基本仕様（HTML5コア）は、これらの関連技術の一部ということになってきます。以下にHTML5ファミリーを構成する技術についてはリストアップしていきます（全部ではありませんが）：

• HTML5基本仕様
• CSS3
• Web Workers
• Web Storage
• Web SQL データベース
• Web Sockets
• Geolocation
• Microdata
• Device API と File API

上記以外にSVGをHTML5ファミリーに入れるべきという意見もあるかもしれませんが、SVGそのものは独立した技術であるものという認識から、このリストには入れませんでした。

HTML5基本仕様

HTML5基本仕様の主な目的は、00年代初期の頃にブラウザ開発者やその他の開発者の支持を得られなかったXML的なアプローチのHTMLを進化させることです。HTML5はHTMLという言語を多くの面で変更しますが、そのほとんどはエンドユーザーの目に見えるような新機能ではありません。これらのユーザーの目に見えない機能には、新しいコンテンツモデル、アクセシビリティ機能、Browsing Contextなどがあります。これらの機能によって、現在スタイル設定やJavaScript、あるいはサーバー側で対処しているようなことがHTMLだけで可能になります。例えば、HTML5では多くの標準的なコンテンツ要素に対応したタグが追加されています：具体的にはメールアドレスを入力するためのフォームフィールドがあげられます。他にも、メニューやナビゲーション部分のためのタグが新たに追加されています。これらの新たな仕様によって、よりクリーンで読みやすいHTMLを作成することができます。現在、大量に使用されている<div>タグは、きちんとした意味を持った<nav>や<aside>タグで置き換えられることになります。また、フォームにおいては、HTML5はPUTとDELETEをサポートするようになるため、サーバー側の処理もシンプルに記述することが可能になります。さらに、現在はJavaScriptで行うしかないフォーム要素の動的な追加処理も、HTMLだけで行えるようになります。

エンドユーザーにとってのHTML5が与える最大のインパクトは、audioとvideoタグの追加、そして2Dのビットマップ描画領域 （<canvas>）の追加でしょう。HTML5のaudioとvideoタグはプラグイン無しでの音声・動画の再生を可能にし、canvasはリッチなビットマップ画像を可能にします。

他にもドラッグドロップAPIや、クロスドキュメントメッセージング、コンテンツをキャッシュするための方法、そして編集可能なコンテンツ、など多くの機能がHTML5基本仕様には含まれています。これらの機能は現在最新のブラウザに実装されているところです。ただ、これらの機能の全てが実装されるわけではなく、いくつかの機能は最終段階において外されるかもしれません。例えば、現在<progress>要素（ファイルのダウンロード状況などを示したりするための機能）について仕様に含めるかどうか議論されているところです。

最後になりますが、HTML5ではHTMLの初期の仕様の汚点となっていた表示用のタグが削除されています（例：<center>や<font>）。テーブルタグのスタイル設定についてもHTMLでは行えなくなり、CSSが必須となります。フレームについても正式に削除されます。

CSS3

多くの人がHTML5だと考えているものは、実はCSS3だったりします。CSS3そのものはサブ仕様を集めたものです。そして、これらの仕様は、ブラウザによる実装や完成度がまだバラバラです。例えば、CSS AnimationとCSS TransitionはHTML要素に対してリッチな2Dのアニメーションや様々な効果を与えるためのサブ仕様です。CSS 3D/2D Transformationはボックスコンテンツに対してアニメーション効果を与えます。CSS3にはこの他にも、レイアウト、ボーダー、および背景をより柔軟に操作するための仕様も含まれます（例えば、長らく望まれてきた「角を丸くする」仕様など）。他にもルビ、聴覚スタイルシート、マーキーといったニッチな仕様も存在します。

Web Workers

Web Workersはアプリケーションがフリーズしないように、重たいタスクを切り離してバックグラウンドで稼働するようにするための機能です。Workerにはその挙動の違いによっていくつかの種類に分けられます。Web Workersの目指すところは、アプリケーションの開発者に対して、どのタスクを平行処理させるかを特定するための手段を与え、そしてそれを受けてブラウザが今後一般的になるであろうマルチコアプロセッサーの恩恵を最大限受けられるようにすることにあります。

Web Storage

Web StorageはHTML5ファミリーの中でも最も楽しみな技術です。Web Storageを使えば、ページはキーバリュー型のデータベースに対して文字列を格納することが可能になります（データベースはドメインに対して1つ割り当てられます）。Web Storageには2種類存在します。1つ目はsessionStorageで、1回のセッション中に使い続けられるものです（より高機能なクッキーと考えてもいいかもしれません）。2つ目はlocalStorageで、複数のセッションにまたがりデータを保存しておくことが可能です。HTML5基本機能で定義されているキャッシュマニフェストにlocalStorageを追加することにより、オフラインアプリケーションを走らせることができるようになります。Web Storageの仕様そのものは「Web SQLデータベース」仕様（オフラインでもアクセス可能なSQLが利用できるデータベース）とは別のものです。現在、各ブラウザーにより様々な仕様のものが実装されていますが、標準化作業の方では、SQL-lite以外の実装方法で互換性を持たせるための仕様が議論されているところです。

Web Sockets

Web Socketsプロトコルは現在標準化作業の最初のステージにあり、同時にネットワークプロトコルであるためIETFドラフトとしても提出されています。Web SocketsはHTTPベースではないクライアントサーバー間の非同期通信用プロトコルを定義しいて、現在サーバーとの非同期通信で利用されているAJAXメソッドを代替するものとして考えられています。Web Socketsではhttpリクエストを介して新しいプロトコルを起動します。

その他

Geolocationはスクリプト側から呼び出す事が可能な位置情報オブジェクトに関する非常に簡単な仕様です。位置情報のキャッシュを更新する条件を定義するためのメソッドも提供されます。この機能については大きな議論はなく、最新のブラウザーには既に搭載済みです。File APIを使えば1つあるいは複数のファイルをユーザーの環境からアップロードするための機能です。この機能についてはどのブラウザがサポートするのかまだよく分かりませんが、どういった仕様であるべきかについては特に混乱はないみたいです。Device APIはブラウザからカメラやブルートゥース機能にアクセスするための機能ですが、まだ、初期の段階です。Device APIではハードウェアや、センシティブなデータへのWebアプリケーションからのアクセス方法の標準化を目指しています（例：携帯端末におけるカメラAPI、コンタクトリストやSMS履歴にアクセスするためのAPI、など）. Google I/Oでの発表内容から推測されることとして、詳細は未定ですが、Googleはそう遠くない将来に、Chromeで動作するWebアプリケーションからカメラ機能へのアクセスを可能にするものと思われます。

HTML5は素晴らしい！

上記の通り、HTML5ファミリーには様々な標準技術が存在するため、注意していないと簡単に混乱してしまいます。ただ、落ち着いてよく見てみると、これらのHTML5ファミリーの開発者たちの目指すものが、ユーザーインターフェース、オフライン機能、ハードウェアアクセス機能などの面において、Webアプリケーションをネイティブアプリケーション並みのパワフルなものにしていこうという狙いが見えてくると思います。そしてHTML5ファミリーを使うアプリケーションはWeb上に存在することになるため、Webがこれまでに実現してきた様々なメリットも同時に享受することになります：

• クロスプラットフォームで稼働するクライアント（ブラウザ）
• 検索やインデックス化が可能（ディープリンクなども）
• 第三者のサービスを簡単に組み込んだり、マッシュアップすることが可能
• 保守・更新の負荷がほとんどゼロ

---

HTML5ファミリー

HTML5ファミリーに関する連載記事：

1. HTML5という言葉に圧倒され気味の方への、HTML5入門
2. Web Storage
3. CSS3
4. Web Workers
5. Geolocation
6. Microdata
7. CSS3広告とFlash広告

この記事は 2010年08月18日 の 4:16 pm に投稿されました。この記事のカテゴリーは HTML5です. この記事への反応は RSS 2.0で取得することができます。