Your SlideShare is downloading. ×
0
Haxe で始める CreateJS
Haxe で始める CreateJS
Haxe で始める CreateJS
Haxe で始める CreateJS
Haxe で始める CreateJS
Haxe で始める CreateJS
Haxe で始める CreateJS
Haxe で始める CreateJS
Haxe で始める CreateJS
Haxe で始める CreateJS
Haxe で始める CreateJS
Haxe で始める CreateJS
Haxe で始める CreateJS
Haxe で始める CreateJS
Haxe で始める CreateJS
Haxe で始める CreateJS
Haxe で始める CreateJS
Haxe で始める CreateJS
Haxe で始める CreateJS
Haxe で始める CreateJS
Haxe で始める CreateJS
Haxe で始める CreateJS
Haxe で始める CreateJS
Haxe で始める CreateJS
Haxe で始める CreateJS
Haxe で始める CreateJS
Haxe で始める CreateJS
Haxe で始める CreateJS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Haxe で始める CreateJS

4,571

Published on

Published in: Technology
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,571
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
19
Comments
0
Likes
15
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Haxe で始める CreateJS
  • 2. 自己紹介• 石上慎太郎• クラスメソッド株式会社• 開発部 テクニカルスペシャリスト• 元 Flash&Flex 系エンジニア。フロントエンドがメイン。• 最近は主に HTML&JavaScript 担当。
  • 3. アジェンダ• CreateJS とは• JavaScript 開発の問題点• Haxe とは• JavaScript の弱点に対する Haxe の答え• Haxe で CreateJS を使う仕組み• 事例• 注意点
  • 4. 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 とクラス名やメソッド名が似ている。
  • 7. CreateJS とは• ActionScript の感覚で使ってみた。→やはり JavaScript は JavaScript だった。(当たり前)
  • 8. JavaScript 開発の問題点
  • 9. JavaScript 開発の問題点• コード補完が弱い。(IDE にもよるが…。)• エラーチェックが弱い。動かすまで分からない。• ヘタしたら動かしても分からない。• クラスが作りにくい。Prototypeェ…• クラスごとに js ファイルを分けると読み込みが面倒。• 依存管理も面倒。• 1ファイルにしたらそれはそれでコーディングが面倒。• 分業が面倒。• 等々とにかく面倒。
  • 10. JavaScript開発の問題点そこで Haxe(ヘックス)です。
  • 11. Haxe(ヘックス)とは
  • 12. Haxe(ヘックス)とは• ActionScript に似た文法の静的型付けオブジェクト指向言語。• JavaScript 以外の複数の言語にもコンパイル可能。• オープンソース&フリー。• 最近はやりの TypeScript と一部競合?
  • 13. Haxe(ヘックス)とはActionScript 開発経験のあるエンジニア(わたしです)が、ActionScript に似た言語である Haxe で、ActionScript と似たクラスやメソッドを持つ CreateJS を使って開発してみた。→すごく捗った!(実体験)
  • 14. JavaScript の弱点に対する Haxe の答え
  • 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 ソースコード上でのデバッグさえも可能。
  • 20. Haxe で CreateJS を使う仕組み
  • 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 の標準機能。
  • 27. 事例
  • 28. 注意点JavaScript に対する十分な理解無しで挑むとハマる恐れ有り。応用の幅も狭まります。Haxe + CreateJS 開発メモ#5 removeEventListener が機能しない問題の回避方法http://dev.classmethod.jp/ria/html5/haxe-createjs-5/

×