CreateJSとは

CreateJSは、Canvasを便利に扱うためのライブラリ群で、JavaScriptの知識があればHTML5のCanvasを直感的に制御し、コンテンツを作ることができます。CreateJSというと、Flash経験者のためのライブラリと捉えている人がいるかもしれませんが、JavaScriptでコードを書いた経験があれば、だれでも使いこなすことができます。

現在のところFlashがかつてになっていたウェブ上のダイナミックな表現を可能にするツールとしても注目されています。

これまで、ウェブの動的コンテンツと言えば、CSSの値を変化させ要素を動かすことが中心でした。しかし、私達、フロントエンドエンジニア／マークアップエンジニアはHTML5の普及により、Canvasという新たな表現の場を手に入れています。

スマートフォンなどのプラットフォームではFlashが動作しないということもあり、2D Canvasの需要はすこしずつ増えていくでしょう。2D Canvasのメリットは以下のようにまとめることができます。

• 2D Canvasは、IE9以降やiOS、Android上でも動作します。
• 2D Canvasの表現は、DOM操作に比べて高速で処理できます。なぜなら、DOM操作はリフロー／リペイント（再構築と再描画）が常につきまとうからです。
• Canvas要素の範囲内であれば、グリッドの概念にとらわれず、さまざまな描画オブジェクトを自由に配置することができます。

一方で、Canvasで作成するコンテンツはひとつのcanvas要素のなかで完結するということもあり、DOMイベントの設定が難しいという印象を持っている人もいるかもしれません。しかし、CreateJSでは、Stage（Canvas）内に表示しているオブジェクトに、さまざまなイベントを設定することもできます。ほかにもコンテンツを作るために充分なAPIが整備されており、他に存在するCanvasラッパーライブラリ、例えばPaper.jsやFabric.jsよりも、実用に適していると言えます。

機能を知る

さて、もうすこしだけCreateJSについて紹介しましょう。

CreateJSの構成

CreateJSは実際は4つのライブラリからなるライブラリ群で次のライブラリによって構成されています。

• Canvasの表示を担当するEaselJS
• アニメーションを担当するTweenJS
• 音の制御を担当するSoundJS
• 外部ファイルの非同期読み込み読み込みを担当するPreloadJS

ドキュメンテーション

CreateJSを構成するそれぞれのライブラリについてはドキュメントが整理されており、必要に応じてAPIの細かな仕様を確認することができます。

CreateJSを構成する各ライブラリの仕様ドキュメント

• EaselJSのAPIドキュメンテーション
• TweenJSのAPIドキュメンテーション
• SoundJSのAPIドキュメンテーション
• PreloadJSのAPIドキュメンテーション

また、基本的なサンプルも同サイト内にいくつかありますので、そこからも、CreateJSできることとそのためのコードを知ることができます。

CreateJSで表現できる一例

次の例はCreateJSでできる表現のほんの一例です。どんな機能を持っているのか、おおまかにつかんでもらえればと思います。

静止画読み込み

任意の画像をステージ（canvas）上に読み込むことができます。なお、ステージ上に配置されているそれぞれのパーツは、表示オブジェクト（Display Object）といいます。

変換（移動／伸縮／回転）

図形や画像などの表示オブジェクトは、ステージ（canvas）上で移動、伸縮、回転をすることができます。

スプライトシートのアニメーション

スプライトシートを用意すれば、そのアニメーションつきの表示オブジェクトを生成できます。

アニメーションの1コマ、1コマを配置してある。

フィルター効果（輝度、コントラスト、ぼかしなど）

表示オブジェクトに対して、ピクセル操作が可能です。そのため輝度や、コントラスト、ぼかしなどのフィルター効果が再現できます。

次のデモではコントロールバーでブラー、輝度、コントラスト、彩度が調節できるのがわかります。

各表示オブジェクトに対するイベント制御

それぞれの表示オブジェクトに対して、click、mousedownなどのさまざまなmouseイベントを設定することができます。また、任意のタイミングで独自イベントを発行することも可能です。これはjQueryにおけるtriggerを想像するとわかりやすいでしょう。

イージングを使ったアニメーション

表示オブジェクトに対し、さまざまなイージングを適用しながら動かすことができます。

サウンドエフェクトの再生

任意のタイミングで音声の再生が可能です。mp3、oggの振り分けはSoundJSで受け持ってくれます。こうしておけば、Firefoxなどoggにしか対応していないブラウザも問題なく機能するページとなります。

次のデモでは、［play BGM］ボタンをクリックすると、BGMが流れ、それぞれのアイテム画像をクリックすると、それに合ったサウンドエフェクトが再生されます。BGMを再生しながら、それと同時にサウンドエフェクトが再生されていることに注目してください（BGM: copyright jobromedia）。

いかがでしょうか。CreateJSを経由しcanvasを活用することで、DOMでは再現できないような複雑な表現も可能になるというわけです。ここで紹介した例のコードは次回以降で解説していく予定です。

CreateJSの使用事例

実際にCreateJSで作成された事例も存在しています。DOMでは難しい表現でもCreateJSを採用することにより、その制限を克服できているのがわかるでしょう。

特にゲームであれば、DOMによる表示より、Canvasが向いているといえるでしょう。

すべてCanvasというわけではなく、テキストはDOM、表示はCanvasという切り分けという選択もあります。

CreateJSを利用する際の概念

CreateJSを利用する場合、HTMLを書いてCSSで調整といったフローとは違い、一定のフローに沿ってコンテンツを作っていきます。これはCreateJSにかかわらず、three.js、Paper.jsなど、表示系のJSはほとんど同じ考え方です。

次回以降に予定している細かいコードの解説の前に、利用手順を解説します。ステージと表示オブジェクトの関係について知っておきましょう。

1. まず最初にステージを用意します（以前、CodeGridで話題にしたthree.jsの場合はsceneが同様の機能でした）。
2. つぎに、表示オブジェクトを作成します。
3. 作成した表示オブジェクトをステージに配置します。
4. ステージを表示します（オブジェクトを配置しただけでは反映されません。またステージ内で変化が起こった場合も、必ず表示を更新する必要があります。なお、three.jsではrenderer.render()が同様の機能でした）。

「ステージ」と「表示オブジェクト」の関係をきちんとおさえておく必要があります。

ここでは一部、CreateJSとthree.jsを比較してみましたが、表示系のライブラリは利用方法のフローが似ているということを少しご理解いただけたでしょうか。

three.jsの解説

three.jsに関してはシリーズ「WebGLの基礎」で詳しく解説しています。three.jsの利用手順は「THREE.jsを使う」で解説しています。

つまり、他の表示系ライブラリを使った経験があれば、CreateJSの飲み込みが早いでしょうし、これからCreateJSを始めるのであれば、今後、他の表示系ライブラリを利用する際に、その知識がそのまま役に立つでしょう。

次回はCreateJSでもっとも重要なライブラリであるEaselJSの書き方をご紹介します。