以下、講演の経過時間とともにダイジェストを紹介しますので、ぜひセッションムービーと併せてご確認ください。
（この記事は、アドビ システムズ 株式会社発行の「Adobe Developer Connection」から許可を得て転載したものです）
CreateJSの利用シーン
（01:50）まずセッションの冒頭では、自分たちの会社で開発したというCreateJSを使ったアーケードゲームを簡単に操作して見せました。
（02:30）続いて、Dom Perignon（ドンペリ）のサイトの画面を表示しながら、CreateJSがすでに実際の企業サイトでも使用されていることを紹介しました。
ターゲット想定環境
（02:50）同氏は、CreateJSの利用されるターゲットとして想定されている環境はいくつもあり、主なものとしてはWeb、モバイルデバイス、埋め込みデバイス、デバイス、そして電子出版があると語りました。これらのどの環境でも、タッチ操作を想定したインタラクションとアニメーションを提供できるとのことです。
4つの基本概念
（04:50）次に、CreateJSを設計する際に重視したという4つの基本概念が紹介されました。
1つ目は、とりかかりやすいこと。はじめに色々なことを学ばなくてもすぐに開発が始められるよう、多くの人にとって見覚えのあるFlash Playerの表示リストに良く似たAPIが提供されています。
2つ目は、モジュール化。フレームワークが個々の機能ごとに分割して開発されているため、必要なモジュールだけ組み込めばよく、機能拡張も個別に進めることができます。
3つ目は、拡張性。新しい機能や環境に適用できることが重要であるという考えのもとに設計されているとのことです。
4つ目は、オープンであること。様々な協力者とも協業しており、アドビやマイクロソフトも主要なパートナーであることも紹介されました。
ライブラリ紹介
続いて、CreateJSを構成する個々のライブラリの簡単な紹介が行われました。
EaselJS
（06:40）1つ目に紹介された「EaselJS」はCreateJSの中心となるライブラリで、表示リストの基本機能が実装されています。
基本となるコード
（07:05）ここでは基本となるコードを見せながら、HTMLのbodyタグにCanvasが定義されていること、scriptタグでライブラリを読み込んでいることなどが示されました。コードはscriptブロック内にも記述されており、stageのインスタンスが生成されています。
（08:15）CreateJSでは、いつ表示を更新するかを制御できます。そのため、update()メソッドを明示的に呼ばなければ画面の更新は行われません。
（08:40）アニメーションを実現するためTickerが用意されています。デフォルトでは毎秒20回、イベントリスナとして登録されたオブジェクトのtick()を呼び出す仕様になっています。
基本表示クラス
（09:40）続いて、基本となる表示クラスの一覧が示されました。スライドからは、Shape&Graphics、Bitmap、Text、Container、Stage、BitmapAnimation&SpriteSheet、DOMElementといったクラスが確認できました。
BitmapAnimation
（10:20）その中で具体的な使い方が解説されたのはBitmapAnimationです。
CreateJSでスプライトシートを定義するには、画像ファイルに加えてframeとanimationsという属性を指定します。これをBitmapAnimationのコンストラクタに渡すだけで、スプライトシートを利用したアニメーションを実現することができます。onClick()を使ってインタラクションを追加したり、onTick()を使ってアニメーションを追加することも簡単に行えるとのことです。
DOMElement
（13:00）表示クラスからは、DOMElementも紹介されました。DOMElementはHTML要素をEaselJSの表示リストから利用するためのクラスです。デモでは、div領域を他のEaselJSの要素と一緒にアニメーションさせる様子が示されました。テキスト要素のようにcanvasでは扱いにくい表現も、DOMElementであれば簡単に組み合わせられるというのが利点とのことです。
TweenJS
（14:20）CraeteJSの2つ目のライブラリとして紹介された 「TweenJS」は、トゥイーンを使ったアニメーションを実現するためのライブラリです。トゥイーンに表示オブジェクトとその動きを指定するコードと、そのコードの実際の動作がデモによって紹介されました。トゥイーンにはイージングも設定できます。複数のアニメーションを時系列順に指定することもできるようになっています。
SoundJS
（16:45）CreateJS の3つ目のライブラリ 「SoundJS」は、音声をWebで容易に扱えるようにするものです。様々な種類のオーディオに対応する抽象化された共通のAPIが定義されており、オーディオの種類によってコードを使い分ける必要がないようになってます。
PreloadJS
（18:00）最後に紹介された「PreloadJS」は、アセットの読み込みをスムーズにするためのライブラリです。キューに対して必要なアセットを指定すると、バックグラウンドで読み込みを行い、読み込み状況を伝えるイベントを発生させます。
Flash Professional
スプライトシート生成ツール「zoe」
（19:30）スプライトシートを生成するためには「zoe」というツールも提供されています。もちろん、Flash Professionalを使うこともできます。
拡張機能「Toolkit for CreatreJS」
（21:00）CreateJSに関連して、Flash Professionalには「Toolkit for CreatreJS」という拡張機能が提供されています。これはFlash Professionalで作成したコンテンツから、CreateJSを利用したHTML5ベースのコードを生成するためのものです。
（21:30）Toolkit for CreateJSは、単なる書き出し機能ではないとSkinner氏は指摘します。これは新しいパブリッシュワークフローを実現するものだからです。
Skinner氏自身、開発者として読みやすいコードを生成することはとても大事だと感じているそうです。その点でToolkit for CreateJSは、デザイナーと開発者の共同のワークフローを容易にすることにも役立っているとのことです。
（23:00）実際にデモも行われ、Flash Professionalで制作したコンテンツをHTMLにパブリッシュして、そのままブラウザー内で動作する様子が示されました。
（24:20）デバイスではベクターの処理はあまり高速ではないため、スプライトシートの利用が改善されるように、最近のバージョンで SpriteSheetBuilder が追加されました。
（25:25）デモで使用された例では、単純なスプライトシートの書き出しに比べて、ファイルサイズが99%以上削減されたとのことでした。
最後に
（27:30）セッションの最後には、最新の事例として、EaselJSとCSSフィルターを使用したサンプルも公開されました。これは現在標準化が進められているCSS Filterという新しいCSS機能を利用して音楽の可視化を実現したものです。音楽に合わせて3Dの球の上に描画されている模様が動的に変化する様子が示されました。
最後に、詳しい情報はCreateJS.comを見て欲しいという言葉でセッションは締めくくられました。
この連載は、ADC（Adobe Developer Connection）にて紹介されているものです。Adobe社製品の最新技術情報は、ADCをご覧ください！
