最新のfrontend技術を使いまくれる静的サイトジェネレータMiddleman

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 ともに拡張を入れる必要がある。

最近は Mac のネイティブアプリ化に向けて頑張ってるらしい。完成したら「terminal で gem 入れて」とか何ゆってんの？な人でも使えるようになって面白いかも。

More