node.jsのいろいろなモジュール10 – haml-coffee
hamlとは?
hamlはHTMLを生成するためのマークアップ言語です。 インデントとタグを簡略化した構文を使うことにより、簡潔な記述でHTMLが記述できます。 元はRuby on Railsのビューで使用されていたようですが、現在はnode.jsとはじめ、いろいろな言語のテンプレートエンジンとして使用できるようです。
このようにhamlで記述すると、
!!!
%html
%head
%title Hello, Haml!
%body
#header
%h1 Hello, Haml!
#content
%p
I use Haml
%span.version= Haml::VERSION
こういうHTMLとして解釈されます。
<!DOCTYPE html>
<html>
<head>
<title>Hello, Haml!</title>
</head>
<body>
<div id='header'>
<h1>Hello, Haml!</h1>
</div>
<div id='content'>
<p>
I use Haml
<span class='version'>3.1.0.alpha.147 (Bleeding Edge)</span>
</p>
</div>
</body>
</html>
hamlでcoffee script
今回ご紹介するhtml-coffeeは、haml形式のビューにインラインでcoffee scriptのコードが書けるようになるモジュールです。 サンプルを元にご紹介していきます。
環境構築
今回使用した動作環境は以下のとおりです。
- OS : MacOS X 10.7.3
- Node.js : v0.6.10
- npm : 1.1.0-3
適当なディレクトリを作成し、そこでnpmを使用してインストールしましょう。
まずはexpress,coffee-scriptをモジュールをインストールします。
%npm install -g express %npm install -g coffee-script
次にexpressコマンドでプロジェクトのひな形を作成し、haml-coffeeもインストールします。
% express haml-coffee % cd haml-coffee % npm install % npm install haml-coffee
ソースファイル作成
まずは新しくapp.coffeeファイルを作成し、下記のように記述します。
#モジュール読み込み
express = require 'express'
hamlc = require 'haml-coffee'
app = module.exports = express.createServer()
# 設定
app.configure ()->
app.set 'views', __dirname + '/views'
app.use express.bodyParser()
app.use express.methodOverride()
app.use express.static __dirname + '/public'
# haml-coffee設定
app.register '.hamlc', hamlc
#ルーティング設定
app.get '/', (req, res) ->
res.render 'index.hamlc', {name: 'haml-coffee user',languages:[
{name:"Java",visible:true,desc:"desc 1"},
{name:"html",visible:false,desc:"desc 2"},
{name:"haml",visible:true,desc:"desc 3"},
{name:"Javascript",visible:true,desc:"desc 4"}
]}
app.listen 3000
console.log "Express server listening on port %d in %s mode", app.address().port, app.settings.env
html-cofee設定を読み込んだ後、expressのテンプレートとしてapp.register関数を呼び、hamlcファイルを関連付けています。 また、ルートへのアクセスがきたら、nameとlanguragesプロパティを指定し、index.hamlcを表示するように指定しています。
expressはデフォルトでレイアウトファイルを使用するので、layout.hamlcを作成します。 @body部分に指定したhamlcファイルの内容が入ります。!=は内容をエスケープしたくないときに使用します。
!!!
%head
%title Express App
%script{:src='http://code.jquery.com/jquery-1.7.1.js'}
%body
!= @body
次は実際に表示される中身のindex.hamlcファイルを作成します。
%h1= "No1.Welcome #{ @name }"
:javascript
$(function(){
//btn#onclick
$("#btn").click(function(){
alert("hello");
return false;
});
});
%h2= "No2.show collections"
-# show collection
- for lang in @languages
- if lang.visible
%= lang.name
%&= lang.desc + "(escape HTML)"
%h2= "No3.use coffee function"
- msg = (x,y)->
%h3= x
%h3= y
%h1= msg "Hello","haml"
%h1= msg "hi","coffee-script"
%h2= "No4.use javascript"
%input#btn{:type=>'button',:value=>'push'}
1行目は、サーバサイドから渡されたnameパラメータを表示しています。haml-coffeeで変数をバインドするには@を使用します。 12行目〜17行目は、coffee scriptのコードを記述しています。行の先頭に-をつければcoffee scriptを記述することができます。 また、20行目〜27行目では、coffee scriptで関数を定義してそれを使用しています。
30行目〜31行目ではボタンに対して3行目の:javascriptフィルター(hamlが持っている機能）を使用して、jQueryでイベントを割り当てています。 このように、通常のjavascriptも使用することができます。
実行
coffee scriptファイルをコンパイルしてnode.jsを起動します。
$ coffee -c app.coffee $ node app.js Express server listening on port 3000 in development mode
localhost:3000にアクセスすれば結果が表示されます。
まとめ
さて今回はhamlでcoffee scriptが使えるモジュール、haml-coffeeをご紹介しました。 node.js(express)ではhaml以外にもEJSやJadeなど、色々なテンプレートエンジンが使用できます。 シンプルなものから高機能なものまでありますので、試してみてください。
参考サイトなど
- haml-coffee: https://github.com/9elements/haml-coffee
