読者です 読者をやめる 読者になる 読者になる

haXe + FlashDevelop on Windows 8でJavaScript開発メモ

Haxe/JavaScriptチュートリアル — Haxe/JavaScript tutorial 0.1 documentationに書き直したコンテンツを公開しました。

Windows 8 RPでhaXe開発環境を構築したメモ。ここではWindows 8を使ってるけど、Vista以降のWindowsなら多分同じだと思う。

この記事の執筆時の環境

haXe SDKのインストール

Download - Haxe からWindows用のAutomatic Installerをダウンロード+インストール。手動インストールでも構わないのだろうけど、楽なので。

FlashDevelopのインストール

FlashDevelop.org - Welcomeからインストーラをダウンロード+インストール。

インストーラを起動すると、以下のような警告ダイアログが出ることがあるが、Flash開発をしないのであれば特に気にする必要はない。OKを押せばそのままインストールを開始できる。
f:id:terurou:20120616164753p:image

また、Flash開発をしないのであれば、以下のインストールオプション画面で、

  • Install Flex SDK
  • Install AIR SDK
  • Install Flash Player

はインストール対象から外してしまっても構わない。

f:id:terurou:20120616164754p:image

インストールが完了したら、FlashDevelopがhaXeコンパイラを認識しているか念のため確認する。
メニューの Tools > ProgramSettings を開き、HaXe Context > Installed HaXe SDKsを開く。(InstalledSDK[] 配列と表示されているので、その横の[+]を選択するとツリーが展開できる)
SDKを認識していれば、以下のように「HaXe 2.09」のように表示されているはず。

f:id:terurou:20120617005622p:image

FlashDevelopでhaXe/JavaScriptプロジェクトを作成する

メニューの Project > New Project から新規プロジェクトを作成できる。

f:id:terurou:20120617175526p:image

HaXe JS Projectを選択し、プロジェクト設定を適当に入力し、OKをクリックする。

Name
プロジェクト名。ビルド結果には特に影響を与えないので、好きな名前でよい。
Location
プロジェクトファイルおよびソースコードを格納する場所。Create directry for ProjectをONにすると、指定したフォルダにプロジェクト名でサブフォルダを作成し、そこにファイルを保存する。
Packege
いわゆるnamespace名。後からでも設定を変更可能なので、この時点では未指定でも構わない。ただし、haXeはnamespaceをJava風(すべて小文字、. で区切る)に指定する必要があり、大文字を使ったりするとビルドできなくなるので注意する(警告メッセージがわかりづらいのでハマる)

また、プロジェクトを作成時には、以下のようなAuthor入力ダイアログが表示されるので、適当な名前を入力する。このAuthorの値はJavaDoc風のドキュメントコメントの @author の自動挿入で利用される。

f:id:terurou:20120617175527p:image

これでプロジェクトのひな形が作成される。

JS modernオプションの有効化

ビルド設定を変更し、JS modernオプションを有効化する。このオプションが有効にしなくても開発は可能なのだが、無効な状態だと生成されるJavaScriptのコードが酷い(グローバル空間を汚しまくる)ので、特に理由がなければ有効にしておくべきである。なお、このオプションは将来のリリース(haXe 3.0)ではデフォルトで有効にされる予定らしい。

FlashDevelop右側のProject Managerでプロジェクトを右クリックし、Propertiesを開く。

f:id:terurou:20120618220320p:image

Compiler OptionsタブのAdditional Compiler Optionsに --js-modern を追加する。

f:id:terurou:20120618220919p:image

プロジェクトをテスト起動してみる

F5キー押下もしくはツールバーの三角のボタンをクリックで、プロジェクトをテスト実行できる。実行するとブラウザが起動してくるが、自動生成したままのコードでは、何も出力しない白い画面が表示される。