HTML 5＋JavaScriptでCanvasアプリを作る
次世代HTML標準「HTML 5」とは？
現在、XHTML 1.0がWeb制作の現場では当たり前のように使われていますが、HTML 4.01の次バージョンにあたる「HTML 5」という規格が次のHTML標準となりそうです。
HTMLからXHTMLの進化によって属性値をクオートで囲むとか、空タグもきちんとスラッシュで閉じるといったXHTMLコーディングのお約束が、Web制作者側に当然のように強いられてきました。こういった厳密なコーディングを必要とするXHTMLは、HTMLのような良い意味でのシンプルさが無かったため、結果的に爆発的な普及にはいたりませんでした。
現場のWeb制作者たちが集まって発足された非公式な団体「WHAT WG」が2004年6月に発足されました。WHAT WGは独自に「HTML 5」の仕様策定をスタートさせ、その3年後となる2007年5月に標準化団体であるW3C内にて標準化に向け策定作業が行われるようになりました。この策定作業の作業部会にはAOL、Apple、Google、IBM、Microsoft、Mozilla Foundation、Nokia、Opera等の代表者といった参加者で構成されており、透明性の高いものになっています。
HTML 4からHTML 5への進化により何が変わったのでしょうか。Webコンテンツを制作する側としては、進化することにより追加／廃止になったそれぞれの要素／属性を知っておく必要があるでしょう。
HTML 5で追加された要素は以下になります。
section、article、aside、header、footer、nav、dialog、figure、audio、video、source、embed、mark、meter、time、canvas、command、detailes、datatemplate、rule、nest、event-source、output、progress、ruby、rt、rb
また、HTML 5で削除された要素は以下になります。
basefont、big、center、font、strike、tt、u、frame、frameset、noframes、acronym、applet、isindex、dir
新たに追加された要素が、実際どのようにマークアップ例は図1-1、要素の分類については図1-2をご覧ください。
また、すでにHTML 5の文法の妥当性を検証するWebサービス「HTML5 Validators（http://validator.whatwg.org/）」がありますので、HTML5 でのマークアップの練習を手軽にはじめることができます。
HTML 5で追加されるCanvasとは
はじめに、HTML 5で追加される「Canvas」という要素について紹介していきます。
Canvasとは、2次元ベクターグラフィックスを描画するためのオブジェクトです。Adobe Illustratorなどで作ることができるベクター画像を、専用のソフト無しにブラウザに、標準実装されたAPIにJavaScriptを使って操作することにより、図形を作成することができるのです。
Canvasと同じようなものには、W3Cが勧告をしている「SVG」や、Microsoft社が開発した「DrawingML」「VML」といったベクターグラフィック言語がありますが、どれも爆発的な普及にはいたっていません。
このCanvasという仕様は、もともとApple社が開発したものでSafariに独自実装されていました。しかし、現在ではMozillaやOperaといったモダンブラウザも、このCanvasをすでに実装しています。また、HTML 5の標準仕様として策定されるので今後の普及が見込まれるでしょう。今回はこのCanvasを使い、いろいろなベクター図形をブラウザ上に描画してみたいと思います。
Internet Explorer（IE）はCanvas要素に対応していませんが、Google社が提供しているExplorerCanvas（http://excanvas.sourceforge.net/）というJavaScriptライブラリを用いることにより、IE上でCanvas要素のサポートをエミュレートすることができるようになります。
ダウンロード（http://sourceforge.net/project/showfiles.php?group_id=163391）して展開したファイルの中に「excanvas.js」というファイルがあります。このファイルを読み込まれるようにhead内に記述します。
このように記述することでIEで閲覧した場合でも、画面上にいろいろな図形を描画できるようになります。
