静的webサイト作成の強い味方「Middleman」【前編】
はじめまして、chiiです。
以前はフロントエンドエンジニアっぽいことをしていましたが、今年のはじめからデザイナーとしてバナーやLPを作るお仕事をしています。
今日はヘッダーなどの共通パーツを部品化して、使い回すことができる静的サイトジェネレーターの「Middleman」を紹介したいと思います。
今回はその導入編です。
Middlemanが解決してくれること
いきなり紹介に入る前に、どんなことを解決してくれるのかを私の実体験に触れながらお話します。
実は、デザイナーとして初めて複数ページを制作するときにヘッダー制作における煩わしさがありました。例えばこんなコードです。
たぶん皆さんも経験があると思います。
<html>
<head><title>Awesome Corporate Site</title></head>
<body>
<header>
<h1><a href="#">Awesome Corporate Site</a></h1>
<nav>
<a href="/">Home</a>
<a href="about.html">About</a>
</nav>
</header>
</body>
</html>
<html>
<head><title>Awesome Corporate Site - about</title></head>
<body>
<header>
<h1><a href="#">Awesome Corporate Site</a></h1>
<nav>
<a href="/">Home</a>
<a href="about.html">About</a>
</nav>
</header>
</body>
</html>
<html>
<head><title>Awesome Corporate Site - ○○○○</title></head>
<body>
<header>
<h1><a href="#">Awesome Corporate Site</a></h1>
<nav>
<a href="/">Home</a>
<a href="about.html">About</a>
<a href="○○○○.html">○○○○</a>
</nav>
</header>
</body>
</html>
こんな風に複数のページで同じ内容のheaderをマークアップしていたので、プロジェクトオーナーから「新しく◯◯◯◯のページを追加したい！」と言われるとその度に全てのページで更新をかける必要がありました。修正や変更が重なるほど影響範囲が広くなっていき、思った以上の工数がとられてしまったのです。
そこで、駆け出しのデザイナーでもサクッと解決できる方法がないかと探したところ、見つけ出したのがこの「Middleman」なのです。
「Middleman」とは
静的サイトを構築する使いやすいフレームワーク
Middleman はモダンな web 開発のショートカットやツールを採用した静的サイトジェネレータです
（公式サイトより引用）
なぜMiddlemanなのか
StaticGenで人気の静的サイトジェネレータを見てみると、jekyllやHexo、Hugoなどたくさんあります。また、Gulpやnpmのようなパッケージマネージャーをカスタマイズしてオリジナルジェネレータを作る方法もあります。
そんな中でMiddlemanをおすすめするのは、実際に使ってみて
|
|---|
と感じたからです。
Middlemanでできること
イメージがつかみやすいように、Middlemanでできることをいくつかあげてみましょう。
|
|---|
ざっくりこんなことができちゃいます。
「共通パーツのあるページを複数持つサイトを作りたい」とか「簡単にジェネレータ機能を使ってみたい」とか「興味はあるけど難しそうで手が出ない」という人はMiddlemanで解決できちゃうかもしれないので、ぜひ一度試してみてください。
導入
お使いのOSによって、必要なツールや手順が若干異なりますのでご注意ください。この記事では私の開発環境である OSX Yosemite で環境を整える方法を書いていきます。
手順01. 環境を整える
Middlemanをインストールするために必要なものを先に準備しておきましょう。
|
|---|
Rubyのインストール
お使いのマシンがmacであれば Ruby はプリインストールされていますが、バージョンが古いとMiddlemanのインストールの際にうまくいかないことがあるようです。下記のような記事を参考に新しいバージョンインストールしておいてください。
Ruby Mac OS10.10にrbenvでRubyをインストールする
正しくインストールできていれば、下記コマンドでrubyのバージョンを確認できます。
$ ruby -v
ruby 2.2.3p173 (2015-08-18 revision 51636) [x86_64-darwin14]
Command Line Toolsのインストール
nokogiriのインストールに必要なツールです。前述のURLよりRubyを入れられた場合はすでにインストールされているためスルーしてください。
- https://developer.apple.com/downloads/ から自分のマシンに合ったパッケージダウンロード
- 落としてきたイメージファイルを実行してインストール
nokogiriのインストール
「手順02 初期化」で必要なライブラリです。スクレイピングによく使われていて、HTMLやXMLの構造を解析して特定要素を抽出したりできるようです。
$ gem install nokogiri
正しくインストールできていれば、下記コマンドでnokogiriのバージョンなどの情報が確認できます。
$ nokogiri -v
# Nokogiri (1.6.7)
—
warnings: []
nokogiri: 1.6.7
ruby:
version: 2.2.3
platform: x86_64-darwin14
description: ruby 2.2.3p173 (2015-08-18 revision 51636) [x86_64-darwin14]
engine: ruby
libxml:
binding: extension
…
手順02 インストール
ターミナルを開いて以下のコマンドを実行し、処理が完了したらインストールしたコマンドを使えるようにします。※権限の無い場合は頭にsudoをお忘れなく
$ gem install middleman $ rbenv rehash
手順03 初期化
{my_project}となっているところを好きな名前に変えて下記コマンドを実行します。
$ middleman init {my_project}
実行後しばらくするとパスワードを求められるので、マシンのパスワードを入力してください。
処理が終わると{my_project}のところで指定した名前で作業用のディレクトリが作成されているので確認してみてください。きっとこんな感じの階層でできあがっているはずです。
手順04 表示確認
では、ちゃんとMiddlemanが使える状態になっているかを確認してみましょう。
作成されたディレクトリの中に移動して、Middlemanのサーバーを起動するコマンドを実行します。
$ cd {my_project}
$ bundle exec middleman server
すると、
== The Middleman is loading
== View your site at “http://localhost:4567”, “http://127.0.0.1:4567”
== Inspect your site configuration at “http://localhost:4567/__middleman”, “http://127.0.0.1:4567/__middleman”
と表示され、Middlemanのサーバーが起動したことがわかります。試しにブラウザで http://localhost:4567/ にアクセスしてみると…
このように、灰色の画面に「MIDDLEMAN IS WATCHING」という文字が確認できると思います。これでサーバーが正常に起動していることが確認できました。
ターミナルにカーソルを合わせてctrl+c を入力し、サーバーを切っておきましょう。
まとめ
静的サイトジェネレータ「Middleman」についてとその導入方法をご紹介しました！後編はMiddlemanの使い方を実際に動くコードを元に紹介していきたいと思います。近日公開予定なので、どうぞお楽しみに！