静的サイトを効率よく制作する。- middlemanを使ってみよう vol.1

静的サイト制作

このブログはmiddlemanを使って構築しました。middlemanは日本語リファレンスがある静的サイトジェネレータです。企業向けのサイト構築に特化しているようなのですが、gemを追加することでblog機能を追加することができます。
gemはWordpressで言うプラグイン的なものですね。デバッグを強化するものや画像を圧縮してくれるもの、シンタックスハイライトを補完してくれるものなど、種類もかなり豊富です。

なぜmiddleman?

公式サイト: Middleman: 作業を効率化するフロントエンド開発ツール

静的サイトジェネレータはたくさんあります。以前にもブログに書きました。(こちら)
クライアントワークならhtmlやcss、phpの知識がないことを想定して、管理画面やエディター機能のあるCMSを用いて制作しますが、すでに十分な知識がある場合は管理画面は無用です。テキストエディタとマークダウンを使える知識があれば十分です。

また、CMS制作する時でも、php化する前の基礎html/cssデータ、つまり静的サイトのデータが必要になるはずです。その制作を楽にするツールの1つが静的サイトジェネレータで、私が好んで使うのがmiddlemanです。

インストールしてみよう

制作環境

  • MacOS X
  • xcode

xcodeは公式サイトにもある通り、Mac App Storeから入手しておく必要があります。また、Windowsでも動作するようです。Developers.IOさんはいつも丁寧で細かく紹介してくれています。

Windows 環境でMiddlemanを動かす | Developers.IO

1.bundlerのインストール

bundlerはアプリケーションに必要なgemとそのバージョンを管理してくれます。自分はこれをプロジェクトごとのコンテナのようなものだと理解しています。プロジェクトによって使う機能やバージョンが異なる場合があるので、コンテナごとに管理できれば仕様変更の際のリスクも最小限になります。

bundler参考図

上図は実際の作業ディレクトリです。枠で囲っているところがbundlerが管理している領域となり、Rubygemsも含まれています。まずはこのようにプロジェクトごとに管理できる環境を作っていきます。

ターミナルを開いてbundlerがあるかどうかの確認

ローカルにbundlerがインストールされているかどうかを確認します。

$ gem list # インストール済みのgemをリスト表示
*** LOCAL GEMS ***

bigdecimal (1.2.4)
bundler (1.7.11)
io-console (0.4.2)
json (1.8.1)
minitest (4.7.5)
psych (2.0.5)
rake (10.1.0)
rdoc (4.1.0)
test-unit (2.1.2.0)

すでにインストール済みの場合は、bundler (バージョン)と表示されますが、ない場合は以下のコマンドを入力して新たに追加します。

$ gem install bundler

作業ディレクトリを作成する

作業ディレクトリを作り、ターミナルからそこに移動します。例えば、Desktoptestappディレクトリを作り、そこに移動する場合は以下のように入力します。

$ cd Desktop # desktopに移動
$ mkdir testapp # testappディレクトリを作成 - mkdirで作成する
$ cd testapp # testappディレクトリに移動

これで作業ディレクトリに移動できました。mkdir testappはディレクトリの作成なので初回のみです。なので、2回目以降は、cd Desktop/testappで移動できます。

bundlerを使ってmiddlemanをインストール

手順は2つです。

  1. bundlerを初期化してgemfileを生成
  2. middlemanのインストール

まず、作業ディレクトリでgemfileを生成します。コマンドはシンプルでターミナルで以下を入力するだけです。

$ bundle init # gemfileの生成

次に、生成されたgemfileをテキストエディタで開き、以下のようにgemfileを書き換えます。

source "https://rubygems.org"

gem "middleman"

再びターミナルに戻り、インストールの実行です。

$ bundle install --path vendor/bundle

bundlerを使っていない場合は、$ gem install middlemanのようなコマンドになりますが、プロジェクトごとに管理したいので、bundlerを使ってgemfileに書かれた内容をインストールしています。

インストール先はコマンドの-- path vendor/bundleで指定しており、作業フォルダ内にvendor/bundleディレクトリを作成し、rubyやgemをこのディレクトリ内にぶっこんでいます。以上でmiddlemanのインストールが完了しました。

インストール完了

そろそろ疲れてくるかもしれませんが、後もう少しです。

middlemanを起動してみよう

middlemanをインストールできました。起動させるには、プロジェクトファイルを作成する必要があります。

スケルトンの作成

作業ディレクトリにまだいるはずなので、以下のコマンドを入力して、スケルトンと呼ばれる初期フォルダ階層とファイル群を生成します。
既にプロジェクトがある場合は、コマンド入力と同時にフォルダが初期化されるので注意してください。

$ bundle exec middleman init # スケルトン作成

bundle execはbundler使用時の接頭辞です。これから行うコマンドには必ずつけて実行します。

create  .gitignore
create  config.rb
create  source/index.html.erb
create  source/layouts/layout.erb
create  source/stylesheets
create  source/stylesheets/all.css
create  source/stylesheets/normalize.css
create  source/javascripts
create  source/javascripts/all.js
create  source/images
create  source/images/background.png
create  source/images/middleman.png

ターミナルで作成されたファイル一覧が表示され、実際には下図のように作成されているはずです。

スケルトン作成

補足: middlemanでblogをしたり、slimを使いたい場合

middlemanには、blogテンプレートやslimテンプレートがあります。
blogテンプレートを使いたい場合はgem "middleman-blog"を、slimテンプレートを使いたい場合はgem "middleman-slim"をそれぞれgemfileに追加します。追加したgemはまだインストールしていないので、再度bundle install --path vendor/bundleを実行する必要があります。gemのインストール完了後は下記コマンドでそれぞれスケルトンを作成します。

$ bundle exec middleman init --template blog # blogの初期セット

middleman-blogのファイル構成は下図のようになります。

middleman blog スケルトン

middleman-slimの場合も同じようにbundle installした後、以下コマンドを実行してスケルトンを作成します。

$ bundle exec middleman init --template slim # slim形式の初期セット

middleman slim スケルトン

拡張子がslimに変わっているのが確認できますね。

middlemanのサーバーを起動

middlemanには開発用サーバー機能があり、middlemanの起動と同時にサーバも起動します。

$ bundle exec middleman server # サーバの起動

serverは入れなくても起動します。確かsだけでもよかったはずです。 ターミナルに以下の内容が表示されていれば起動成功です。

== The Middleman is loading
== The Middleman is standing watch at http://0.0.0.0:4567
== Inspect your site configuration at http://0.0.0.0:4567/__middleman/

起動を確認するには、ブラウザでhttp://localhost:4567/を入力し、下図のように表示されると成功です。

middleman server 起動

middlemanサーバーの終了

ターミナル上で Ctrl + c を押すと Middleman が終了します。終了すると$の表示とカーソル点滅が始まります。

慣れればかなり楽になる

最初はどうしてもインストール手順や起動方法を忘れがちです。自分も何度も間違えました。ただ、手順を忘れても思い出せる手段はありますし、これからの制作の方がもっと重要です。最低限必要なのは、起動と終了でその他の手順も何度も行うと自然と身につきます。

vol.1としてしまったので、vol.2では制作に役立ちそうな内容にしようと思案中です。

関連記事