病みつきエンジニアブログ

機械学習、Python、Scala、JavaScript、などなど

middlemanを使ったフロントエンド開発

middlemanというものが、静的なサイト(html/css/jsだけのサイト)を作るのに、かなーり便利です (これを使って性的なサイトを作りました)
何が便利かというと

  • 開発用サーバーになる
  • テンプレートエンジン(erb)
  • coffee scriptやscssなどを自動で変換
  • もちろんコンパイルもできる
  • 画像の圧縮とかもできるみたい

などなど。イメージとしては、Ruby on Railsから、ウェブアプリ的機能を抜いたものというか、
静的なサイト用の機能を抜き出したものというか、ざっくりとテンプレートエンジンみたいな感じ(正確にはSinatraと言ったほうがいいのだけど)。
ようするに、coffee scriptとかsass使うなら超便利よ!みたいな感じ。
静的なサイトを対象としているので、基本的にはRubyプログラマーである必要はないです。

基本的には
404 Not Found
を参考に勧めていきます

必要なもの

Ruby(Mac OSだとデフォルトで入ってます)

インストール

gem install middleman

プロジェクト作成

middleman init project_name

すると、project_nameという名前のディレクトリが作らます。基本的には、プロジェクト=ディレクトリを作り、ディレクトリベースで管理。フォルダ構成は
project_name
┗config.ru(設定ファイル)
┗source(index.htmlなどを置く編集フォルダ)
┗build(最初はない。サイトが完成したとき、コンパイルをしたサイトを置くフォルダ)

あと、このときにテンプレートも作れるみたい。~/.middleman/mobile/を作っておくと

middleman init my_new_mobile_project --template=mobile

でその内容がコピーされるという算段。

サーバー起動

middleman server

とすると、開発用サーバーが起動。
お好きなブラウザでhttp://127.0.0.1:4567/(ポート番号は変わる可能性がある)にアクセスすると、開発中のサイトが見られる。

htmlファイル

source/layout.html.erb
を見てみる。これはRailsとかでは一般的な「レイアウトファイル」になっていて、サイト内全ページに共通するテンプレート的な部分を置く(PHPで、index.phpからhead.phpなどをincludeするのとは違い、head.phpにindex.phpを埋め込むイメージ)。

<%= yield %>

と書いてある部分に、例えばindex.htmlであったり、top.htmlであったり、各ページに関するものが埋め込まれます。

各ページに関するものは、source/index.html.erbを編集or作成すればよいです。ためしに、index.html.erbの6行目あたりに

<% 10.times do %> 
<%= "I love you." %><br> 
<% end %>

とか書いてhttp://127.0.0.1:4567/index.htmlを見ると、erbぽさがわかるかと。
ちなみに、サーバーは再起動させる必要はなく、変更したら自動でロードします。

coffee scriptを使ってみる

coffee scriptの説明は省くが、CoffeeScriptなどを参考にして頂ければ。
source/javascripts/sample.js.coffeeを作成し、

alert "sample"

などと適当に設定

source/layout.erbを編集し、9行目あたりに

<%= javascript_include_tag "sample" %>

とか書いておくと、勝手に埋め込まれます。http://127.0.0.1:4567/index.htmlとかを表示すると良い感じに動いてるのが確認できるかと。

どちらかと言えばscssの方が恩恵を受けられる方が多そうなので、Sass、そしてSassy CSS (SCSS)あたりを参考に、source/stylesheets/site.cssあたりを編集すると良いと思います。

サイトのコンパイル

コンパイルという表記でいいのかわかりませんが、ここでは「編集中のファイルをFTPなどでサーバーに上げる前段階」と思って頂ければ。

middleman build

すると、buildフォルダが勝手にできて、その中にコンパイルされたファイル群が置かれます。

もしjsやcssのコンパイルをちゃんとしたければ、config.rbの74、77行目のコメントアウトを解除して

activate :minify_css
activate :minify_javascript

とすればminifyします。

LiveReload

LiveReloadってなんやねーんって思ったら、ファイルの更新→自動でブラウザ更新するらしい(LiveReload)。
middleman側の準備は

gem install middleman-livereload

でmiddleman用のlivereloadをインストールして、サーバーを起動するときに

middleman server --livereload

とするだけ。How do I install and use the browser extensions? – LiveReload Help & Supportからブラウザ拡張をインストールして、有効化すると見事動きます。

最後に

Ruby on Railsなどにある設計思想として、CoC(設定より規約)という言葉があります。
フォルダ名など、細かい規約は自分が決めなくていい代わりに、勝手に決められてしまいます。
ただ、変えられないということではないので、それが嫌なら自分で設定することも出来ます。