CreateJS用のリキッドレイアウトライブラリを作ったよ

CreateJS用のリキッドレイアウトライブラリを作ってみました。LiquidLayouter for CreateJSは、CreateJSを使ったフルcanvasのコンテンツをより簡単に実装するためのJavaScriptライブラリです。HTML5 canvasをサポートしたWindows, Macの各ブラウザだけでなく、iPhone, iPad, Androidでも動作確認しています。MITライセンスで公開していますので、商用でも無料でお使い頂けます。

Download

下記のダウンロードリンクより、LiquidLayouter for CreateJSをダウンロードして頂けます。また、簡単なサンプルとリファレンスも用意しています。今回は、このサンプルを通して、LiquidLayouter for CreateJSの使い方をご紹介したいと思います。

CSSの記述例

まず、LiquidLayouter for CreateJSを使うための事前準備として、CSSの記述例を見ておきましょう。body要素のmarginとpaddingを0にして、widthとheightを100%に指定します。また、ウィンドウのリサイズ時にスクロールバーが出るのを防ぐため、overflowをhiddenにしておきます。

CSS

body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  overflow:hidden;
}

canvas {
  display:block;
}

HTMLの記述例

次にHTMLの記述例をそれぞれの項目ごとに見ていきましょう。

metaタグのviewport

スマートフォンやタブレットなど、viewportをサポートした環境のためにmetaタグでviewportの指定をしておきます。下記はviewportの推奨設定です。widthにdevice-width、initial-scaleに1.0、user-scalableにnoを指定しています。

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

JavaScriptファイルの読み込み

HTMLのheadで関連するJavaScriptファイルを読み込みます。基本的にLiquidLayouterのjsファイルは、CreateJSのjsファイルよりも後に読み込むようにして下さい。

HTML

<script type="text/javascript" src="js/easeljs-0.6.0.min.js"></script>
<script type="text/javascript" src="js/tweenjs-0.4.0.min.js"></script>
<script type="text/javascript" src="js/liquidlayouter-1.0.0.min.js"></script>

canvas要素

canvas要素には、必ずwidth属性とheight属性でデフォルトの幅と高さを指定して下さい。LiquidLayouterは、この値をデフォルト値として使用します。

HTML

<canvas id="my-canvas" width="640" height="360"></canvas>

LiquidLayouterインスタンスの生成

それでは、実際にLiquidLayouterの使い方を見ていきましょう。LiquidLayouterを使用するには、まずインスタンスを生成する必要がありますが、LiquidLayouterはSingletonクラスであるため、インスタンスの生成はコンストラクタではなく、staticメソッドのgetInstance()を使用します。

Singletonとは、クラスのインスタンスが一つしか生成されないことを保証するデザインパターンの一種です。そのため、getInstance()によって得られるインスタンスは、例え違う場所で取得したとしても常に同じインスタンスとなります。下記の例では、変数_layouterにLiquidLayouterインスタンスが格納されます。

JavaScript

_layouter = createjs.LiquidLayouter.getInstance();

LiquidLayouterの初期化

次に取得したLiquidLayouterインスタンスをinitializeメソッドで初期化します。initialize()は、第1引数でStageインスタンスの参照を渡す必要があります。第2引数以降は省略可能なオプションですが、指定することにより、Stageの幅や高さに最大・最小値を設定したり、Stageの配置を指定することができます。詳しくはリファレンスをご覧下さい。

JavaScript

_layouter.initialize(_stage);

リキッドレイアウトで配置するオブジェクトを登録する

初期化が終わったら、後はリキッドレイアウトで配置したいオブジェクトを登録するだけです。オブジェクトの登録は、addLayoutObjectメソッドで行います。addLayoutObject()の第1引数でオブジェクトの参照、第2引数でオブジェクトを配置する位置を指定します。第2引数は、StageAlignクラスの定数を使用することができますが、文字列で定数値をそのまま指定しても構いません。なお、第2引数を省略または空文字列""を指定した場合は、Stageの中央に配置されます。

第3, 4引数は(x, y)座標となりますが、省略またはNaNを指定した場合は、オブジェクトの現在の座標値が使用されます。下記の例では、_topLeftをStage左上に配置するように指定しています。

JavaScript

_layouter.addLayoutObject(_topLeft, "TL");

座標を数値で指定する際の注意点

addLayoutObject()は、第3, 4引数を指定することにより座標を数値で指定することもできます。その際にご注意頂きたいのは、指定した座標が第2引数で指定した位置からの相対座標になる点です。例えば下記のように指定した場合、_topはx座標がStage中央、y座標が0の位置に配置されます。

JavaScript

_layouter.addLayoutObject(_top, "T", 0, 0);

座標をStageのwidth, heightに対する比率で指定する

addLayoutObject()は、第3, 4引数を文字列で渡すことにより、座標をStageのwidth, heightに対する比率で指定することができます。例えば下記のように指定した場合、_topRightはStageの右上に配置されます。

JavaScript

_layouter.addLayoutObject(_topRight, "TR", "1", "0");

座標値を整数に丸める

リキッドレイアウトによる配置では、状況によっては座標値に小数点が付くことがあります。座標値を整数に丸めたい場合は、addLayoutObject()の第5引数でtrueを指定します。第5引数は省略可能でデフォルト値はfalseとなります。

JavaScript

_layouter.addLayoutObject(_left, "L", NaN, NaN, true);

ウィンドウサイズに伴ってオブジェクトのscaleを変更する

LiquidLayouterは、addLayoutObject()の第6引数以降のオプションを指定することにより、ウィンドウサイズに伴ってオブジェクトのscaleを変更することができます。第6引数は、オブジェクトのscaleを変更する際のルールをSizeFollowRuleクラスの定数で指定します。文字列で定数値をそのまま指定しても構いません。

第7, 8引数は、それぞれscaleX, scaleYとなりますが、省略した場合はオブジェクトの現在のscaleX, scaleYの値が使用されます。サンプルでは、_titleと_subTitleに"widthFollow"、_backgroundに"fit"を指定しています。

SizeFollowRuleクラスには、他にも様々なルールを用意しています。詳しくはリファレンスをご覧下さい。

JavaScript

_layouter.addLayoutObject(_title, "", "0.5", "0.3", false, "widthFollow");
_layouter.addLayoutObject(_subTitle, "", "0.5", "0.75", false, "widthFollow");
_layouter.addLayoutObject(_background, "TL", NaN, NaN, false, "fit");

登録したオブジェクトを削除する

LiquidLayouterは、登録したオブジェクトの参照を内部で保持しています。stageからremoveChild()して不要になったオブジェクトは、必ずremoveLayoutObject()で削除するようにして下さい。

JavaScript

_layouter.removeLayoutObject(_bottom);

レイアウトを手動で更新する

基本的にLiquidLayouterは、ウィンドウサイズが変更された際に自動でレイアウトを更新します。しかし、addLayoutObject()で登録した直後は、処理の効率化のために手動で更新する必要があります。

レイアウトを手動で更新するには、updateLayout()を使用します。引数でオブジェクトの参照を渡した場合は、そのオブジェクトだけを更新します。引数を省略した場合は、登録された全てのオブジェクトを更新します。

JavaScript

_layouter.updateLayout();