[ Middleman で超速プロトタイピング ] #01 Middleman の基礎を一気に学ぶ

そんな訳で、これより Middleman の導入から基本操作まで習得してみるとします。

はじめに - Middleman って何だっけ？

環境構築から起動までやってみる

とりあえず Middleman をインストールして動くところまで試してみるとします。当方の動作環境は以下のとおりです。

• Mac OS X v10.8 Mountain Lion
• Ruby  2.0.0-p195

1) Middleman をインストール (※お手軽版)

Middleman は Ruby のフレームワークに相当します。Ruby の世界ではプラグインやフレームワークといった拡張機能を総括して gem と読んでいます。Middleman もまた Ruby の gemにあたります。ということでインストールは gem のインストール方法に倣って行います。

Ruby が既にインストールされている状態でおもむろにターミナルを起動し、そのまま以下のコードを入力して Enter を押します。

% gem install middleman

ズドドドドーッと文字が流れていきますが、Middleman を動作させるのに必要な関連ファイルを一緒にインストールしているので時間が掛かっています。これでインストールは完了です。きちんと出来たかどうかを確認するには、以下のコードを入力して Enter キーを押します。（※ディレクトリはどこでも構いません）

% middleman version

下記のようにインストールされた Middleman のバージョンが表示されれば成功です。

middleman 3.1.4

1') Middleman をインストール (※本格志向)

先のインストール方法は gem をグローバルレベルでインストールする方法でした。利用する分には何の問題もありませんが、マシン全体で Middleman が使える状態となるため、必要としないプロジェクトでも利用が可能となってしまいます。プロジェクト毎に必要な gem だけをインストールし、それ以外の作業ディレクトリでは使えないようにしたいという本格志向の方はこちらの方法で行きます。

1. bundler をインストール

gem を何でもかんでもグローバルレベルに突っ込まずに、開発環境ごとに管理出来るようにするための Ruby のプラグインです（※bundler自身もgemです）。bundler のインストール手順については以下の記事に詳しく書かれているので、ここでは割愛します。

• bundlerでgemをプロジェクトごとに管理する

bundler がインストールできたら、いよいよ Middleman をインストールします。

2. bundler を使って Middleman をインストール

いきなりインストールコマンドを実行せずに、まずは開発環境となる作業ディレクトリを作成してそこに移動します。

# try_middleman ディレクトリを作成
% mkdir try_middleman

# 作成したディレクトリに移動
% cd try_middleman

次に以下のコマンドを実行して作業ディレクトリを初期化します。

$ bundle init
Writing new Gemfile to /path/to/project/Gemfile

すると Gemfile というテキストファイルが生成されます。これをテキストエディタで開くとなんだか色々と書かれています。これはインストールする gem ファイルを管理するための言わば発注書のようなモノですが、今回は Middleman だけインストール出来れば良いので、書いてある内容を全て消したら以下のソースコードだけを書きます。

source "https://rubygems.org"
  
gem "middleman"

書いたら保存して以下のコマンドを入力し、Enterキーを押します。

$ bundle install --path vendor/bundle

ズドドドドーッと文字が流れてきますが、じっと待ちます。これで Middleman が作業ディレクトリに対してインストールされました。ようやく準備完了です。

2) Middleman を起動してみる

はじめに Middleman プロジェクトを作成します。try_middleman というディレクトリを作成し、そこに移動して以下のコマンドを入力、Enterキーを押します(※ bundler からインストールした場合は既に作業ディレクトリが出来ているはずなので、改めて作成する必要はありません)。

# try_middleman ディレクトリで以下のコマンドを実行
% middleman init .

これより先のコマンド操作は全てお手軽版に準拠した内容で紹介しています。bundler を使ってインストールされた方は、すべてのコマンドの先頭にbundle exec という文字列を入力してください。

スケルトンと呼ばれるすべてのプロジェクトで使用できるフォルダ階層とファイル群が生成されます。細かいことは後で説明するとして、とりあえず起動します。以下のコマンドを入力して Enter キーを押します。

% middleman server

すると以下の様なレスポンスが表示されて開発用 Web サーバーが起動し、ブラウザからサイトにアクセス出来るようになります。

== The Middleman is loading
== The Middleman is standing watch at http://0.0.0.0:4567
== Inspect your site configuration at http://0.0.0.0:4567/__middleman/

提示されている URL http://0.0.0.0:4567にアクセスしてみます。Middleman ロゴがでかでかと描かれたページが表示されればプロジェクトは無事に作成されました。

3) Middleman を終了する

ターミナル上で Ctrl + c を押すと Middleman が終了します。

4) ビルドして静的ファイルを書き出す

Middleman 上でのプロトタイピングが終了したら HTML、CSS、JavaScript といった静的ファイルを書き出します。以下のコマンドを入力して Enter キーを押します

middleman build

すると build というディレクトリが作成されて、その中に静的ファイルが次々と生成されます。

ここまでが Middleman によるプロトタイピングのおおまかな流れです。ではこれより Middleman のしくみや機能について詳しく見ていくとします。

Middleman のディレクトリ構造について

生成された Middleman のファイル群はざっとこのようになっています。

try_middleman
│  .gitignore
│  config.rb
│  Gemfile
│  Gemfile.lock
│
└─source
    │  index.html.erb
    │
    ├─images
    │      background.png
    │      middleman.png
    │
    ├─javascripts
    │      all.js
    │
    ├─layouts
    │      layout.erb
    │
    └─stylesheets
            all.css
            normalize.css

config.rb には Middleman プロジェクトの設定が定義されています。初期状態だと多くの機能がコメントアウトされていますが、必要に応じてコメントを外して有効化したり改変して自分ならではの設定に仕上げることが出来ます。ひと通り目を通しておくとどういった機能が利用できるのか見えてくることでしょう。

そして静的サイト作成のメインとなるのは source フォルダにあるファイル群です。この中に Haml ファイルや SCSS ファイル等を作成・編集し、それらを元に静的サイトが生成されます。Middleman の機能をフル活用するとなるとこれら以外にも様々なファイルやディレクトリを用意して実装することになりますが、基本的にはプロジェクト作成時に生成されたこれらのファイル群で当シリーズの目指すゴールの半分以上は賄えることができます。

テンプレート と レイアウト

いまさら聞けないテンプレートの基礎

昨今の Web アプリケーションの大半は 動的な Web ページというヤツです。わかりやすいところだとブログ。この Developers I.O というブログは 2013年７月時点で 1,600 以上の記事があります。もしこのブログが静的な Web サイトだとすると、記事の数だけ HTML ファイルが必要になってしまいます。しかしブログ記事というのは中身の情報が違うだけで、ページ全体のレイアウトやデザイン(※枠組み)は同じはずです。ならばそのレイアウトやデザインは一枚のテンプレートというモノにしておいて、サイト訪問者が見ようとしているブログ記事の内容を流し込めば 1600 だろうが 160 万だろうが関係なく、常に一枚のソースファイルだけで管理することが出来ます。大雑把ですが、コレが Web アプリケーションにおけるテンプレートの概要です。

テンプレートは静的な HTML ページを出力する元となる存在なので、変数や条件分岐、ループといった動的処理を記述することができます。使用するプログラミング言語は Ruby。そして Ruby のためのテンプレートが ERbHaml という形式なのです。

レイアウトというものについて

一般的な Web サイトのページを構成する要素は大きく分けて以下の二種類です。

• グローバルヘッダーやグローバルフッターといった全画面を通して共通の要素
• そのページ固有のコンテンツ(※要素)

ページ固有のコンテンツをブログに例えるなら、記事タイトルと記事本文。後は必要に応じて執筆者情報やコメントといったところでしょう。ならばグローバルヘッダーやフッターなど全画面共通の要素と個別ページを表示する領域だけを記述したテンプレートを作っておき、個別ページのコンテンツをこれで囲ってしまうという構造にしておけば、個別ページに共通要素を一切記述しなくて良いということになります。これが Middleman におけるテンプレートレイアウトの構造であり、そして Ruby on Rails もまたこれと同じ構造を採っています。

以前に弊社 清田 が執筆した記事に良い感じの図があったので流用します。

(1) テンプレートファイル(コンテンツ) - sample.html.haml

個別ページです。基本的にここには固有のコンテンツだけが記述されており、その他には Frontmatter というレイアウトページ固有の情報したいページ固有の情報群があります。ファイル自体の拡張子はhamlですが、コンパイル後の拡張子をファイル名に含める決まりがあります。

(2) レイアウトファイル - layout.haml

テンプレートファイルを囲うためのモノです。囲ったテンプレート（コンテンツ）は= yieldと書かれている箇所に出力されます。

(3) パーシャル - _header.haml_footer.haml

単独で利用されることがなく、他のテンプレートファイルやレイアウトファイルにインクルードされることを前提としたものです。ファイル名に_を接頭辞としてつける決まりがあります。

お分かりいただけただろうか

カスタムレイアウト

Middleman には layout.erb というレイアウトファイルが最初から用意されており、デフォルトで全てのページがこのレイアウトファイルに囲われた状態で出力されます。しかしページによっては異なるレイアウトを使用したいというケースも往々にしてあるでしょう。例として custom_layout.haml というのを作ってみます。

デフォルトのレイアウトファイル layout.erb は source/layouts ディレクトリに置かれていますが、自前で作るカスタムレイアウトも同じく個々に配置します。

layouts/custom_layout.haml

!!!
%html
  %head
    %title カスタムレイアウト
  %body
    .wrapper
      = yield

なんてことのないモノですが、ひとまずカスタムレイアウトを作りました。

カスタムレイアウトが出来たら、次にどのテンプレートファイルがこのレイアウトを使用するのかを定義します。定義する方法はふたつ。一つは後述する Frontmatter を使ってページ毎にレイアウトを指定する方法です。例として custom.html.haml ページに先ほどのカスタムレイアウトを指定してみるとします。

custom.html.haml

 ---
 layout: custom_layout
 ---
 
 %h1 Custom Layout page.
 %p カスタムレイアウトのページです。

このようにソースコードの一番最初にレイアウトを指定します。カスタムレイアウトをしていするファイルが少なければこの方法で問題ありませんが、仮に特定のディレクトリ以下にある複数のページファイルが対象となると、この方法ではやや冗長で面倒です。その場合は config.rb に以下のようなコードを追記して一括指定をします。

config.rb

page "/custom/*", layout: "custom_layout"

custom ディレクトリ以下にあるすべてのページファイルに対して custom_layout.haml を使用するように指定しました。*（ワイルドカード）はすべてのファイルという意味です。任意のファイル名を記述すればそのページファイルだけが指定されます。

レイアウトの入れ子

複数レイアウトを入れ子にして積み重ねることが出来ます。コードの重複を抑えることができ、複雑なレイアウトを作る上で欠かせません。例として以下の様な二種類のレイアウトがあったとします。

layout_a.haml

!!!
%html
  %head
    %meta{charset: 'UTF-8'}
    %title= current_page.data.title || Middleman Supersonic
  %body
    %header.global-header
      %h1 Page title
      
    .contents
      = yield
    
    %footer.global-foter
      %small wakamsha © 2013

layout_b.haml

!!!
%html
  %head
    %meta{charset: 'UTF-8'}
    %title= current_page.data.title || Middleman Supersonic
  %body
    .wrapper
      .contents
        = yield
        
      %aside.sidebar
        %p hoge
        %p fuga
        %p foo
    
    %footer.global-foter
      %small wakamsha © 2013

それぞれハイライトされている行の箇所が異なるだけで、それ以外は同じコードです。ならばこの重複している箇所をレイアウトのベースとして切り出し、layout_a.hamllayout_b.hamlがそれぞれベースレイアウトを入れ子で読みこめばコードの重複を解消することができるわけです。

layout_base.haml

!!!
%html
  %head
    %meta{charset: 'UTF-8'}
    %title= current_page.data.title || Middleman Supersonic
  %body

    = yield
        
    %footer.global-foter
      %small wakamsha © 2013

共通する箇所をlayout_base.hamlとして切り出しました。残ったlayout_a.hamlとlayout_b.hamlは以下のように書き換えます。

- wrap_layout :layout_base do
  %header.global-header
    %h1 Page title
   
  .contents
    = yield

layout_b.haml

- wrap_layout :layout_base do
  .wrapper
    .contents
      = yield
        
    %aside.sidebar
      %p hoge
      %p fuga
      %p foo

wrap_layout という関数を呼び出し、引数に使用するレイアウトを指定します。指定する際はファイル名をそのまま記述するのではなく、上の例にあるように:を冒頭につけてレイアウト名を記述します。これはシンボルというRubyの記法の一つ ^*1です。呼び出し元はlayout_base.hamlの= yieldの部分に来ます。この機能はオブジェクト指向の継承がイメージとして近いかもしれません。

パーシャル

前回の Haml 記事でも紹介した外部ファイルをインクルードする機能と基本的には同じです。グローバルヘッダーやグローバルフッター、グローバルナビなど複数ページにわたって共通で使用されるようなコンポーネントは外部ファイル化しておくことでコードの重複を避けることができます。 ^*2先の例を続けます。layout_a.hamlにはグローバルヘッダー要素がありますが、これをパーシャル化してlayout_b.hamlやそれ以外のファイルでも使用できるようにします。

パーシャルのファイル名は先頭に_を付けます。 ^*3共通するレイアウトの一部ということで、layouts/libというディレクトリを新規に作成してそこに配置します。

layouts/lib/_global_header.haml

%header.global-header
  %h1 Page title

グローバルヘッダーのパーシャルファイルが出来ました。次にpartialメソッドを使って layout_a.haml にグローバルヘッダー要素を配置します。

layouts/layout_a.haml

- wrap_layout :layout_base do
  = partial 'layouts/lib/global_header'
   
  .contents
    = yield

partial という関数の引数として配置したいパーシャルファイルのパスを指定します。ポイントとしてはファイル名にはある先頭の_と拡張子は記述しないということです。layout_b.haml にグローバルヘッダーを配置したい場合も上記と同様の手法で実現することができます。

もう一つ気をつけなくてはならないのが、パーシャルファイルが呼び出し元と異なるディレクトリにある場合は、sourceディレクトリからの絶対バスで指定する必要があるという点です。同一ディレクトリにある場合はファイル名だけで OK です。

パーシャルとして外出しできたのは良いのですが、見出しの文言が Page title と固定になっていては、使い勝手が良い機能とはいえません。呼び出しの際に見出しの文言を引数として渡すことでこの問題を解決することができます。パーシャルファイルを以下のように修正します。

layouts/lib/_global_header.haml

%header.global-header
  %h1= title

titleという変数に書き換えました。この変数に対してパーシャル呼び出し時に値を引数として渡します。layout_a.hamlを以下のように修正します。

layouts/layout_a.haml

- wrap_layout :layout_base do
  = partial 'layouts/lib/global_header', locals: {title: "My Title A"}
   
  .contents
    = yield

localsというオブジェクトの中にパラメータを指定して値を渡しています。jQuery プラグインにオプションを渡すようなものだと考えておけば問題ないでしょう。

便利な関数 - テンプレートヘルパ

Haml を使うことで HTML を直接マークアップするよりも格段に効率よくコーディングが出来るようになっているわけですが、Middleman はこれだけで終わりません。更に効率化を推し進めるためのヘルパーメソッドが沢山用意されています。

Middleman にあるヘルパーメソッドは元々 Padrino という Ruby 製のフレームワークから流用されたものです。また Ruby on Rails においても殆どが同じように使用出来ます。

リンクヘルパ

アンカータグを生成するヘルパとしてlink_toメソッドがあります。一番基本的な使い方は、以下のように引数にリンク名称と href 値を渡します。

= link_to 'ホームに戻る', '/index.html'

アンカータグの中に他のタグを入れ子にしたり、条件分岐といった複雑な処理を記述したい場合は、以下のようにブロック構造にすることで実現出来ます。

= link_to '/index.html' do
  = image_tag 'logo.png'
  ホームに戻る

リンクパスは時に相対パスで指定したい場合があります。しかしレイアウトやパーシャル化したコンポーネントといった共通化したコンポーネントにおいて、読み込み元のテンプレートファイル毎に適した相対パスを指定するのは少々無理があります。以下のようにオプションを指定することで Middleman が必要に応じてリンクパスを適切な相対パスに書き換えてくれます。

= link_to 'ホームに戻る', '/index.html', relative: true

基本的にはこれでOKですが、相対パスに指定するアンカーリンクが増えてくると毎回指定するのが手間になります。config.rbに以下のコードを記述することで、相対パス設定をデフォルトにすることができます。

set :relative_links, true

この設定にした上で逆に相対パスにしたくない場合はlink_toメソッドにrelative: falseをパラメータとして渡せばOKです。

アンカータグにはこの他にもtargetやnameといった様々な属性がありますが、これらに関しては以下のように記述して指定します。

= link_to 'Google Top', 'http://www.google.com', target: '_blank', name: 'google'

image_tag - タグヘルパ

タグヘルパとはさまざまな HTML タグを生成するヘルパーメソッドのことですが、Haml で書いたほうが早いなぁということで個人的にあまり使用していません。その中でとりわけよく使うのがimage_tagメソッドです。引数に画像ファイル名を指定することでimgタグが生成されます。

= image_tag 'middleman.png'

ファイル名を指定しただけでソースパスを書いていません。Middleman ではconfig.rbにデフォルトの画像フォルダが指定されており、自動的にそのパスを追加するので、指定されたディレクトリ内にある画像であればファイル名を書くだけでOKです。

Form ヘルパ

フォーム要素を作成するのにおよそ必要な機能が盛り込まれています。一般的なフォームのコードを書いてみます。

Haml

- form_tag '/regist/', method: 'post' do
  - field_set_tag do
    .control-group
      = label_tag 'username', class: 'control-label'
      = text_field_tag 'username'

    .control-group
      = label_tag 'password', class: 'control-label'
      = password_field_tag 'password'
    
    .control-group
      %label.checkbox
        = check_box_tag 'agree'
        Agreement

    .control-group
      = label_tag 'type', class: 'control-label'
      = select_tag 'type', options: ['economy', 'premium'], selected: 'premium'

    .control-group
      %label.radio
        = radio_button_tag 'gender', value: 'man'
        Man
      %label.radio
        = radio_button_tag 'gender', value: 'woman'
        Woman

  = submit_tag 'Regist'

これが HTML 出力されると以下のようになります。

HTML

<form method="post" action="/regist/" accept-charset="UTF-8">
  <input name="authenticity_token" type="hidden">
  <fieldset>
    <div class="control-group">
      <label class="control-label" for="username">Username: </label>
      <input name="username" type="text">
    </div>
    <div class="control-group">
      <label class="control-label" for="password">Password: </label>
      <input name="password" type="password">
    </div>
    <div class="control-group">
      <label class="checkbox">
        <input name="agree" value="1" type="checkbox">
        Agreement
      </label>
    </div>
    <div class="control-group">
      <label class="control-label" for="type">Type: </label>
      <select name="type">
        <option value="economy">economy</option>
        <option value="premium">premium</option>}
      </select>
    </div>
    <div class="control-group">
      <label class="radio">
        <input value="man" name="gender" type="radio">
        Man
      </label>
      <label class="radio">
        <input value="woman" name="gender" type="radio">
        Woman
      </label>
    </div>
  </fieldset>
  <input value="Regist" type="submit">
</form>

まず全体をform_tagメソッドで囲みます。methodプロパティには get や post といった一般的な値だけでなく、delete や put といった値も指定することが出来るのが特徴です。このあたりがいかにも Ruby のフレームワークらしいです。

ほかに特徴的なのがlabel_tagです。一般的に label 要素は input 要素とペアで使われることから、第一引数に渡すのはペアになる input 要素の ID 値になります。それがそのままラベルの文字列として出力されるわけですが、この辺は英語圏に特化した仕様といえます。日本語サイトだと、ID 値は英語でもラベルの文言は日本語で表示するのが一般的なので、その場合は素直に%labelとHamlで記述することになります。

上記のコードにあるのはフォームヘルパのごく一部ですが、全てをご覧になりたい方は以下のサイトをご参照ください。

• Form Helpers | Guides Application Helpers - Padrino Ruby Web Framework

ダミーテキストヘルパ

プロトタイピングの段階では画面に表示する項目名は決まっていても、具体的な値はまだ未定というのが殆どです。その際は一時的な措置として

• あああああああああああああ
• xxxxxxxxxxxxxxxxxxxxx
• 01234567890123456789
• ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

といったような文字列で埋めることが多いのではないでしょうか。具体的な値がわからない以上やむを得ないのですが、こればかりを多用するとクライアントからちょっとイメージが湧かないなぁ〜なんて言われかねません。 ^*4

Middleman ではもう少しそれっぽいダミーテキストを生成してくれる機能が備わっています。当然日本語には対応していませんが、それでも上記のモノよりは数倍マシでしょう。

ダミーテキストの使用方法

lorem.sentence      # 1 文を返す
lorem.sentences 5   # 5 文を返す
lorem.word
lorem.words 5       # 5 つの単語を返す
lorem.paragraph
lorem.paragraphs 10 # 10 段落を返す
lorem.name
lorem.first_name
lorem.last_name
lorem.email
lorem.date          # strftime 形式の引数を受取る

sentencewordparagraphは Lorem ipsum の中から文言をランダムで選んで出力します。nameは現実的な西洋人の名前がランダムで生成されます。

dateにおいては Ruby の Time クラスを理解する必要があります。Time クラスには時刻を文字列形式に変換するメソッドであり、これにどのようなフォーマットに変換するかを引数で指定します。以下に一例を紹介します。

lorem.date('%Y-%m-%d')        # 2013-07-29
lorem.date('%Y-%m-%d %H:%M')  # 2013-07-29 20:09
lorem.date('%H:%M')           # 20:09

この他にもえ！？こんなパターンまで用意されてるの！？というようなものがありますので、すべてのフォーマットを知りたい方は以下のリンクをご参照ください。

• instance method Time#strftime

ダミー画像ヘルパ

ダミーテキスト同様、画像においてもおおまかな配置とサイズはわかっててもプロトタイピングの初期の段階でいちいち自前で用意するのは手間がかかります。Middleman では指定したサイズの画像をファイルを生成してくれる機能があります。

lorem.image '300x400'
	# => http://placehold.it/300x400
	
lorem.image '300x400', background_color: '333', color: 'fff'
	# => http://placehold.it/300x400/333/fff
lorem.image '300x400', random_color: true
	# => http://placehold.it/300x400/f47av7/9fbc34d
	
lorem.image '300x400', text:'blah'
	# => http://placehold.it/300x400&text=blah

パラメータはサイズだけでなく、上記のように背景色や文字色、画像内に表示するテキストといったものも指定することができます。

生成される画像はこのように非常に簡素なものですが、あらゆるサイズに対応しているというのは非常に強力といえるでしょう。

Frontmatter

テンプレートの項でも触れましたが、各テンプレートファイルには固有の変数をもたせることができます。テンプレートごとに使用するレイアウトや、レイアウトにあるtitle要素に渡すタイトル文字列などをここで定義します。

Frontmatter は YAML と JSON の二種類のフォーマットで記述することができ、プロジェクト作成時に生成されたテンプレートファイルにはYAML フォーマットで書かれています。

YAML フォーマット

---
title: Middleman の基礎を一気に学ぶ
layout: custom_layout
require_js: true
---

YAML の詳しい記述方法については以下のリンクをご参照ください。

• YAML - Wikipedia

テンプレートファイルの冒頭に---とハイフン3文字で開始と終了のブロックを作り、その中に定義したい固有変数を記述します。個々に記述された変数の値は、テンプレート及びレイアウトからcurrent_page.dataというハッシュを通して参照することができます。

current_page.data.title         # Middleman の基礎を一気に学ぶ
current_page.data.layout        # custom_layout
current_page.data.require_js    # true

JSON フォーマット

JSON の場合はブロックの区切りを;;;とセミコロン3文字で作ります。それ以外の使用方法は YAML の時と変わりません。

;;;
"title": "Middleman の基礎を一気に学ぶ",
"layout": "custom_layout",
"require_js": true
;;;

おわりに

以上、Middleman の基礎の部分をかいつまんで紹介しました。やや説明が長くなりましたが、とくべつ難解なところはなく、実際に手を動かしながら進めていただければこれといってつまづくことも無いでしょう。まだまだ基礎の段階ですから。

次回はこれらに加えてより深く突っ込んだ機能について学んでいきたいと思います。

脚注