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

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

2015.12.11
chii_middleman_icatch
ノウハウ

はじめまして、ドワンゴデザイナーの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で人気の静的サイトジェネレータを見てみると、jekyllHexoHugoなどたくさんあります。また、Gulpnpmのようなパッケージマネージャーをカスタマイズしてオリジナルジェネレータを作る方法もあります。

そんな中でMiddlemanをおすすめするのは、実際に使ってみて

  1. なにかとシンプルで、ジェネレータやフレームワークの利用経験がない人にも使えそう
  2. 中規模レベルのサイトであれば実用にも耐えうる

と感じたからです。

 

Middlemanでできること

イメージがつかみやすいように、Middlemanでできることをいくつかあげてみましょう。

  • 代替言語(HamlやSassなど)でコーディングして、コンパイルすること
  • ファイル変更を監視してライブリロードすること
  • 複数の代替言語で書かれたコードを一度にコンパイルすること
  • パーツを共通化したり、各ページで独自の変数を持ったり、使い回したりすること

ざっくりこんなことができちゃいます。

「共通パーツのあるページを複数持つサイトを作りたい」とか「簡単にジェネレータ機能を使ってみたい」とか「興味はあるけど難しそうで手が出ない」という人はMiddlemanで解決できちゃうかもしれないので、ぜひ一度試してみてください。

 

導入

お使いのOSによって、必要なツールや手順が若干異なりますのでご注意ください。この記事では私の開発環境である OSX Yosemite で環境を整える方法を書いていきます。

手順01. 環境を整える

Middlemanをインストールするために必要なものを先に準備しておきましょう。

  • Ruby
  • Command Line Tools
  • nokogiri

 

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を入れられた場合はすでにインストールされているためスルーしてください。

  1. https://developer.apple.com/downloads/ から自分のマシンに合ったパッケージダウンロード
  2. 落としてきたイメージファイルを実行してインストール

 

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サーバー起動確認画面

このように、灰色の画面に「MIDDLEMAN IS WATCHING」という文字が確認できると思います。これでサーバーが正常に起動していることが確認できました。

ターミナルにカーソルを合わせてctrl+c を入力し、サーバーを切っておきましょう。

 

まとめ

静的サイトジェネレータ「Middleman」についてとその導入方法をご紹介しました!後編はMiddlemanの使い方を実際に動くコードを元に紹介していきたいと思います。近日公開予定なので、どうぞお楽しみに!

 

編集部オススメ

  • このエントリーをはてなブックマークに追加

あわせて読みたい記事

この記事を書いたメンバー

chii

chii

Designer

元エンジニアのデザイナー。観葉植物が好きで、家がジャングルになってきました。

ドワンゴデザイナー メンバー募集 ! !