静的サイトアセンブラ Middlemanを試してみよう (1)

Middlemanとは
「モダンなウェブ開発環境と同じ道具やワークフローを使って静的サイトを構築するためのコマンドラインツール」
です。

RubyとウェブフレームワークであるSinatraがベースになっています。
いわゆる静的サイトのジェネレータであり、「サイトアセンブラ」ともよばれます。

ランディングページや告知ページなど静的なサイト作成の際に、テンプレートエンジンやCSSプリプロセッサを利用して開発することができます。

CSS — Sass / Compass
Javascript — Coffeescript

MiddlemanはRackアプリケーションであり、Ruby製のWebアプリケーションフレームワークであるRuby on Railsとの相性も良いことから、最近では普通に使われるようになりました。

＃インストール

Rubyとパッケージ管理システムであるRubyGems(gemコマンド)がインストールされている必要があります。

Mac OS Xでの開発にはCommand Line Toolsのインストールが必要です。(最新版のXcodeからインストールできます)

Middlemanのインストールは、

$ gem install middleman

とコマンドラインに打つだけです。これでmiddlemanコマンドが使用できるようになりました。

$ middleman version
middleman 3.2.1

なお、この記事を書いた時点でのMiddlemanのバージョンは3.2.1となっています。

＃基本コマンド

とりあえず、以下の3つのコマンドを覚えておきましょう。

middleman init
middleman server
middleman build

＃新しいプロジェクトの作成: middleman init

$ middleman init <プロジェクト名>

とコマンドを打つと、プロジェクト名のフォルダの中にWebサイトのひな型が生成され、Middlemanが必要とするライブラリがBundlerで自動的にインストールされます。
(プロジェクト名のフォルダがない場合は自動的にフォルダが作成されます。)

treeコマンドで確認すると、以下のようにファイルが生成されます。(middleman init testsiteとした場合)

$ tree

.
└── testsite
    ├── Gemfile
    ├── Gemfile.lock
    ├── config.rb
    └── source
        ├── images
        │   ├── background.png
        │   └── middleman.png
        ├── index.html.erb
        ├── javascripts
        │   └── all.js
        ├── layouts
        │   └── layout.erb
        └── stylesheets
            ├── all.css
            └── normalize.css

└── testsite

├── Gemfile

├── Gemfile.lock

├── config.rb

└── source

├── images

│ ├── background.png

│ └── middleman.png

├── index.html.erb

├── javascripts

│ └── all.js

├── layouts

│ └── layout.erb

└── stylesheets

├── all.css

└── normalize.css

＃サーバの起動: middleman server

$ cd <プロジェクト名>

で作成されたプロジェクトフォルダに入ります。

$ bundle exec middleman server

でサーバーが起動します。

(MiddlemanがプロジェクトのなかのgemはBundlerで管理するようにしてくれるので、bundle execつきで実行します。)

Webサーバーが起動し、http://localhost:4567/にアクセスすると、以下のように初期ページが表示されます。

先ほど生成したひな型のファイルをMiddlemanサーバーに要求し、ブラウザで表示することができました。
以降は、ひな型のファイルを編集することでカスタマイズしていきます。

Webサーバーを停めるには、コマンドラインでCTRL-C(コントロールキーとCの同時押し)をします。

＃ウェブサイトの出力: middleman build

編集が終わったら、最後にプロジェクトをビルドします。

$ bundle exec middleman build

とコマンドを打つと、

create build/images/background.png
create build/images/middleman.png
create build/javascripts/all.js
create build/stylesheets/normalize.css
create build/stylesheets/all.css
create build/index.html

と言った感じで、buildディレクトリに各種ファイルが生成されます。

ブラウザでindex.htmlを開くと確認できます。

これらbuildディレクトリ以下のファイルとフォルダをサーバーにアップロードすればOKです。

(リンクされるcssとjsファイルの相対パスが標準では有効になっていないので、ビルドする前にconfig.rbのなかのactivate :relative_assetsのコメントアウトを解除し有効にすると、相対パスが設定され、これらのファイルが正しく読み込まれるようになります。)

情報工学とその周辺

Connecting dots.