CoffeeScript を軽く試してみようと思ってあれこれ調べているうちにたどり着いた Middleman というツールを紹介してみる。
Middleman: Hand-crafted frontend development
たぶん試したのは 2.0.3 だか 2.0.4 だかその辺。
特徴
- Sinatra based ( つまり ruby 製 )
- Sass 自動コンパイル
- CoffeeScript 自動コンパイル ( Sprockets を使った依存性解決も )
- Sinatra で使える view の機能
- HTML テンプレートは erb, haml, slim, markdown が利用可能
- YAML で「データ」を持ってこれを view に反映できる
- livereload 対応
そして、静的サイトとして出力できる。
利用技術
- CoffeeScript
- Sass
- EventMachine
- Thin
- Guard Livereload
など、お馴染みな人にはお馴染みなもののオンパレード。
あと Ruby はたぶん 1.9 の方が良い。1.8 でも動くかもしれないけど、自分はうまくいかなかった。（後日ちゃんと動いたので大丈夫かも。）
インストール
gem install middleman
残念ながら EventMachine や Thin の辺りが native extension なので Windows ではややこしい。（あ、Mac でも XCode 入ってないとまずいです。）これらの gem にはそれぞれ Windows 版があるんだけど、なぜか Middleman がうまくそれらを利用できない。
gem 自体は全部入ってるのでうまくやれば使えそうな気はするんだけど、勇者募集中らしい。
Twitter / @middlemanapp: If you're a Rubyist on Win …
使い方
初期化から実行
middleman init PROJECT_NAME
cd PROJECT_NAME
middleman
とすると middleman server が立ち上がるので、
http://localhost:4567/
にアクセスして簡単な紹介文が表示されれば ok.
デフォルトではこんな感じでファイルができる。
PROJECT_NAME/
├── config.rb
└── source/
├── images/
├── index.html.erb
├── javascripts/
├── layout.erb
└── stylesheets/
└── site.css.scss
静的サイト生成
project のディレクトリで
middleman build
とすることで
build/
というディレクトリができてその中に生成済み HTML, JavaScript, CSS, そこから利用するファイルが配置される。
build 以下を Web サーバ配下に置けば静的サイトの公開終わり。
画像とかどこに置けばいいの？
middleman server が動いている状態なら
source/
の中の構造がそのままブラウザで確認できる。例えば index.html.erb の内容が http://localhost:4567/ に表示される。変換しないファイルも同様。
エンジンは拡張子で
init したばかりの状態で .erb と .scss があるのでなんとなく分かると思うけど、何を使うかは拡張子で指定する。例えば
source/javascripts/application.js.coffee
を置けば
http://localhost:4567/application.js
でコンパイル済みの JavaScript ファイルにアクセスできる。CoffeeScript を使わない場合は .js の拡張子でそのまま JavaScript を書けばよい。
index.html.erb じゃなくて index.html.slim を置けば slim を利用できる。
レイアウトの変更
config.rb を見ればまず分かると思う。その中から二つだけ取り出して紹介しよう。
template と layout を別々のエンジンで
set :markdown, :layout_engine => :slim
こうすれば
...
└── source/
├── images/
├── index.html.markdown
├── javascripts/
├── layout.slim
...
のように個々の文書は markdown で、layout を slim で書くことができる。
特定のディレクトリ以下の layout を全部変更
with_layout :layout_mobile do
page "/m/*"
end
こうしておくと上の設定と合わせて
...
└── source/
├── images/
├── index.html.markdown
├── javascripts/
├── layout.slim
├── layout_mobile.slim
├── m/
│ └─ index.html.markdown
...
こんな形で layout ファイルを分離できて、
http://localhost:4567/m/
以下はモバイル専用といった形で利用できる。スマートフォンであれば JavaScript が利用できるので、redirect を諦めれば静的サイトでも両対応サイトは十分実現可能だし、Middleman を使えばそのために2倍の HTML のコーディング量を要することもない。
YAMLデータを使ってコンテンツの使い回し
ここから先はまだ実際には試してないのでコード例は出せないけど、上の layout の切り替えに加えて
- YAML に複数行データでコンテンツを持たせる
- markdown などのルールから変換して HTML として展開
することで HTML のコーディングだけでなくコンテンツも再利用できると思う。
いずれ試してみたい。
その他
- livereload でブラウザに切り替えて reload することなくファイルの変更を反映可能
- ただし WebSocket を利用するのでブラウザを選ぶ
- JavaScript や CSS の minify
- Y! Smush.it を使った画像の最適化
などもできるらしい。ほんとになんでもアリだなぁ。
参考
livereload は昔からよくあるブラウザを自動でリロードするやつのモダンな実装。WebSocket を使うので 2011-08-10 時点では Firefox, Chrome ともに拡張を入れる必要がある。
- LiveReload - Chrome ウェブストア
- LiveReload :: Add-ons for Firefox
- Railsアプリを変更したら自動でブラウザをリロードしてすぐ確認できる guard-livereload｜WEBデザイン Tips
- Firefox 6.0+ でそのままで使えずにしばらく悩んだ。対応バージョンに注意。
最近は Mac のネイティブアプリ化に向けて頑張ってるらしい。完成したら「terminal で gem 入れて」とか何ゆってんの？な人でも使えるようになって面白いかも。