本格派エンジニアの工具箱

第32回HTML5によるリッチコンテンツ作成のためのJavaScriptライブラリ「CreateJS」

CreateJSで提供される5つのツール

今回は、4月に公開されたばかりのCreateJSを紹介します。CreateJSはHTML5を利用したリッチコンテンツ作成のためのJavaScriptライブラリ/ツール集です。著名なFlashエンジニアであるGrant Skinner氏が開発しており、ActionScriptに似た使用感を実現している点が大きな特徴と言えます。

CreateJSでは、次の5つのツールが提供されています。

  • EaselJS
  • TweenJS
  • SoundJS
  • PreloadJS
  • Zoe

それぞれ、以下のような機能を備えています。

EaselJS

EaselJSはHTML5のキャンバス上にコンテンツを描画するためのJavaScriptライブラリです。提供されるAPIがActionScript風になっており、Flash開発者ができるだけ違和感なく利用できるように工夫されてる点が大きな特徴です。もちろんJavaScriptの感性も取り入れられており、Canvasを容易に扱うことができるようになっているとのことです。EaselJSで提供される主な機能としては次のようなものが挙げられています。

  • リッチなHTML5コンテンツ
  • Canvasを利用した表示オブジェクト
  • オブジェクトのネスティング
  • マウスインタラクション
  • 開発者に優しいアプローチを採用

TweenJS

TweenJSはシンプルなAPIでトゥイーンやアニメーションを作成することができるライブラリです。数値オブジェクトプロパティによるトゥイーンとCSSによるトゥイーンの両方をサポートしており、シンプルでありながら複雑なトゥイーンの作成にも利用できるとのことです。TweenJSはEaselJSと高い親和性を持っていますが、独立したライブラリであるため単体で使うこともできます。

SoundJS

SoundJSはオーディオ再生のためのAPIを提供するライブラリです。現状、HTML5のオーディオ関連APIは、ブラウザ間での互換性の確保が大きな課題となっています。SoundJSでは抽象化されたAPIを用意することで、ブラウザの独自APIに依存しない形でオーディオ再生機能を利用できるようになっています。特定のデバイスやブラウザ向けに、HTML5のaudioタグとプラグインのどちらを優先して利用するのかを指定できる点も大きな特徴です。

PreloadJS

PreloadJSは、画像や音声、JavaScriptなどといった各種データやコンテンツのプリロードを容易に行えるようにするライブラリです。複数のキューの管理や複数の同時接続、一時キューといった機能がサポートされています。読み込み状況はXMLHttpRequest2(XHR2)を利用しプログレスイベントによって確認・管理することが可能です。XHR2が利用できない場合でも、Tag Loadingへのフォールバックによって読み込み状況の確認が行えるそうです。

Zoe

ZoeはSWFアニメーションをEaselJSを使ったスプライトシートに自動変換することができるAIRアプリケーションです。SWFファイルをZoe上にドラッグするだけで、自動で必要な画像のサイズを検出し、フレームラベルを維持したままでスプライトシートに変換して出力してくれます。その他、ネストされたグラフィックスにも対応しているとのことです。

EaselJSを使ってみる

今回は上記の5つのツールのうち、最も中心的な存在となるEaselJSを使ってみます。CreateJSのソースコードやサンプルコードはGitHubにホストされているので、リポジトリをcloneするか、安定版のアーカイブをダウンロードすることで入手できます。または、HTMLファイル内において<script>タグを使って、CDNのURLを参照)から直接読み込むこともできます。基本的な機能はeaseljs-x.x.x.min.jsに含まれており、ムービークリップに関連する機能のみmovieclip-x.x.x.min.jsという別パッケージとして用意されています。

EaselJSのAPIの基本的な構成ですが、まず表示するオブジェクトを表す基底クラスとしてDisplayObjectクラスがあり、これを継承する形で各種表示オブジェクトやコンテナを表すクラスがあります。主要なクラスを以下に示します。

  • Container - 表示オブジェクトの階層構造を作ることができるコンテナ。
  • Stage - 表示リストのルートとなるコンテナで、canvasへのコンテンツの描画を行う。tickイベントに応じて再描画を行う
  • Shape - Graphicsオブジェクトを表示リストのコンテキストに描画する。
  • Graphics - ベクターグラフィックスを描くための機能を提供する
  • Text - 1行のテキストを描画する
  • Bitmap - ビットマップ画像を描画する
  • Ticker - 指定された時間間隔でtickイベントを発行する

たとえば、Canvas上に円を描画するコードは次のようになります。

<!DOCTYPE html>
<html>
  <head>
    <title>EaselJSのサンプル</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://code.createjs.com/easeljs-0.4.1.min.js"></script>
    
    <script type="text/javascript">
      var canvas;
      var stage;
      var circle;
      
      function init() {
        canvas = document.getElementById('myCanvas');
        stage = new Stage(canvas);
        
        // Shapeを作成してStageに追加
        circle = new Shape();
        circle.graphics.beginFill("#0000FF");
        circle.graphics.drawCircle(0,0,30);
        circle.graphics.endFill();
        
        stage.addChild(circle);
        circle.x = 50;
        circle.y = 50;
        
        //キャンバスを更新
        stage.update();
      }
    </script>
    
  </head>
  <body onload="init()">
    <h1>EaselJSのサンプル</h1>
    <canvas id="myCanvas" width="300" height="300"></canvas>
  </body>
</html>

基本的には、Canvasオブジェクトをコンストラクタに渡してStageオブジェクトを生成し、その上にaddChild()メソッドでShapeオブジェクトを追加します。描画する図形の形や大きさ、色などはgraphicsプロパティを通じて設定します。Webブラウザで表示すると図1のようになります。

図1 EaselJSでCanvasに円を表
図1 EaselJSでCanvasに円を表

次に、Tickerクラスを利用してこの円を動かしてみましょう。まず、TickerのaddListener()メソッドでwindowオブジェクトを登録します。これで、指定された時間ごとにtickイベントが発行されることになります。時間間隔はsetFPS()メソッドで指定します。tickイベントを受け取るのはtick()メソッドです。次の例では、1/30秒ごとに円を少しずつ斜め下に移動します。

    <script type="text/javascript">
      var canvas;
      var stage;
      var circle;
      
      function init() {
        canvas = document.getElementById('myCanvas');
        stage = new Stage(canvas);
        
        // Shapeを作成してStageに追加
        circle = new Shape();
        circle.graphics.beginFill("#0000FF");
        circle.graphics.drawCircle(0,0,30);
        circle.graphics.endFill();
        
        stage.addChild(circle);
        circle.x = 50;
        circle.y = 50;
        
        //キャンバスを更新
        stage.update();
        
        // tickイベント処理の追加
        Ticker.addListener(window);
        Ticker.setFPS(30);
      }
      
      function tick(){
        circle.x += 5;
        circle.y += 2;
        if(circle.x < -30) circle.x = 330;
        else if(circle.x > 330) circle.x = -5;
        if(circle.y < -30) circle.y = 330;
        else if(circle.y > 330) circle.y = -2;
        stage.update();
      }
    </script>

続いてマウスイベントの処理を追加してみます。DisplayObjecに対するマウスイベントのリスナ関数としてはonClick、onPress、onDoubleClickon、onMouseOut、onMouseOverが用意されています。マウスイベントを表すクラスはMouseEventクラスで、Stage上のマウスの座標やイベントの種類などが記録されます。例えば次のようにすれば、円をクリックした時点からアニメーションが開始されるようになります。

    <script type="text/javascript">
      var canvas;
      var stage;
      var circle;
      
      function init() {
        canvas = document.getElementById('myCanvas');
        stage = new Stage(canvas);
        
        // Shapeを作成してStageに追加
        circle = new Shape();
        circle.graphics.beginFill("#0000FF");
        circle.graphics.drawCircle(0,0,30);
        circle.graphics.endFill();
        
        stage.addChild(circle);
        circle.x = 50;
        circle.y = 50;
        
        // マウスクリックリスナーの登録
        circle.onClick = function(evt) {
          // tickイベント処理の追加
          Ticker.addListener(window);
          Ticker.setFPS(30);
        }
        
        //キャンバスを更新
        stage.update();        
      }
      
      function tick(){
        circle.x += 5;
        circle.y += 2;
        if(circle.x < -30) circle.x = 330;
        else if(circle.x > 330) circle.x = -5;
        if(circle.y < -30) circle.y = 330;
        else if(circle.y > 330) circle.y = -2;
        stage.update();
      }      
    </script>

Flash Professional CS6がCreateJSをサポート

CreateJSが注目を集めている要因のひとつは、Flash Professional(Flash Pro)の最新バージョンがCreateJSを使ったHTML5アセットの書き出しをサポートすることです。Flash Proと言えば、Adobe謹製のFlashコンテンツ作成ツールです。そのFlash Proが、FlashだけでなくHTML5のコンテンツを作成するために利用できるようになるということですが、出力されるコードはCreateJSを利用したものになります。したがって、CreateJSの知識があれば、Flash Proで作られたHTML5のコンテンツを手動でカスタマイズできるというわけです。

CreateJSは単体でも優れたライブラリですが、ActionScript風のAPIやFlash Proとの連携などを考慮すると、Flashの経験がある開発者にとってはとくに重要なツールになると言えるでしょう。

おすすめ記事

記事・ニュース一覧