Drkcore

#!/usr/bin/env python from subprocess import Popen, PIPE import sys for arg in sys.argv[1:]: if arg.endswith(".scss"): file = arg p1 = Popen(["scss", "--compass", "--trace", "--check", file], stdin=PIPE, stdout=PIPE, stderr=PIPE) stdout, stderr = p1.communicate() print stderr.split("\n")[0] p2 = Popen(["scss-lint", file], stdin=PIPE, stdout=PIPE, stderr=PIPE) stdout, stderr = p2.communicate() print stdout.replace(" - ", ": ")

;;; http://d.hatena.ne.jp/CortYuming/20120110/p1#20120110f1 (defun my-css-electric-pair-brace () (interactive) (insert "{")(newline-and-indent) (newline-and-indent) (insert "}") (indent-for-tab-command) (previous-line)(indent-for-tab-command) ) (defun my-semicolon-ret () (interactive) (insert ";") (newline-and-indent)) (add-to-list 'auto-mode-alist '("\\.\\(scss\\|css\\)\\'" . scss-mode)) (add-hook 'scss-mode-hook 'ac-css-mode-setup) (add-hook 'scss-mode-hook (lambda () (define-key scss-mode-map "\M-{" 'my-css-electric-pair-brace) (define-key scss-mode-map ";" 'my-semicolon-ret) (setq css-indent-offset 2) (setq scss-sass-command "~/bin/scsscheckers") (setq scss-compile-at-save nil) )) (load-library "flymake-cursor")

(add-hook 'scss-mode-hook (lambda () (define-key scss-mode-map "\M-{" 'my-css-electric-pair-brace) (define-key scss-mode-map ";" 'my-semicolon-ret) (setq css-indent-offset 2) (setq scss-sass-options '("--compass")) (setq scss-compile-at-save nil) (flymake-mode t) ))

18112012 javascript Emacs coffeescript Ti

AlloyでのiPhoneアプリ開発にCoffeeScriptを使う

犬が早朝から吠えたので4時に叩き起こされたが、タイムラインを追いかけていたらAlloy with CoffeeScript のお誘いというこれは！というエントリがあがっていたので、早速誘われてみた。尚、jsとcoffeeは一緒のディレクトリに置いておくのが好みなので@k0sukeyのオリジナルなjmkに変更をくわえてあります。

ストップウォッチをつくる

Titanium Mobile iPhone/Androidアプリ開発入門のストップウォッチを参考にしました。

Titanium Mobile iPhone/Androidアプリ開発入門―JavaScriptだけで作る
小澤栄一
秀和システム / 2520円 ( 2012-02 )

本書では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

alloy_stopwatch

Let's Enjoy!

Drkcore

Cscope

Sass x SyntaxCheck x Linting = Emacs & Flymake

install

scsscheckers

Emacs

補足

おまけ

FlymakeでSass+Compassのチェックをおこなう

参考

CompassとFlymakeを一緒に使うとSyntax checkerがはしらなくて困る

Emacsでscss-modeを使う

何が困るのか？

etagsを再帰的に使うにはeshellから**/*.pyとするだけだった

hsktagsでHaskellでもタグジャンプ

Emacsでタグジャンプ

三島Haskell無名関数の会#1が面白かった

todo

次回

参加者

C-sで検索をかけた時にC-x C-xで検索開始位置に戻れる(Emacs)

AlloyでのiPhoneアプリ開発にCoffeeScriptを使う

ストップウォッチをつくる

雛形をつくる

coffeeがコンパイルされるようにする

alloyの開発

実行