Web サイトの開発をシンプルに!?静的HTMLジェネレータの Middleman を試してみた

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

静的 HTML ジェネレータというと、自分は jekyll と jade は何度か触ったことがあり、中でも jekyll は簡単につかえていたため、製作時に使うことが多かった。

しかし、もう一つ気になるジェネレータがあって、それが今回紹介する Middleman である。

Middleman: 効率的な作業を可能にする Ruby 製の静的サイト生成ツール

今回試しに使ってみて、まださわりの状態なのだけど、かなり便利!ということがわかったので簡単にメモついでに紹介する。

インストールからページを開くまで

どういうものか、具体的な部分は省こうと思うという説明は省こうと思う。また、Ruby が使える環境がローカルにあるということを前提に進める。

1. Middlemanインストール

$ gem install middleman

実際に使えるようになったかの確認は、$ middleman version と入力して、Middleman x.x.x というバージョン情報が表示されていたらOK。

2. プロジェクトの作成

$ middleman init my_new_project

もしくはディレクトリがすでにあって、そこに移動している場合は

$ middleman init .

ディレクトリに必要最低限のファイルを準備してくれます。

  • .gitignore
  • config.rb
  • Gemfile
  • Gemfile.lock
  • source
    • images
      • background.png
      • middleman.png
    • index.html.erb
    • javascripts
      • all.js
    • layouts
      • layout.erb
    • stylesheets
      • all.css
      • normalize.css

config.rb は一度開いて中身を見ておきましょう

###
# Compass
###

# Change Compass configuration
# compass_config do |config|
#   config.output_style = :compact
# end

###
# Page options, layouts, aliases and proxies
###

# Per-page layout changes:
#
# With no layout
# page "/path/to/file.html", :layout => false
#
# With alternative layout
# page "/path/to/file.html", :layout => :otherlayout
#
# A path which all have the same layout
# with_layout :admin do
#   page "/admin/*"
# end

# Proxy pages (http://middlemanapp.com/dynamic-pages/)
# proxy "/this-page-has-no-template.html", "/template-file.html", :locals => {
#  :which_fake_page => "Rendering a fake page with a local variable" }

###
# Helpers
###

# Automatic image dimensions on image_tag helper
# activate :automatic_image_sizes

# Reload the browser automatically whenever files change
# activate :livereload

# Methods defined in the helpers block are available in templates
# helpers do
#   def some_helper
#     "Helping"
#   end
# end

set :css_dir, 'stylesheets'

set :js_dir, 'javascripts'

set :images_dir, 'images'

# Build-specific configuration
configure :build do
  # For example, change the Compass output style for deployment
  # activate :minify_css

  # Minify Javascript on build
  # activate :minify_javascript

  # Enable cache buster
  # activate :asset_hash

  # Use relative URLs
  # activate :relative_assets

  # Or use a different image path
  # set :http_prefix, "/Content/images/"
end

css ディレクトリや js ディレクトリがデフォルトだと stylesheetsjavascripts になっているので、 codejs に変更する場合は、 set :xxx_dir となっている部分を変更します。

config.rb の変更:ディレクトリを変える

set :css_dir, 'css'

set :js_dir, 'js'

set :images_dir, 'img'

実際のディレクトリの方も変更しておきましょう。

3. server の起動とブラウザチェック

ここまで準備ができたら、実装環境用としてローカルサーバーを立ち上げてページを表示してみます。

$ middleman server

起動後は http://0.0.0.0:4567 でアクセスできるようになります。

静的ファイルでの書き出し

実際にファイルとして書き出す場合は、 build コマンドを叩くのみ

$ middleman build

と、ここまでみて、これだけだと何がいいのかよくわからないのですが、自分が便利!って思ったのがこの後に紹介する2つです。

livereload

Middleman にはデフォルトで livereload の機能がついていたのです!Mac + Chromeの環境でだと、保存するたびに自動でChromeのページが更新してくれます。

livereload の使い方は、 config.rb の39行目あたりにある、 # activate :livereload# を削除して有効化するだけです。

Sass&Compass

Middleman では Sass も自動でコンパイルしてくれる機能がデフォルトで備わっていました。

これは source の css_dir に、xxx.scss ファイルを置くだけです。 all.css ファイルが入っているのですが、それを all.scss に変更するだけで、Sassが利用できるようになります。

書き出しのスタイルを変更する場合は、 config.rb の頭の方にある Compass の部分で style を指定できます。コメントアウトを外すのを忘れずに。

Grunt で用意していたものが要らなくなった!

これまで jekyll でやっていたことや Sass のコンパイルなんかも、 Middleman を使えば Gruntファイル用意する必要がなくなる。必要な module をインストールしたり用意しなくてもいろいろできる!

Grunt の方である程度作業環境作っているのであれば、どちらにしても変わらないでしょうけど、プロジェクト変わるたびに使うものを精査するよりは、 config.rb のみで管理できるのほうが楽かもしれない。

とりあえず今回使ってみたのはこのくらい。本当に使っていって、楽なのかどうかは、もう少し使ってみてから判断してみたいと思う。

次はテンプレートファイルなどを実際に触ってみようと思う。