作成日

22 October 2012

ADC MEETUP Round 06「CREATE THE WEB TOUR」のセッション3ではJavaScriptライブラリ「CreateJS」の開発者であるGrant Skinner氏が自らCreateJSの最新情報を紹介しました。

 

(01:50) まずセッションの冒頭では、自分たちの会社で開発したという CreateJS を使ったアーケードゲームを簡単に操作して見せました。

(02:30) 続いて、Dom Perignon(ドンペリ)のサイトの画面を表示しながら、CreateJSがすでに実際の企業サイトでも使用されていることを紹介しました。

(02:50) 同氏は、CreateJS の利用されるターゲーットとして想定されている環境はいくつもあり、主なものとしてはWeb、モバイルデバイス、埋め込みデバイス、デバイス、そして電子出版があると語りました。これらのどの環境でも、タッチ操作を想定したインタラクションとアニメーションを提供できるとのことです。

(04:50) 次に、CreateJS を設計する際に重視したという4つの基本概念が紹介されました。

1つ目は、とりかかりやすいこと。はじめに色々なことを学ばなくてもすぐに開発が始められるよう、多くの人にとって見覚えのある Flash Player の表示リストに良く似た API が提供されています。

2つ目は、モジュール化。フレームワークが個々の機能ごとに分割して開発されているため、必要なモジュールだけ組み込めばよく、機能拡張も個別に進めることができます。

3つ目は、拡張性。新しい機能や環境に適用できることが重要であるという考えのもとに設計されているとのことです。

4つ目は、オープンであること。様々な協力者とも協業しており、アドビやマイクロソフトも主要なパートナーであることも紹介されました。

続いて、CreateJS を構成する個々のライブラリの簡単な紹介が行われました。

(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 といったクラスが確認できました。

(10:20) その中で具体的な使い方が解説されたのはBitmapAnimation です。

CreateJS でスプライトシートを定義するには、画像ファイルに加えてframe と animations という属性を指定します。これを BitmapAnimation のコンストラクタに渡すだけで、スプライトシートを利用したアニメーションを実現することができます。onClick() を使ってインタラクションを追加したり、onTick() を使ってアニメーションを追加することも簡単に行えるとのことです。

(13:00) 表示クラスからは、DOMElement も紹介されました。DOMElement は HTML 要素を EaselJS の表示リストから利用するためのクラスです。デモでは、div 領域を他の EaselJS の要素と一緒にアニメーションさせる様子が示されました。テキスト要素のように canvas では扱いにくい表現も、DOMElementであれば簡単に組み合わせられるというのが利点とのことです。

(14:20) CraeteJS の2つ目のライブラリとして紹介された 「TweenJS」は、トゥイーンを使ったアニメーションを実現するためのライブラリです。トゥイーンに表示オブジェクトとその動きを指定するコードと、そのコードの実際の動作がデモによって紹介されました。トゥイーンにはイージングも設定できます。複数のアニメーションを時系列順に指定することもできるようになっています。

(16:45) CreateJS の3つ目のライブラリ 「SoundJS」 は、音声をWebで容易に扱えるようにするものです。様々な種類のオーディオに対応する抽象化された共通のAPIが定義されており、オーディオの種類によってコードを使い分ける必要がないようになってます。

(18:00) 最後に紹介された 「PreloadJS」 は、アセットの読み込みをスムーズにするためのライブラリです。キューに対して必要なアセットを指定すると、バックグラウンドで読み込みを行い、読み込み状況を伝えるイベントを発生させます。

(19:30) スプライトシートを生成するためには「zoe」 というツールも提供されています。もちろん、 Flash Professional を使うこともできます。

(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記事:
Flash Professional Toolkit for CreateJSの使用
Flash Professional Toolkit for CreateJSのファーストステップガイド