いまから始めるCreateJS学習会 第1回

投稿者: | 2013/12/07

参加しました。
http://atnd.org/events/44942

CreateJS本体の勉強をするか、環境構築の模索を行うか悩んだのですが、後者で。

とりあえず、前から気になっていた「InteliJ IDEA Ultimate + Haxe + CreateJS」を構築してみました。
以下自分用メモなので、画像とかいっさい有りません。いつもの事ですが。あと、環境構築するだけなので、コードの中身まったく関係ないです。あと、Macです。

●InteliJ IDEA Ultimateをダウンロード

http://www.jetbrains.com/idea/

UltimateとCommunityEditionがあって、前者有料・後者無料。無料体験期間が30日有るので、今回はUltimateで行こう。CommunityEditionはHTML系全滅っぽいので、Haxeだけ触るならともかく、それ以外の部分も触るのであれば、強制的に前者選択なのかな。
http://ja.wikipedia.org/wiki/IntelliJ_IDEA/

●Haxeをダウンロード・インストール

http://haxe.org/download/
これでコンパイラがインストールされる

●Haxe-CreateJSをインストール

HaxeはCreateJSを標準でサポートしていないけど、このプラグイン(extern)インストールすれば使えるようになるとの事。
Haxeはさっきインストールしているので、コマンドラインでインストールする
最初は
・haxelib setup
としないと「This is the first time you are runing haxelib. Please run `haxelib setup` first」と怒られた。

で、「リポジトリPathを入力してください」っていうのが出るけど、そのままEnterでデフォルトの場所(/usr/lib/haxe/lib/)にインストールされる。

次に以下を入力
・haxelib install createjs
これでHaxeでCreateJSが利用できるようになる。

InteliJ IDEAにHaxeプラグインをインストール
初めて起動するとQuickStartの所にConfigureがあるので「Configure -> Pluigins」を選ぶと、プラグインのリストが出る。下のメニューにある「Browse repositories」をクリックすると沢山のリストが出るので検索窓で「haxe」と入れると、「HaxeSupport」だけが残る。それをダブルクリックしてインストール。Closeで再起動。

再起動したら、CreateNewProjectを選ぶと、作成できるプロジェクト一覧が出る。
Otherから「Haxe」を選ぶ。なんかProjectSDKがNoneになっていたので、Newで選んであげる。ダイアログが出ると既にHaxeのフォルダに行っているので、そのままChooseで良い。これでプロジェクトを作成する。

●設定

たいがさん曰く、「Preference(或いはSetting) -> Keymap」でEclipseを選ぶと、Eclipse関連を触っている人は幸せになれるとの事。

http://dev.classmethod.jp/tool/idea-haxe-createjs-tutorials-01/#toc-flash-builder-eclipse-

●作ってみよう

Haxeを外部ライブラリとして設定しなくてはならないので、設定する。プロジェクト右クリックで「Open Module Settings」を選び、LibraryにHaxeを追加する。自分の場合は「/usr/lib/haxe/lib/createjs」にある。内容を確認しつつOKを押していくと完了。

プロジェクトのsrcフォルダ右クリックで「New -> Haxe Class」を作成。これでHaxeのクラスが作れるはずと思ったら、Kindのリストに何も入っておらず、作れない(汗)。調べてみたけど結局判らないので、普通にFileで作ってMain.hxっていうのを作った。

プロジェクトのビルド設定ファイルは、自分で作るらしい。hxmlファイルを作り、設定を記述して、プロジェクト設定を行う。

hxmlの注意点として、hxmlはプロジェクトフォルダ直下におく必要が有る。srcフォルダの中に入れたらだめ。1時間くらい引っかかった・・・。

「Open Module Settings -> Module」のHaxe設定で「Compile with」にHXMLを選択し、作ったhxmlファイルを選択する。あと、TargetをJavaScriptにして、OK。

コードは以下を参照。js.Libがjs.Browserに変わってるらしい。
http://snowin.hatenablog.com/entry/2013/08/16/162049

あとは、一旦ビルド。問題なく書き出せた。んー・・・ちょっと面倒くさい。プロジェクト生成時にhxmlを自動で作ってくれたらよいかも。

●ついでにHaxe コンパイラのコマンド引数を見てみる

http://haxe.org/doc/compiler
日本語バージョンのドキュメントも有るけど、情報古い?日付が去年だった。

●時間がちょっと余ったので、折角なので「InteliJ IDEA + TypeScript + CreateJS」

TypeScriptはNode.js必須。Node.jsはインストール済みなのでスルー。
http://nodejs.org/

●TypeScriptインストール

sudo npm install -g typescript
sudoしてないとエラー起こるんで注意。

●InteliJ IDEAはファイルのサポートはしてるけどコンパイル環境のサポートはしていないので、その設定を作ってあげる。

「Preference -> External Tools」を開き、新規追加
Name : Compile TypeScript
Group : TypeScript
Program : /usr/local/bin/node
Parameters : /usr/local/bin/tsc $FilePath$
Working directory : $ProjectFileDir$

パラメータとかは、コンパイルのオプションをガツガツ書けるところだけど、まぁとりあえずで。
OK押して終了。

●作ってみる

プロジェクトは、「Web」で。フォルダ構成はないので、自分で1から作る。
とりあえず、TypeScriptのチュートリアルのを貰う。HTMLは適当に。
http://www.typescriptlang.org/Tutorial/
作ったtsファイルを右クリックすると、メニューの下らへんにTypeScriptがあるので、そこから「Compile TypeScript」を選ぶと、tsファイルの同階層にjsファイルが作成される。htmlをブラウザで閲覧して問題ないのを確認。

時間があれば「InteliJ IDEA + CoffeeScript + CreateJS」もやってみようかと思いましたが、時間がないので断念。

●参考資料

IntelliJ IDEA + Haxe/CreateJS 環境構築 ( 前編 )
http://dev.classmethod.jp/tool/idea-haxe-createjs-tutorials-01/

IntelliJ IDEA + Haxe/CreateJS 環境構築 ( 後編 )
http://dev.classmethod.jp/tool/idea-haxe-createjs-tutorials-02/

Haxe + CreateJS 開発メモ#1 準備
http://dev.classmethod.jp/ria/html5/haxe-createjs-1/

FIRST STEP to Haxe/JavaScript
http://www.slideshare.net/terurou/first-step-to-haxejavascript/

Haxe で始める CreateJS
http://www.slideshare.net/classmethod/haxe-createjs

altJS勉強会「Haxeすごいからみんな使え!」
http://www.slideshare.net/sipojp/haxe-24876418/

IntelliJ IDEA + Haxe + Macでとりあえず動かす
http://snowin.hatenablog.com/entry/2013/08/16/162049

TypeScriptもやっぱりIntelliJだよね
http://siosio.hatenablog.com/entry/2012/11/03/234942