haxe+createjsを触ってみました。

こんにちは。二回目の投稿になります。前回はHaxe+openflについて書きましたが、今回はHaxe+CreateJSを触ってみてハマったことや躓いたことを、おもに自身の備忘録として、ここにしたためておきます。

1.作業環境　

Linux(Arch Linux)上でvim+vaxeで作業をしています。
Win７上ではFlashDevelopを使って作業をしています。
Win Linux ともに64bitです。

2.バージョン

Haxeのバーションは[3.1.3]
createjsのバージョンは[createjs-2014.12.12.min.js]
CreateJS-Haxeのバージョンは[1.5.7]
vimのバージョンは[7.4.537]
FlashDevelopのバージョンは[4.6.4.1]
です。

3.注意点・留意点・お願い

筆者はブログラム経験が浅く、特にJavaScriptに関する知識がほとんどありません。なので、色々と見当違いなことをここに書き残す場合もあります。その点にはご留意ください。間違い等ありましたら、ご指摘願います。できる限り速やかに対応させていただきます。

４.準備

HaxeではjavaScriptの外部ライブラリを使用するにあたって、extern class というものを用意する必要があります。今回の場合はcreatejsを使用するので、createjsをHaxeから利用するためのextern class が必要になるわけですが、createjsの場合は、すでにhaxelibに用意されているので、ターミナルでhaxelib install createjsとするだけで、サクっとHaxeからcreatejsを利用する準備が整います。
参考URL
http://old.haxe.org/doc/js/extern_libraries?version=15978

５.ハマったところ

さて、サクっと上記のextern classを導入したのはいいのですが、これが今回のハマリポイントとなりました。
下記のコードをHaxeで書き、jsターゲットでコンパイル。問題なくコンパイルは通るのですが、firebugで確認すると何やら下記のエラーがでてきます。

コード

package;

import createjs.easeljs.DisplayObject;
import createjs.easeljs.Stage;
import createjs.easeljs.Event;
import js.Browser;

class Main extends DisplayObject{

    private var stage:Stage;
    public static function main() {
        new Main();
    }
    private function init(e:Event):Void {
        stage = new Stage(Browser.document.createCanvasElement());

    }
    public function new() {
        super();
        Browser.window.addEventListener("load",init);
        }          
}   

エラー
TypeError: setting a property that has only a getter
this.stage = new createjs.Stage((function($this) {
-------------↑

うーん。getterしかもっていないプロパティーに値を設定しているのでダメです、代入はできないです。とのこと。
ちょっとまってよ、stageってのは当方が用意したメンバであって、getterもsetterも関係ないじゃない。っておもったわけです。ここでしばし迷走。しかし、ちょっと冷静になって瞑想にふけること１０分間。そういえば、親クラスのDisplayObjectにはstageってメンバ変数あったなぁと思い当たりました。嗚呼、なるほど、知らず知らずstageってメンバをサブクラスにおいてオーバーライドしてしまっていたわけね。というわけで、stageというメンバ名をmyStage等に変えることで一件落着....ってちょっとまってよ。知らず知らずにオーバーライドってどういうことだよ〜ってなりました。なんのためにHaxeとextern classをつかっているのかと。なぜにコンパイルが通るのかと。なので、ためしに、DisplayObjectクラスが持つメンバを上記のクラスにあえて追加してみました。

（省略）
private var stage:Stage;
private var alpha:Float;//これを追加
（省略）

すると・・・

Redefinition of variable alpha in subclass is not allowd

ちゃんとコンパイル時にエラーを出してくれました。
というわけで、結論からいうと、「extern classからstageの定義が抜けていた。」ということなんですね。これって結構やっかいだなぁ〜とおもいつつも、そもそも人が作ったものを利用してあやふやにコードを書くからからこうなるんですよね。extern classの中身ぐらいは自分でしっかりと確認しないとですね。JSライブラリのソースも読まないといけいないですよね。色々と勉強になりました。嗚呼、JavaScript。少なくとも読めるようにならないと。。。。

おまけ

FlashDevelop（バージョン4.6.4.1)では、mongooseというwebサーバをつかってhtml5ターゲットやjsターゲットでビルドされたコンテンツをブラウザに表示してくれるのですが、このmongoose周りに不具合があるのか、うまく動作しませんでした。下記URLの内容をもとにして、設定を変えようとしましたが、設定項目自体が見つかりません。なので、いまのところ、根本的な解決策が見つかっていません。とりあえず、ビルドで作成されたhtmlを直接ブラウザで開くという方法で対処していますが、時期バージョンで改善されていると嬉しいです。

話し変わって、前回、vaxeとsyntsticのhaxeでの使い心地をレビューすると書きましたが、もう少し使い込んでから書きたいとおもいます。本日は以上です。

参考URL
http://www.flashdevelop.org/community/viewtopic.php?f=6&t=11910
http://www.flashdevelop.org/community/viewtopic.php?f=13&t=11978