More Related Content Similar to Haxe で始める CreateJS Similar to Haxe で始める CreateJS (20) More from クラスメソッド株式会社 (12) 3. アジェンダ
• CreateJS とは
• JavaScript 開発の問題点
• Haxe とは
• JavaScript の弱点に対する Haxe の答え
• Haxe で CreateJS を使う仕組み
• 事例
• 注意点
5. CreateJS とは
• HTML5 の canvas で、Flash っぽくいろ
いろできる EaselJS を中心としたライブ
ラリ群
http://www.createjs.com/#!/EaselJS/demos
6. CreateJS とは
• ソースコードはこんな感じです。
var graphics = new createjs.Graphics().beginFill("#ff0000").drawRect(0, 0, 100, 100);
var shape = new createjs.Shape(graphics);
//Alternatively use can also use the graphics property of the Shape class to renderer the same as above.
var shape = new createjs.Shape();
shape.graphics.beginFill("#ff0000").drawRect(0, 0, 100, 100);
ActionScript とクラス名やメソッド名が似ている。
9. JavaScript 開発の問題点
• コード補完が弱い。（IDE にもよるが…。）
• エラーチェックが弱い。動かすまで分からない。
• ヘタしたら動かしても分からない。
• クラスが作りにくい。Prototypeｪ…
• クラスごとに js ファイルを分けると読み込みが面倒。
• 依存管理も面倒。
• 1ファイルにしたらそれはそれでコーディングが面倒。
• 分業が面倒。
• 等々とにかく面倒。
15. JavaScript の弱点に対する Haxe の答え
IDE はいろいろありますが、
私は FlashDevelop を使います。
・無料。
・ActionScript 開発で広く使われている。
（ただし Windows 版のみ。）
・個人的にも使用経験があった。
16. JavaScript の弱点に対する Haxe の答え
• コード補完
FlashDevelop のコード補完は「それなりに」有効。
自動インポート周りで若干の使いにくさはあるが、それで
も十分使えます。
FlashBuilder 等と比べると若干見劣りしますが、今後に期待。
17. JavaScript の弱点に対する Haxe の答え
• エラーチェック
Haxe は「静的型付け言語」
その上、型推論も。
厳密なエラーチェックが行われるため、スペルミスや型の
不一致からセミコロン抜けまで全てコンパイルエラー。
18. JavaScript の弱点に対する Haxe の答え
• クラス作成
クラスの作り方は、ActionScript とほぼ同じ。
継承もできます。Interface も作れます。
↑このカンマがAS3と異なる。
class MyClass extends FooClass, implements IBar {
19. JavaScript の弱点に対する Haxe の答え
• ソースファイル＆依存管理
Haxe は基本的に1クラス1ファイル。
（作ろうと思えばインナークラスも作れます。）
コンパイルされた JS は、1ファイルに纏まります。
依存管理の必要無し！
しかも、Chrome のソースマッピングを使用すると、
Haxe ソースコード上でのデバッグさえも可能。
21. Haxe で CreateJS を使う仕組み
• CreateJS は JavaScript で作られたライブラリ。
→これを Haxe から使うには？
22. Haxe で CreateJS を使う仕組み
• CreateJS は JavaScript で作られたライブラリ。
→これを Haxe から使うには？
extern クラスを使います。
23. Haxe で CreateJS を使う仕組み
• extern クラスとは
Haxe の外部で定義され、実行時に利用可能となる機能の
「インターフェース」を定義したクラス。
24. Haxe で CreateJS を使う仕組み
• CreateJS の extern クラス
自分で作る必要はありません。Haxelib で公開されてい
るので、コマンド一発でインストール＆使用可能です。
>haxelib install createjs
25. Haxe で CreateJS を使う仕組み
• extern クラスを継承した新しいクラスも作れます。
import createjs.easeljs.Shape;
class MyShape extends Shape {
public function new() {
super();
}
・・・
}
26. Haxe で CreateJS を使う仕組み
この他に、jQuery の extern クラス等も haxelib に公開
されています。
また、使いたいライブラリの extern クラスを自分で作る
ことも可能。
オブジェクトや配列の操作で便利な Underscore.js の extern クラス
を自作して使っています。
動作確認はユニットテスト。これも Haxe の標準機能。
