FN1211003 - EaselJSライブラリの短縮版JSファイルについて

HTML5テクニカルノート

EaselJSライブラリの短縮版JSファイルについて

ID: FN1211003

Technique: HTML5 and JavaScript

EaselJSライブラリには、クラスごとのソースのJavaScript(JS)ファイル群とは別に、ほとんどのクラスをまとめた短縮版のJSファイルが用意されています。ファイルサイズが小さく扱いやすいので、特別の理由がなければこの短縮版を用いるのがよいでしょう。ただし、いくつか注意すべき点があります。

01 EaselJSライブラリの短縮版JSファイル

EaselJSライブラリの短縮版JSファイルは、ダウンロードしたデータの中のlibフォルダにeaseljs-VERSION.min.jsという名前で納められています(図001)^[*1]。libフォルダにはほかに、後述するMovieClipクラスの短縮版JSファイルと、README.txtファイルも入っています。

図001■ダウンロードしたEaselJSライブラリデータのlibフォルダの中身
図001

EaselJSライブラリの短縮版は、ひとつのJSファイルにほぼすべてのクラスが含まれています。ですから、各クラスの読込み順は気にせずに済みます。また、JavaScriptコードは識別子を短くし、スペースやタブ、改行などの空白文字はできるかぎり省き、コメントも除かれています(図002)。

したがって、ひとつひとつのクラスを読み解いたり、手を加えようという場合でないかぎり、公開するコンテンツにはこの短縮版のJSファイルを用いるとよいでしょう。

図002■EaselJSライブラリの短縮版JSファイル
図002

[*1] EaselJSライブラリのソースとなる各クラスのJSファイルは、データの中のsrcフォルダ(前掲図001参照)にeaslejsというフォルダでまとめられています。easlejsフォルダの中はさらに下表001のようにサブフォルダに分けて、クラスファイルが納められています。

表001■EaselJSライブラリの中のフォルダとJavaScriptファイル

フォルダ	JSファイル
display	Bitmap.js BitmapAnimation.js Container.js DisplayObject.js DOMElement.js Graphics.js MovieClip.js Shadow.js Shape.js SpriteSheet.js Stage.js Text.js
events	EventDispatcher.js MouseEvent.js
filters	AlphaMapFilter.js AlphaMaskFilter.js BoxBlurFilter.js ColorFilter.js ColorMatrix.js ColorMatrixFilter.js Filter.js
geom	Matrix2D.js Point.js Rectangle.js
ui	ButtonHelper.js (追加予定) Touch.js
utils	SpriteSheetBuilder.js SpriteSheetUtils.js Ticker.js UID.js

02 EaselJSライブラリの短縮版JSファイルに含まれないクラス

EaselJSライブラリのクラスのうち、短縮版JSファイルに含まれないものが2種類あります。ひとつは、MovieClipクラスです。そして、もうひとつはfiltersフォルダに納められたフィルタのクラスになります(前掲注[*1]表001参照)。

【短縮版JSファイルに含まれないクラス】

MovieClipクラス (displayフォルダ)
フィルタのクラス (filtersフォルダ)

ひとつ目のEaselJSのMovieClipクラスは、Flash Professional CS6からシンボルも含めて複数フレームのタイムラインを、[Toolkit for CreateJS]で書出すときに用いられます。複数のフレームをもつタイムラインはMovieClipのサブクラスとして定義されるので、MovieClipクラスのプロパティやメソッドで扱えるのです。

このとき、[Toolkit for CreateJS]はEaselJSライブラリの短縮版とともにMovieClipクラスの短縮版JSファイルも書出します。それが前述のとおり、libフォルダにも加えられています(前掲図001参照)。

もっとも、Flashからタイムラインを書出すのでなくJavaScriptコードで直接オブジェクトをつくる場合は、MovieClipクラスが用いられることはあまりないでしょう。そのため、短縮版JSファイルをEaselJSライブラリから分けたものと考えられます。

ふたつ目のフィルタのクラスについては、短縮版のJSファイルはありません。したがって、ダウンロードしたデータのsrcフォルダの中にeaseljsフォルダとしてまとめられたライブラリから、使うフィルタクラスのJSファイルを読込むことになります。なお、filtersフォルダに納められたフィルタクラスのうち、Filterクラスはすべてのフィルタの基本クラスとなりますので、どのフィルタを使うときも予め読込んでおかなければなりません。

<script src="src/easeljs/filters/Filter.js"></script>
<script src="src/easeljs/filters/使うフィルタクラスjs"></script>

03 libフォルダのREADME.txtの中身

EaselJSライブラリとしてダウンロードしたデータのlibフォルダには、前述のようにREADME.txtが含まれています(図001参照)。前述のおもなご説明は、このテキストファイルの情報にもとづきます。ご参考までに、このテキストの全文を以下に邦訳します。

libディレクトリには、短縮化したバージョンのEaselJSライブラリが納められています。

オリジナルのコードに手を加えたいのでなければ、ほとんどの場合このバージョンを使われるようお勧めします。短縮版はサイズがずっと小さく、httpリクエストも少なくて済みます。また、jsファイルの読込み順にわずらわされることもありません。

easeljs-VERSION.min.jsはひとつのファイルで、EaselJSのほぼすべてのクラスの(コメントや空白スペースも取除かれた)短縮版が含まれています。ただし、easeljs/filtersとeaseljs/display/MovieClipの内容は別です。

movieclip-VERSION.min.jsは、MovieClipクラスの短縮版です。このクラスは、手でコードを組むプロジェクトではあまり用いられません。そのため、パッケージを分けました。このバージョン番号は、EaselJSのバージョンとともにアップデートされます。ただし、MovieClipクラスが更新された場合にかぎります。たとえば、MovieClipのアップデートがEaselJSバージョン0.5.0のとき行われ、EaselJSがまだ0.5.1になっていなかったなら、短縮版MovieClipのバージョンは0.5.0にとどまります。

ファイルのサイズをさらに減らすには、gzipで(約70%まで)圧縮できます。多くのサーバーはこれを自動的に処理します。

作成者: 野中文雄
作成日: 2012年11月30日