middleman と livereload で rails っぽく静的サイトを作る(しかも slim で)

お仕事で静的HTMLのモックやらページを作ることになったわけですが、モダンな FW に浸かってナヨナヨな私としては、共通部分を分離できないとかありえないわけで。

ヘッダーとかの修正をしたら全部直さなきゃいけないとかもう…。はじめは slim を使ったらできるかと思いましたがパーシャルが使えないので肝心なことが解決できませんでした。

というわけで、レイアウトからパーシャルまで面倒見てくれる rails からビューだけ抜き取ったような、middleman という静的サイトフレームワーク(?)がありました。

Middleman

middleman はデフォルトでは erb (Embeded ruby) です。

  • Middlemanのプロジェクトテンプレートを作ってgemにした | e2esound.com業務日誌 

rails では haml, slim を使ってみたりして、もう html を書くのがしんどいので、最近おきにの slim を使ってみたいと思います。

デフォルトで slim のテンプレートを用意してくれる gem を用意してくれた方がいらっしゃるので使わせてもらいます。

slim いいよ slim (情報が検索しにくいけど…)

gem install middleman
gem install middleman-slim

今回使用したバージョンは以下のとおり。

middleman (3.1.3)
middleman-slim (0.0.2)

使い方は rails と大体同じ。テンプレートで slim を選ぶともろもろ slim で生成されます。

middleman new foo --template slim

new 以外にも init というエイリアスも。new のほうが馴染みがあるので new で。

middleman server で rails みたいにサーバも立ちます。s でも大丈夫。

middleman server # middleman s でも動く(rails と一緒)
# http://localhost:4567 でアクセスできる

アクセスすると自動生成されたページが表示されます。アイコンがうにょーんとかなってモダンっぽいものを生成してくれました。

middleman-01

ディレクトリ構造はこんな感じ。言わずもがな、お察しできますよね。

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

all.js の中身をみてみると、assetpipeline っぽい記述があり、まさに同じような動作をしました。

//= require_tree .

all.js と同じディレクトリ以下においたファイルは自動的に結合されるようです。

require_tree . はファイル名順に結合されるので、任意のファイルを指定して読み込ませたい場合は require foo などとすると指定した行で読み込まれます。

//= require foo
//= require_tree .

同ディレクトリの他のものよりも先に foo が結合されます。

拡張子を .js.coffee にして coffeescript で書いてもコンパイルしてくれました。

css については、まとめてくれる機構はないので、テンプレート側の埋め込みメソッドに追加してください。

== stylesheet_link_tag "normalize", "all", "foo"

しかし .css.sass でもコンパイルしてくれるので、sass を上手く使えば良さそうです。

livereload で自動更新

書いたコードがそのままブラウザでプレビュー出来たらいいですよね。なんとそれが livereload でできます!

Gemfile に middleman-livereload を追記して bundle install します。

gem 'middleman-livereload'

ブラウザに livereload 用の拡張プラグインをインストールします。

そして config.rb で livereload の設定を有効にします。コメントアウトされているので有効にします。

# Reload the browser automatically whenever files change
activate :livereload

これで middleman server して、以下のログが流れていれば準備完了

LiveReload is waiting for a browser to connect

あとはソースファイルの編集が行われるとブラウザがリロードされて反映されます!

すばらっ

とはいったものの、新規で0から作ることなんて滅多にない…。ブログリニューアル用のテンプレ作成でつかって、慣れておこうか…。

公式サイトを見ていると、上記の機能にとどまらず、静的サイト構築にスクリプトを組み込み、それこそアプリケーション部分を抜いた rails のような使い方ができるようです。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする