クロスオリジンに置いたメディアファイルを取得し使う為の createJS めも #JavaScript

createJS バージョン情報

ライブラリ	バージョン
EaselJS	version 0.7.1
TweenJS	version 0.5.1
PreloadJS	version 0.4.1

目的(Goal)

クロスオリジンに置いたメディアファイルを canvas で使う時に CROS エラーになる問題を回避したい. 今回は CreateJS を使用している.

前提条件(Given)

HTML ファイル (ex. http://hoge.com) と CSS/JS/Images ファイル (ex. http://cdn.fuga.com) を別のオリジンサーバに置いている.
メディアファイルを置くの Web サーバ(ex. http://cdn.fuga.com) のレスポンスヘッダには CROS ヘッダを追記している.(下記例参照)

ex. nginx の場合

nginx.conf

## 設定ファイルの一部
http {
    server {
        listen       80;

        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;

            if ($request_method = OPTIONS) {
                add_header Access-Control-Allow-Origin *;
                add_header Access-Control-Allow-Methods "GET, OPTIONS";
                add_header Access-Control-Allow-Headers "Origin, Authorization, Accept";
                add_header Access-Control-Allow-Credentials true;
                add_header Content-Length 0;
                add_header Content-Type text/plain;
                return 200;
            }

            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods "GET, OPTIONS";
            add_header Access-Control-Allow-Headers "Origin, Authorization, Accept";
            add_header Access-Control-Allow-Credentials true;
        }
    }
}

解決したい問題その 1: createJS でクロスオリジンの画像取得に失敗する

クロスドメインのエラーになるため, canvas で画像取得及び bitmap 画像描画に失敗する.

解決策

PreloadJS で LoadQueue を初期化する際に第 3 引数に文字列を指定する.

loader = new createjs.LoadQueue(false, '', 'hoghoge')

公式ドキュメントのサンプルは “Anonymous” と明記されていた(*1)が, 任意の文字列であれば問題ない. (空文字列でなければよい.)

結果

全てのブラウザ(IE, chrome, safari, firefox, android ブラウザ)でクロスオリジンの画像取得ができたことを確認した.

解決したい問題その 2: createJS で生成した bitmap 画像にクリックが効かない

android 2.3, iOS5 の Web ブラウザでは, クロスオリジンの画像で生成した bitmap 画像にクリックが効かない.

解決策

透明のベクターオブジェクトを作り, bitmap 画像の代わりにクリックさせる. (*2)
hitArea メソッドで他のオブジェクトにイベントリスナーを登録できる. (*3)

記述例s

    # 画像インスタンス生成
    bitmap = new createjs.Bitmap('CDN_URL/hoge.png')
    # ダミーのインスタンス生成
    dammy_obj = new createjs.Shape()

    # ダミーのオブジェクトサイズを画像と合わせる
    dammy_obj.graphics.beginFill('＃000000')
    dammy_obj.drawRect(0, 0, bitmap.image.width, bitmap.image.height)

    # イベントリスナーつける
    bitmap.hitArea = dammy_obj   

    # 画像オブジェクトのみ addChild する
    stage.addChild(bitmap)

    # 画像オブジェクトにイベントリスナーを登録しておく
    bitmap.addEventListener 'mousedown', (e) ->
        # 処理
        return

結果

このコードを入れて上と同様の対象ブラウザにおいて, 生成した bitmap 画像のクリックが効くようになった.

References

(*1) http://www.createjs.com/Docs/PreloadJS/classes/LoadQueue.html
(*2) http://d.hatena.ne.jp/DiegoTristan/20130520/1369031619
(*3) http://www.createjs.com/Docs/EaselJS/classes/ButtonHelper.html