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

Web/06 Jun 2015

このブログは 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 では制作に役立ちそうな内容にしようと思案中です。