この記事を読むのに必要な時間：およそ 1.5 分
ちょっとわかりにくいかもしれませんが，まずは図1をご覧ください。マウスの動きに合わせて円のグラフィックが次々に現れては消え，また次々に現れます。そして図2はグラフ。数値を表す棒がぐにゅーんと伸びて，やがてストンと止まり，棒グラフができあがります。前者は，マウスの動きにインタラクティブに反応するグラフィック。後者はアニメーションするグラフです。
図1 マウスを動かすと，その軌跡にそって円のグラフィックが次々と表示される。CreateJSを構成するライブラリの1つであるEaselJSで，マウス座標を管理することによって実現している
↓
↓
図2 棒がアニメーションしながら伸びていき，やがて棒グラフとなる。これもCreateJSを構成するライブラリの1つである，TweeenJSによって実現している
↓
↓
Webで見かけるこうしたインタラクションやアニメーションといえば，以前はFlashで作られていることが多かったものです。しかし，現在ではHTML，つまりWebの標準技術で作ることができます。
いま「HTML」と書きましたが，現在のHTML5は，CSS3からアプリ開発向けAPIまで範囲が広く，さきほどのサンプルは，HTML5の新機能であるCanvasを利用しています。HTML上にcanvasタグを記述したうえで，具体的なグラフィックや動きをJavaScriptで記述していきます。
ただし，CanvasのAPIは低レベルの設計のため，そのままでは使い勝手が悪いもの。そこで，サンプルではCreateJSというフレームワークを利用しています。
ちなみに，CreateJSを構成するライブラリの1つ，EaselJSには，Flashのクラスとよく似た名前のクラスが用意されています。ですから，これまでFlashでつちかった技術や経験を，Web標準のもとで無理なく展開していくことが可能です。
このCanvasを大きく取り上げたHTML5書籍が6月に発売されました。『HTML5インタラクティブ表現ガイド
～HTML5，CSS3，Canvas，CreateJS，JavaScript～』です。「インタラクティブ」というキーワードのもと，Canvasだけなく，CSS3，JavaScriptなどを使った幅広い表現方法を紹介しています。
ここで取り上げたサンプルについても，本書でくわしく解説しています。ありきたりのHTML5表現では満足できない方は，ぜひご一読ください。
