krzm.jp
黒住浩司 Webサイト

HTML5の技術的考察

内容

はじめに

2014年10月末、HTMLの最新版である「HTML5」が、遂にというか、やっとというか、正式な仕様として確定されました。HTML5に対しては、4年ぐらい前から関心を持ち、その技術を試してみる目的で、2010年10月に「音の無いアルバム」というWebサイトを制作しました。また、その制作過程で得た知識を基に、同サイトに「HTML5の技術・政治的考察」という記事も掲載しました。それから4年経ち、HTML5の仕様も部分的に改訂されながら策定が進んだため、以前の記事に加筆・修正し、2014年版として作り直してみました。それが、本記事です。

HTML5がやっと日の目を見るに至ったとはいえ、2010年と比べ現在は、せっかく政治の表舞台から掃き捨てられたと思っていた安倍晋三が首相に返り咲き、また中国・韓国を念頭に民族主義や排外主義を振りかざす連中が厚顔無恥にも闊歩する、見るも無残な時代状況に陥っていますが、当然、本記事の読者としては、そういった輩を想定してはいません。いかなる科学技術も、政治に対して中立であることはなく、何らかの形で政治を媒介するものである以上、主要にはWeb技術を扱っている本記事も、何らかの政治的傾向の下にあることは間違いありません。なんて、回りくどいことを言わずとも、本記事は左翼が書いたのだから、もしも保守や右翼が（ついでにスターリニストも）本記事を利用するなんてことがあるとしたら、そうした連中の価値観からしても、恥知らずの誹りを免れないでしょう。というわけで、民族だの国益だののくだらなさ、そして金儲けの卑劣さや恥ずかしさ（←記事本文の中では、ここにだけstrong要素を使っています）を知っている、そんな心の美しい方々に向けて、本記事は幅広く技術的門戸を開いています。

なお、演習用として利用可能なHTMLや画像ファイルは、「krzm_html5.zip」にまとめてアップロードしてあります。この記事で紹介しているコーディング内容は、krzm_html5.zip内のchapter02_test.htmもしくはcanvas.htmファイルで試すことができます。

HTML5とは何か

概略

HTML5は、Web技術の標準化団体であるW3C（World Wide Web Consortium）が策定した、XHTML 1.1以降の新たなHTMLの規格です。

元々W3Cは、1.1に続くXHTML 2の策定を目指していましたが、その一方で、Microsoftを除く主なブラウザーのベンダー（Opera、Mozilla、Apple）がWHATWGという団体を2004年に立ち上げ、よりWebの現状に即した次期HTML「HTML5」の仕様策定を目論見ます。

さらに、Googleがこの「HTML5」を積極的に支持することになり、W3CはXHTML 2を放棄、公式にW3C内でHTML5を策定していくことになりました。なお、WHATWGも並行して仕様の更新を進めていて、W3Cでの仕様策定を（一応）相互補完する関係になっています。

こうした背景から邪推するとHTML5は、Microsoft、すなわちInternet Explorer対して優位を確保するための仕様作りと言えなくもありませんが、MicrosoftもW3Cには参画していて、IE 9以降では、積極的にHTML5への対応を図っています。

さて、本来のスケジュールでは、仕様一歩手前の勧告候補が2011年には出される予定でした。しかし、2012年段階でも作業草案から抜け出せず、大幅に遅れが出てしまったため、W3Cは一部の仕様を切り離し、仕様本体の確定を先行。そして2014年10月28日に、正式な仕様であるW3C勧告「HTML5 HTMLとXHTMLのための語彙と関連API」（HTML5 A vocabulary and associated APIs for HTML and XHTML）として、遂に確定しました。

一方、積み残された仕様は、個別の仕様書やHTML5.1として、2012年12月頃からそれぞれ策定が行われています。これらのうち、仕様として確定したものもありますが、HTML5.1は未だ作業草案（2014年6月17日）の状態です。

2014年段階で、HTML5におおよそ対応しているブラウザーは、Opera、Firefox、Safari、Chromeの最新版と、Internet Explorer 9/10/11です。とはいえ、HTML5のすべての新要素や属性には、どのブラウザーも完全には対応各ブラウザーの対応状況は、status.modern.ieサイトやfindmebyIPサイト等で確認できます。していません。

広義のHTML5

一般にHTML言語というと、それはHTML文書を記述するための「タグ」の集まり、ということになります。HTML5は、もちろんこうしたマークアップの仕様を定義しているものの、それだけにとどまらず、「Webアプリケーション」を構築する上で必要になる、様々な機能（API）の仕様が含まれるとされてきました。これらの仕様は、次のように大別されています。

HTML5の定義
セマンティックス（Semantics）

構造に意味やデータ形式（セマンティックス）を与えることが、 HTML5 の役割であり中心任務です。
RDFaResource Description Framework in attributesは、Webページの表示に影響を与えずに、メタデータをXHTML文書に埋め込むことを定義した仕様です。マイクロデータおよびマイクロフォーマットも、同様の概念です。、マイクロデータおよびマイクロフォーマットとともに、多機能な１つのタグが、プログラムとユーザー双方のために、より便利で、データ駆動型のWebを可能にします。

  • マイクロデータの仕様は、HTML Microdataとして定義されています。
オフラインとストレージ（Offline and Storage）

たとえインターネットに接続していない場合でも、HTML5 App Cache、Local Storage、Indexed DB、File API等の仕様により、Webアプリケーションはより早く起動し、機能します。

デバイス接続（Device Access）

Geolocation APIを手始めに、Webアプリケーションが、リッチなデバイス認識機能と体験を提供することができます。
素晴らしいデバイス接続の革新は、マイクやカメラによるオーディオ／ビデオ入力を通じて、接触とイベント、傾き検知といったローカルデータのための開発と実装を促進します。

接続性（Connectivity）

より効率的な接続性は、リアルタイムなチャット、より速いゲーム、そしてより良いコミュニケーションを意味します。
eb SocketsとServer-Sent Eventsが、以前よりもいっそう効率的に、クライアントとサーバーの間でデータをプッシュします。

マルチメディア（Multimedia）

オーディオとビデオは、アプリケーションとWebサイトとともに調和して暮らす、 HTML5 Web における一流の市民です。

3D、グラフィックス、効果（3D, Graphics and Effects）

SVG、canvas要素、WebGL、CSS3 3Dの機能を通して、ブラウザー自身によってレンダリングされた魅力的なビジュアルで、ユーザーを驚かせることは確実です。

  • svg要素は、要素の文法上の仕様とは別に、その内容はScalable Vector Graphics (SVG) 1.1 (Second Edition)として仕様が確定しています。また、SVG 2の仕様が策定中です。
  • canvas要素は、要素の文法上の仕様とは別に、その内容はHTML Canvas 2D Contextとして策定中です。また、以前にCanvas 3Dとされていたものは、WebGLに置き換えられています。
  • WebGLは、W3Cとは別にKhronos GroupがWebGL 1.0および2.0の仕様を策定しています。
パフォーマンスと統合（Performance & Integration）

Web WorkersやXMLHttpRequest 2のような様々なテクニックと技術で、Webアプリケーションと動的なWeb接続を高速化できるでしょう。ユーザーが閲覧中に待たされることはありません。

CSS3

CSS3が、セマンティックス構造やパフォーマンスを犠牲にすることなく、Web アプリケーションを拡張して、広範囲のスタイルと効果を与えます。
さらに Webオープン フォント形式（WOFF）は、Web がかつて提供したあらゆるものを超越して、タイポグラフィーの柔軟性と制御を提供します。

HTML5 Logoの画像以上は、「HTML5 Logo」というW3Cの公式宣伝サイトからの、受け売りです。ただの宣伝文句のようなものもありますが、そこから技術的トピックを抽出すると、次のようにまとめられるでしょう。

改善されたマークアップ（セマンティックス）
新要素・属性の追加や、旧要素・属性の整理
カテゴリーとコンテンツ・モデルによる要素分類
セクションとアウトライン・アルゴリズムの追加
マイクロデータの定義
オフラインでWebアプリケーションを動作させる仕様
Offline Web applications
Web Storage
Indexed Database API
File API
Webアプリケーションでハードウェア機器を利用する仕様
Geolocation API
Touch Events
DeviceOrientation Event
Web通信を改善・強化する仕様
Web Socket API
Server-Sent Events
マルチメディア関連要素とAPIの追加
video要素
audio要素
グラフィックスを改善・強化する仕様
SVGの組み込み
Canvas 2D（canvas要素）
WebGL（canvas要素）
CSS3 3D
Webアプリケーションのパフォーマンスを改善・強化する仕様
Web Workers
XMLHttpRequest Level 1（旧称XMLHttpRequest２）
スタイルシートの改善・強化
CSS3

なお、CSS3やCSS3 3Dは、CSS 2.1の（いちおう）次世代に当たる、CSS Level 3当初、CSS2.1以降に追加されたプロパティや値はすべてLevel 3として扱われていましたが、2014年11月現在では、2.1以前に存在しなかったものは、Level 1に定義されています。また、現在のCSSは「モジュール」という機能グループに分けられ、それらが個別の仕様書で策定されています。のことです。CSS3は、HTML5やXHTML2とは別に、仕様の改良や拡張がW3Cによって進められていたのですが、HTML5が注目されたためか、はたまたその注目を高めるためか、ちゃっかりHTML5の中に納まったようです。

しかし、CSS3を含め、HTML5 Logoで挙げられているほとんどの技術的トピックは、HTML5の仕様書では定義されていません。HTML5仕様書は、以下のような10章立てになっていますが、主としてHTMLの文書や要素に係る仕様や構文、セマンティックス、アクセシビリティに関する定義が中心となっています。

HTML5仕様書の章構成
イントロダクション
共通インフラストラクチャー
適合クラス、アルゴリズム、定義と、仕様の残りの共通基盤について。
セマンティックス、構造、およびHTMLドキュメントのAPI
ドキュメントが要素から構築され、要素はDOMを使用してツリーを構成します。すべての要素に共通の機能と、定義された要素で使われる概念を提示することに加えて、DOM の機能も定義します。
HTMLの要素
それぞれの要素が、このセクションで説明される、あらかじめ定められた意味を持っています。どのように要素を使うべきかについての制作者のための規則が、それぞれの要素の処理方法に関するUAユーザー・エージェントとは、Webブラウザーを含む、HTMLを解析してその情報を使用者に提供するプログラム全般のことを指します。の必要条件とともに、提示されます。
Webページの読み込み
このセクションは、 Web ブラウザーのような複数のページを扱う環境や、Webアプリケーションのオフラインキャッシュに影響を与える、機能の多くを定義します。
WebアプリケーションAPI
このセクションは、HTML内で実行するアプリケーションのスクリプト操作に関する、基本的な機能を提示します。
ユーザー・インタラクション
このセクションで記述されるようにHTMLドキュメントは、フォーカスが働く方法のように、ユーザーがコンテンツと情報をやり取りし、そして変更するための、多くのメカニズムを提供することができます。
HTML構文
このセクションは、コンテンツを解析する方法の規則とともに、HTMLシリアライゼーション形式の構文を定義します。
XHTML構文
このセクションは、コンテンツを解析する方法の規則とともに、XMLシリアライゼーション形式の構文を定義します。
レンダリング
このセクションは、 Web ブラウザーのために、デフォルトのレンダリング規則を定義します。
廃止された機能
IANAInternet Assigned Numbers Authorityとは、インターネットアドレスの策定・割当て機関のことです。の要件

上記の概略で示したように、APIや、DOMの構造とスクリプト操作に係る内容も、HTML5仕様書に含まれてはいますが、HTML5 Logoにある技術的トピックのほとんどは、各自の独立した仕様書で策定されています。こうした仕様書の策定状況もまちまちで、HTML5仕様書と同時にW3C勧告となっているわけではありません。

ですから、HTML5 Logoの内容は、“HTML5”というキーワードを基に広げた大風呂敷のようなもので、仕様という観点からは、「広義のHTML5」と呼んだ方が正しいでしょう。

狭義のHTML5

こうした、「広義のHTML5」概念のうち、文書構造を扱うセマンティックスの部分が従来のHTMLであり、特に各要素の仕様を定義している部分が、コーディングに必要な、言わば「狭義のHTML5」ということになります。

そこでは、HTMLを記述するに当たり、「新設もしくは変更された要素や属性を、どのように使うのか」が、当然、焦点となります。

2010年前半でHTML5が初めて民衆の話題に上ったとき、そこでは動画をブラウザー自体で再生できるようにするvideo要素の存在が、Adobe Flashとの対比で注目されていました。また、それ以前からもスクリプトなどを使って動的に画像をブラウザー上で描画できる、canvas要素なども関心を集めていたようです。

こうした、マルチメディアやWebアプリケーションをサポートする要素も重要かもしれませんが、私自身は、オーソドックスな文章主体のWebサイト作成を志向しているため、やはりオーソドックスな文書構造の定義＝セマンティックスに関心を持っています。

HTML5では、文書構造に関し、いくつかの要素が追加されただけではなく、「セクション」（もしくはセクショニング）という概念が導入され、文章のアウトライン・レベルをより明確に定義できるようになりました。ですから、HTML5を“正しく記述する”ということは、セクションとアウトラインを理解することに他なりません。

また、HTMLの要素（タグ）を扱うにあたって、HTML5では要素を分類する、「カテゴリー」と「コンテンツ・モデル」という概念も導入されました。HTMLコードの記述は、タグを書くことから始まる以上、すべての前提として、この概念も正しく理解する必要があります。

1 2 3 4 5 6 7