Haxe + CreateJS 開発メモ#1 準備

Haxe + CreateJS

#JavaScript

#Haxe

#HTML5

#CREATEJS

#RIA

石上慎太郎

2013.01.23

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Haxe とは、JavaScript をはじめとした様々な言語にコンパイル可能な、静的型付けのオブジェクト指向言語です。

こちらに紹介記事があります。
静的型付けをもつJavaScriptへのトランスコンパイル言語を味見してみた

静的型付け言語である Haxe と、canvas を Flash 的に扱える EaselJS 等のライブラリを含む CreateJS を組み合わせて、ActionScript に近いスタイルの開発を実現することを目標とし、Windows 上に開発環境を作ってみます。

Haxe のインストール

Haxe の公式サイトから、「自動インストーラ」をダウンロードして実行します。

Haxe のダウンロード - Haxe

特にオプションを変更する必要はありません。面倒な設定なども無く、とても簡単です。

Haxe のインストール

IDE のインストール

Haxe の IDE はいくつか種類がありますが、今回目指すところは「ActionScript スタイルの開発」なので、元々 ActionScript 開発向けに作られた FlashDevelop を使ってみます。FlashDevelop は、特に追加のプラグイン等をインストールしなくても、標準で Haxe 開発に対応しています。

FlashDevelop の公式サイトから、最新版のインストーラをダウンロードして実行します。

FlashDevelop.org - View forum - Releases

FlashDevelop のインストールについては、日本語公式サイトに丁寧な説明がありますが、Java Runtime と .NET Framework がインストールされていれば特に問題は起きないはずです。また、もし Java Runtime がインストールされていなくても Haxe 開発に支障は無いので、警告を無視して続行してしまって問題ありません。

インストールの途中でコンポーネントの選択がありますが、もし Haxe 以外の開発で FlashDevelop を使用しないのであれば、Flash 系のコンポーネントのチェックは外してしまって構いません。特に Flex や AIR の SDK は非常にサイズが大きいので、不要であれば外したほうが無難です。

FlashDevelop インストール時のコンポーネント選択

ライブラリのインストール

Haxe は静的型付けの言語であるため、JavaScript のライブラリを Haxe 内で使用する場合、型指定が困ったことになります。
Dynamic 型という、型を指定しない型に JavaScript のオブジェクトを持たせてムリヤリ使うこともできますが、Haxe を使う利点が損なわれてしまいます。
幸い、CreateJS を Haxe 内で使うためのライブラリ「CreateJS-Haxe」が存在しています。haxelib コマンドを使用して、ライブラリをインストールします。コマンドプロンプトで以下のコマンドを実行します。

haxelib install createjs

Haxe が正しくインストールされていれば、これだけで最新の CreateJS-Haxe がインストールされます。
このライブラリには、CreateJS のオブジェクトを Haxe のクラスに割り当てるための、extern クラス定義が含まれています。ライブラリの本体は、別途 HTML 内に CDN 等から読み込む必要があります。

ついでに、のちのち使いそうな jQuery 用のライブラリ「jQueryExtern」もインストールしてみます。

haxelib install jQueryExtern

これらのインストール済みライブラリは、以下のコマンドで一覧表示できます。

haxelib list

また、今後もしインストール済みのライブラリのいずれかに更新があった場合、以下のコマンドで自動的に最新版をチェックして適用できます。

haxelib upgrade

FlashDevelop の設定

もし FlashDevelop を日本語で使用したい場合、メニューの「Tools/Program Settings...」を選択すると、設定画面が開きます。左側ペインで FlashDevelop が選択されている事を確認しつつ、右側のリストの Selected Locale の値を ja_JP に変更して FlashDevelop を再起動すると、日本語になります。
日本語になった後に再度設定画面を開くと、設定項目は英語のままになっていますが、項目を選択すると下に日本語でそれなりに丁寧な説明が表示されるので、好みに応じて諸々の設定を行なって下さい。以降の説明は、日本語版を前提とします。

FlashDevelop の日本語化設定

Haxe プロジェクトの作成

メニューの「プロジェクト/新規プロジェクト(N)...」から、プロジェクトを作成します。プロジェクトの種類は、Haxe カテゴリの中にある JS Project を選択します。任意のプロジェクト名と保存場所を入力して OK をクリックでプロジェクトが作成されます。

新規プロジェクト作成

このまま即座にプログラムを記述して実行することも可能ですが、その前にプロジェクトのコンパイラー設定を行います。メニューの「プロジェクト設定(P)...」を選択してプロジェクト設定を開き、コンパイラー設定のタブを選択して、Additional Compiler Options に以下の値を入力します。

--js-modern
-debug

"--js-modern" は、JavaScript 出力時にグローバルスコープを使用しない指定です。他のライブラリと共存させる場合は、指定しておいたほうが無難です。"-debug" は、Haxe のソースコードと出力された JavaScript のマッピング情報を出力する指定です。Google Chrome を使ったデバッグに役立ちます。

追加コンパイラー引数の入力

次に、Libraries に以下の値を入力します。

createjs

このプロジェクトで createjs ライブラリを使用する指定です。値は、"haxelib list" コマンドで参照できるライブラリ名と対応しています。この指定を行うことにより、CreateJS のクラスが使用可能となり、またオートコンプリートが効くようになります。（ jQueryExtern については、なぜか指定しなくても使用でき、オートコンプリートも効くようです。）

※追記　FlashDelevopに標準で入っている jQuery と、上のステップでインストールした jQueryExtern は別モノのようで、importされるパッケージが異なります。jQueryExtern の方が内容が充実しているので、設定を追加してこちらを使ったほうが良いでしょう。

使用ライブラリの入力

これらの設定は、プロジェクト設定の画面で行える他にも、.hxml ファイルを作成してその内にコンパイラ引数を記述し、ビルドコマンド設定でそちらを参照させることも可能です。どちらかというとそのやり方が主流のようですが、.hxml によるライブラリ指定だけではオートコンプリートは効くようにならないため、.hxml を使用する場合でも Libraries の設定は別途行う必要があります。

コーディング

これで準備が整いました。早速、CreateJS を使ったサンプルを組んでみます。

index.html


<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8"/>
	<title>NewProject</title>
	<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
</head>
<body>
	<script src="NewProject.js"></script>
	<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

main.hx

package ;

import createjs.easeljs.Stage;
import createjs.easeljs.Text;
import js.Lib;

class Main {
	
	private var stage:Stage;
	
	//エントリポイント
	static function main() {
		new Main();
	}
	
	//コンストラクタ
	public function new() {
		Lib.window.onload = initialize;
	}
	
	//初期処理
	private function initialize(e):Void {
		stage = new Stage(cast Lib.document.getElementById("canvas"));
		var text:Text = new Text("Hello Haxe + CreateJS World", "20px Arial");
		stage.addChild(text);
		stage.update();
	}
}

ActionScript のコーディングと同じく、クラス名をオートコンプリートすると import 文を自動で記述してくれます。また、型を宣言した変数のメソッドやプロパティもオートコンプリートしてくれます。もしスペルミス等があるとコンパイルエラーを出してくれます。CreateJS 単体で普通に JavaScript としてコーディングするより、圧倒的に効率良く感じました。

実行

では早速、サンプルを実行してみます。

ツールバーの▶ボタンをクリックするか、F5 キー（デフォルト設定）を押すと、デフォルトブラウザでプロジェクトが実行されます。
canvas 上に「Hello Haxe + CreateJS World」と文字が表示されたら成功です。プロジェクトの bin ディレクトリに、コンパイルされた js が出力されています。

実行結果

また、デフォルトブラウザが Google Chrome の場合、F12 キーで開発ツールを起動できますが、コンパイラー引数で "-debug" を指定してあった場合、コンパイル済みの JavaScript ソースコードだけでなく、オリジナルの Haxe ソースコードも表示され、.hx ソースコード上にブレークポイントを張ったり、シングルステップで実行したりできて、デバッグに役立ちます。
（Chrome 開発ツールのソースマッピングはデフォルトでは有効になっていないため、開発ツール右下のギアのマークから設定を開いて有効にする必要があります。）

ソースマッピングの有効化

残念ながら Haxe 側の変数の定義名から直接 watch 式を作成することはできませんが、Scope Variables から見たい変数を探すことは比較的容易ですし、その時だけは JavaScript ソースコード上で確認しても良いと思います。コンパイル済みの JavaScript も、ある程度の可読性は残してあります。