Haxe + CreateJS 開発メモ#4 FlashDevelopからWEBサーバ経由で実行する

FlashDevelop には、残念ながら内蔵 Web サーバなどは搭載されておらず、デフォルト設定でプロジェクトを実行すると、ローカルファイルをブラウザで開いた状態になります。主要なブラウザでは、ローカルファイルのスクリプト実行にはセキュリティの観点から様々な制限が設けられており、例えば CreateJS の場合は、PreloaderJS で画像等を読み込むとエラーが発生します。

サンプルプログラム

package ;

import createjs.easeljs.Bitmap;
import createjs.easeljs.Stage;
import createjs.preloadjs.LoadQueue;
import jQuery.JQuery;
import js.Lib;

class Main {
	
	static function main() {
		new JQuery(Lib.window).ready(function() {
			new Main();
		});
	}
	
	private var stage:Stage;
	private var loader:LoadQueue;
	
	public function new():Void {
		loader = new LoadQueue();
		loader.addEventListener("complete", loaderComplete);
		loader.loadManifest([ { src:"faceicon.png", id:"faceicon" } ]);
		stage = new Stage(Lib.document.getElementById("canvas"));
	}
	
	public function loaderComplete(e:Dynamic):Void {
		var bmp = new Bitmap(loader.getResult("faceicon"));
		stage.addChild(bmp);
		stage.update();
	}
}

実行結果

XMLHttpRequest cannot load file:///C:/***/myproject/bin/faceicon.png. Cross origin requests are only supported for HTTP. preloadjs-0.3.0.min.js:47

かと言って、コンパイルされたファイルを毎回 Web サーバにデプロイしてデバッグするのは面倒なので、FlashDelelop 上の実行ボタンから直接ウェブサーバ経由で実行できる構成を作ってみました。

Apache インストール＆設定

開発環境に Apache をインストールします。特にこの時点で気にすることは無いので、お好みの設定でインストールしてください。

インストール完了後、Apache インストールディレクトリの下の \conf\httpd.conf を開いて、エイリアスの設定を行います。 "<IfModule alias_module>"で検索してヒットしたセクションの中に、以下の記述を追加します。

#エイリアス設定
Alias /[任意のエイリアス名] [プロジェクトのbinディレクトリの絶対パス]

#ディレクトリのアクセス許可設定
<Directory "[プロジェクトのbinディレクトリの絶対パス]">
    Allow from all
</Directory></code>

ディレクトリのアクセス許可設定の￥は、スラッシュに書き換える必要があります。エイリアス設定の方は￥でもスラッシュでも良いです。 こんな感じになります。

<IfModule alias_module>
    ・・・
    Alias /myproject C:\***\myproject\bin
    
    <Directory "C:/***/myproject/bin/">
    	Allow from all
    </Directory>
    ・・・
</IfModule>

httpd.conf を変更した後は、Apache を再起動します。

プロジェクト設定

メニューの[プロジェクト][プロジェクト設定]を開き、[プロジェクトをテスト]の編集ボタンをクリックして、コマンド欄に以下の値を入力します。

http://localhost/[エイリアス名]/index.html

以上で設定完了です。プロジェクトを実行すると、ローカルに立てた WEB サーバ経由で実行され、セキュリティエラーが発生しなくなりました。