HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う

第1回　読み込んだ画像をトゥイーンアニメーションさせる

HTML5, Canvas, CreateJS, アニメーション, トゥイーンアニメーション

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

これからのWebはHTML5だ。とはいわれるものの，どの機能や技術を使うかは，コンテンツ次第でさまざまといえる。その中で，ダイナミックでインタラクティブな表現をつくりたいとき，Canvasの機能が注目される。ただし，Canvasが提供するのはおもに描画の機能で，アニメーションやインタラクションはJavaScriptライブラリの助けを借りることになる。

そこで本連載では，CreateJS Suiteを選んだ。開発者は，Flashコンテンツの世界で有名な Grant Skinner（グラント・スキナー）氏だ（※1）⁠。「⁠ダイナミックでインタラクティブな表現」ともって回った言い方をしたが，つまりは「Flashみないな」ものがつくりたい（つくってほしい）という要求だろう。CreateJSのライブラリ群は，Flashを使っていた人たちにとっては，なじみやすい設計になっている。

また，最近注目されている「Flashみたいな」表現の多くは，実際これまでFlashによる制作を手がけてきたクリエーターによるものが多い。あまりFlashに慣れていないという人も，その手法や考え方を学ぶ意味は大きい。さらに，CreateJSの開発にはAdobeとMicrosoftがスポンサーとして名を連ねていることも期待される。

ということで，本連載ではCanvasの機能をCreateJSで駆使して，「⁠Flashみたいな」表現をつくってみようと思う。進め方としては，初めにお題となるコンテンツを挙げ，数回にわたってそのスクリプティングを解説する。それぞれのお題はアラカルトで，とくに互いの関連性は意識しない読み切りとなる。とはいえ，順序はやさしい基本的なものから，複雑あるいは他の技術や知識も使った応用的なものへと進む。引き続きのおつき合いをいただけるとありがたい。

※1
先月末に開かれたデジタルクリエイターためのイベント「FITC Tokyo 2013」にはGrant Skinner氏も来日し，「⁠CreateJS：オープンウェブでリッチインタラクティブエクスペリエンスを構築」と題して講演している。

お題：読込んだ画像をランダムにトゥイーンアニメーションさせる

早速，最初のお題をご紹介しよう。外部画像を読込んで，Canvasの四辺に向けてランダムにトゥイーンアニメーションさせる。トゥイーンのイージングや時間もランダムに変えている。jsdo.itに公開したので，コードもすぐにご覧いただける（つぎの[Play]ボタンで実行）⁠。ただし，jsdo.itに載せたコードと，本連載で説明するHTMLドキュメントのコードとは少し違う。また，連載で解説を進めていくうちにアイデアが出たり，気が変わって書替えたりもするので，あらかじめご理解いただきたい。

お題のjsdo.itのコードを見て，思ったより長いと感じてしまうかもしれない。CreateJSのライブラリを使えば，スクリプトが簡単になるのではないかと。だが，画像ファイルの読込みやトゥイーンのアニメーションそのものは，それぞれ数行のステートメントで済んでいる。

長いコードのほとんどは，設定をランダムに定める処理だ。どういうデータをもとに，どのようなランダムなアニメーションを見せるかは，つくり手が決めなければならない。逆にいえば，ファイルの読込みや設定にしたがったトゥイーンはライブラリに任せ，制作する者は表現を考えればよいということだ。

なお，連載を通して解説の進め方として，でき上がりのコードを丸のまま頭から読み下すことはしない。もっと単純化したサンプルから始め，それから順に機能や表現を加えていく。小さく始めることは，大きなコンテンツをつくるときに役立つし，大きな処理を関数に分けて考えることにもつながるからだ。とくに，スクリプトの初心者は，根気よく解説を読み進めてほしい。

画像ファイルを読込んでCanvasに描く

では，CreateJSのライブラリPreloadJSでPNG画像ファイルを読み込み，Canvasに描くところから始めよう。まだ動かない。PreloadJSライブラリを使う前に，準備を整える。

まず，script要素にライブラリを読込む。アニメーションはEaselJS，ファイルの読込みはPreloadJSが扱う。ここでは，CDN（Content Delivery Network）のライブラリを用いることにした（※2）⁠。読み込みが速いし，サイトを移ってもキャッシュが効く。また，サーバーにライブラリを置かなくて済む。

<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.2.0.min.js"></script>

つぎに，body要素にcanvas要素を加える。そのid属性には，JavaScriptから参照するための名前（"myCanvas"）を定める。widthとheightの属性でCanvasの大きさが決まる。また，body要素のonload属性には，文書が読み込み終わったとき，初めに呼び出すJavaScriptの関数呼出し（"initialize()"）を書き加えておく。関数はこの後定める。

<body onLoad="initialize()">
  <canvas id="myCanvas" width="240" height="180"></canvas>
</body>

そして，EaselJSはCanvas上にステージ（Stage）というオブジェクトをつくり，そこにアニメーションを描く。JavaScriptでオブジェクトをつくるには，new演算子に続けてクラス（ここではStage）と同じ名前の「コンストラクタ」と呼ばれる関数を呼び出す。引数に渡すのは，canvas要素の参照だ。なお，CreateJSのクラスには，デフォルトでは「createjs」という名前を頭に添える（⁠「名前空間」と呼ばれる）⁠。

new createjs.Stage(canvas要素)

canvas要素の参照はJavaScriptのdocument.getElementById()メソッドで得られる。引数にはcanvas要素に定めたid属性の文字列を渡す。この処理は，初めに呼び出される初期設定の関数（initialize()）に書き加える。これで準備は整った。

var stage;

function initialize() {
  canvasObject = document.getElementById("myCanvas");

  stage = new createjs.Stage(canvasObject);

}

PreloadJSライブラリでは，つぎの3つの手順で外部ファイルを読込む。

  1. PreloadJSオブジェクトをつくる
  2. ファイルが読み込み終わったとき呼び出す関数（ハンドラ）を定める
  3. ファイルを読込む

まず，PreloadJSオブジェクトは，JavaScriptのお約束どおりnew演算子とコンストラクタPreloadJS()でつくる。引数にはXMLHttpRequestを使うか（true）⁠，使わないか（false）をブール（論理）値で定める。今回はfalseを渡す。

PreloadJSオブジェクト = new createjs.PreloadJS(XMLHttpRequestの使用)

つぎに，ファイルが読み込み終わったとき呼び出したい関数を，ハンドラとしてAbstractLoader.onFileLoadイベントに定める（※3）⁠。画像の大きさを調べたり，ステージに描画する処理は，読み込み終わってから行わなければならない。

PreloadJSオブジェクト.onFileLoad = ハンドラ

そして，ロードするファイルのURLをPreloadJS.loadFile()メソッドに渡して，読み込み始める。

PreloadJSオブジェクト.loadFile(ファイルのURL)

PreloadJSライブラリを用いた処理も，初期設定の関数（initialize()）に書き加える。AbstractLoader.onFileLoadイベントで呼び出すハンドラの関数（draw()）は，この後定める。

function initialize() {

  var file = "images/Pen.png";
  var loader = new createjs.PreloadJS(false);

  loader.onFileLoad = draw;
  loader.loadFile(file);
}

ファイルを読み込み終えたとき呼び出される関数（draw()）は，読込んだ画像イメージをステージに描く。もっとも，画像イメージ（Imageオブジェクト）は，そのままではステージに表示できない。Bitmapクラスのオブジェクトに包んで，Stageオブジェクトの子として加えなければならないのだ。

※2

JavaScrit（JS）ファイルをダウンロードしたいときは，ライブラリごとに「DOWNLOAD」ページから落とせる（図3）⁠。

図3　「⁠DOWNLOAD EASELJS」ページ

図3　「DOWNLOAD EASELJS」ページ

※3
AbstractLoader.onFileLoadは，AbstractLoaderクラスに備わるイベント。だが，PreloadJSクラスは「継承」という仕組みにより，AbstractLoaderクラスに定められたプロパティやメソッド，イベントをすべて自らに備わっているのと同じように使うことができる。プログラミングでは一般に，継承される親を「スーパークラス」⁠，受継ぐ子を「サブクラス」と呼ぶ。

HTML5, Canvas, CreateJS, アニメーション, トゥイーンアニメーション

著者プロフィール

野中文雄（のなかふみお）

ソフトウェアトレーナー，テクニカルライター，オーサリングエンジニア。上智大学法学部卒，慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で，総務・人事，企画，外資系企業担当営業などに携わる。その後，マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング，コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URL：http://www.FumioNonaka.com/

著書