CoffeeScriptとjQueryを一緒に使ってみる

作付け状況をcanvasを使って表示するやつをExpress+Jade+CoffeeScript+jQueryという構成でやってみた。以前書いたやつは単にCanvasの練習を兼ねたものだったが、今回はデータをAjaxでとってきて描画することにした。

node_allot

サーバー側はExpressで。expressコマンドでスケルトン生成してくれるので地味に便利すぎですね。ちょっと試して終ったら消せるので心理的負担も少ない。coffeescriptのスケルトンを出力するオプションで切り替えられるようになっているとさらに嬉しいかもとおもったけどあるのかな?

express allot
cd allot
npm install -d

これでスケルトンが作られるのでapp.jsとviews/index.jadeを書き換える

app.js

/jsonにアクセスしたらデータをJSONで返すようにする。

// Routes

app.get('/', function(req, res){
  res.render('index', {
    title: 'Express'
  });
});

app.get('/json', function(req, res){
  var allotment_data = [
    {name:"なにもうえてない",  x:10,  y:10,  width:480, height:120, color:"#CCCCCC"},
    {name:"浅葱",  x:10,  y:140,  width:140, height:120, color:"#66CC66"},
    {name:"ニンニク",  x:160,  y:140,  width:80, height:120, color:"#993300"},
    {name:"春菊",  x:250,  y:140,  width:80, height:120, color:"#339933"},
    {name:"ジャガイモ",  x:340,  y:140,  width:150, height:120, color:"#CC6600"},
    {name:"ソラマメ",  x:10,  y:340,  width:70, height:150, color:"#339933"},
    {name:"エンドウ",  x:10,  y:270,  width:70, height:60, color:"#339933"},
    {name:"ジャガイモ",  x:90,  y:270,  width:400, height:110, color:"#CC6600"},
    {name:"ミョウガ",  x:90,  y:390,  width:400, height:100, color:"#CC9966"}
  ];

  res.send(JSON.stringify(allotment_data));
});

views/index.jade

h1= title
canvas#allotment(width=500, height=500)
script(type="text/javascript", src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js")
script(type="text/javascript", src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js")
script(type="text/coffeescript")
  | draw = () ->
  |   $.getJSON('/json', (data) -> drawCanvas(data))
  | 
  | drawCanvas = (allotment_data) ->
  |   ctx = document.getElementById('allotment').getContext('2d')
  |   ctx.save()
  |   ctx.font = "20px"
  |   for alt in allotment_data
  |     ctx.fillStyle = alt.color
  |     ctx.fillRect( alt.x, alt.y, alt.width, alt.height)
  |     ctx.fillStyle = "#000"
  |     ctx.fillText(alt.name, 12 + alt.x, 32 + alt.y)
  |   ctx.restore()
  | 
  | draw()

もとのと比べるとcoffeescriptのコードのほうがシンプルで見やすくなっていいですね。普段Python使っているのでインデントはわかりやすいし、for in ループはpythonそのものだし、文の終わりに;が必要ないのもいい。

HTML5楽しい

ブーム到来。2冊買った。

ProductName 入門 HTML5
Mark Pilgrim
オライリージャパン / 2415円 ( 2011-04-23 )


Dive into HTML5の和訳なので、原著がおもしろそうだったら買えばいいと思います。

PythonistaだったらDive into Pythonでおなじみの著者ですね。

ProductName HTML5 Canvas: Native Interactivity and Animation for the Web
Steve Fulton
Oreilly & Associates Inc / 2922円 ( 2011-05-13 )


こっちは、Canvasでちょっとしたゲームくらい作れるようになりたいなぁということで購入。値段の割に分厚い。

CanvasとかAudioが使えるようになりたいところ。

fjkwをMarkdownに対応させた

Node.jsでWikiを作っているわけですが。

jeditableのドキュメントをきちんと読んだら、loadurlでraw_text引っ張ればmarkdownでもなんでもいいらしいので。

wiki.jade

script.jeditable
  $(".editable_textarea").editable("#{title}", { 
      type   : 'textarea',
      submitdata: { _method: "post" },
      name     : 'body',
      loadurl  : '/md/' + "#{title}",
      rows     : 10,
      submit : 'OK',
      cancel : 'cancel',
      cssclass : "editable"
  });

app.js

htmlに変換する前のmarkdown書式のテキストを返すURLを追加した

app.get('/md/:title', function(req, res){
  WikiContent.findOne({title: req.params.title}, function (err, content) {
    res.send(content.body);
  });
});

jadeでcoffeescriptを使う

もう少しjavascriptに慣れてきたらCoffeeScriptを積極的に使いたいなぁと思っている今日この頃ですが、CoffeeScriptはインストールしなくてもブラウザ上で実行できるよという話を見て、

おーこれだったらjadeでも使えるじゃん

と思ったのでやってみた。

スケルトンは普通にexpressコマンドで作って、views/index.jadeだけをいじる

h1= title
p Welcome to #{title}
canvas#canvas

script(type='text/javascript', src='http://jashkenas.github.com/coffee-script/extras/coffee-script.js')
script(type="text/coffeescript")
  | canvas = document.getElementById('canvas')
  | cc = canvas.getContext('2d')
  | cc.beginPath()
  | cc.fillRect(10, 10, 100, 100)

100px x 100pxの黒い四角をcanvasに描く。

jade_coffeescript

src属性で別ファイルにするほうが開発しやすいかな。

第5回Javascript読書会に行ってきた

正規表現の章。

var napo_parse = /(nap){2,4}/g;

var napotext1 = "napnapnapnaprinnapnap";
var napotext2 = "napnapnapnaprinnapnap";

var result = napo_parse.exec(napotext1);
console.log(result);

var result = napo_parse.exec(napotext2);
console.log(result);

この場合napotext2をparseしたときに何がマッチするのか?と。

$ node naporin.js 
[ 'napnapnapnap',
  'nap',
  index: 0,
  input: 'napnapnapnaprinnapnap' ]
[ 'napnap',
 'nap',
 index: 15,
 input: 'napnapnapnaprinnapnap' ]

indexの記憶は正規表現オブジェクトが持っているのでこういうことになる。

ProductName JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス
Douglas Crockford
オライリージャパン / 1890円 ( 2008-12-22 )


次回が最後のjavascript読書会です。

Express+Jade+mongooseでつくるWiki

shizudevつくる会#2お疲れ様でした。相変わらずjavascript度は高めだったけど、node.jsでブログエンジン作るはずが、wordpressのダークサイドに堕ちた上に、文字化けのカルマにトラップされてたヒトもいましたな(終了後のコメダで浄化されたんだろうか?)。

あとは作りたいけどネタがない人のためにオモシロアイデアをストックしておいていつでも引き出せるようにする仕組みが必要かなぁと思った。

私の成果はこんな感じでWikiをつくっていたんですが、中途半端だったのでもう少しやってみた。

fjkwというwikiです(Express製なので)。ちなみに僕自身の鉄分は低め(というかほとんどありません)

fjkw

  • pathがタイトルになっていてGETでdataがあれば表示、なければ新規登録のフォーム
  • postでデータがあれば上書き、なければ新規データの追加
  • バックエンドはmongodbをmongooseを使って
  • in-place-editorはjeditableでクリックすると編集画面に

という感じ。

markdownを入れたいんだけどjadeのfilterだと変数に適用できないし、これを参考にやってみたらin-place-editorでタグまで一緒に編集画面に入ってくるしで、どうしたもんかと思案中。

Node.js製のブログエンジン

自分は出来合いのものよりも、ちまちまと自分の欲しい機能だけを実装してマイブログエンジンを作るほうが好きだけど、職場でつかうには公開されて継続されて開発されている安定感のあるやつのほうがいいので幾つか調べた。

calipso

drupalのようなものを目指しているらしい。Node製のCMSが欲しかったら最初に検討するかなぁ。

Calipso is a simple content management system, built along similar themes to Drupal and Wordpress, that is designed to be fast, flexible and simple ... and of course this site is running on Calipso!

Wheat

Git+Node.jsのブログエンジン。How To Nodeで使われている。 文章はmarkdown記法でGitで管理するっていうスタイルは結構好み。

Wheat is a blogging engine that reads a git repo full of markdown articles and presents them as a website.

Reed

markdown記法でredisでデータ管理。ブログエンジンのコアを提供するものであり、入れたら即使えるというものではない。

Reed is a (very) lightweight blogging core that turns markdown files in a directory into a blog. It is not a fully featured blogging system. If you are looking for that, check out Wheat or another blog engine.

Reed is intended for developers who want to integrate simple blogging functionality into their node.js website or application. It makes as little assumptions as possible about your environment in order to give maximum flexibility.

Scheme修行 11章

JGPによるとjavascriptはCの皮を被ったLispだからLISPの作法にも慣れておくと良いと思うのです。というよりこのシリーズは面白いので読むといいと思います。

ProductName Scheme修行
Daniel P. Friedman and Matthias Felleisen
オーム社 / 2940円 ( 2011-06-15 )


two-in-a-rowっていうリストの中に同じ値が隣あっているかどうかを調べる関数を定義する。

まずは相互再帰

(define two-in-a-row?
  (lambda (lat)
    (cond
     ((null? lat) #f)
     (else
      (is-first-b? (car lat) (cdr lat))))))

(define is-first-b?
  (lambda (a lat)
    (cond
     ((null? lat) #f)
     (else (or (eq? (car lat) a)
           (two-in-a-row? lat))))))

これを直接再帰に書き直す。

(define two-in-a-row-b?
  (lambda (preceeding lat)
    (cond 
     ((null? lat) #f)
     (else (or (eq? (car lat) preceeding)
           (two-in-a-row-b? (car lat)
                (cdr lat)))))))

(define two-in-a-row-2?
  (lambda (lat)
    (cond
     ((null? lat) #f)
     (else (two-in-a-row-b? (car lat)
                (cdr lat))))))

8/20にJGPの読書会@静岡があります。

ProductName JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス
Douglas Crockford
オライリージャパン / 1890円 ( 2008-12-22 )


第5回Javascript読書会@静岡市民文化会館

今月は20日開催

  • 日時: 2011年8月20日(土) 13:00~17:00
  • 場所: 静岡市民文化会館・第5会議室
  • URL: http://www.scch.shizuoka-city.or.jp/
  • 地図: http://www.scch.shizuoka-city.or.jp/page019.html
  • 定員: 20名
  • 費用: 1,000円 (学生・未成年無料)
  • 持ち物 : パソコン、課題図書
  • 課題図書: JavaScript: The Good Parts (ISBN-10: 4873113911)※各自事前購入
  • 環境: JavaScriptのコーディング用エディタ及び動作確認用webブラウザ
  • 範囲: 7章
  • 担当: やじゅさん
  • 参加登録

Node.js Rocks!っていうスライドがあった

これはすばらしい、やる気度上がった。

あと、org-modeでHTML5なスライド作れるのか。

他にもスライドが公開されてた。こっちは初心者向けチュートリアルっぽい感じ


shizudevつくる会#2swarmationで協力プレイをしてみたい