ワシはワシが育てる

週刊少年ジャンプと任天堂のゲームが三度のメシより好きです。

静的サイト開発にmiddlemanを使う

Rubyによるウェブアプリケーションフレームワークとして有名なのは、言わずもがなRuby on Railsですが、今回はRubyを使った静的サイト開発のためのmiddlemanを紹介します。

まず以下のコマンドでmiddlemanをインストールします。
(前提としてRubyがインストールされているとします)

gem install middleman

middlemanは、Railsはじめ動的なウェブアプリケーション開発の手法をそのまま静的サイト作成に活かすことができるのが特徴です。
それによりコーディング作業を大幅に短縮することができます。

例えばHTMLテンプレートにはslim、CSSにはsassおよびcompass、JavaScriptにはjqueryおよびCoffeeScriptを使用するケースを想定します。さらにライブリロードをかけて効率化します。
※今回はsassのscss記法を使用し、以下scss記法を意味します。

まずRailsと同じようにGemfileを編集し、bundle installしましょう。

gem 'slim'
gem 'sass'
gem 'compass'
gem 'jquery-middleman'
gem 'coffee-script'
gem 'guard'
gem 'guard-livereload'

そしてライブリロードの準備です。

まずbundle exec guard initでGuardifileを生成します。
生成されたらGuardfileをmiddleman仕様に変更してあげます。

guard 'livereload' do
  # sourceフォルダ直下のファイルはテンプレートのみ監視
  watch(%r{source/.+\.(erb|haml|slim)$})
  # sourceファイルのサブディレクトリ以下は全て監視(js,css,layout)
  watch(%r{source/.+/.+$})
end

これで下準備は完了です。
middleman sとコマンドを打てばデフォルトでポート4567にローカルサーバが立ち上がります。

あとはRailsと同じ手法でゴリゴリ書いていけますが、Railsに馴染みのない方のほうが多いかと思いますので軽く説明します。

まず共通テンプレートはlayoutsフォルダ以下のファイルを編集します。
デフォルトではerbになっていますが、先ほどslimをインストールしたので、layout.erbをlayout.slimに変更します。

# layout.slim
doctype html
html
  head
    meta charset='utf-8'
    title middlemanで静的サイト構築
    = stylesheet_link_tag 'all'
    = javascript_include_tag 'all'

  body
    = yield

stylesheet_link_tagを呼び出すとstylesheetsフォルダ以下のファイルが呼び出されます。ここでは「all.css」ですね。javascriptも同様です。

では今度はCSSとJSを編集しますが、ここが少し特徴的です。
今回はsassを使用するので、all.cssall.css.scssとファイル名を変更します。同様にall.jsをall.js.coffeeとしましょう。

あとはsassおよびcoffeescriptを書けばよいのですが、asset pipelineを使用することができるので、複数ファイルを一つのファイルに連結することができます。

// これはall.css.scss
//= require hoge

// ここからはhoge.css.scss
@import "compass";

body {
  h1 {
     font-size: 22px;
  }
}

このように//=requireと指定したものは自動的に連結され、ここではhoge.css.scssが呼び出されます。複数ファイルを連結することも、ディレクトリごと連結することもできます。
同様にcoffeescriptもファイルを開発しやすいよう分散し、一つのファイルに連結します。

ここまで準備が整ったら実際にライブリロードをかけてみましょう。
コマンドでbundle exec guardと入力し、ブラウザでライブリロードをオンにします。(chromeの場合はこのプラグインを使用します)

ブラウザから接続するとINFO - Browser connected.とターミナルに表示されていればOKです。この状態でファイルを編集すると、自動的にコンパイルされ、ブラウザがリロードしてくれるのが分かるかと思います。

ちなみに= yieldというのはURLごとに切りかわるテンプレートを読み込むということです。ルートにアクセスした場合はindx.html.slimが呼び出されます。

またテンプレートにはRubyのプログラミングを使用できます。
例えば10回の繰り返し作業は以下のように書きます。

- kurikaeshi_array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

ul.kurikaeshi
  - kurikaeshi_array.each.with_index(1) do |kurikaeshi, i|
    li
      div = "これは#{i}回目の繰り返しです"
      div = "結果: #{kurikaeshi}"

なお今回は割愛しますが、最終的にテンプレートやsass等はコンパイルして通常のHTMLやCSSに圧縮して変換されます。
このとき画像・CSS・JSはサイト更新時にクライアント側のキャッシュと重複しないよう、ハッシュ化されたファイル名に変換されます。(もちろんオフにすることも出来ます)

その際にテンプレート側がハッシュ化されたファイルを読み込むために、画像やCSS、JSをテンプレートの記法で書いて置く必要があります。

# 画像の場合
= image_tag 'hogehoge.jpg', alt: 'hogehoge', width: 100, height: 200
# CSSの場合
= stylesheet_link_tag 'hogehoge', media: 'all'
# JSの場合
= javascript_include_tag 'hogehoge'

# 以下はダメな例
img src='hogehoge' alt='hogehoge.jpg' width='100px' height='200px'
link rel='stylesheet' type='text/css' media='all' href='/hogehoge.css'
script type='text/javascript' src='hogehoge.js'

ダメな例で書くとコンパイル時にテンプレートがハッシュ化されたファイル名に変換してくれず、参照先のファイルが存在しない結果になってしまいます。

全体的に説明不足の上、その他layoutの切り替え、アセットパイプラインの設定など多くを割愛しておりますので、詳しく学習されたい方は公式サイトを参照してください。

middleman日本語ドキュメント

Rubyをやったことのない人にはやや学習コストは高いですが、慣れれば非常に開発効率を上げることができます。
静的サイトという分野ですので、是非コーダーやデザイナーの方にも使って頂きたいです!