html2coffeekup は HTMLをcoffeekup 形式に変換するプラグインです。マイナーですがCoffeeKupテンプレート大好きな方には必須のツールです。
早速インストール。
$ npm install -g html2coffeekup
使い方は簡単。
$ html2coffeekup sample.html > sample.coffee
変換前
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> </head> <body> <h1>This is sample page</h1> <p>Hello, world!</p> </body> </html>
変換後
doctype TODO
html ->
head ->
meta charset: 'utf-8'
title 'test'
body ->
h1 'This is sample page'
p 'Hello, world!'
これは便利かもしれません。
ログイン機能を実装しています。CSRF対策として app.use express.csrf() を設定。app.dynamicHelpers に req.session._csrf を返すようにして、Viewでtokenを出力するプログラム。
何故か req.session._csrf に undefined が。。。CoffeeKupのテンプレートが悪いのかと思ったが、Jadeでも同じ。
StackOverFlow - How do I generate CSRF tokens in Express?
npm lsでのパッケージ構成
├── bcrypt@0.5.0 extraneous ├─┬ coffeekup@0.3.1 │ └── coffee-script@1.2.0 ├─┬ express@2.5.5 │ ├─┬ connect@1.8.5 │ │ └── formidable@1.0.9 │ ├── mime@1.2.5 │ ├── mkdirp@0.0.7 │ └── qs@0.4.2 ├─┬ js2coffee@0.1.3 │ ├── coffee-script@1.2.0 │ └── underscore@1.3.1 ├─┬ mongoose@2.5.9 extraneous │ ├── hooks@0.1.9 │ └── mongodb@0.9.7-3-5 └── mongoose-types@1.0.3 extraneous
app.coffee
fs = require('fs')
express = require("express")
routes = require("./routes")
mongoose = require('mongoose')
app = module.exports = express.createServer
key:fs.readFileSync 'key.pem'
cert:fs.readFileSync 'cert.pem'
app.configure ->
app.register ".coffee", require("coffeekup").adapters.express
app.set "views", __dirname + "/views"
app.set "view engine", "coffee"
app.use express.cookieParser()
app.use express.session
secret: "your secret here"
secure: true
app.use express.bodyParser()
app.use express.query()
app.use express.methodOverride()
app.use app.router
app.use express.static(__dirname + "/public")
app.use express.csrf()
app.dynamicHelpers token:(req, res) ->
console.log req.session._csrf # undefined!
return req.session._csrf
app.configure "development", ->
mongoose.connect 'mongodb://localhost/sample'
app.use express.errorHandler(
dumpExceptions: true
showStack: true
)
app.configure "production", ->
mongoose.connect 'mongodb://localhost/sample'
app.use express.errorHandler()
app.get "/", routes.index
app.get "/login", routes.login
app.post "/login", routes.authenticate
app.get "/secret", routes.secret
app.get "/signup", routes.signup
app.post "/signup", routes.regist
app.get "/logout", routes.logout
app.listen 3000
console.log "Express server listening on port %d in %s mode", app.address().port, app.settings.env
CSRF対策できないと、使えんぞ。。。自分で実装するしかないか。
ログインできるトップ画面をBootstrapで記述してみました。
CoffeeKupをテンプレートにしています。
views/layout.coffee
doctype 5
html ->
head ->
meta charset:'utf-8'
title 'Share Lunch'
link rel:'stylesheet', href:'/bootstrap/css/bootstrap.css'
style type:'text/css', ->
'''
#container { padding-top: 40px; }
'''
body ->
@body
views/index.coffee
div '#container.container', ->
div '.hero-unit', ->
div '.row-fluid', ->
div '.span9', style:'border-right:1px solid #ddd', ->
h2 '毎日のランチが楽しくなる'
h1 'Share Lunch'
p style:'margin-top:1em;', ->'Share Lunchはランチを楽しく共有できるウェブサービスです。'
p ->
a '.btn.btn-primary.btn-large', -> 'アカウント登録（無料）'
div '.span3', ->
h4 style:'line-height:3em;',-> 'アカウントをお持ちの方'
form ->
input type:'text', placeholder:'メールアドレス'
input type:'password', placeholder:'パスワード'
label '.checkbox.gray', ->
input type:'checkbox'
'ログイン状態を保存'
button '.btn.btn-success', type:'submit', -> 'ログイン'
使ってみてわかったのは、日本語と英語の書体の差。日本語の場合、もう少し行間を開けると丁度いいかも。
CoffeeKupでBootstrapのフォームを書いてみました。
form method:'post', action:'/post/new', ->
fieldset ->
legend @title
p '.clearfix', ->
label for:'title', -> 'たいとる'
p '.input', ->
input '#title.xlarge', type:'text', name:'post[title]'
p '.clearfix', ->
label for:'post', -> 'ないよう'
p '.input', ->
textarea '#post.xxlarge', name:'post[body]'
p '.actions', ->
input '.btn.primary', type:"submit", value:'こうかい!'
a '.btn', href:'/', -> 'やめる'
実行結果
Bootstrapいいですね。