【Middleman】の便利な機能をご紹介。

前回まで、構築の流れをご紹介しましたが、 今回は、出力する際に便利な機能をいくつかピックアップしてご紹介していきます。

アジェンダ

1. 設定ファイルについて
2. ファイルサイズの最適化
   • HTMLの圧縮
   • CSS・JavaScriptの圧縮
   • 画像圧縮
   • GZIPで圧縮
3. ローカルデータ
4. LiveReload

設定ファイルについて

プロジェクファイルを作成するとルート階層に、以下の２つのファイルがあります。
各ファイルに、プロジェクトの各設定していきます。

• Gemfile
• config.rb

Gemfile

# If you have OpenSSL installed, we recommend updating
# the following line to use "https"
source 'http://rubygems.org'

gem "middleman", "~>3.0.12"

config.rb

###
# Compass
###

# Susy grids in Compass
# First: gem install susy
# require 'susy'

# 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 (fake) files
# page "/this-page-has-no-template.html", :proxy => "/template-file.html" do
#   @which_fake_page = "Rendering a fake page with a variable"
# end

###
# Helpers
###

# Automatic image dimensions on image_tag helper
# activate :automatic_image_sizes

# 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 :cache_buster

  # Use relative URLs
  # activate :relative_assets

  # Compress PNGs after build
  # First: gem install middleman-smusher
  # require "middleman-smusher"
  # activate :smusher

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

ファイルサイズの最適化

Middlemanでは、ファイルを出力する際に様々な出力方法を指定することができます。

HTMLの圧縮

開発段階では必要ありませんが、本番環境へ以降する際HTMLを圧縮することはファイルサイズの軽減や、高速化へ多少なりとも効果的です。

middleman-minify-htmlのインストール(コマンドライン)

gem install middleman-minify-html

ターミナルやコマンドプロンプトから、上記コマンドでmiddleman用プラグインをインストールします。

Gemfileへ追記する(※コマンドラインではありません。)

Gemfileファイルへ以下、１行を追記します。

gem "middleman-minify-html"

config.rbへ追記

config.rbファイルへ以下、１行を追記します。

activate :minify_html

CSS・JavaScriptの圧縮

config.rbを編集

デフォルトconfig.rbのコメントを解除します。

configure :build do
  # For example, change the Compass output style for deployment
  activate :minify_css
 
  # Minify Javascript on build
  activate :minify_javascript
  
  ~以下省略
end

GZIP圧縮

Middlemanは通常のファイルと一緒にgzipバージョンのHTML、CSS、JavaScriptを出力してくれます。

config.rbへ、以下一行を追記します。

activate :gzip

上記、設定後の出力ファイルに拡張子.gzファイルが出力されます。

ローカルデータ

ローカルデータは、「ファイルベース」の簡単なデータベースといったイメージです。

使えるファイル形式

• Ymlファイル
• Jsonファイル

参考サイト：プログラマーのための YAML 入門 (初級編)

ローカルデータの一例

ローカルデータ(data/gnavi.yml)

ローカルデータは、プロジェクトファイルのルート階層dataディレクトリを作成し、そこに格納します。

navList:
  - Home
  - Menu1
  - Menu2
  - Menu3
  - Menu4

テンプレート(index.html.erb)

ローカルデータは、テンプレートファイルの中ならどこからでもローカルデータにアクセスが可能です。

アクセス方法

  <ul>
    <!-- 
    以下のアクセル方法を介せる
    dataディレクトリ内、gnaviファイルのnavList配列にアクセスとなります。
    -->
    <% data.gnavi.navList.each do |i| %>
    <li><%= i %></li>
    <% end %>
  </ul>

出力(index.html)

  <ul>
    <li>Home</li>
    <li>Menu1</li>
    <li>Menu2</li>
    <li>Menu3</li>
    <li>Menu4</li>
  </ul>

LiveReload

最後におまけとして、LiveReload機能をご紹介します。

LiveReloadは、Middleman開発サーバー起動後、ファイルの更新を検知して自動で更新されます。

middleman-livereloadのインストール(コマンドライン)

gem install middleman-livereload

Gemfileへ追記する(※コマンドラインではありません。)

Gemfileファイルへ以下、１行を追記します。

gem "middleman-livereload"

config.rbへ追記

config.rbファイルへ以下、１行を追記します。

activate :livereload

上記、設定後Middlemanサーバーを起動して、開発しているソースファイルを更新するとブラウザが自動で更新されます。