Middlemanで使うと便利なプラグインの一覧

しばらく前に僕のサイトをWordpressによる動的生成からMiddlemanによる静的生成に変えたのですが、その際に調べたMiddlemanの便利なプラグインについて紹介します。

middleman-blog

いわずとしれたMiddlemanにブログ機能を追加するプラグイン。詳細はこちらを参照。

詳細はMiddlemanのサイトに詳しく載っているのでそちらを参照すればすぐにブログを作れると思います。僕のサイトの場合は、もともと使っていたWordpressとURLを同じにして移行したので、ページのpermalinkにカスタム属性である{id}を使っている点が通常の使い方と異なる点です。

activate :blog do |blog|
  blog.prefix = "contents/blog"
  blog.permalink = "{id}"
  blog.taglink = "tags/{tag}.html"
  blog.tag_template = "tag.html"
  blog.year_template = "calendar.html"
  blog.paginate = true
  blog.per_page = 10
  blog.page_link = "page/{num}"
end

middleman-livereload

詳細はこちら。 Middlemanでは、serverの機能が内蔵されており、

bundle exec middleman server

とすると、http://localhost:4567にアクセスすることで、ビルドせずとも実際のコンテンツを確認することが可能です。ここで、middleman-livereloadを使うと、テンプレートやコンテンツを修正した際に、自動で変更が読み込まれて反映されるため、serverの再起動を行う必要がありません。なにはともあれインストールしておいて損の無いプラグインの1つでしょう。

middleman-syntax

詳細はこちら。ソースコードをコンテンツに入れる場合に、言語に応じてキーワードがハイライトされていた方がやはり見やすいはずです。以下のように記述することでハイライトできます。

def my_cool_method(message)
  puts message
end

middleman-s3_sync

詳細はこちら

Middlemanの最大の利点というか利用の動機は静的ファイルに出力できる点です。静的ということはAmazon S3のWebサイトホスティング機能を使うと、非常に安価でサーバをたてることなくWebサイトを運営できます。

設定ファイル(config.rb)には以下のような記述を追加します。なお、Amazon S3を操作する際には、AWSのアクセスキーとシークレットキーを利用する必要がありますが、端末の環境変数で、AWS_ACCESS_KEY_IDとAWS_SECRET_ACCESS_KEYが設定されていれば自動的にそれを読むようになっていいます。それを使わない場合は、aws_access_key_idとaws_secret_access_keyを以下の中で指定してください。ただし間違ってもインターネットに公開されているレポジトリにそのまま登録してしまわないように注意が必要です。

activate :s3_sync do |s3_sync|
  s3_sync.bucket = 'static.ryuzee.com'
  s3_sync.region = 'ap-northeast-1'
  s3_sync.delete = false
  s3_sync.after_build = false
  s3_sync.prefer_gzip = true
  s3_sync.path_style = true
  s3_sync.reduced_redundancy_storage = false
  s3_sync.acl = 'public-read'
  s3_sync.encryption = false
end

このプラグインでは差分更新の機能を備えている点もGoodです。

デプロイする際は以下のようにします。

bundle exec middleman s3_sync

middleman-deploy

詳細はこちら。ビルド結果をサーバにデプロイすることができるプラグイン。Rsync、GitHub pages、FTP、SFTPに対応しています。また複数の環境を定義することができるので、ステージング環境と本番環境を定義して、同じ手順でデプロイできます。

設定ファイル(config.rb)には以下のような記述を追加します。

activate :deploy do |deploy|
  deploy.method = :rsync
  deploy.host   = 'sushi.ryuzee.com'
  deploy.path   = '/var/www/html2'
  deploy.user   = 'itamae'
  deploy.clean  = false
  deploy.flags = '-rlOtuz --no-p --del'
  deploy.port  = 22
end

デプロイする際は、単純に以下のように実行します。

bundle exec middleman deploy

middleman-google-analytics

詳細はこちら。アクセスログの解析にGoogle Analyticsを使うのは定番で、もちろんテンプレートにベタに記入しておいて全く問題ありませんが、プラグインを使えばもっと簡単です。

設定ファイル(config.rb)には以下のような記述を追加します。

activate :google_analytics do |ga|
  ga.tracking_id = 'UA-3012324-1'
end

また、レイアウトファイルに、以下を追加します。

<%= google_analytics_tag %>

これによってビルドした際に自動的に以下のようなトラッキングコードに置き換わります。

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(["_setAccount", "UA-3012324-1"]);
  _gaq.push(["_trackPageview"]);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

middleman-search_engine_sitemap

詳細はこちら。検索エンジン用にsitemap.xmlという名前でコンテンツのリストや重要度を用意しておくことで、SEO対策を行えますが、このプラグインを使うことで、sitemap.xmlをビルドプロセスの中で自動で生成できます。

設定ファイル(config.rb)には以下のような記述を追加します。

set :url_root, 'http://sushi.ryuzee.com'
activate :search_engine_sitemap

これでビルドすると、以下のようなbuild/sitemap.xmlが生成されます。もちろん重要度や更新頻度は自分で設定できます。

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>http://sushi.ryuzee.com/contents/blog/7030</loc>
    <lastmod>2014-12-31T15:36:19+09:00</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.5</priority>
  </url>
  <url>
    <loc>http://sushi.ryuzee.com/contents/blog/7029</loc>
    <lastmod>2014-12-30T09:07:02+09:00</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.5</priority>
  </url>
</urlset>

middleman-blog-similar

詳細はこちら。ブログサイトを構築する場合に、その記事に関係する他の記事の一覧を出したいというニーズがしばしばありますが、このプラグインを使うことで簡単に実現できます。

(ただし、コンテンツを分かち書きなどして関連性の高いものを特定するようになっているので、プレビューやビルドに時間がかかるようになることは注意しておくと良いでしょう)

たとえば、mecabを使う場合、あらかじめマシンにMecabと辞書がインストールされている必要があります。Ubuntuの場合だと以下のようにすることでインストールされます。

sudo apt-get install mecab mecab-ipadic-utf8

あとはテンプレートの中に以下のような記述を入れます。この例では関連度の高い5つの記事へのリンクを貼るようになっています。

<% if  current_article %>
  <ul>
  <% current_article.similar_articles.first(5).each  do|article| %>
    <li><%= link_to article.title, article.url %></li>
  <% end  %>
  </ul>
<% end  %>

middleman-xmlvalidator

詳細はこちら。非常に単機能ですが、Middlemanが生成したXML形式のファイルがXMLとして妥当かどうかを検証してくれます。たくさんのXMLを生成するような用途でMiddlemanを使っている場合には使うと良いかもしれません。

middleman-minify-html

詳細はこちら。ビルドの際にHTMLなどに含まれている余計なスペースを除去してくれます。これによって応答サイズを小さくできるので大規模サイトの場合は効果があると思います。

設定ファイル(config.rb)には以下のような記述を追加します。さまざまな要素を取り除けますが、やり過ぎるとコンテンツ自身が崩れる可能性もあるため、ほどほどの設定にしておくと良いでしょう。

activate :minify_html do |html|
  html.remove_multi_spaces        = true   # Remove multiple spaces
  html.remove_comments            = false   # Remove comments
  html.remove_intertag_spaces     = false  # Remove inter-tag spaces
  html.remove_quotes              = false   # Remove quotes
  html.simple_doctype             = false  # Use simple doctype
  html.remove_script_attributes   = false   # Remove script attributes
  html.remove_style_attributes    = false   # Remove style attributes
  html.remove_link_attributes     = false   # Remove link attributes
  html.remove_form_attributes     = false  # Remove form attributes
  html.remove_input_attributes    = false   # Remove input attributes
  html.remove_javascript_protocol = false   # Remove JS protocol
  html.remove_http_protocol       = false   # Remove HTTP protocol
  html.remove_https_protocol      = false  # Remove HTTPS protocol
  html.preserve_line_breaks       = false  # Preserve line breaks
  html.simple_boolean_attributes  = true   # Use simple boolean attributes
end