haxe で始める createjs
Post on 14-Jun-2015
4.563 views
TRANSCRIPT
![Page 1: Haxe で始める CreateJS](https://reader035.vdocuments.site/reader035/viewer/2022062300/557cede4d8b42ae6078b4f8a/html5/thumbnails/1.jpg)
Haxe で始める CreateJS
![Page 2: Haxe で始める CreateJS](https://reader035.vdocuments.site/reader035/viewer/2022062300/557cede4d8b42ae6078b4f8a/html5/thumbnails/2.jpg)
自己紹介
• 石上慎太郎
• クラスメソッド株式会社
• 開発部 テクニカルスペシャリスト
• 元 Flash&Flex 系エンジニア。フロントエンドがメイン。
• 最近は主に HTML&JavaScript 担当。
![Page 3: Haxe で始める CreateJS](https://reader035.vdocuments.site/reader035/viewer/2022062300/557cede4d8b42ae6078b4f8a/html5/thumbnails/3.jpg)
アジェンダ
• CreateJS とは
• JavaScript 開発の問題点
• Haxe とは
• JavaScript の弱点に対する Haxe の答え
• Haxe で CreateJS を使う仕組み
• 事例
• 注意点
![Page 4: Haxe で始める CreateJS](https://reader035.vdocuments.site/reader035/viewer/2022062300/557cede4d8b42ae6078b4f8a/html5/thumbnails/4.jpg)
CreateJS とは
![Page 5: Haxe で始める CreateJS](https://reader035.vdocuments.site/reader035/viewer/2022062300/557cede4d8b42ae6078b4f8a/html5/thumbnails/5.jpg)
CreateJS とは
• HTML5 の canvas で、Flash っぽくいろいろできる EaselJS を中心としたライブラリ群
http://www.createjs.com/#!/EaselJS/demos
![Page 6: Haxe で始める CreateJS](https://reader035.vdocuments.site/reader035/viewer/2022062300/557cede4d8b42ae6078b4f8a/html5/thumbnails/6.jpg)
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 とクラス名やメソッド名が似ている。
![Page 7: Haxe で始める CreateJS](https://reader035.vdocuments.site/reader035/viewer/2022062300/557cede4d8b42ae6078b4f8a/html5/thumbnails/7.jpg)
CreateJS とは
• ActionScript の感覚で使ってみた。
→やはり JavaScript は JavaScript だった。(当たり前)
![Page 8: Haxe で始める CreateJS](https://reader035.vdocuments.site/reader035/viewer/2022062300/557cede4d8b42ae6078b4f8a/html5/thumbnails/8.jpg)
JavaScript 開発の問題点
![Page 9: Haxe で始める CreateJS](https://reader035.vdocuments.site/reader035/viewer/2022062300/557cede4d8b42ae6078b4f8a/html5/thumbnails/9.jpg)
JavaScript 開発の問題点
• コード補完が弱い。(IDE にもよるが…。)
• エラーチェックが弱い。動かすまで分からない。
• ヘタしたら動かしても分からない。
• クラスが作りにくい。Prototypeェ…
• クラスごとに js ファイルを分けると読み込みが面倒。
• 依存管理も面倒。
• 1ファイルにしたらそれはそれでコーディングが面倒。
• 分業が面倒。
• 等々とにかく面倒。
![Page 10: Haxe で始める CreateJS](https://reader035.vdocuments.site/reader035/viewer/2022062300/557cede4d8b42ae6078b4f8a/html5/thumbnails/10.jpg)
JavaScript開発の問題点
そこで Haxe(ヘックス)です。
![Page 11: Haxe で始める CreateJS](https://reader035.vdocuments.site/reader035/viewer/2022062300/557cede4d8b42ae6078b4f8a/html5/thumbnails/11.jpg)
Haxe(ヘックス)とは
![Page 12: Haxe で始める CreateJS](https://reader035.vdocuments.site/reader035/viewer/2022062300/557cede4d8b42ae6078b4f8a/html5/thumbnails/12.jpg)
Haxe(ヘックス)とは
• ActionScript に似た文法の静的型付けオブジェクト指向言語。
• JavaScript 以外の複数の言語にもコンパイル可能。
• オープンソース&フリー。
• 最近はやりの TypeScript と一部競合?
![Page 13: Haxe で始める CreateJS](https://reader035.vdocuments.site/reader035/viewer/2022062300/557cede4d8b42ae6078b4f8a/html5/thumbnails/13.jpg)
Haxe(ヘックス)とは
ActionScript 開発経験のあるエンジニア(わたしです)が、
ActionScript に似た言語である Haxe で、
ActionScript と似たクラスやメソッドを持つ CreateJS を使って開発してみた。
→すごく捗った!(実体験)
![Page 14: Haxe で始める CreateJS](https://reader035.vdocuments.site/reader035/viewer/2022062300/557cede4d8b42ae6078b4f8a/html5/thumbnails/14.jpg)
JavaScript の弱点に対する Haxe の答え
![Page 15: Haxe で始める CreateJS](https://reader035.vdocuments.site/reader035/viewer/2022062300/557cede4d8b42ae6078b4f8a/html5/thumbnails/15.jpg)
JavaScript の弱点に対する Haxe の答え
IDE はいろいろありますが、
私は FlashDevelop を使います。
・無料。
・ActionScript 開発で広く使われている。
(ただし Windows 版のみ。)
・個人的にも使用経験があった。
![Page 16: Haxe で始める CreateJS](https://reader035.vdocuments.site/reader035/viewer/2022062300/557cede4d8b42ae6078b4f8a/html5/thumbnails/16.jpg)
JavaScript の弱点に対する Haxe の答え
• コード補完
FlashDevelop のコード補完は「それなりに」有効。
自動インポート周りで若干の使いにくさはあるが、それでも十分使えます。
FlashBuilder 等と比べると若干見劣りしますが、今後に期待。
![Page 17: Haxe で始める CreateJS](https://reader035.vdocuments.site/reader035/viewer/2022062300/557cede4d8b42ae6078b4f8a/html5/thumbnails/17.jpg)
JavaScript の弱点に対する Haxe の答え
• エラーチェック
Haxe は「静的型付け言語」
その上、型推論も。
厳密なエラーチェックが行われるため、スペルミスや型の不一致からセミコロン抜けまで全てコンパイルエラー。
![Page 18: Haxe で始める CreateJS](https://reader035.vdocuments.site/reader035/viewer/2022062300/557cede4d8b42ae6078b4f8a/html5/thumbnails/18.jpg)
JavaScript の弱点に対する Haxe の答え
• クラス作成
クラスの作り方は、ActionScript とほぼ同じ。
継承もできます。Interface も作れます。
↑このカンマがAS3と異なる。
class MyClass extends FooClass, implements IBar {
![Page 19: Haxe で始める CreateJS](https://reader035.vdocuments.site/reader035/viewer/2022062300/557cede4d8b42ae6078b4f8a/html5/thumbnails/19.jpg)
JavaScript の弱点に対する Haxe の答え
• ソースファイル&依存管理
Haxe は基本的に1クラス1ファイル。
(作ろうと思えばインナークラスも作れます。)
コンパイルされた JS は、1ファイルに纏まります。
依存管理の必要無し!
しかも、Chrome のソースマッピングを使用すると、Haxe ソースコード上でのデバッグさえも可能。
![Page 20: Haxe で始める CreateJS](https://reader035.vdocuments.site/reader035/viewer/2022062300/557cede4d8b42ae6078b4f8a/html5/thumbnails/20.jpg)
Haxe で CreateJS を使う仕組み
![Page 21: Haxe で始める CreateJS](https://reader035.vdocuments.site/reader035/viewer/2022062300/557cede4d8b42ae6078b4f8a/html5/thumbnails/21.jpg)
Haxe で CreateJS を使う仕組み
• CreateJS は JavaScript で作られたライブラリ。
→これを Haxe から使うには?
![Page 22: Haxe で始める CreateJS](https://reader035.vdocuments.site/reader035/viewer/2022062300/557cede4d8b42ae6078b4f8a/html5/thumbnails/22.jpg)
Haxe で CreateJS を使う仕組み
• CreateJS は JavaScript で作られたライブラリ。
→これを Haxe から使うには?
extern クラスを使います。
![Page 23: Haxe で始める CreateJS](https://reader035.vdocuments.site/reader035/viewer/2022062300/557cede4d8b42ae6078b4f8a/html5/thumbnails/23.jpg)
Haxe で CreateJS を使う仕組み
• extern クラスとは
Haxe の外部で定義され、実行時に利用可能となる機能の「インターフェース」を定義したクラス。
![Page 24: Haxe で始める CreateJS](https://reader035.vdocuments.site/reader035/viewer/2022062300/557cede4d8b42ae6078b4f8a/html5/thumbnails/24.jpg)
Haxe で CreateJS を使う仕組み
• CreateJS の extern クラス
自分で作る必要はありません。Haxelib で公開されているので、コマンド一発でインストール&使用可能です。
>haxelib install createjs
![Page 25: Haxe で始める CreateJS](https://reader035.vdocuments.site/reader035/viewer/2022062300/557cede4d8b42ae6078b4f8a/html5/thumbnails/25.jpg)
Haxe で CreateJS を使う仕組み
• extern クラスを継承した新しいクラスも作れます。
import createjs.easeljs.Shape; class MyShape extends Shape { public function new() { super(); } ・・・ }
![Page 26: Haxe で始める CreateJS](https://reader035.vdocuments.site/reader035/viewer/2022062300/557cede4d8b42ae6078b4f8a/html5/thumbnails/26.jpg)
Haxe で CreateJS を使う仕組み
この他に、jQuery の extern クラス等も haxelib に公開されています。
また、使いたいライブラリの extern クラスを自分で作ることも可能。
オブジェクトや配列の操作で便利な Underscore.js の extern クラスを自作して使っています。
動作確認はユニットテスト。これも Haxe の標準機能。
![Page 27: Haxe で始める CreateJS](https://reader035.vdocuments.site/reader035/viewer/2022062300/557cede4d8b42ae6078b4f8a/html5/thumbnails/27.jpg)
事例
![Page 28: Haxe で始める CreateJS](https://reader035.vdocuments.site/reader035/viewer/2022062300/557cede4d8b42ae6078b4f8a/html5/thumbnails/28.jpg)
注意点
JavaScript に対する十分な理解無しで挑むとハマる恐れ有り。応用の幅も狭まります。
Haxe + CreateJS 開発メモ#5 removeEventListener が機能しない問題の回避方法
http://dev.classmethod.jp/ria/html5/haxe-createjs-5/