必要条件

この記事に必要な予備知識

Experience with web development is recommended.

ユーザーレベル

初級

HTML 5.0ドラフト仕様が策定されるのは2014の予定ですが、このテクノロジーは既にインターネット上で広く採用され、クリエイティブに使われています。HTML言語の自然な進化であるこのバージョンによって、われわれが情報やメディアを視覚化し、利用し、関与していく方法が革新されようとしています。HTML5は、インターネット上で作業を実行したり情報を表示したりするための強力なツールであり、デスクトップやモバイルデバイスを含む様々な形態のデバイスから共通に利用できます。

この記事では、HTML5の概要を紹介します。HTML5とは何であり、何でないのか、なぜ重要なのか、どのような利点があり、Webアプリケーションの構築方法をどのように変えるのかを説明します。さらに、HTML5について詳しく知るために有用なリソースをいくつか記します。

HTML5とは何か

HTML5とはそもそも何なのかと疑問に思っている方も多いかもしれません。

厳密に言えば、HTMLとはテキストベースのマークアップ言語であり、主にインターネットを通じて配布される情報のフォーマッティングに用いられます。より高いレベルで言えば、HTMLとは、ユーザーインターフェイス内のテキストと画像の構造化と表示に用いられる言語です。HTML5は、現行のHTML 4.01仕様を強化するもので、デザイナーやデベロッパーが独自のコンテンツの作成に利用できる新しい機能が追加されています。

HTML5での最も注目すべき変更点の1つは、マルチメディア要素や動的グラフィックスをサポートするタグが追加されたことです。これには、音声を再生するための<audio>タグ、ビデオ再生のための<video>タグ、動的グラフィックスのための<canvas>タグがあり、すべて外部ソフトウェアに依存せずにブラウザー内部で処理されます。新しいマルチメディア要素によって、最新のブラウザーは、HTMLコードを通じてリッチな体験と動的なグラフィックスを提供できます。これらの要素を利用することで、デザイナーやデベロッパーは、ビデオ再生や画像操作など、すべてのプラットフォームで高い信頼性で動作する(とHTML5の開発者たちは望んでいる)リッチで魅力的な体験を作成できます。

マルチメディア以外にも、HTML5では、SVGおよびMathMLベクトルグラフィックスをHTMLコンテンツにリンクしたりインラインに埋め込んだりする機能が導入されています。HTML言語にベクトルグラフィックスが取り込まれることで、画像ファイルを使用せずに複雑なベクトル画像を表示でき、サードパーティ製のプラットフォームに依存することもなくなります。これによってすべてのコンテンツを1つのHTMLファイルに収められるだけでなく、JavaScriptを通じてSVGコンテンツを操作できるようになります。ベクトルコンテンツの操作としては、シェイプの色の変更といった簡単なものから、シェイプのアニメーション表示、ベクトルグラフィックスへのユーザーインタラクションの追加、さらには実行時のベクトルグラフィックスの動的な作成といった複雑なものまでが挙げられます。

さらに、HTML5では、新しいタイプのフォーム入力要素が導入されています。これらの新しい要素タイプを使えば、入力のタイプを指定するだけで、情報の入力、検証、情報のフォーマッティングを、ブラウザーとネイティブメソッドが自動的に行ってくれます。新しい入力タイプとしては、電話番号、メールアドレス、URL、日付、時刻、色、その他様々な数値形式とその異なる並べ替えがあります。ブラウザーやデバイスやオペレーティングシステムには、入力とユーザーインタラクションに関するそれぞれ独自の方式があります。新しいHTML5のフォーム要素を使うと、HTMLドキュメント内で、ネイティブな方式に従いながら、より堅牢なデータ収集を実現でき、カスタムJavaScriptライブラリに必要なメンテナンス作業も不要になります。

HTML5で新たに導入されるもう1つの機能は、セマンティックマークアップタグです。セマンティックタグを使うと、HTMLコンテンツを構造化して、ドキュメントの構造によってコンテンツの意味を表現することができます。セマンティックタグには、<article><section><header><footer><aside><nav><figure>があり、理解しやすいHTMLドキュメントの作成に役立ちます。これらのタグでは、HTMLドキュメントのどの部分がナビゲーション用で、どの部分がレイアウト用で、どの部分に意味のあるコンテンツが含まれるかを指定できます。新しいセマンティックタグによって、HTMLドキュメントのより高レベルの組織化が可能になり、検索エンジンやアグリゲーターなどのコンテンツ処理アプリケーションが解釈しやすいコンテンツを作成することで、デバイス間のコミュニケーション、コンテンツの利用、情報の拡散を容易にすることができます。

上記の機能の他に、HTML5では、DOCTYPEタグおよびシンタックスが、HTMLのこれまでのイテレーションよりも簡素化されています。HTMLのdoctypeは大幅に簡素化され、有効なHTML5ドキュメントは基本的に有効なXML構造となります。HTMLのこれまでのイテレーションは、SGML(Standard Generalized Markup Language)に基づいており、適切なドキュメント構造の検証にはDTD(Document Type Definitions)が必要でした。HTML5では、コンテンツはXMLベースになり、有効なXMLフォーマッティングルールに従う必要があります。HTML5コンテンツにはDTDは不要ですが、ブラウザーの適切な動作のために、より簡素な<!DOCTYPE HTML>が必要とされます。

HTML5は技術的にはマークアップ言語ですが、その他にいくつかの新しいDOM APIを包含しています。これらのAPIは、ブラウザーのJavaScript DOM実装を通じて公開されます。新しいマルチメディアタグに伴って、マルチメディアコンテンツの利用と操作のための新しいAPIも用意されています。これには、オーディオとビデオの再生コントロールや、<canvas>要素内のビジュアルコンテンツをプログラムから操作するためのAPIが含まれます。マルチメディア以外の新しいJavaScript APIとしては、オフラインアプリケーション、ネイティブドラッグ&ドロップ、ユーザー編集可能コンテンツ、ブラウザー履歴の統合の強化、Webアプリケーションへのファイルタイプの登録といった機能をサポートするものがあります。

HTML5における変更点はこれだけではありませんが、新しい規格で何が可能になるかの概要はつかんでいただけたことと思います。HTML5に関する最新の情報について詳しくは、W3Cが公開している仕様と、HTML4からの変更点またはHTML5仕様全体をオンラインで参照してください。

HTML5は何ではないか

HTML5について語る場合、HTML5仕様自体に含まれないものとの区別も同様に重要です。最近のメディアには、アニメーション、トランジション、変形、グラデーション、WebフォントといったCSS3の機能や、位置情報などのブラウザー拡張機能を利用するための新しいJavaScript APIまでも、「HTML5」という1つの言葉でまとめて扱う傾向が見られます。このような用語やテクノロジーのすべてがHTML5仕様に含まれるわけではありませんが、これらは最新のブラウザーに密接に関連しており、リッチなユーザー体験の提供に不可欠なので、混同されやすいと言えます。CSS3とはCascading Style Sheetsリビジョン3のことで、コンテンツの表現を定義するための言語です。CSS3は情報の表示方法を定義するもので、HTML5で構造化されたコンテンツと組み合わせて使用できます。この場合、HTML5はコンテンツの実際の構造を定義する役割を果たします。新しいJavaScript APIについては、HTML5規格に含まれるものを除いて、これらは「単なるAPI」であると言えます。これらのAPIは、JavaScriptを通じて公開される高度な機能へのインターフェイスであり、HTML5ベースのWebアプリケーションから利用可能で、Web開発に重要な役割を果たします。しかし、技術的にはこれらのAPIはHTML5仕様には含まれません。

HTML5に関連して語られることが多いテクノロジーのうち、HTML5仕様に含まれないものとして、WebGL、FileReader、querySelector(All)、位置情報、CSS3、Web Workers、Web Sockets、JavaScriptの高速化などが挙げられます。

まとめ

一般的に言えば、HTML5とは、HTML言語の進化であり、よりリッチな標準に基づくコンテンツを、Webおよびマルチデバイスの世界で利用できるようにするためのものです。その目的は、現在のHTML 4.01仕様の複雑さと構造の一部を単純化し、リッチメディア、動的グラフィックス、複雑なユーザーインターフェイスの作成と消費を容易にし、HTML5の機能をサポートするすべてのブラウザーとデバイスで一貫した体験が得られる環境を実現することにあります。本質的に、HTML5は、HTMLが単に静的なテキストコンテンツのためのものであるという前提を変えようとしています。Web開発のパラダイムは変化しつつあり、HTML5は単なるマークアップ言語から、Webプログラミングのためのプラットフォームに進化することを目指しています。

HTML5のタグは現在のWebでも使用でき、過去との互換性もあるので、既存のHTML 4ベースのコンテンツは新しいHTML5のコンテンツと共存できます。これまでのHTMLの構造とフォーマッティングに関する知識が無駄になることはありません。HTML5による開発も、同じ規則に従います。HTML5の特定の機能がターゲットプラットフォームでサポートされていない場合、JavaScriptを使って使用できない機能を検出して、代わりの手段を提供することができます。

主要な最新のデスクトップ用ブラウザーは、すべて何らかの形でHTML5の機能をサポートしています(ただし、サポートの内容には違いがあります)。また、主要なすべてのスマートフォンやタブレットもHTML5をサポートしています。HTML5は既に広くサポートされているため、マルチデバイスおよびマルチスクリーンアプリケーションにとっては有力なソリューションとなるでしょう。HTML5は、ブラウザーでリッチな体験を開発する手段というだけではありません。いくつかのデスクトップおよびタブレットアプリケーションベンダーから、HTML5のシンタックスと構造だけを使用してネイティブアプリケーションを開発するためのソフトウェア開発キット(SDK)が提供されています。

次のステップ

HTML5はまだ標準化されていませんが、現在既に使用できます。HTML5は急速に成熟しており、既に現実的なテクノロジーソリューションと言えます。Apple iOS、Android、BlackBerry 6、HP/Palm WebOSデバイスはすべてHTML5の機能をサポートしており、最新のデスクトップブラウザーエンジン(Safari、Chrome、Opera、Internet Explorer)も同様です。現時点では、HTML5機能に対するサポートの内容はブラウザーごとに異なります。したがって、実際の使用方法は、ターゲットとするユーザー、プラットフォーム、デバイスに応じて判断する必要があります。

今の時点で、HTML5の実用性を過小評価することは誤りです。HTML5は、Webデベロッパーの選択肢に加えておくべき有用なツールと言えます。テクノロジーの進化とともに、テクノロジーを実装する形式と構造もまた進化します。HTML5は、未来に対応した技術であると言えます。HTML5のdoctypeを使用して作成したHTMLドキュメントは、XML/XHTMLの解析ルールに従う必要があるので、今後さらに言語が進化したとしても、将来にわたって長く有効性を保つはずです。

さらに、HTML5ベースのコンテンツは、コンテンツアグリゲーターや、今後出現するであろう新しい種類のデバイスからも、容易に利用できます。現在、HTML5ベースのコンテンツは、デスクトップコンピューター、スマートフォン、タブレット、さらには自動車からも利用できます。HTML5規格をターゲットとするコンテンツの開発は、まだ知られていない未来のドアを開くことにつながるのです。もしかしたら将来、冷蔵庫や洗濯機、さらにはガソリンポンプまでが、HTML規格に基づくリッチコンテンツを利用するようになるかもしれません。

HTML5の入門用に最適なリソースをいくつか紹介します。

また、Chrome Experimentsも参照してみてください。これは、HTML5およびその他のテクノロジーによって構築されたWebプロジェクトのサンプルです。