CreateJSを使って動きのあるWEBページを作りたい！ ～図形の描画～
最近のWEBページってたくさん動きますよね！
イケてるサイトとか見ると自分もそんなサイトを作ってみたい…
そんなことを思う今日この頃です(￣∇￣*)
そこで今回は、ローディング画面のようなちょっとした動きを手軽に作れるCreateJSを学んでいきます。
CreateJSを使って動きのあるWEBページを作りたい！ ～図形の描画～
CreateJSを使って動きのあるWEBページを作りたい！ ～クリック処理～
CreateJSを使って動きのあるWEBページを作りたい！ ～Tickerで動かす～
CreateJSを使って動きのあるWEBページを作りたい！ ～Containerでまとめる～
CreateJSとは
そもそもCreateJSって何？どんなことができるの？
まずはそこを紹介していきます。
CreateJSとは
HTML5でリッチな表現を実現するためのJavaScriptのライブラリ群になります。
そのため、JavaScriptが書けない！という人はまずJavaScriptを勉強しましょう。
リッチな表現については後述するCreateJSのデモを見ていただければイメージがつきやすいです。
【公式ページ】
http://www.createjs.com/
CreateJSでできること
CreateJSでできることとして、CreateJSの公式ホームページにデモがあるのでいくつか紹介します。
【ドラッグ＆ドロップでオブジェクトが移動する】
http://www.createjs.com/demos/easeljs/draganddrop
【ゲーム】
http://www.createjs.com/demos/easeljs/game
【モザイクを消す】
http://www.createjs.com/demos/easeljs/alphamaskreveal
そのほかにも気泡のようなヘッダーを作成したりなど動画のような表現が可能になります。
こういった表現ができるとホームページのちょっとした箇所に動きを与えることができ、いい感じのホームページへ近づくのではないでしょうか。
CreateJSを使い方
さっそく使ってみましょう！
今回は簡単な図形をキャンバス上に表示していきます。
CreateJSの読み込み
CreateJSは、JavaScriptのライブラリなのでjQuery等のようにHTMLで以下の文で読み込んで使用します。
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
canvasの準備
CreateJSはcanvasを使用して図形等の描画をしていきます。
HTMLの図形を出したい位置にcanvasを準備します。
今回は、600×600の大きさで準備しました。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> </head> <body> <canvas id="canvas" width="600" height="600"></canvas> </body> </html>
CreateJSで図形を描画
CreateJSで図形を描画していきましょう！
CreateJSの基本的な流れは以下の感じになります。
- キャンバスからCreateJSのステージを作成
- シェイプ（図形）を定義
- ステージへシェイプを追加
- 描画
一つずつ実装方法を見ていきます。
1. キャンバスからCreateJSのステージを作成
キャンバスにつけたidを使用してcreatejsのメソッドから生成をします。
new createjs.Stage(キャンバスのid);
後々使用するので変数に入れておきましょう。
2. シェイプ（図形）を定義
シェイプの生成は以下の文を使用します。
new createjs.Shape();
生成したシェイプに描画内容（円等の形や色など）を指定していきます。
今回は円を作成するので以下の文を使います。
シェイプ.graphics.drawCircle(x位置, y位置, 半径);
3. ステージへシェイプを追加
1で作ったステージに2で作ったシェイプを以下の文で追加します。
ステージ.addChild(シェイプ);
4. 描画
最後にステージのアップデートをします。
これにより再描画され変更が反映されます。
“ステージ”.update();
実際のコード
上記の構文を使用し、実際に出来上がった全体のコードは以下のようになります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script>
window.onload = function () {
// キャンバスからCreateJSのステージを作成
var stage = new createjs.Stage("canvas");
// シェイプ（図形）を定義
var shape = new createjs.Shape(); // シェイプを新規作成
shape.graphics.beginStroke("Red"); // 線の色
shape.graphics.beginFill("Yellow"); // 塗りつぶし色
shape.graphics.drawCircle(100, 100, 50); // 円をX位置, Y位置, 半径で作成
// ステージへシェイプを追加
stage.addChild(shape); // シェイプをステージに追加
// 描画
stage.update();
};
</script>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>
シェイプに色を付けたり多少の加工をしていますが流れはステージの作成⇒シェイプの定義⇒追加⇒描画です。
実行結果
ブラウザでHTMLを見てみると以下のように円ができています。
丸と四角で顔を描画してみる
練習としてもう少し複雑な図形？をリファレンス等を見ながら作ってみましょう。
下記のような顔を作ります。
以下、コードの実装例です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script>
window.onload = function () {
var lineSize = 1;
var faceSize = 50;
var faceX = 100;
var faceY = 100;
var eyeSize = 6;
var eyeY = faceY - (faceSize / 4);
var leftEyeX = faceX + (faceSize / 4);
var rightEyeX = faceX - (faceSize / 4);
var mouthSizeX = 30;
var mouthSizeY = 10;
var mouthY = faceY + (faceSize / 4);
var mouthX = faceX - (mouthSizeX / 2);
// createJSのステージを作成
var stage = new createjs.Stage("canvas");
// 顔を定義
var face = new createjs.Shape(); // シェイプを新規作成
face.graphics.beginStroke("Black"); // 線の色
face.graphics.setStrokeStyle(lineSize); // 線の太さ
face.graphics.beginFill("Yellow"); // 塗りつぶし色
face.graphics.drawCircle(faceX, faceY, faceSize); // 円をX位置, Y位置, 大きさで作成
stage.addChild(face); // 顔をステージに追加
// 左目を定義
var leftEye = new createjs.Shape(); // シェイプを新規作成
leftEye.graphics.beginStroke("Black"); // 線の色
leftEye.graphics.setStrokeStyle(lineSize); // 線の太さ
leftEye.graphics.beginFill("White"); // 塗りつぶし色
leftEye.graphics.drawCircle(leftEyeX, eyeY, eyeSize); // 円をX位置, Y位置, 大きさで作成
stage.addChild(leftEye); // 左目をステージに追加
// 右目を定義
var rightEye = new createjs.Shape(); // シェイプを新規作成
rightEye.graphics.beginStroke("Black"); // 線の色
rightEye.graphics.setStrokeStyle(1); // 線の太さ
rightEye.graphics.beginFill("White"); // 塗りつぶし色
rightEye.graphics.drawCircle(rightEyeX, eyeY, eyeSize); // 円をX位置, Y位置, 大きさで作成
stage.addChild(rightEye); // 右目をステージに追加
// 口を定義
var mouth = new createjs.Shape(); // シェイプを新規作成
mouth.graphics.beginStroke("Black"); // 線の色
mouth.graphics.setStrokeStyle(1); // 線の太さ
mouth.graphics.beginFill("Red"); // 塗りつぶし色
mouth.graphics.rect(mouthX, mouthY, mouthSizeX, mouthSizeY); // 円をX位置, Y位置, 大きさで作成
stage.addChild(mouth); // 口をステージに追加
// 描画
stage.update();
};
</script>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>
次回の予定
次回は今回作った顔にクリックイベントを付与し、少し動かしていきます。
WEBアプリケーション関連 人気連載リンク
基礎からPHPWEBアプリ解発を学ぶなら・・
PHP基礎 連載
より実践的なWEBアプリ開発講座！Bootstrap活用を学ぶなら・・
魁！小野の塾 連載
