CLOSE OPEN

ENT TECH LAB.

TAGSTAGS

WEBコンテンツ開発におけるFlash CC(CreateJS)とTypeScriptを用いたワークフロー(後編)


Canvasを使ったインタラクティブなアニメーションでもデザイナーと開発者は共同作業可能!?Flash CCでの制作の利点である直感的なアニメーションと強力なアセット管理をHTML5でも。

今回の記事は前回の記事の続きになります。

CreateJS を TypeScript から利用する

CreateJS や Flash CC から書き出された JavaScript を TypeScript から利用するにあたり、少し準備が必要です。

Definitionsファイル

まず、CreateJSのサイトの「TOOLS&CODES」のページにある「Visit TypeScript Definitions」からCreateJSのDefinitionファイルを取得します。

def.jpg

リンク先は Bartvds さんのGitHubになっており、様々なライブラリのdefinitionファイルが公開されています。
definitionファイル(勝手にそう呼んでいる)はTypeScriptで使用するインターフェイスのようなもので、 JavaScript ライブラリのクラスやメソッド、プロパティを仮想的に定義したファイルのことです。 これによりIDE等を使用している際にはコード補完(リファクタリングも?)が可能になり、JavsScript開発において不満だった部分がまたひとつ解消されます。
たくさんのdefinitionファイルが並んでいるのでどれをダウンロードしたらいいか悩みますが、

上記5つでいいでしょう。ダウンロードしたらプロジェクトディレクトリ内のどこかに置きます。ただし、tweenjsなどは依存関係があるのでディレクトリパスに注意してください。
tweenjs.d.tsの中身をの先頭をみると
/// <reference path=”../createjs/createjs.d.ts” /> などと記述があります。CreateJSの各ライブラリで共通部分をまとめているようですね。これをみると、上のリストのように各ディレクトリに分けて置いておいたほうがよさそうです。

これで CreateJS の定義は用意できましたが、 Flash CC から書き出される JavaScript の定義ファイルはどうしましょう。
ちなみにFlash Professional CS6ではパブリッシュテンプレートのかわりに「CreateJS toolkit」なるものが用意されており、これをTypeScriptから利用する為にdefinitionファイル化のJSFL「CreateJS Toolkit definitions generator」が公開されていました。
同様なものは見つけられなかった為(2014.3現在)、今回はdefinitionファイルを自前で用意することにしました(といってもたいした記述はないです)。

Flash CC から書き出されたsample.jsのdefinitionファイルは以下のようになります。

sample.d.ts

lib.sampleクラスlib.properties、そしてimagesを引けるようにしているだけです。
declare 修飾子は以下に続く定義を仮想のものとして扱います。コンパイルでの出力結果である Javascript には一切影響を与えません。ですので、当然ながら実際に値などを入れたり初期化したりするとエラーになります(このあたりもインターフェイス的ですね)。
lib.sampleクラスはcreatejs.MovieClipを継承していることに注目してください。TypeScriptにより、継承もシンプルに書いていけます。
definitionファイルの拡張子はなんでもいいはずですが、.d.tsにすることが通例のようです。

TypeScriptを書く

では実際にTypeScriptを書いていきましょう。ここでは、 Flash CC から書き出されたHTML内に書いてあるJavaScript(いわばドキュメントクラス)をTypeScriptに置き換えてみます。
この時点でのディレクトリ構造は以下のようになってるとします。

main.ts

始めの記述、

上記では使用するライブラリのクラスやメソッドを引けるようにしています。
「///」ですが、 TypeScript だけに適用される記述です。 JavaScript ではコメント扱いになります。

MainクラスのコンストラクタではCanvas要素の取得やStageへの配置、そしてインターバル等を初期化しています。
毎フレーム処理である「update」に見慣れない記述がありますね。

変数 = ( 引数 ):void => { 処理 }

これはアロー式関数といって、 TypeScript における関数定義法の一つです。
変数にハンドラ(関数)の参照を格納しているだけですが、通常イベントハンドラ内では「this」の参照がターゲットになるので自分自身のインスタンスが引けません。
アロー式関数を使えば、普通に自身インスタンスを参照することができるので便利です。

ちなみに上記TypeScriptをコンパイルすると、「SamplePlugin」の定義が被ってるよ!とのエラーが出ますが(definition内で重複している)きちんとコンパイルされるようです。

Flash CC で設定したインスタンスの取得

さて、これだけだと単に逆コンパイルしただけですが、 Flash CC で書き出されたCanvasアニメーションのコントロールについて、すでにヒントが出ています。
デザイナーとプログラマーの連携といえば、デザイナーが Flash CC で設定したインスタンスを取得してコントロール、というケースがほとんどです。Flash CC というオーサリングツールで作った「ムービークリップ」はCreateJSのMovieClipになることはわかっていますから、このインスタンスを取得できればよいことになります。
前回紹介したsample.jsを見てみます。

「lib.シンボル1」、つまり Flash CC のライブラリ上のシンボルを定義しています。ではlib.シンボル1をインスタンス化しているところはというと

この部分です。
ここからはCreateJSの使い方になってきますが、このインスタンスにアクセスできるよう名前を付けましょう。

this.instance = new lib.シンボル1();
この次の行に
this.instance.name = “_ins”;
このように名前をつけてやります。これでこのインスタンスが識別できるようになりました。
ここで出来たsample.jsを挙げます。

sample.js

さて、このインスタンス「_ins」をmain.tsから参照してみましょう。
先ほどのmain.tsのupdate関数を次のようにしてみます。

ブラウザのコンソールにインスタンスを出力しています。
これを実行すると、コンソールに
[Container (name=_ins)] { id=14, _matrix=[Matrix2D (a=1 b=0 c=0 d=1 tx=60 ty=150)], _rectangle=[Rectangle (x=0 y=0 width=0 height=0)], もっと見る…}
などと表示されます。CreateJS の MovieClipクラスで用意されているプロパティ等が見えます。
ここまで来れば、インスタンスのメソッドを利用したりイベントをリッスンしたりするこができるでしょう。
問題は Flash CC 上でどのインスタンスがどの変数名(今回はthis.instance)で初期化されているか解りづらいところです。これは、 Flash CC 上で複数のインスタンスがある場合には、「this.FlashCCで付けたインスタンス名」となるようなので検索すれば見つけることができます。

今回使用したファイル一式

まとめ

CreateJS + TypeScript によって、 ActionScript ライクなCanvas開発環境が手に入ります。さらに、アニメーション付けやレイアウト、デザイン、アセット管理までを Flash CC に任せることができるのです。
このメリットはどんどん活用したいところです。

おまけ

Flash CC のライブラリに画像等がある場合、書き出されるJavaScriptはPreloadJSを使用して画像等アセットをプリロードするものに変わります。
その場合、TypeScriptにすると下記のようになるでしょう。
大きく変わった部分は、アセットの読み込みが終わってからStageの処理を行うようにしたところです。

参考になりましたら幸いです。

main.ts

関連記事
BACK TO TOP