第4回　HTML5の注目機能「canvas要素」

株式会社まぼろし

2008年8月設立。アクセシビリティ，ユーザービリティ，CMSの導入，SEO/SEMといったWebサイト制作から，ROIを意識したブランディング，ソーシャルメディアを用いたユーザーとのコミュニケーションの最適化など，マーケティング活動までを手がけるクリエイティブユニット。

　今回は最近話題のHTML5について取り上げます。HTML5はまだ正式に発表される前の段階ですが、Firefox、Google Chrome、Safari、Operaなどの新しいブラウザが仕様の一部を取り入れ始めています。新機能の中でも特に注目されているcanvas要素は、Flashなどのプラグインを使わずにブラウザ上に図などを描くために策定された仕様です。

HTML5で新たに追加される要素

　HTML5は現在ウェブページ向けマークアップ言語の主流であるHTML4.01が持つ多くの要素を引き継ぎつつ、Webアプリケーションの実装に便利な機能が加わったものです。XHTML2.0の標準化作業を進めていたワーキンググループが2009年をもって活動を中止することを発表したことで、より一層HTML5が注目されるようになりました。現時点では2012年に標準勧告(※1)を目指して、W3Cが策定作業を進めています。

　HTML5では、新たに多くの要素や属性が追加されます。header要素やfooter要素のように、今まではdiv要素にidやclassを付与してマークアップすることで実現していた仕様が、要素として新たに定義されます。

　追加される主な要素は表1の通りです。

　要素だけでなく、autofocus属性やplaceholder属性などフォームの機能を強化する属性も多く追加されています。こうした機能強化により、従来はJavaScriptが必要だったUIの実装が、HTMLだけで実現できるようになります。

　以降では、新しい要素の中でも特に注目したいcanvas要素について紹介していきます。

canvas要素は図形やアニメーション効果を実装できる

　canvas要素は「HTML＋JavaScript」で図形やアニメーション効果を実装できる要素です。canvas要素は、HTML5が策定中であることに加えて、Internet Explorer(以下IE)が現在のバージョンでcanvas要素をサポートしていないため、積極的に実務レベルで使える段階とは言えません。しかし、現場でも少しずつcanvas要素が使用され始めている印象を受けます。

　例えば、株式会社ピクセルグリッドのアクセスページでは地図上に駅からの経路を表示する目的でcanvas要素が用いられています。Firefoxなどcanvas要素をサポートするブラウザで見ると、テキストリンクで記載されている複数の出発地点のうち一つを選択すると、地図上で該当する出発点から会社までの経路が描画されます。

　canvas要素を使用せずにこの機能を実装するとなると、Flashを使用するか、あるいは考えられる経路のパターンのぶんだけ画像を準備することになります。canvas要素を使用すれば準備する画像は一つで済みますし、経路の修正も楽になるはずです。

　このようにユーザーの動作によって画像の一部を切り替えるような場合、canvas要素はとても便利です。例えば、canvas要素で描いた円グラフを、ユーザーが選択した条件によって項目の色や値を変更するというような使い方もできますね。

　先日ようやく私もiPhoneを購入したのですが、iPhoneはFlashに対応していないため、サイトを訪れてもFlashコンテンツとして提供されている情報を閲覧できずに困ることがあります。iPhoneが搭載するブラウザのsafariはcanvas要素に対応しているので、こうしたコンテンツをcanvas要素で記述すれば、iPhoneでインタラクティブなコンテンツを閲覧できるようになります。

　もちろん今まで画像で表現したりFlashで作成していたものをすべて代用できるわけではありません。新しい表現方法の一つとして、今後少しずつ使う機会が増えていく予感がします。