アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

PreloadJSの簡単な使い方

こんにちは、橋本です。

最近は毎日CreateJSと戯れる日々を過ごしております。
今回はそんなCreateJSファミリーの一つ、PreloadJSの使い方について書いてみたいと思います。
そうです。自分のための備忘録ですね。

そもそもPreloadJSとは何かといいますと、CreateJSファミリーの一つで、画像などの後読みを簡単に行うためのライブラリです。
必要なファイルを必要になったときに読み込むようにすることで、Webアプリの初期読み込みを早くすることができます。
とくにスマホ向けのWebアプリを作る際には、初期読み込みを如何に早くするかがポイントになってくるかと思いますので、そういったときに非常に有益なライブラリかと思います。
詳細は公式ページを御覧ください。


さて、前置きはこのへんにして、早速使い方を見て行きましょう。

当然の話ですが、PreloadJSを使うためには、PreloadJSをどこかから持ってこなければいけません。
PreloadJSを手元にDLして使いたい場合には、GitlabからDLしてきて使ってください。(Tags · CreateJS/PreloadJS · GitHub)

DLするのめんどくさいよ−!という人は、CDNが用意されているので、そちらを利用するといいと思います。
自分はめんどくさがりなので、当然こちらを使います。



<script src="http://code.createjs.com/preloadjs-0.3.1.min.js"></script>


ちなみにAPIここから参照することができますので、この記事を読んで興味が湧いた人はぜひ覗いてみてください。

では、画像を後読みして、読み込みが完了したあとにbodyに追加するというサンプルを見ながら使いかたを書いていきます。(今回は楽をするためにjQueryも合わせて使っていきます)
まずは一つだけ画像を読み込む場合です。



<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>サンプル</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="http://code.createjs.com/preloadjs-0.3.1.min.js"></script>
        <script>
            jQuery(function(){
                var queue = new createjs.LoadQueue();

                queue.addEventListener('fileload', function(){
                    var image = queue.getResult('image01');

                    $('body').append(image);
                });

                queue.loadFile({id: 'image01', src: 'images/sample1.png'});
            });
        </script>
    </head>
    <body>
    
    </body>
</html>


LoadQueueオブジェクトをインスタンス化して、読み込みが完了したときに発生するイベントに対するイベントハンドラを設定し、ファイルを読み込むという流れです。
LoadQueueオブジェクトは後読みを行うためのメインのAPIで、基本的にこのオブジェクトをインスタンス化して使用していきます。

ファイルの読み込みが完了した際には、対象のファイル毎にfileloadイベントが発生します。あとで説明しますが、複数のファイルを読み込む場合、すべてのファイルの読み込みが完了した時点でcompleteイベントが発生します。
読み込んだ結果はLoadQueueオブジェクトのgetResultメソッドを使用して取得することができます。
getResultメソッドには引数で取得したいファイルのidを指定します。
fileloadイベントのイベントハンドラに渡されるオブジェクトから結果を取得することもできます



queue.addEventListener("fileload", function(event){
    var image = event.result;

    $('body').append(image);
});


loadFileメソッドはファイルの読み込みを行うためのメソッドで、第一引数にファイルのパスとidを設定したオブジェクトを渡します。
第二引数に何も渡さなければすぐにロードが始まるのですが、第二引数にfalseを渡すことでロードを保留することができます。
保留した場合には、LoadQueueオブジェクトのloadメソッドを使ってロードを開始します。



queue.loadFile({id:"image01", src:"images/sample1.png"}, false);
queue.load();



次に複数のファイルを読み込むサンプルを見て行きたいと思います。
複数のファイルを読み込むときは、読み込む対象のファイルを記載したmanifestを作成することで簡単に読み込むことができます。



var queue = new createjs.LoadQueue();

queue.addEventListener("fileload", function(event){
    var image = event.result;

    $('body').append(image);
});

var manifest = [
    {
        id: 'image01',
        src: 'images/sample1.png'
    },
    {
        id: 'image02',
        src: 'images/sample2.png'
    }
];

queue.loadManifest(manifest);


manifestは配列に対象のファイルのオブジェクトを入れる形で作成します。
LoadQueueオブジェクトのloadManifestメソッドを使ってmanifestに記載されたファイルの読み込みを開始します。
loadManifestメソッドもloadFileメソッドと同様に、第二引数にfalseを渡すことでロードを保留することができます。

複数のファイルの読み込む場合、デフォルトの設定ではファイルの読み込みを1つずつ順番に行います。
そのため、大量のファイルを同時に読み込みたい場合、デフォルトのままでは非常に時間がかかります。

複数のファイルを並列で読み込みたい場合には、setMaxConnectionsメソッドを使って並列で読み込みたい数を設定します。



queue.setMaxConnections(2);


ここまでのサンプルでは画像の読み込みを対象に説明してきましたが、画像以外のファイルを読み込むことももちろんできます。
次のサンプルでは、画像とjavascriptを後読みしてみたいと思います。



var queue = new createjs.LoadQueue();

queue.addEventListener("fileload", function(event){
    var item = event.item,
        elm;

    switch (item.type) {
        case createjs.LoadQueue.IMAGE:
            elm = 'body';
        break;
        case createjs.LoadQueue.JAVASCRIPT:
            elm = 'head';
        break;
    }

    $(elm).append(event.result);
});

var manifest = [
    {
        id: 'image01',
        src: 'images/sample1.png'
    },
    {
        id: 'js01',
        src: 'js/sample1.js'
    }
];

queue.loadManifest(manifest);


fileloadイベントのイベントハンドラに渡されるオブジェクトのitem.typeに、対象のファイルタイプが設定されています。
この値を参照することで、ファイルタイプ毎に処理を分けることが可能になります。
どのようなtypeがあるかは、APIを参照してください。

ちなみに、typeはPreloadJSによって自動的に判別されますが、loadFileメソッドやloadManifestオブジェクトに渡す読み込み対象のファイルの設定でtypeを予め設定することもできます。
例えば、PHPで画像を書き出す場合などに予めタイプを指定しておくことで、imageとしてPreloadJSに認識させることができます。



var manifest = [
    {
        id: 'image01',
        src: 'images/sample1.php',
        type: createjs.LoadQueue.IMAGE
    }
];



このように簡単に後読みを実現できるPreloadJS、ぜひ使ってみてください。

CreateJSを使ってみよー

こんにちは。相変わらずドラクエ10三昧の日々を過ごしている橋本です。


さて、今日はHTML5でリッチなコンテンツを簡単に作成することができるJavascriptライブラリ「CreateJS」について、サンプルを交えつつ簡単に使い方を見ていきたいと思います。

そもそもCreateJSとは何かといいますと、以下の4つのライブラリ、ツール群をパッケージングしたものがCreateJSとなります。


EaselJS

Canvasを簡単に扱うためのライブラリ

TweenJS

トゥイーンやアニメーションを扱うためのライブラリ

SoundJS

音声データを扱うためのライブラリ

PreloadJS

外部ファイルの読み込みを制御するためのライブラリ



今回はこの中でも、EaselJSとTweenJSの使い方についてサンプルコードを書きながら見て行きたいと思います。
SoundJSとPreloadJSについては、音声と画像のサンプルファイルを用意するのが面倒なので今回は除外したいと思います!

まずはサンプルコードで共通で使うHTMLです。



<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <script src="http://code.createjs.com/createjs-2013.05.14.min.js" type="text/javascript"></script>
        <title>demo</title>
    </head>
    <body>
        <canvas id="demoCanvas" height="500" width="500">
            Canvasが使えるブラウザで見てね
        </canvas>
    </body>
    <script>
        // ここにコードを書いていくよー
    </script>
</html>



今回CreateJSはCreateJS公式で用意されているCDNを利用して読み込んでいます。
今回はサンプルなのでcreateJSのライブラリ郡を一括で読み込んでいますが、それぞれのライブラリを個別に読み込むことも可能です。

詳しくはこちらをご覧ください。

また、GitHubからDLすることもできるので、CDNを使いたくない方はこちらをどうぞ。

bodyの中にはcanvasをひとつ用意します。このcanvasに要素を描画していくことになります。


では、まず最初にEaselJSをつかって円を書いてみます。



<script>
    (function(window){
        var cj = createjs,
            stage, circle;

        function init() {
            stage = new cj.Stage('demoCanvas');

            circle = new cj.Shape();
            circle.graphics.beginFill('red').drawCircle(0, 0, 50);
            circle.y = 50;
            circle.x = 50;

            stage.addChild(circle);

            stage.update();
        }

        window.addEventListener('load', function(){
            window.removeEventListener('load', arguments.callee);

            init();
        }, false);
    }(window));
</script>


デモはこちら

非常に簡単ですね。特にFlash経験者の方であれば、すんなりとコードを理解してもらえるかと思います。
流れとしては、canvasタグのidを引数として、stageオブジェクトを作り、そこにshapeオブジェクトをaddして描画します。

円を書くためには、graphicsオブジェクトのdrawCircleメソッドを使用します。
矩形を作成するときには、drawRectメソッドを使用します。

次に、画像を描画してみます。




<script>
    (function(window){
        var cj = createjs,
            stage, bitmap;

        function init() {
            stage = new cj.Stage('demoCanvas');

            bitmap = new cj.Bitmap('http://blog.asial.co.jp/image/user_image_m/22.png');
            bitmap.y = 50;
            bitmap.x = 50;

            stage.addChild(bitmap);

            stage.update();
        }

        window.addEventListener('load', function(){
            window.removeEventListener('load', arguments.callee);

            init();
        }, false);
    }(window));
</script>


デモはこちら

画像を描画するときにはbitmapオブジェクトを使用します。オブジェクトをnewするときに、画像のパスを与えるだけなので簡単ですね。

では、この描画された画像にTweenJSを使って動きを加えてみます。



<script>
    (function(window){
        var cj = createjs,
            stage, bitmap;

        function init() {
            stage = new cj.Stage('demoCanvas');

            bitmap = new cj.Bitmap('http://blog.asial.co.jp/image/user_image_m/22.png');
            bitmap.y = 50;
            bitmap.x = 50;
            bitmap.scaleX = 0;
            bitmap.scaleY = 0;
            bitmap.alpha = 0;

            stage.addChild(bitmap);

            stage.update();

            cj.Ticker.setFPS(60);
            cj.Ticker.addEventListener('tick', tickHandler);

            stage.update();

            cj.Tween.get(bitmap).to({alpha: 1, scaleX: 2, scaleY: 2}, 2000);
        }

        function tickHandler(event) {
            stage.update();
        }

        window.addEventListener('load', function(){
            window.removeEventListener('load', arguments.callee);

            init();
        }, false);
    }(window));
</script>


デモはこちら

TweenJSを使うときには、Tweenオブジェクトのgetメソッドを使って、tweenオブジェクトを取得し、toメソッドを使って変化させる対象のプロパティと時間を設定します。
toメソッドの他にも、waitメソッドで待ち時間を入れたり、callメソッドでアニメーション終了後に特定の関数を実行したりできます。

また、stageを定期的に再描画する必要があるので、Tickerオブジェクトのtickイベントにイベントリスナを設定して、定期的にstageを更新しています。
tickイベントは設定したFPSに合わせて定期的に発行されるイベントです。

tweenのアニメーションはメソッドチェーンで複数のアニメーションを順次実行することができます。



<script>
    (function(window){
        var cj = createjs,
            stage, bitmap;

        function init() {
            stage = new cj.Stage('demoCanvas');

            bitmap = new cj.Bitmap('http://blog.asial.co.jp/image/user_image_m/22.png');
            bitmap.y = 50;
            bitmap.x = 50;
            bitmap.scaleX = 0;
            bitmap.scaleY = 0;
            bitmap.alpha = 0;

            stage.addChild(bitmap);

            stage.update();

            cj.Ticker.setFPS(60);
            cj.Ticker.addEventListener('tick', tickHandler);

            stage.update();

            cj.Tween.get(bitmap, {loop: true}).to({alpha: 1, scaleX: 2, scaleY: 2}, 1000).wait(1000).to({alpha: 0, scaleX: 0, scaleY: 0}, 1000).wait(1000);
        }

        function tickHandler(event) {
            stage.update();
        }

        window.addEventListener('load', function(){
            window.removeEventListener('load', arguments.callee);

            init();
        }, false);
    }(window));
</script>


デモはこちら

以上、簡単ではありますが、CreateJSの使い方を見て行きました。
今回は自分で処理を記述する方法を紹介しましたが、FlashCS6の拡張機能「Toolkit for CreateJS」を使えば、FlashをCreteJSに変換することもできます。
Flashに慣れ親しんでいる人はそちらも試してみると面白いかと思います。

ではでは