middlemanを使ったフロントエンド開発
middlemanというものが、静的なサイト(html/css/jsだけのサイト)を作るのに、かなーり便利です (これを使って性的なサイトを作りました)
何が便利かというと
- 開発用サーバーになる
- テンプレートエンジン(erb)
- coffee scriptやscssなどを自動で変換
- もちろんコンパイルもできる
- 画像の圧縮とかもできるみたい
などなど。イメージとしては、Ruby on Railsから、ウェブアプリ的機能を抜いたものというか、
静的なサイト用の機能を抜き出したものというか、ざっくりとテンプレートエンジンみたいな感じ(正確にはSinatraと言ったほうがいいのだけど)。
ようするに、coffee scriptとかsass使うなら超便利よ！みたいな感じ。
静的なサイトを対象としているので、基本的にはRubyのプログラマーである必要はないです。
基本的には
404 Not Found
を参考に勧めていきます
インストール
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(設定より規約)という言葉があります。
フォルダ名など、細かい規約は自分が決めなくていい代わりに、勝手に決められてしまいます。
ただ、変えられないということではないので、それが嫌なら自分で設定することも出来ます。
