デザインテクノロジーの最前線 - 桐山孝司

m.c.t.ホーム > エクスペリエンスマガジン > デザインテクノロジーの最前線 - 桐山孝司 > コミュニティベースで開拓されるHTML5のインタラクティビティ

2010.05.17コミュニティベースで開拓されるHTML5のインタラクティビティ

HTMLの新バージョンであるHTML5では、従来Flashなどのプラグインでしか扱えなかったインタラクティブなコンテンツをウェブブラウザの機能で直接表示できるようになる。HTML5の規格自体はまだワーキングドラフトだが、すでに主要ブラウザでは使えるようになっている状況である。特にiPhoneやiPadなどAppleの端末では今後Flashが使えない見込みのため、Flashを必要とせずにインタラクティブなコンテンツを提供する手段としてHTML5は一層期待されている。

HTML5のインタラクティブ性の中心になるのは、新しく導入されたCanvas要素である。従来のHTMLではあらかじめページソースに指定された文字や画像しか表示できなかったのに対して、Canvas要素は描画コマンドに従ってリアルタイムに表示を作ることができる。そのためダウンロード後にも更新されるデータの視覚化や、マウスやキーボードなどの入力に反応するゲームなどのアプリケーションに適しているのである。

たとえばmugtug.comが公開しているSketchPadは、画面に絵を描くペイントツールである。ユーザはブラシやスタンプを使い、マウスで絵を描いていくことができる。保存アイコンを押すとそれまでに描いた絵のPNG画像が別ウィンドウに表示されるので、これを保存すれば描画した絵をファイルに残すこともできる。これがコンピュータにインストールして使うのであればごく普通のペイントソフトだが、SketchPadは完全にHTML5ベースのオンラインツールで、JavaScriptのソースコードも見ることができる。使ってみると感心するほど動作も軽いのだが、その背後にはCanvas要素のAPIが描画コマンドを一手に引き受けて実行しているわけである。

ただCanvas要素のAPIには、線を引いたり画像を表示したりするような基本的なコマンドしか用意されていない。それらをJavaScriptで組み合わせて描画することになるのだが、JavaScript自体は汎用的な言語なのでゲームやアニメーションなどの複雑なアプリケーションを効率よく開発するには特化したフレームワークが必要になる。この点でもすでに、JavaScriptの開発を効率化するライブラリjQueryの作者として有名なJohn Resigがリードしておもしろい展開が起きている。彼らはデータ視覚化やアニメーション向けの言語Processingで書いたプログラムを、そのままHTML5でも動かせるようにしているのである。

Processingは、もともとMITメディアラボにいたBen FryとCasey Reasが開発した言語である。Javaをベースにしているため、主要なプラットホームで同じプログラムが動くという大きなメリットがある。しかもグラフィックスやアニメーションの表現者が使いやすいように、毎フレームごとに描画コマンドが繰り返し実行されるような枠組みを提供している。ただしProcessingで作ったプログラムはJavaアプレットとしてウェブページに組み込まれるため、同じページ内のHTML部分と連携させることは難しい。これに対してHTML5に取り込まれたProcessing.jsは、Processingと同じコマンドを書くだけでCanvas要素への描画が実行されるようになっている。Processing.jsはJavaScriptのプログラムの一部としてウェブページに組み込まれるので、ページ内の他のJavaScript部分とも連携が取れるようになっている。つまりProcessing.jsは、ゲームやアニメーションなどのプログラミングに適したProcessingのフレームワークとコマンドを引きついで、HTML5のCanvas要素に対して動作するようにJavaScriptを使って再構成したわけである。

Processingの開発には既にかなり長い時間がかかっており、2001年頃に着手されて以降、オープンソースプロジェクトとして多くの協力者を得て、2008年には正式にバージョン1.0が出された。Processing.jsの開発も2008年頃に始まり、当初はHTML5でこんなこともできるのかと驚きをもって迎えられた。その後オープンソースとして開発が進み、現在ではバージョン0.9となっているので、近々正式版もリリースされそうである。オープンソースプロジェクトのおもしろいところは、Processingのように良いプロジェクトであれば長い時間がかかっても着実に進化していき、またその途中でProcessing.jsのような他の有用なプロジェクトにも取り込まれたりすることである。

HTML5はプログラミングが関わるところが大きいため、様々なオープンソースプロジェクトから有用なフレームワークやツールが出てくる可能性がある。これまでのHTMLはどちらかというと規格中心であったのに対して、HTML5は利用者中心の開発によって有用なツールが増えていくことを期待して注目しておきたい。

sketchpad.JPG

SketchPadの画面(http://mugtug.com/sketchpad/)