最新の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

Categories

Tool 日々 Web Biz Net Apple MS ことば News Unix howto Food PHP Movie Edu Community Book Security Text TV Perl Ruby Music Pdoc 生き方 RDoc ViewCVS CVS Rsync Disk Mail FreeBSD Cygwin PDF Photo Zebedee Debian OSX Comic Cron Sysadmin Font Analog iCal Sunbird DNS Linux Wiki Emacs Thunderbird Sitecopy Terminal Drawing tDiary AppleScript Life Money Omni PukiWiki Xen XREA Zsh Screen CASL Firefox Fink zsh haXe Ecmascript PATH_INFO SQLite PEAR Lighttpd FastCGI Subversion au prototype.js jsUnit Apache Trac Template Java Rhino Mochikit Feed Bloglines CSS del.icio.us SBS qwikWeb gettext Ajax JSDoc Rails HTML CHM EPWING NDTP EB IE CLI ck ThinkPad Toy WSH RFC readline rlwrap ImageMagick epeg Frenzy sysprep Ubuntu MeCab DTP ERD DBMS eclipse Eclipse Awk RD Diigo XAMPP RubyGems PHPDoc iCab DOM YAML Camino Geekmonkey w3m Scheme Gauche Lisp JSAN Google VMware DSL SLAX Safari Markdown Textile IRC Jabber Fastladder MacPorts LLSpirit CPAN Mozilla Twitter OpenFL Rswatch ITS NTP GUI Pragger Yapra XML Mobile Git Study JSON VirtualBox Samba Pear Growl Mercurial Rack Capistrano Rake Win RSS Mechanize Sitemaps Android JavaScript Python RTM OOo iPod Yahoo Unicode Github iTunes God SBM friendfeed Friendfeed HokuUn Sinatra TDD Test Project Evernote iPad Geohash Location Map Search Simplenote Image WebKit RSpec Phone CSV WiMAX USB Chrome RubyKaigi RubyKaigi2011 Space CoffeeScript Nokogiri Hpricot Rubygems jQuery Node GTD CI UX Design VCS Kanazawa.rb Kindle Amazon Agile Vagrant Chef Windows Composer Dotenv PaaS Itamae SaaS Docker Swagger Grape WebAPI Microservices OmniAuth HTTP 分析基盤 CDN Terraform IaaS HCL Webpack Vue.js BigQuery Middleman CMS AWS PNG Laravel Selenium OAuth OpenAPI GitHub UML GCP TypeScript SQL Hanami Develop Document Jekyll