Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Titanium もくもく会 #4

1,169 views

Published on

  • Be the first to comment

Titanium もくもく会 #4

  1. 1. ♥ Titanium もくもく会 #412年12月18日火曜日
  2. 2. 自己紹介 • いそべこーすけ(@k0sukey) • 浜松で働いています • Ti 歴はもうちょっとで2年12年12月18日火曜日
  3. 3. 初めに ぼく自身は CoffeeScript を書けませんの で、そちらは CoffeeScript ガチな方にお 任せします12年12月18日火曜日
  4. 4. Alloy とは • Appcelerator 公式の MVC Framework です • 詳しくは @ryugoo_ さんのブログが非常 に参考になります → http://imthinker.net/2012/10/alloy-trial/12年12月18日火曜日
  5. 5. なぜ Alloy で CoffeeScript?12年12月18日火曜日
  6. 6. なぜ Alloy で CoffeeScript? • まだまだ Alloy 人口が少ない。寂しい • ST2 用の MakeAlloy を作ったのに。寂しい • (@ryugoo_ さんアルファヒトバシラーを除く) CoffeeScript 勢が来てくれない。寂しい • とにかく寂しい12年12月18日火曜日
  7. 7. CoffeeScript で Alloy アプリ が書ければ良いんじゃね? Alloy がもっと便利で安定すれば良いんじゃね?12年12月18日火曜日
  8. 8. 書けるようにしました! • alloy.jmk を使って Alloy 製アプリがコン パイルされる際に、CoffeeScript から JavaScript へコンパイルします • CoffeeScript 用のフォルダを作る必要も ないですよ • Guard とか入れる必要もないですよ12年12月18日火曜日
  9. 9. alloy.jmk とは • Alloy 製アプリがコンパイルされる前後 にフックして、別の処理を割りこませ ることができます • $ alloy generate jmk で ProjectDir/app/ alloy.jmk が作られます • node.js な JavaScript です12年12月18日火曜日
  10. 10. alloy.jmk とは task("pre:compile", function(event,logger) { // コンパイル前に割り込ませる処理 }); task("post:compile",function(event,logger){ // コンパイル後に割り込ませる処理 });12年12月18日火曜日
  11. 11. Alloy with CoffeeScript 1. pre:compile で ProjectDir/app 内の .coffee ファイルを .js へコンパイル 2. Alloy のコンパイル 3. post:compile で .coffee から .js へコンパイル されたファイルを削除 ※ .js を問答無用で削除しているわけでは ないので、もちろん混在OK12年12月18日火曜日
  12. 12. Alloy with CoffeeScript • https://gist.github.com/4095824 に予め 作ってある alloy.jmk があります • ついでに TypeScript 用の alloy.jmk も作っ ておきました12年12月18日火曜日
  13. 13. ひとつ注意点があります12年12月18日火曜日
  14. 14. CoffeeScript で Alloy アプリを書く時の注意点 index.xml <Label id="label" onClick="doClick">Hello, World</Label> index.coffee doClick = (e) -> alert $.label.text return これ、イベントが発火しません12年12月18日火曜日
  15. 15. CoffeeScript で Alloy アプリを書く時の注意点 index.js $.__views.label = A$(Ti.UI.createLabel({ width: Ti.UI.SIZE, height: Ti.UI.SIZE, color: “#000”, text: “Hello, World”, id: “label” }), “Label”, $.__views.index); $.__views.label.on(“click”, doClick); var doClick; doClick = function(e) { alert($.label.text); return; }; コンパイル後のソースを見てみるとわかり ますが、これではイベントが発火しません よね12年12月18日火曜日
  16. 16. CoffeeScript で Alloy アプリを書く時の注意点 Alloy でコンパイルされると関数宣言であ ればどこに書いても問答無用でソース先頭 部へ移動されますが、関数式は移動されな いので「`」で括って JavaScirpt を書きます index.coffee `function doClick(e) { alert($.label.text); }`12年12月18日火曜日
  17. 17. ダサイ...12年12月18日火曜日
  18. 18. CoffeeScript で Alloy アプリを書く時の注意点 • 「`」がダサければ、view で onClick を使 わなければ良いじゃない • Alloy 自体がコンパイル時に関数式もソー ス先頭部へ移動してくれるのを待つ12年12月18日火曜日
  19. 19. というわけで、CoffeeScript でAlloy アプリが書けるようになりました ので、人口が増えたら嬉しいです12年12月18日火曜日
  20. 20. ついでに ACS 人口も増えると嬉しい ので、本日の Titanium Mobile Advent Calendar へ ACS ネタを投下しました12年12月18日火曜日
  21. 21. ありがとうございました!12年12月18日火曜日

×