次期HTMLの標準規格として提案されるべく策定が進められている「HTML 5 Working Draft」だが、同規約にはWebアプリケーションの可能を引き上げる可能性を持った要素「The Canvas Element」が含まれている。The Canvas Element(以下、Canvas)はJavaScriptから直接2Dイメージを描画するための2Dビットマップサーフェス要素。もともとは「Web Applications 1.0 - Working Draft」において規定されてきた要素だが、HTML 5において検討されるようになったことから、将来的にHTML標準の要素になる可能性が出てきた。
Canvasを使うとFlashやJavaを使わなくともWebページにイメージ描画が実現できる。まだ標準仕様になっているわけではないが、すでにFlog.RayTracer Canvas、ColorJack、Canvas 3D Renderer & 3D Walker、CALC5などCanvasを活用したWebアプリケーションが登場している。ここではそうしたCanvasを使ったWebアプリケーションとして「XRAY」を紹介したい。Webアプリケーションの将来を予想させる興味深いアプリケーションだ。
XRAYはサイトに行って使ってみるのが一番わかりやすい。同サイトにはブックマークレットが用意されているので、これをブックマークする。図1なら右上のショートカットが登録された「□XRAY」がXRAYのブックマークレットだ。
|
|
図1 XRAYのサイト - 「XRAY」と書いてあるブックマークレットをブックマークに追加 |
登録したブックマークレットを実行するとXRAYが起動する。黒いインナーウィンドウが起動するので、インナーウィンドウはそのままにしてページをクリックしてみよう。ボックスごとに画面が選択され、上下左右の長さ、マージン、パディングが表示される。いくつか実行例を次にあげておく。
|
|
図2 黒いインナーウィンドウが表示されている間はXRAYが動作している |
|
|
|
図3 ページをクリックすると、クリックした対象が存在しているボックスが強調表示される |
図4 表示される情報は縦横の長さ |
|
|
図5 インナーウィンドウには長さ以外にもマージン情報やパディング情報が表示されている |
動作確認がとれているのはFirefox、CaminoなどのMozilla系Webブラウザと、Safari 2/3、Webkitのナイトリービルド。Canvasを使っているためIE系ブラウザでは動作しない。Operaの対応はまだ行われていないようだが、近い将来には対応する見通しになっている。IEへの対応作業は進行中のようだ。
XRAYはWebデザイナやデベロッパがCSS/HTMLの出力を確認する場合に便利に使えるアプリケーションだ。Firebugで同じことができるが、こちらは種々の解析も実施するためヘビーユース向けだ。デザインの確認だけしたいならXRAYの方がお手軽である。XRAYはCanvasが実現するWebアプリケーションの未来像を見通すうえでも参考になる。こうしたWebアプリケーションは今後さらに増えることになるだろう。
