18112012 javascript Emacs coffeescript Ti
犬が早朝から吠えたので4時に叩き起こされたが、タイムラインを追いかけていたらAlloy with CoffeeScript のお誘いというこれは！というエントリがあがっていたので、早速誘われてみた。尚、jsとcoffeeは一緒のディレクトリに置いておくのが好みなので@k0sukeyのオリジナルなjmkに変更をくわえてあります。
ストップウォッチをつくる
Titanium Mobile iPhone/Androidアプリ開発入門のストップウォッチを参考にしました。
Titanium Mobile iPhone/Androidアプリ開発入門―JavaScriptだけで作る本書ではui.jsという1つのファイルで完結していますがAlloyのようなMVCフレームワークを使ったほうがコードの見通しは良くなると思います。
雛形をつくる
$ titanium create stopwatch # 対話でターゲットデバイスやapp-id設定 $ cd stopwatch $ alloy new # alloyのひな形作成 $ alloy generate jmk
coffeeがコンパイルされるようにする
stopwatch/app/alloy.jmkを以下のように書きなおす。これでapp/controller のcoffeeファイルはalloy compileでコンパイルされるようになります。
task("pre:compile", function(event,logger) { var wrench = require("wrench"), fs = require("fs"), path = require("path"), controller_root = event.dir.controllers, coffee = require("coffee-script"); wrench.readdirSyncRecursive(controller_root).forEach(function(controller){ if (controller.match("coffee$")) { fs.writeFileSync( path.join(controller_root,controller.replace("coffee", "js")), coffee.compile( fs.readFileSync(path.join(controller_root, controller)).toString(), { bare: true })); } }); }); task("post:compile",function(event,logger){ });
alloyの開発
あとは普通に。
app/views/index.xml
<Alloy> <TabGroup> <Tab id="tab1" icon="dark_clock.png" title="ストップウォッチ"> <Window id="window1" title="ストップウォッチ"> <Label id="label"> 00:00:00.000 </Label> <Button id="button"> Start </Button> </Window> </Tab> <Tab id="tab2" icon="dark_info.png" title="使い方"> <Window id="window2" title="使い方"> <WebView url="howto.html"> </WebView> </Window> </Tab> </TabGroup> </Alloy>
/app/styles/index.tss
{"Window": { "barColor": "#000", "backgroundColor": "#000" }, "Tab": { "backgroundColor": "#000" }, "#label": { "color": "#fff", "width": "auto", "height": "auto", "font": { "fontSize": 40, "fontWeight": "bold" } }, "#button": { "color": "#000", "width": 150, "height": 40, "bottom": 30 }}
webview用のhtmlは /app/assets/iphone/howto.htmlに
<html> <head> <title>使い方</title> </head> <body> <h1>使い方</h1>このサンプル は<a href="http://www.amazon.co.jp/dp/479803231X">Titanium Mobile iPhone/Androidアプリ開発入門</a>のストップウォッチのサンプルをAlloyで 書きなおしてみたものです。 <img src="http://ec2.images-amazon.com/images/I/41jDZ5IY01L._BO2,204,203,200_PIsitb-sticker-arrow-click,TopRight,35,-76_AA300_SH20_OU09_.jpg"/> </body> 興味を持ったら購入して読んでみるとよいと思いますよ。 </html>
最後にcoffeeをapp/controllers/index.coffeeに
started =false intervalID = null startStopwatch = -> $.label.text = "00:00:00.000" startTime = new Date() _updateTimer = -> u_sec = 1000 u_min = 60 * u_sec u_hour = 60 * u_min now = new Date() diff = now - startTime hour = Math.floor(diff/u_hour) min = Math.floor((diff - hour*u_hour)/u_min) sec = Math.floor((diff - hour*u_hour - min*u_min)/u_sec) msec = diff / u_sec $.label.text = ("0" + hour).slice(-2) + ":" + ("0" + min).slice(-2) + ":" + ("0" + sec).slice(-2) + "." + ("00" + msec).slice(-3) intervalID = setInterval(_updateTimer, 3) return $.button.addEventListener 'click', -> if started clearInterval(intervalID) $.button.title = "Start" started = false else startStopwatch() $.button.title = "Stop" started = true return $.index.open()
実行
$ alloy run
Let's Enjoy!
Emacs Lispテクニックバイブル