前回はbowerの設定を行いました。

次はbootstrap-sassを使ったテンプレートが動くところまでやりましょう。

前回までを読んでない方は、こちらをどうぞ。

• middlemanによる静的サイト作成術　その１
• middlemanによる静的サイト作成術　その２
• middlemanによる静的サイト作成術　その３

JavaScriptの設定

middlemanでは、JavaScriptを普通に書くこともできますが、CoffeeScriptも書く事ができます。
私はRailsでずっとCoffeeScriptをずッと書いているので、今回はCoffeeScriptを使います。

#= require jquery
#= require bootstrap-sass/assets/javascripts/bootstrap.min
#= require_self
#= require_tree .

これで、テンプレートではこのファイルだけ読み込めばよくなりました。

テンプレート側で読み込もうと思ったら、こう書きます。

= javascript_include_tag :application

erbの場合は、こう書きます。

<%= javascript_include_tag :application %>

CSSの設定

middlemanでは、SASSが最初から使えます。
今回はSCSSを使います。bootstrap-compassも使うかもしれないので読み込んでおきます。

@import "bootstrap-sass/assets/stylesheets/bootstrap";
@import "bootstrap-sass/assets/stylesheets/bootstrap-compass";

bootstrap-sassを使っているので@importで読み込むようにしています。
このファイルをテンプレート側で読み込みます。

= stylesheet_link_tag :application, media: "all"

erbの場合は、こう書きます。

<%= = stylesheet_link_tag :application, media: "all" %>

slimでテンプレートを作ってみる

最後に、slimでテンプレートを作ってみましょう。
slimは、html用のテンプレートエンジンです。

Slim – A Fast, Lightweight Template Engine for Ruby

slimやhamlは閉じタグを書かなくていいので、タグの閉じ忘れを気にしないで済みますし、タブ構造でhtmlの階層を記述するため、構造がわかりやすくてerbに比べるとかなり快適です。
私はhamlを書いたことがないので、hamlのことはよくわかりません。hamlを使っている人のほうが多いかもしれませんが、もうslimに慣れきっているので、slimで話を進めていきます。

doctype html
html lang="ja"
  head
    meta charset="utf-8"
    meta name="description" content=""
    meta name="keywords" content=""
    meta name="author" content=""
    meta content="IE=Edge,chrome=1" http-equiv="X-UA-Compatible"
    meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"
    /! Le HTML5 shim, for IE6-8 support of HTML elements
    /![if lt IE 9]
      <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
      <script type="text/javascript">
        document.createElement('main');
      </script>
    = stylesheet_link_tag :application, media: "all"
    /= favicon_link_tag 'favicon.ico'
    title = current_page.data.title || "middleman"
  body class=page_classes
    = javascript_include_tag(:ga) if build?
    noscript
      | 当サイトはJavaScriptを使用しています。JavaScriptを有効にしてください。
    .container
      .row
        .col-xs-12.col-sm-12.col-md-9
          header.hidden-xs.hidden-sm
            h1 初めてのmiddleman
          main role="main"
            = yield
      ruby:
        table_of_contents = [
                {path: 'foo.html', title: 'Foo'},
                {path: 'bar.html', title: 'Bar'},
                {path: 'buzz.html', title: 'Buzz'},
        ]
      aside.col-md-3.hidden-xs.hidden-sm
        div#nav-sidebar
          h3 目次
          ul.nav.sidebar
            - table_of_contents.each do |table_of_content|
              li class=('active' if current_path == table_of_content[:path])
                = link_to table_of_content[:title], table_of_content[:path]
    footer
      .container
        p
          small.copy
            | Copyright &copy; 2015 初めてのmiddleman All Rights Reserved.
    = javascript_include_tag :application

このテンプレートは、一応、PC用とスマートフォン用を考えて作られています。
slimに慣れていない方のために詳しく説明していきます。

yieldについて

yieldは、簡単に言うと、個別のページで記述したhtmlが入ります。
今回のテンプレートでいえば、mainタグ内にyieldがありますね。

main role="main"
  = yield

例えば、index.html.slimを作ったとします。

---
title: '初めてのmiddleman'
---

h2 Hello　Middleman!!
p
  | middlemanは開発しやすいです。
  br
  | CoffeeScriptもSassも楽勝！！

この状態で、middlemanのサーバーを起動します。
以下のコマンドを入力して実行しましょう。

middleman

すると、http://localhost:4567でサーバが起動します。アクセスしてみましょう。index.html.slimの内容が表示されたかと思います。

最初の3行のところで定義している内容は、テンプレート内のcurrent_page.dataに入ります。今回はtitleを定義しているので、current_page.data.titleに反映されます。

title = current_page.data.title || "middleman"

これは、current_page.data.titleが空だった場合、middlemanというタイトルタグになります。

Rubyも書ける

slimはもちろんRubyも書くことができます。上記のテンプレートでは、サイドバーのメニューをRubyのHashの配列を使って楽をしています。

ruby:
  table_of_contents = [
          {path: 'foo.html', title: 'Foo'},
          {path: 'bar.html', title: 'Bar'},
          {path: 'buzz.html', title: 'Buzz'},
  ]
aside.col-md-3.hidden-xs.hidden-sm
  div#nav-sidebar
    h3 目次
    ul.nav.sidebar
      - table_of_contents.each do |table_of_content|
        li class=('active' if current_path == table_of_content[:path])
          = link_to table_of_content[:title], table_of_content[:path]

ruby: を使うとその中はRubyを書くことができます。table_of_contentsという変数に、Hashの配列を定義しています。そして、eachループを使ってliタグを書き出しています。現在のパスが特定のパスと一緒だったらactiveというクラスをつけるという処理も付いています。link_toメソッドは、Railsでもおなじみのリンクを作るヘルパーメソッドです。

それにしても、このままだとテンプレートが長くて見辛いですね。パーツ化していきましょう！上記のサイドバーを別ファイルに出してみます。

部分テンプレートを定義する

部分テンプレートは簡単に定義できます。が、Railsの場合とはちょっとだけ違います。見ていきましょう。まず、source/layouts/_sidebar.slimを作ります。そこに、さきほどのサイドバーの内容をコピペします。

ruby:
  table_of_contents = [
          {path: 'foo.html', title: 'Foo'},
          {path: 'bar.html', title: 'Bar'},
          {path: 'buzz.html', title: 'Buzz'},
  ]
aside.col-md-3.hidden-xs.hidden-sm
  div#nav-sidebar
    h3 目次
    ul.nav.sidebar
      - table_of_contents.each do |table_of_content|
        li class=('active' if current_path == table_of_content[:path])
          = link_to table_of_content[:title], table_of_content[:path]

そして、layout.slimの内容を修正します。

= partial 'layouts/sidebar'

Railsでは、renderメソッドを使いますが、middlemanではpartialメソッドを使います。

同じように、フッターも部分テンプレートにしてみましょう。

footer
  .container
    p
      small.copy
        | Copyright © 2015 初めてのmiddleman All Rights Reserved.

ビルド時だけ動く処理を追加する

Google Analyticsのような、アクセス解析のタグなどは開発中の環境では読み込んでほしくありません。本番環境用のコードにだけ記述したい場合は、build?メソッドを使って条件設定をすることができます。Google Anatytics用のコードは、source/javascirpts/ga.jsに保存したというします。

= javascript_include_tag(:ga) if build?

これで、middleman buildを実行したときだけ、Google Analyticsのコードが反映されます。

今回のまとめ

今回作ったテンプレートを載せておきます。

doctype html
html lang="ja"
  head
    meta charset="utf-8"
    meta name="description" content=""
    meta name="keywords" content=""
    meta name="author" content=""
    meta content="IE=Edge,chrome=1" http-equiv="X-UA-Compatible"
    meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"
    /! Le HTML5 shim, for IE6-8 support of HTML elements
    /![if lt IE 9]
      <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
      <script type="text/javascript">
        document.createElement('main');
      </script>
    = stylesheet_link_tag :application, media: "all"
    /= favicon_link_tag 'favicon.ico'
    title = current_page.data.title || "middleman"
  body class=page_classes
    = javascript_include_tag(:ga) if build?
    noscript
      | 当サイトはJavaScriptを使用しています。JavaScriptを有効にしてください。
    .container
      .row
        .col-xs-12.col-sm-12.col-md-9
          header.hidden-xs.hidden-sm
            h1 初めてのmiddleman
          main role="main"
            = yield
        = partial 'layouts/sidebar'
    = partial 'layouts/footer'
    = javascript_include_tag :application

だいぶ短くなりました。部分テンプレート化することができたので、わかりやすくなったと思います。

あとは、それぞれ適当にslimファイルやerbファイルを作って、動作検証をしましょう。

サイトが完成したら、以下のコマンドでビルドします。

middleman build

buildディレクトリ以下にファイルが生成されるので、それをアップロードすれば終わりです。

とりあえずmiddlemanの連載としてはこれで終わろうと思います。
twitterでもコメントでも、感想などいただけたら嬉しいです。