coffeescript / Drkcore

D3をはじめようを快適に写経するためにlivereloadを使って更新時にブラウザをリロードする

Tue, 02 Apr 2013 20:24:31 +0919

日本語の入門書はD3をはじめようがあるけど、ほんのさわりだけなので、日本語の簡単なチュートリアルが読みたいというヒト以外には積極的に読む必要性を感じないかな。ただ、あのイディオム(selectAll().data().enter()ってやつ)とメソッドチェインに慣れてないのだったら読んだほうがいいのかなぁ。日本語のほうがわかりやすいしなぁ。

ちゃんと読むつもりならInteractive Data Visualization for the Webのほうが良いと思う(まだ書評かいてないけど)。

Interactive Data Visualization for the Web
Scott Murray
Oreilly & Associates Inc / 2997円 ( 2013-04-02 )

javascriptを書き写すだけなのはつまらなかったのでcoffeescriptで書いたのと、coffee --watchだとコンパイル時にブラウザリロードしないのでlivereloadを使った。

Guardfileはこんな感じ。更新されたファイル名をfuncに渡せないのでハードコードしている。

#!/usr/bin/env python

from livereload.task import Task
import logging

def coffee():
    from subprocess import Popen, PIPE
    argv = ["/Users/kzfm/.nvm/v0.8.10/bin/coffee", "-c", "-m", "js/mean.coffee"]
    p = Popen(argv, stdin=PIPE, stdout=PIPE, stderr=PIPE)
    stdout, stderr = p.communicate()
    if stderr:
        logging.error(stderr)

Task.add('js/mean.coffee', coffee)

あとは編集してセーブすると自動コンパイルして、ブラウザもリロードしてくれる。

CoffeeScriptでSourceMapを使うとデバッグがかなりラクになるかも

Fri, 08 Mar 2013 05:34:50 +0919

つい先日にリリースされたcoffeescript-1.6.1からSourceMapがサポートされたので早速使っているけど、デベロッパーツールでcoffeescriptのソース上にエラーが表示されるのでかなり便利。

Chromeの設定

デベロッパーツールのギアアイコンをクリックすると設定画面が出るので「Enable souce maps」にチェックを入れる。

coffeescriptでmapファイルを出力する

コンパイルするときに-mオプションを渡すと、.jsファイルの他に.mapが作成されるのでsoucemap対応のブラウザで読めばいい。

coffee -c -m sample.coffee

まとめ

これからraphael使う予定なのでcoffeescriptの開発環境が改善されるのは素敵だ。

CoffeeScriptファーストガイドモダンJavaScriptによるアプリケーション開発 (NEXTーONE)
飯塚直
翔泳社 / 2940円 ( 2012-05-26 )

Node.jsでSQLiteを使ってみる

Fri, 15 Feb 2013 19:47:01 +0919

Node.jsのときはMongoばかりなので実は使ってないことに気づいた。

sqlite3 = require('sqlite3').verbose()

db = new sqlite3.Database('/tmp/blog.db')

readAllRows = ->
  db.all "SELECT perma,title FROM entries", (err, rows) ->
    rows.forEach (row) -> console.log("#{row.perma}: #{row.title}")
    closeDb()

closeDb = ->
  console.log "closeDb"
  db.close

出力

1355998432: PersistentのMigrationが便利そうだ
1356131853: カタカナのしりとりの圏
1356162470: ScottyはHaskellのSinatraクローン
1356235849: 本棚オーバーフロー
1356333890: virthualenvwrapperをつくった
1356341787: ブロッコリーとカリフラワーを畑とベランダで育てている
1356429473: yesod-tutorialがわかりやすい
1356515387: 24 Days of Hackage
1356521203: snapでさくっと作るウェブサーバー
closeDb

AlloyのCollectionが見つからない

Sun, 13 Jan 2013 08:58:08 +0919

黒い本の写真アプリをAlloyで作っている。

app/models/photo.jsに

exports.definition = {
    config: {
        "columns": {
            "path": "text"
        },
        "adapter": {
            "type": "sql",
            "collection_name": "photo"
        }
    }
}

とモデルとコレクションを定義しておいて、index.jsで

cameraButton = Ti.UI.createButton
  systemButton: Ti.UI.iPhone.SystemButton.CAMERA

$.win1.rightNavButton = cameraButton

cameraButton.addEventListener 'click', ->
  Ti.Media.showCamera
    success: (event) ->
      now = (new Date).getTime()
      file = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory,
              String.format("%d-%d", now, Math.floor(Math.random() * 1000)))
      file.write(event.media)
      photo = Alloy.createModel('photo', { path: file.nativePath })
      photo.save()
      Alloy.Collections.photo.add photo
      return
    mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO]

で、写真の撮影は出来てセーブするときにAlloy.Collections.photo.addメソッドがない（というかAlloy.Collections.photoがundefined）というエラーに悩まされている。

130113 追記

index.xmlにCollectionタグを追加したり、なんかごちゃごちゃやってたらうまくいくようになった。エラーの原因は結局わかってない。

2012年に読んだ本

Fri, 28 Dec 2012 07:43:55 +0919

今年読んだ本で良かったもの。

すごいHaskellたのしく学ぼう!

これはピカイチだった。RWHで停滞感が漂いまくっていた僕のHaskell理解力がかなり上がったのは間違いない。そういえば、最近Haskellしか書いてないなぁと2012年のエントリに付けられたタグを数えたらHaskell 90, Python 70, javascript 44だった。

すごいHaskellたのしく学ぼう!
Miran Lipovača
オーム社 / 2940円 ( 2012-05-23 )

あとはtwitterで色々教えてもらったりとか、三島Haskell無名関数の会が出来てモチベーションが上がったりとか色々タイミングが良かったということもあるが。来年も引き続きハスケりたい。

型というか、閉じている、自己同型といったイメージは数学ガールが良いかも

数学ガールガロア理論 (数学ガールシリーズ 5)
結城浩
ソフトバンククリエイティブ / 1995円 ( 2012-06-01 )

数学ガールが届いた

チケット駆動開発

自分の仕事にアジャイルな要素を入れたいというのはここ数年ずっと考えていて、やっと来年すこし取り組めそうで嬉しい。

僕のチケット駆動に対する期待は、創薬研究への応用なので、チケット駆動開発の背景にある考え方がぎっしり詰まった本書は、色々な発見や再発見があったり、今の仕事のアナロジーを見つけたりとかなり満足度の高い本だった。

チケット駆動開発
小川明彦
翔泳社 / 3444円 ( 2012-08-24 )

チケット駆動開発を読んだ

今年システムを少し運用してみて、意識の高低のバラツキを吸収する仕組みとしてゲーミフィケーション的なものも考えて行かないといけないし、受動的な情報伝達手段も考えて行かないといけないなぁと感じた。

（そもそも潜在的に）意識の高いマネジメント層は、能動的に情報アクセスしない研究者層（というより労働者層）が存在することを理解できないので、「そんなのホームに登録しておけばいいだけなんんじゃないか？」なんて言うんだけど、それすら能動的な情報アクセスなんだよなぁ。

デジタルサイネージのようなものにも手を出してみたい。

幸せな未来は「ゲーム」が創る
ジェイン・マクゴニガル
早川書房 / 2940円 ( 2011-10-07 )

JavascriptとTitanium Mobile

今年はクライアントサイドのMVCも熱かった。去年Javascriptを勉強してた時には、まさかiPhoneアプリの方に進んでいくとは思わなかったが。

ステートフルJavaScript ―MVCアーキテクチャに基づくWebアプリケーションの状態管理
Alex MacCaw
オライリージャパン / 2940円 ( 2012-06-09 )

ステートフルJavaScriptはjavascript MVCフレームワークの本でSpine.jsの解説に近い。そしてこの知識はTitanium MobileでJavascriptを使ったiPhoneアプリ開発で役立つ！

AlloyはTitaniumのためのMVCフレームワークでBackbone.jsを使ってつくられている。これを使うとjavascriptを利用してiPhoneアプリとかAndroidアプリが作れちゃうわけだ(下のエントリ参照)。

バージョンあげたら実機転送がうまくいかなくなって、最近は停滞気味ですが、来年はもうちょっと力を入れて取り組みたいと思っている（なんかアプリをリリースしたい）。

それから僕はCoffeeScriptが好きなので使っていますが、他にもNode.jsのテンプレートエンジン(Jade,eco,ejs)なんかも使えるので好みの開発スタイルを探求するためにCoffeeScriptやNode.jsの入門書もあわせて読んでおくとよいかも。

CoffeeScriptファーストガイドモダンJavaScriptによるアプリケーション開発 (NEXTーONE)
飯塚直
翔泳社 / 2940円 ( 2012-05-26 )

サーバサイドJavaScript Node.js入門
清水俊博
アスキー・メディアワークス / 3990円 ( 2012-10-26 )

過去に読んだ本

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

Sun, 18 Nov 2012 08:47:11 +0919

犬が早朝から吠えたので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

Let's Enjoy!

CoffeeScriptでFlymake

Wed, 14 Nov 2012 18:40:47 +0919

Emacs24にしたので再設定

coffeelintのインストール

npm install -g coffeelint

coffee-modeはM-x list-packagesからiで選んでxで実行

Tabの設定が変だったので、init.elにちょっと追加。ついでにアローとかファットアローを挿入するキーバインドも設定。

(add-hook 'coffee-mode-hook '(lambda ()
  (make-local-variable 'tab-width)
  (set 'tab-width 2)
  (local-set-key "\C-j" (lambda () (interactive)(insert " -> ")))
  (local-set-key "\M-j" (lambda ()(interactive)(insert " => ")))))

flymakeはこの通りに設定しておけばでオッケー

mochaでBDD

Thu, 07 Jun 2012 20:03:42 +0919

ちょっと前にTest Driven Development with a Node.js TCP Server?っていう質問を見つけて、コメントにmocha使えやって書いてあったのでmochaが気になっていた。

ちょっとドキュメントみたんだけど、jasmineみただなぁと。それからいまいち良さが伝わってこない。vowsでいいじゃんと。

もうちょっと探したら、同じようにvowsから移行しようかなぁっていう質問もみつけた。

Should I switch from Vows to Mocha?

done callbackがいいらしいが。

なにかで使ってみないとわからんなぁ。

テスト駆動JavaScript
Christian Johansen
アスキー・メディアワークス / ?円 ( 2011-11-25 )

CoffeeScriptファーストガイドはモダンなWebアプリケーション開発ガイド

Tue, 29 May 2012 19:25:16 +0919

後半Node.jsを使ったウェブアプリ開発のためのヒント集みたいになっていて、CoffeeScriptである必然性を感じなかったんだが、個人的に7章後半の運用まわりが非常に参考になったので良かったということで。

CoffeeScriptファーストガイドモダンJavaScriptによるアプリケーション開発 (NEXTーONE)
飯塚直
翔泳社 / 2940円 ( 2012-05-26 )

初心者向けの入門書というよりはすでにCoffeeScriptである程度書いているヒトが、文法おさらいしつつ、よさげなライブラリを使って効率的に開発しましょうって感じの内容だった。

そもそもCoffeeScriptが(javascriptへコンパイルという)一手間を加えるだけのものなので、そこにどういう価値を見出すかでCoffeeScriptへの向きあいかたが決まってくると思う。僕の場合はPythonっぽくかけて括弧のネストから解放されるのに魅力を感じたのと、リスト内包表記はやっぱいいよねーってあたりですね。

まぁ、応用考えたら、CoffeeScriptらしさっていうのは必然的に薄まってくるよなぁと思いながら読んでた。最後のほうにクライアントサイドMVCの話が出てたけどSpineに触れてないのは残念だったかな。

文法のところではdoを使ったクロージャの作り方と、複数行の正規表現は知らなかった
CoffeeDoc
Node.jsのデバッガ
ログ出力モジュール winston
npmパッケージの開発方法が簡単に紹介されていた

具体的な例をやりたければテスト駆動JavascriptのサンプルをCoffeScriptで書いてみるのがいいんじゃないかなぁと。で、わからないところを本書で補うと。

テスト駆動JavaScript
Christian Johansen
アスキー・メディアワークス / ?円 ( 2011-11-25 )

CoffeeScriptとTitanium mobileの本が届いた

Mon, 28 May 2012 18:53:42 +0919

なんかたて続けに5,6冊届いた。

CoffeeScriptファーストガイドモダンJavaScriptによるアプリケーション開発 (NEXTーONE)
飯塚直
翔泳社 / 2940円 ( 2012-05-26 )

Appcelerator Titanium Smartphone App Development Cookbook
Boydlee Pollentine
Packt Publishing / 3810円 ( 2011-12 )