[Haxe] CreateJSを始めよう!

そうだ! Haxeを触ってみよう! :bouzu:

Haxe

Sublime Text 2 を使って、CreateJS を使えるようにしてみるよ。 :boy:

ぱんちょ先生 :hakase: がステキ記事を書いてくださってるので、これを参考に進めていくよ。
参考資料「Haxe + CreateJs を Sublime Text 2 で開発する準備をしてみたのでメモ | LLC DigiFie


[1] Haxe

:check: 「index - Haxe

Haxe Toolkit (Automatic Installer) をダウンロードして、インストール。
最新版 Haxe 3.0.1 をダウンロードしたよ。(2013/11/15 現在)

Terminal を起動して、
$ haxelib setup
と入力する。


[2] CreateJS

ライブラリ(CreateJS)をインストール。

Terminal を起動して、
$ haxelib install createjs
と入力する。


[3] jQuery

ライブラリ(jQuery)をインストール。

Terminal を起動して、
$ haxelib install jQueryExtern
と入力する。


[4] Sublime Text 2

Sublime Text 2 は、ダウンロードしておいてね。


(1) Package Control のインストール

[View]-[Show Console]で、コンソールを開く。

import urllib2,os; pf=’Package Control.sublime-package’; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),’wb’).write(urllib2.urlopen(‘http://sublime.wbond.net/’+pf.replace(‘ ‘,’%20’)).read()); print(‘Please restart Sublime Text to finish installation’)
と入力する。

で、Sublime Text 2 を再起動。すると、[Sublime Text 2]-[Preferences] に、[Package Control] という項目が追加される。


(2) Haxe のインストール

[Sublime Text 2]-[Preferences]-[Package Control]で「Package Control: Install Package」 を選択。

しばらくして項目が表示されたら「Haxe」で検索。「Haxe」を選択。(すでにインストールされている場合は表示されない)


(3) ビルド環境

次のようなファイル構成で、Main.hx, build.hxml を作成。

Haxe_init1

Main.hx
package;

import js.Lib;

class Main
{
  public static function main()
  {
    new Main();
  }
  public function new()
  {
    Lib.alert("Hello World!");
  }
}

build.hxml
-cp src
-main Main
-js bin/main.js

build.hxml 上で、[Command + B] すると、ビルドされる。

Haxe_init2


これだけじゃアレなんで、index.html を用意する。

Haxe_init3

index.html
<!DOCTYPE html>
<html>
<head>
<title> Hello World!</title>
</head>
<body>
  <div id="haxe:trace"></div>
  <script type="text/javascript" src="main.js">/script>
</body>
</html>

ブラウザで index.html を開く。でたー! 😮

Haxe_init4


(4) 注意点

CreateJSを使いたいときには・・・

build.hxml
-cp src
-main Main
-js bin/main.js
-lib createjs
としておかないと、CreateJSのクラスがインポートできません。


リファレンスは、こちら。「Documentation - Haxe
詳しいガイドは、こちら。「FIRST STEP to Haxe/JavaScript


他にも参考になった記事がいくつかあるので、ご紹介。
参考資料「HaxeではじめるCreateJS - いつきの技的日記
参考資料「Haxe もサポートしている Sublime Text 2 を使うときのいくつかメモまとめ | lettuce-eater
参考資料「Sublime Text 2 の Haxe 用プロジェクトファイルのテンプレ - Qiita [キータ]