必要条件

この記事に必要な予備知識

ユーザーレベル

中級

スマートフォンやタブレット端末の急速な普及に伴い、多様なユーザ環境に向けてコンテンツを制作するための仕組みが求められています。そこで2012年4月に登場したのが「CreateJS」です。本連載では、ActionScriptでの開発経験を持つデベロッパー向けに、CreateJSを利用する際のポイントを紹介していきます。

CreateJSとは

CreateJSは、HTML5でリッチコンテンツを制作するためのJavaScriptライブラリのスイート(特定用途のソフトウェアを詰め合わせたパッケージ)です。Flashデベロッパーとして著名なGrant Skinner氏(gskinner.com)が開発を行っており、MITライセンスのオープンソースソフトウェアとして商用でも無償で利用できます。

急激に拡大している利用

2013年5月4日~8日に開催されたAdobe MAX 2013における、Grant Skinner氏のセッション「CreateJS: Building Rich Interactive Experiences in HTML5」によると、CDNにホスティングされているCreateJSライブラリのヒット数が急激に増加しており、現在では2億ヒット(月間)を超えています。

その中でも、日本からの利用は世界で第2位を記録しており、例えば「Mobage mini(一部のゲーム)」や「ぬりぬり育成ジェルミィ」などで活用されています。

Flashとの基本的な違い

CreateJSとFlashの主な違いは、動作のベースとしている技術が異なる点です。CreateJSはHTML5のcanvas要素を利用するのに対して、FlashはWebブラウザーのプラグインであるFlash Playerを利用します。

ここで注意しておきたいのは、「HTML5やcanvas要素はFlashの代替技術ではなく、CreateJSもまたFlashの代わりになるものではない」ということです。それぞれにメリット/デメリットがありますので、正しく理解しておくことが重要です。

CreateJSを使うメリット

  1. ActionScriptライクなAPI

     

    CreateJSにはActionScriptに似たAPIが実装されているため、Flashデベロッパーには馴染みやすい方法でコードを記述することができます。

  2. 工数の短縮

     

    通常、HTML5のcanvas要素を利用するためには、JavaScriptから低レベルなAPIを実行する必要があり、ちょっとしたことを実現するだけでもコードが長くなってしまいがちです。CreateJSは、簡潔かつ直感的なコードでcanvas要素を利用できるよう設計されているので、工数の短縮が見込めます。

  3. 多様なユーザ環境への対応

     

    スマートフォンやタブレット端末の主要OSであるiOSやAndroidでは、残念ながらFlash Playerが動作しません。そのため、これらの環境に向けてリッチコンテンツを制作する場合は、CreateJSが適しています。

  4. Flash Professionalからの素材書き出し

     

    Flash Professional CCには、制作した画像、アニメーション、サウンドなどの素材をCreateJSから利用できる形に書き出すための「Toolkit for CreateJS」が統合されています。使い慣れたタイムラインで素材を制作、管理できるほか、これまでに作ったコンテンツを利用できます。

※CS6では拡張機能としてインストール可能です。

CreateJSを使うデメリット

  1. より慎重な動作テストの必要性

     

    Flashでは、OSやブラウザーが違ってもFlash Playerによって同じように動作するため、ほとんど差を気にすることなく制作することができます。CreateJSの場合は、各ライブラリによって動作環境が異なるうえ(後述)、同じコードでも環境によって結果やパフォーマンスが異なることもあるので、用心深く動作テストを行う必要があります。

  2. (現時点では)α版

     

    CreateJSの各ライブラリは、まだα版です。確実な動作が保証されているわけではありません。また、これまでのバージョンアップ時には「名前空間の追加」など、大きくAPIの変更が行われた経緯があるので、今後も同じような変更が行われる可能性があります。過去に書いたコードがそのままでは動作しなくなることも考えられるので、注意しましょう。

各ライブラリの動作環境

CreateJSの動作のベースは「HTML5のcanvas要素」と述べましたが、厳密に言うと、canvas要素が必要になるのはCreateJSを使った表現の根幹を担うライブラリ「EaselJS」を使うときのみです。

CreateJSを利用するときは、通常EaselJSと、その他の機能を提供するライブラリであるTweenJS、SoundJS、PreloadJSのすべて、または一部を組み合わせて使います。ただし、それぞれのライブラリは依存関係になっていないため、単体でも利用することができます。

例えば、「あらかじめすべての画像を読み込んでからHTMLを表示したい」といった場合は、プリロードを実現するPreloadJSのみを用いることになります。このとき、canvas要素が必要になることはありませんし、そもそもHTML5でなくとも構いません。

そのため、「CreateJS全体で統一された動作環境は存在せず、各ライブラリによって変わる」ことになります。この点に注意して、各ライブラリの動作環境をチェックしましょう。

ライブラリ
動作環境
EaselJS 動作には、HTML5のcanvas要素が必要になります。そのため、HTML5に対応していないレガシーブラウザー、特にInternet Explorer 8以下では動作しません。
TweenJS 基本的にすべてのブラウザーで動作します。
SoundJS 動作には、モダンなオーディオ機能(HTML5のaudio要素、WebAudio、Flash)のいずれかが必要になります。以下のブラウザーで動作テストされています。
  • Internet Explorer 9、10
  • Chrome
  • Firefox
  • Safari
  • Opera
  • iOS 6以上
  • Android Chrome

※Flash Playerプラグインを使うと、Internet Explorer 7、8でも動作可能です。

※BlackBerryブラウザーでも簡易テストをしています。
PreloadJS 基本的にすべてのブラウザーで動作します。ただし、ブラウザーと機能の組み合わせによっては制限があります。

基本的なワークフロー

Flashでのワークフローには様々なものがありますが、筆者の記事「SWCを利用したFlash制作の分業ワークフロー:FlashとFlash Builder連携開発」が参考のひとつになるでしょう。

対して、CreateJSのワークフローではSWCを使うことができません。そこで役に立つのが、Flash Professionalで作成した素材をCreateJSで利用できる形に書き出すための「Toolkit for CreateJS」です。CreateJSを使うとき、Toolkit for CreateJSは必ずしも必要ではありませんが、素材を制作、管理するためのツールと考えると、Flash制作に近いワークフローを実現することができます。

Toolkit for CreateJSを使うと、Flash Professionalで制作した画像、アニメーション、サウンドをパブリッシュし、HTMLとJavaScriptファイルに書き出せます。素材の状態や設定によっては、images、sounds、libsといったフォルダーの中に画像や音声ファイルなども書き出されます。

デベロッパーは、書き出された素材を元に、好みのコードエディタでJavaScriptを記述していくことになります。

しかし、何も考えずに素材を制作してパブリッシュしてしまうと、コードを書きにくかったり、あとで素材に変更が発生した場合に工数がかかってしまったり、という問題が発生しがちです。そこで次回からは、Toolkit for CreateJSを使いこなすコツをご紹介します。お楽しみに。