月別アーカイブ: 2013年12月

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

今回はMiddlemanのテンプレートについてみていきます。

Middlemanでは多くのテンプレート言語を利用でき、HTML製作を簡単にします。
ERb、Haml、Saas、Scss、CoffeeScriptなど、多くのテンプレートエンジンをサポートしています。

#テンプレートの基礎

標準のテンプレート言語はERbです。ERbは、変数を追加したり、メソッドを呼んだり、ループを使用したり、if文を使用したりする点を除けば、HTMLに似ています。

Middlemanの全てのテンプレートファイルはファイル名にそのテンプレート言語の拡張子がついています。

ERbで書かれたシンプルなインデックスページは、index.htmlというファイル名と拡張子であるerbを足して、index.html.erbという名前になっています。

このファイルは

のような標準のHTMLを含んでいます。

例えば、Rubyの変数やメソッド、ループなどを使用して

のように記述することができます。

#レイアウト

レイアウトを使用すると、すべてのテンプレートで共通のHTMLの部分をひとつで管理できます。

Middlemanでは、レイアウトはヘッダとフッタの両方を含み、個別のページコンテンツをラップします。

最も基本的なレイアウトは、いくつかの個別のページコンテンツをもつ場合です。

yieldを使うとテンプレートでどこに個別のページコンテンツを読み込むのかを指定できます。

レイアウトをERbを使って作成すると、以下のように書くことができます。

個別のページのテンプレートはERbで書くことができました。
レイアウトに書かれている共通部分は不要になるので、例えば以下のようにコンテンツの部分だけを書けばよくなります。個別のページのテンプレートは、例えば

となります。

この場合、最終的な出力として得られるHTMLは、

という形になります。

source/layouts/admin.erb
source/login.html.erb

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

Middleman Logo

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

#サーバの起動: middleman server

$ cd <プロジェクト名>

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

$ bundle exec middleman server

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

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

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

Middleman Initial Page

先ほど生成したひな型のファイルを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のコメントアウトを解除し有効にすると、相対パスが設定され、これらのファイルが正しく読み込まれるようになります。)