静的webサイト作成の強い味方「Middleman」【中編】

2015.12.25

ノウハウ

メリーメリークリスマス！
マライア・キャリーさんの「恋人たちのクリスマス」がどこかしこから聞こえてきて、ウキウキせずにはいられないドワンゴデザイナーのchiiです。

気持ちが高ぶってしまってコンビニのクリスマスケーキを買ってみたら、店員さんがフォークを4本もつけてくれました。ごめんね、一人で全部食べたんだ…でもありがたくフォークは4つとも使わせてもらったよ…！！

さてさて、前回の記事でMiddlemanの紹介から導入までを書きまして、今回は実際に作るところまで執筆したのですが、想像以上にボリューミーになってしまったのと前回の記事が思った以上に好評だったので、丁寧に解説するべく使い方編と製作編で分けています。

なので今回は、「Middlemanを使うために知っておきたいこと」と「設定ファイルの編集方法」のご紹介です。

ぜひお手元で試しながら読んでみてください。

おさらい

middleman

Middlemanを３行で

初めての人にも試してほしい静的サイトジェネレータ
代替言語のコンパイルからテンプレートのレンダリングまでやってくれる便利ツール
共通部分を部品化できて開発が楽になる

動作確認環境

この記事は私の開発環境において動作確認を行っています。開発環境やバージョンによって挙動や設定の内容などが異なる可能性がありますのでご注意ください。

私の開発環境
OS X Yosemite（バージョン：10.10.3） ruby: 2.2.3p173 (2015-08-18 revision 51636) [x86_64-darwin14] Bundler: 1.10.6 nokogiri: 1.6.7 Middleman: 3.4.0

Middlemanの基本

basic

使用するコマンド

覚えるコマンドはたったの3つ。これだけ覚えておけばとりあえず動かすことができます。

middleman init	middlemanで管理するプロジェクトを作ります。コマンドを実行すると設定ファイルやデフォルトのディレクトリレイアウトが作成されます。
middleman server	ファイルの変更を監視し、ブラウザの表示に即時反映するサーバーを起動します。起動したサーバーを落とすにはターミナル上でctrl+cを押してください。
middleman build	全体をコンパイルします。コンパイルによって作成されたファイル郡をサーバーに置くことで、サイトを公開することができます。

構造を把握する

前回の記事の導入部分で見たディレクトリレイアウトを参考に、各ディレクトリやファイルの役割を見てみましょう。

ディレクトリレイアウト

my_project：プロジェクトを作成するときに指定したディレクトリ。プロジェクトのトップディレクトリ
- source：開発を行うディレクトリでドキュメントルート
  - images：画像置き場
  - index.html.erb：サイトのトップページのコンテンツ部分
  - javascripts：スクリプト置き場
  - layouts：レイアウト置き場
  - stylesheets：スタイル置き場
- .gitignore：git管理するときに不要ファイルを省く設定ファイル
- config.rb：プロジェクトの設定ファイル
- Gemfile：Middlemanを構成や依存ライブラリを指定する設定ファイル
- Gemfile.lock：プロジェクトを作成した時に依存のあったgemリスト

このディレクトリレイアウトに即してファイルを置いておかないと、Middlemanが正しく解析できずにエラーをはいてしまうので注意です。

一つのページを構成する要素

Middlemanでは今まで一つのファイルに書いていたHTMLを、ページを構成する部分ごとに切り出して別ファイルにし、土台となるレイアウトファイルに読み込ませることで一つのページを作り出します。
具体的には、次の３つのHTMLを組み合わせることでこれを実現します。

レイアウト
テンプレート
パーシャル

ページの枠となるレイアウトにページのコンテンツとなるテンプレートとページを構成する部品となるパーシャルを読み込んでコンパイルし、ページを作ります。ファイルはどれだけ読み込んでも問題ありませんが、最低でも土台となるレイアウトとコンテンツとなるテンプレートの２つのHTMLが必要で、ここにさらにヘッダーやフッターのようなパーシャルを読み込ませていくことで汎用性／保守性の高いサイトを構築することができるようになっています。

chii_middleman2_page

イメージが湧きやすいように、シンプルなHTMLを例にして、ゴリゴリ書いたものとMiddleman的に書いたものとを比較して見てみましょう。

<html>
  <head><title>Sample</title></head>
  <body>
    <header>
      <h1><a href="#">Sample</a></h1>
      <nav>
        <a href="/">Home</a>
        <a href="about.html">About</a>
        <a href="blog.html">blog</a>
      </nav>
    </header>
    <main>
      <!-- somethings -->
    </main>
    <footer><small>© DWANGO Co., Ltd.</small></footer>
  </body>
</html>

headerfootermainからなるとてもシンプルなページです。

これをMiddleman的に書くとこうなります。

レイアウト（枠部分）	<html> <head><title>Sample</title></head> <body> <%= partial "header" %> <%= yield %> <%= partial "footer" %> </body> </html>
テンプレート（コンテンツ部分）	<main> <!-- somethings --> </main>
パーシャル（ヘッダー部分）	<header> <h1><a href="#">Sample</a></h1> <nav> <a href="/">Home</a> <a href="about.html">About</a> <a href="blog.html">blog</a> </nav> </header>
パーシャル（フッター部分）	<footer><small>© DWANGO Co., Ltd.</small></footer>

ページを役割ごとに別ファイルに分割し、切り出したファイルを読みこむ処理をレイアウトに追加しました。これらをコンパイルすれば、先に示したサンプルコードのように展開されて一つのページができあがります。

ジェネレータを使ったことのない人の中には、共通している箇所はコピペして使いまわす方もいらっしゃるのではないでしょうか。しかしそれは同じ記述の別のコードを書いているに過ぎず、何かを変更したくなった場合は全ページを変更する必要があります。しかしこの仕組みであれば、共通している箇所を同一のコードで管理することができるため、変更するのは一箇所で済むのです。

ファイルの命名規則

ジェネレーター機能を使うためには、システムに対してどのファイルがどんな役割のものなのかを教えてあげる必要があります。使用するテンプレート言語などによって拡張子は変わりますが、今回はデフォルトで使用できるERbでの命名規則をご紹介します。

ファイルの役割	命名規則	例
レイアウト	レイアウト名 + テンプレート言語の拡張子	layout.erb
テンプレート	テンプレートのファイル名＋テンプレート言語の拡張子	index.html.erb
パーシャル	_（アンダーバー） + テンプレートのファイル名	_header.erb

設定ファイルを触ってみる

setting
設定ファイルってどこか難しそうで、編集しにくい印象があるかもしれません。今回は折角なので設定ファイルを少しだけ編集して、どんなことができるのかを見てみましょう。前述のディレクトリレイアウトで設定ファイルがいくつかあることは確認済みですが、その中でも開発に直結するconfig.rbとGemfileの２つをいじってみます。

config.rbを触ってみる

config.rbではプロジェクトの設定ファイルとして、ディレクトリレイアウトの指定から似たようなページの動的作成の指定などが行えます。
ただ眺めていてもわからないので、試しに次の3つの設定をしてみましょう。

画像やスタイルの置き場となっているディレクトリの名前をそれぞれimg、style、jsに変更し、assetsディレクトリの下に移動する
プロジェクト内で使うパスの指定を相対パスに変更する
ライブリロードを有効化する

リソースディレクトリの名前を変更し、移動する

まずはディレクトリレイアウトを変更してしまいましょう。
ドキュメントルート直下にassetsというディレクトリを作ったら、その中にリソースディレクトリを全て移動し、名前を変更してください。

chii_middleman2_description 　

それが終わったら実際に設定ファイルを編集していきましょう。
config.rbの50行目付近を見てください。


set :css_dir, 'stylesheets'

set :js_dir, 'javascripts'

set :images_dir, 'images'

上記のようなsetで始まる記述が見つかりましたか？　ここがリソースディレクトリの設定部分になります。
この部分を以下のように編集して、画像やスタイル、スクリプトなどのディレクトリ名を変更し、assetsというディレクトリの下にまとめてみましょう。

set :css_dir, 'assets/style'

set :js_dir, 'assets/js'

set :images_dir, 'assets/img'

デフォルトのパスの指定にassets/を追加し、更にディレクトリ名を変更しました。
こうすることで、先ほど変更したディレクトリレイアウトと同じ形でリソースディレクトリをまとめることができました。

プロジェクトで使用するパスを相対パスにする

Middlemanで相対パスを使う場合、「リソースへのパス」と「サイト内ページヘのリンクに使うパス」の両方で設定を行う必要があります。
今度は67行目付近を見てください。

# Use relative URLs
# activate :relative_assets

activate :relative_assetsの方のコメントアウトを外して有効化してください。
これでリソースへのパスが相対指定できるようになりました。しかし、このままではaタグで指定するようなサイト内のページリンクは相対指定できないので、config.rbの好きなところにset :relative_links, true設定を追加してください（今回は69行目に追加しました）

# Use relative URLs
activate :relative_assets
set :relative_links, true

このようになっていれば設定完了です。

ライブリロードを有効化する

Middlemanを使うメリットの一つにあげていたライブリロード（ファイルの変更を監視して即座に動作確認環境に反映する機能）を有効にしましょう。前項の相対パスにする設定同様、該当の箇所のコメントアウトを外すだけでOKです。

# Reload the browser automatically whenever files change
configure :development do
  activate :livereload
end

上記のように、33行目あたりにあるconfigure :development doからendの部分の # を消したら保存して完了です。

Gemfileを触ってみる

次は、Gemfile*1を触ってみましょう。
ここではjQueryを読み込んでみます。

jQueryを読み込む

jQueryを読み込む

いつもはページのhead内で読み込んでいるjQueryですが、Gemfileに指定することでMiddlemanの中で勝手に読み込んでくれるようになります。
Gemfileの一番下に下記を追加してください。

gem 'jquery', '~> 0.0.1'

その後、下記コマンドを実行して該当のgemをインストールします。

$ bundle install

たったこれだけですが、設定完了です。

このようにgemとして用意されているライブラリであれは、Gemfileに指定しておくことでバージョンの管理から読み込みまでを一括して行うことができます。
どんなgemがあるか知りたい場合はrubygemsで検索してみてください。

*1 Gemfile：Bundlerというgem*2のバージョン管理ツールを組み込んでいるシステムでは必ず使われている設定ファイル。MiddlemanではMiddleman自体を動かす環境を作ったり、プロジェクトで使いたいライブラリの読み込みをするために使われています。

*2 gem：Rubyのライブラリのこと

まとめ

前回に引き続き「Middleman」についての記事でした！ページの構成や設定ファイルの書き方など、説明がちで感覚がつかみにくく、最初のつまずきポイントだったかもしれません。でも、「ちょっと難しかったな」という方も大丈夫です。次回の制作編で順を追って作っていけばきっと見えてくると思います。今度こそ楽しい楽しい制作編になりますので、もう少しお待ちくださいませ。

では、よいクリスマスを！ふぉっふぉっふぉ！