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

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

ツール, OSS, Java, プログラミング, 開発, Webアプリケーション, CreateJS

この記事を読むのに必要な時間：およそ 4 分

次に，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の経験がある開発者にとってはとくに重要なツールになると言えるでしょう。

ツール, OSS, Java, プログラミング, 開発, Webアプリケーション, CreateJS

著者プロフィール

杉山貴章（すぎやまたかあき）

ONGS Inc.所属のプログラマ兼テクニカルライター。雑誌，書籍，Webメディアで多数の著作をもつ。

著書