ICS MEDIA - インタラクションデザイン×ウェブテクノロジー

HTML5 と CreateJS で学ぶインタラクションデザイン

簡単な CreateJS のサンプルを試そう

まずは簡単なサンプルを通してCreateJSがどのようなものなのか確認しましょう。次のコードをHTMLファイルにコピー&ペーストして、ブラウザで開くと画面に赤い円が表示されます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
  <script>
    window.addEventListener("load", init);

    function init() {
      // Stageオブジェクトを作成します
      var stage = new createjs.Stage("myCanvas");

      // 円を作成します
      var shape = new createjs.Shape();
      shape.graphics.beginFill("DarkRed"); // 赤色で描画するように設定
      shape.graphics.drawCircle(0, 0, 100); //半径 100px の円を描画
      shape.x = 200; // X 座標 200px の位置に配置
      shape.y = 200; // Y 座標 200px の位置に配置
      stage.addChild(shape); // 表示リストに追加

      // Stageの描画を更新します
      stage.update();
    }
  </script>
</head>
<body>
  <canvas id="myCanvas" width="640" height="320"></canvas>
</body>
</html>

CreateJSはHTML5のcanvas要素を利用します。canvas要素はコンテンツを表示する描画エリアとなります。canvas要素には3つの属性としてid(ID値)とwidth(幅)とheight(高さ)を最低限設定しておきましょう。

<body>
    <canvas id="myCanvas" width="960" height="540"></canvas>
</body>

次にJavaScriptライブラリを読み込みます。CreateJSはJavaScriptのライブラリですが、これを読み込むことによってはじめてCreateJSが利用できるようになります。

<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>

具体的な処理はページの読み込みが終わってから実行させます。addEventListener()関数を使ってloadイベントが発生するのを監視させ、ページが読み込み終わったときに実行させたい関数を指定します。この関数init()の中にCreateJSのコードを書いていきます。

<script>
window.addEventListener("load", init);
function init(){
    // 処理
}
</script>

ここからは関数init()の中にコードを書いていきます。まずはcreatejs.Stageクラスを使ってステージを作成します。createjs.Stageクラスの引数にはcanvas要素のid値に指定します。stage変数とは舞台と考えておくといいでしょう。

// Stageオブジェクトを作成。表示リストのルートになります。
var stage = new createjs.Stage("myCanvas");

createjs.Stageクラスの詳しい使い方は「公式ドキュメント(英語)」を確認ください。

createjs.Shapeクラスを使って円のシェイプ(図形)を作成します。

createjs.Shapeクラスの機能は後述で詳しく説明します。現時点ではグラフィックの描き方を理解する必要はありません。

// 円を作成します
var shape = new createjs.Shape();
shape.graphics.beginFill("DarkRed"); // 赤色で描画するように設定
shape.graphics.drawCircle(0, 0, 100); //半径100pxの円を描画

シェイプ(図形)を作成したものの、上記のコードではプログラムの中で作成したに過ぎないので、ステージに登場させ見えるようにする必要があります。addChild()という命令はステージに登場させるために必要な命令です。

stage.addChild(shape); // 表示リストに追加

最後にCreateJSで処理した結果をcanvas要素に反映させます。stage.update()関数を使って反映させましょう。

// Stageの描画を更新
stage.update();

update()メソッドの詳しい使い方は「公式ドキュメント(英語)」を確認ください。

これがCreateJSの簡単なサンプルです。具体的に一つずつ順番に理解していきましょう。

次の記事へ