02042013 javascript coffeescript d3.js

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

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

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

ProductName 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)

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

livereload_coffee

08032013 javascript coffeescript

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

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

sourcemap

Chromeの設定

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

sourcemap

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

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

coffee -c -m sample.coffee

まとめ

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

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


15022013 javascript coffeescript

Node.jsでSQLiteを使ってみる

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

13012013 javascript coffeescript Ti

AlloyのCollectionが見つからない

黒い本の写真アプリを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タグを追加したり、なんかごちゃごちゃやってたらうまくいくようになった。エラーの原因は結局わかってない。

28122012 work Haskell javascript coffeescript Ti

2012年に読んだ本

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

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

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

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


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

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

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


チケット駆動開発

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

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

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


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

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

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

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


JavascriptとTitanium Mobile

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

ProductName ステートフル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の入門書もあわせて読んでおくとよいかも。

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


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


過去に読んだ本

18112012 javascript Emacs coffeescript Ti

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

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

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

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

ProductName 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!

14112012 Emacs coffeescript

CoffeeScriptでFlymake

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はこの通りに設定しておけばでオッケー

07062012 coffeescript Node.js

mochaでBDD

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

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

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

Should I switch from Vows to Mocha?

done callbackがいいらしいが。

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

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


29052012 coffeescript

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

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

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


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

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

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

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

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

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


28052012 coffeescript Ti

CoffeeScriptとTitanium mobileの本が届いた

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

1338198186

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


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