Webサイト制作にmiddlemanを使った話

あるイベントのWebサイトの制作にMiddlemanを使った。 これ便利だったなーという機能とかを振り返ってみる。

構成

rubyを使うのでslimとsassを選んだ。

便利ポイント

個人的に便利だったのがローカルデータと動的ページの生成機能。

ローカルデータでhtmlをスリムに保つ

middlemanで便利だったものの1つがローカルデータ。

ページのコンテンツデータをレンダリングから抜き出すと便利な場合があります。この方法では, あるチームメンバーがコンテンツのデータベースの作成に集中でき, その作業の間に他のチームメンバーはサイト構造を組むことができます。ローカルデータは data フォルダの中に .yml や .json として作ることができ, テンプレートの中でこの情報を使うことができます。 data フォルダは, source フォルダと同じように, プロジェクトのルートに置かれます。

Middleman: ローカルデータ

例えば、果物と料金のテーブルをつくるとする。

table
  tr
    th 種別
    th 料金
  - data.food.fruits.each do |v|
    tr
      td = v.name
      td = "#{v.money}円"
fruits:
  - name: りんご
    money: 100
  - name: オレンジ
    money: 30
  - name: ぶどう
    money: 50

これで以下のようなhtmlが出力できる。 もちろんlivereloadを使っていれば変更は自動的にhtmlに反映される。
もちろん整形されてない状態でも出力できる。整形してほしい場合はconfig.rbにslimのprettyオプションを有効にする。他にも設定できることがあるので各自ググること。

    <table>
  <tr>
    <th>
      種別
    </th>
    <th>
      料金
    </th>
  </tr>
  <tr>
    <td>
      りんご
    </td>
    <td>
      100円
    </td>
  </tr>
  <tr>
    <td>
      オレンジ
    </td>
    <td>
      30円
    </td>
  </tr>
  <tr>
    <td>
      ぶどう
    </td>
    <td>
      50円
    </td>
  </tr>
</table>

ローカルデータを使うことでtrもtdも繰り返すことなく記述できコードが短くて済む。 さらに、他のページでの再利用が容易だ。 何よりよかったのがhtml側の記述を一切気にしないでデータの追加・変更ができる点こと。

動的ページ

動的ページとは言葉の通り動的にページを生成することができる。

今回は10数店舗の各々の情報を載せたページをmiddlemanのproxyを使って動的に生成した。 店舗データは前述のローカルデータを使って管理。 これにより、テンプレートに対してだけレイアウトを考えればよくなる。 また、middlemanのダミーデータ(ダミー画像もつくれる)を使うことによってまだクライアントから画像が1枚も来てない状況で色々作業できてよかった。 (まじで画像他色々全然こなくてつらかった。ダミーデータだけのサイトが完成してしまうかと思った。)

ただ、Proxyを使った動的ページめちゃくちゃ便利だけど、少し生成に時間かかる気がした。

店舗によって、例えば写真はNGとか言われたりする場合があって、その時はifで分岐して画像がなかったらNOIMAGEの画像を入れるなどした。

- if hoge.image.present?
  = image_tag hoge.image
- else
  = image_tag 'images/noimage.png'

つらみ

めちゃくちゃクライアントから修正くる場合、毎回のビルドに時間がかかるのでつらい。 とゆうのもビルドにミニファイとかしてくれるのでしょうがないといえばしょうがないのだが、待ち時間ができる。 待ち時間というものが厄介で、積み重なると案外時間をもってかれる。 つらい。 ビルド待っている間に次の修正がくる。 つらい。

結論

個人的にはMiddlemanを使って正解だった。

あと、middleman-autoprefixerべんり。 autoprefixerのおかげでベンダープレフィックスの闇によって心が荒まなくてすんだ。