[Middleman 3]初めてのMiddleman：静的サイトのキャッシュとasset_hash拡張を使ったキャッシュのパージ

この記事は書かれてから1年以上経過しており、内容が古い場合があります。

前回の記事初めてのMiddleman：設定についてでMiddlemanの設定について一通り覚えました。今回は静的サイト運用時のキャッシュとMiddlemanのasset_hash拡張を使ったキャッシュのパージについてメモしておきます。

静的サイトではExpiresヘッダーやCache-Controlヘッダーを使うことでユーザーのクライアント環境にアセットファイルをキャッシュさせることで再ダウンロードをさせることなくサイトを閲覧させることができます。パフォーマンスが良くなりAWSのような従量課金のホスティングサービスを利用している場合、コスト削減にもなります。

ただし、アセットファイルを更新した際にキャッシュされたファイルを上手く更新できないと問題を引き起こす可能性があります。Middlemanは1つの方法としてキャッシュをパージするための拡張asset_hashをプリインしています。

asset_hashとは

asset_hashは画像やCSSなどのファイル名にhash値を追加し一意の名前のアセットファイルを生成します。ビルド後のファイルには元のファイル名のファイルは存在せず、このhash値の付いたファイルだけがビルドされます。

sample.png -> sample-32aw43.png

asset_hashを有効にする

asset_hashはconfig.rbに設定を追記します。

configure :build do
  activate :asset_hash
end

これだけでビルドされたファイルのファイル名が変わります。

CSSや画像のリンクにasset_hashを適用するには

CSSや画像のリンクにhash値の付いたリンクを付けるにはアセットヘルパーを使います。ビルド先に元ファイルが作られないため、アセットヘルパーを使わないリンクはすべて403になってしまうため注意が必要です。

<html>
<head>
  <%= stylesheet_link_tag 'layout' %>
  <%= javascript_include_tag 'application' %>
  <%= favicon_tag 'images/favicon.png' %>
</head>
<body>
  <p><%= link_to 'Blog', '/blog', :class => 'example' %></p>
  <p>Mail me at <%= mail_to 'fake@faker.com', "Fake Email Link", :cc => "test@demo.com" %></p>
  <p><%= image_tag 'padrino.png', :width => '35', :class => 'logo' %></p>
</body>
</html>

asset_hashさせたくない場合

asset_hashの対象外にしたいファイルにはignoreオプションを使います。

configure :build do
  activate :asset_hash do |options|
    options.ignore = [/^assets\/images\/teaser\/eyecatch\.jpg/]
  end
end

OGPイメージなどはヘルパーが使えないため、今のところ除外するしかありません。OGP系の拡張機能で対応しているものがあるかもしれませんね。良い対応方法をご存じの方がいればコメントいただけると助かります。

次回：初めてのMiddleman：Middleman::S3Syncで使うアクセスキーの管理方法について

シリーズ

Wercker step-s3sync でファイル名に日本語を含んでいる場合に Sync できない問題の解決方法（小ネタ）

2016-10-26
Wercker, Amazon S3, Middleman 3

ウェブデザイナーがはじめるAngularJS：AngularJS向けのディレクティブが用意されたUI Bootstrap

2015-07-06
AngularJS 1, Bootstrap 3, Middleman 3

初めてのMiddleman：Bowerで管理されているフォントファイルをインポートする

2015-05-27
Middleman 3

ウェブデザイナーがはじめるAngularJS：Middlemanでng-annotateを使ったMinify対策

2015-05-19
AngularJS 1, Middleman 3

初めてのMiddleman：Middleman-blogにカテゴリやシリーズなどのカスタムコレクションを追加する方法

2015-04-27
Middleman 3

初めての Middleman シリーズ初めてのMiddleman：静的サイトのキャッシュとasset_hash拡張を使ったキャッシュのパージ