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

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

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

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に円を表

著者プロフィール

杉山貴章(すぎやまたかあき)

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

著書

コメント

コメントの記入