先週は、UnrealEngineについて紹介しました。
今週は、最近触る機会のあった、「EaselJS」についてご紹介させて頂きます。
■EaselJSとは
EaselJSというのは、HTML5でリッチコンテンツを制作するためのJavaScriptライブラリ群で、
CreateJSの中に含まれている1つです。
EaselJSは、HTML5の機能であるcanvasを利用しやすくするライブラリで、
WebGLにも対応しています。
■EaselJSを利用することについて
HTML5/CSS3でも、簡易なアニメーション等を行うことができます。最近では3D表現も可能です。
しかし、これらは表示/表現がメインですので、ユーザ操作を伴う複雑なことを行うには向きません。
また、ゲームのように、アニメーションを多用したり、
ユーザ操作を伴って様々な動作を行うような物を作る際は、
ゲームエンジンとして、それを目的として最初から作られている cocos や、
美しく凝ったアニメーションを容易に実現できる Flash を利用する、というように
実現したい用途に合ったものを選択するのがよいと思います。
ただ、Flash を利用する場合は開発環境を用意して、SWFファイルにしなければならず、
cocosは起動に少々時間を要します。
このため、以下のような用途であれば、これらの技術を使うのではなくて、HTML5に
標準搭載されている、canvasを直接利用することをお勧めします。
・簡単なアニメーションを行う
・グラフ等の図を作る
そして、canvas を直接利用する際に便利なライブラリが、CreateJSです。
CreateJSは、以下のようなライブラリで構成されています。
EaselJS：Canvasの表示を行う（今回はこちらを利用してみました）
TweenJS：アニメーションを行う
SoundJS：音の制御を行う
PreloadJS：外部ファイルを読み込む
これらを利用することで、実装が容易になります。
また、速度面でもWebGLを利用できるので申し分ないものが作れます。
EaselJSを利用してみて、以下の点が良いと感じました。
１）とにかく起動が早い！
２）起動だけではなく、動作も軽快！
３）実装方法がFlashに近く、馴染みやすい！
４）（canvasを利用する上での補助ツールのような形なので）他のJSライブラリとの併用も容易！
５）最近のスマホならWebGLに対応しているため、スマホ用のWebコンテンツにも利用可能！
ただ、実際にプログラムを書く量は、Flash や cocos と比較すると多めです。
実現したい内容をプログラムに起こしてみると、どうしても書く量が多くなります。
大規模なゲームのようなものを作成する場合には、時間がかかってしまいそうだと感じました。
その点を考慮しなくてよい状況であれば、最終的に出来上がる物自体は素晴らしいの一言です。
特に、cocos については、同じ canvas を利用したものですので、
cocos と CreateJS では、実現できること自体には、あまり差はありません。
この2つを、特にゲーム開発を行う想定で比較すると、
・用意されている機能の豊富さ、利用のしやすさ、開発効率は、cocosに軍配が上がる
・速度面（特に起動速度）は、CreateJSを利用する方が良い
※プログラムを書く時間をとれるなら、cocos で出来ることはCreateJSでも実現できます
ということになります。
このため、先ほども記載した通り、簡単なアニメーションを行う、グラフ等の図を作る
というような、小規模の機能を実現する際に、CreateJSを利用するのが良いと思います。
■サンプルプログラム
以下に、試しに作成した「四点を置くと四角形が出来上がる」サンプルを掲載します。
・「+」ボタンで拡大
・「-」ボタンで縮小
・「移動」モードのときは、Canvas内に描画しているすべての部品が移動
・「三角を作る」モードのときは、三点を配置すると三角形が出来上がる
・「スタンプ」モードのときは、マス目に画像を置くことが出来る
というものです。
こちらを快適に動作させるには、GoogleChrome / FireFox / Edge / InternetExplorer の
いずれかをご利用ください。
※もし画面が灰色（グリッド線が見えない）になってしまった場合は、このページを再読み込みしてみてください
■まとめ
見て頂いた通り、ヌルヌル / サクサクと、軽快に動作していることが伝わったかと思います。
このような、規模の小さな機能を作る場合には、CreateJSの利用を検討しては如何でしょうか？
これで、EaselJSの紹介を終わります。
ご視聴ありがとうございました。
弊社では全国各地の請負い（ご自宅）で作業協力頂ける、フリーランスエンジニアの方を常時探しております。
ご興味ある方は、お気軽にお問い合わせ下さい。