Rails つまみぐい

読者です 読者をやめる 読者になる 読者になる

Rails つまみぐい

Ruby on Rails 初学者による行き当たりばったりなメモ

5分でわかる!? アセットパイプライン(Assets Pipeline)

Rails3

アセットパイプラインとは

Rails のアセットパイプライン(Assets Pipeline)は JavaScriptCSS、画像ファイルといった HTML に付随する細々としたファイル達(アセットファイル)を連結したり圧縮することで効率的にアクセスできるようにする仕組み(フレームワーク)です。

アセットパイプラインの役割

アセットパイプラインは以下のような役割をもっています。

1 複数の JavaScriptCSS をそれぞれ1つのファイルに連結する
⇒ ブラウザからのリクエスト数を減らす
2 JavaScriptCSS を圧縮してサイズを減らす
⇒ 文法上必要でない空白を削除したり、変数名を1文字にしたり
3 アセットファイル名にハッシュ値MD5)を付加する
⇒ ブラウザがファイルのキャッシュ/読み直しを正しく行える
4 ERB、CoffeeScript、SCSS などを使って効率的で柔軟な方法で記載できる


アセットパイプラインの動きの基本

productionモードでの動きが最終的な目的となる動きなので、それを中心に説明します。

アセットファイルの置き場所

自分で作成するアセットファイルは app/assets/ 下のファイルの種類ごとのサブディレクトリに格納します。

ファイル種 保存する場所 拡張子
javascript app/assets/javascripts js / js.coffee など
stylesheet app/assets/stylesheets css / css.scss など
画像 app/assets/images jpeg / png / ico など

coffee スクリプトファイルや scss ファイルを置くことができます。直接 js ファイルや css ファイルを置いてもOKです。

アセットファイルへのアクセス

アセットファイルへは assets ディレクトリ下のファイルとしてアクセスします。ファイル種ごとのサブディレクトリ名は不要です。

http://RailsアプリのURL/assets/ファイル名

また coffee スクリプトや scss は、js ファイルや css ファイルとして解釈されたファイルにアクセスします。

元のファイル URLでのアクセス
assets/javascripts/application.js.coffee http://******/assets/application.js
assets/stylesheets/application.css.scss http://******/assets/application.css
assets/images/logo.png http://******/assets/logo.png


プリコンパイル

アセットファイルが上のようにURLでアクセスするにはプリコンパイルをする必要があります。プリコンパイルは次のような働きをします。

1 app/assets/、lib/assets/、vendor/assets/ 等から対象ファイルを探索
2 ERB、CoffeeScript、SCSS などのエンジンを使って JavaScriptCSS ファイルに展開
3 複数の JavaScriptCSS をそれぞれ1つのファイルに連結
4 JavaScriptCSS を圧縮
5 アセットファイル名にハッシュ値MD5)を付加
例)application.css ⇒ application-908e25f4bf641868d8683022a5b62f54.css
6 できあがったアセットファイルを public/assets/ ディレクトリに保存
対象ファイル:JavaScriptCSS、画像ファイル


プリコンパイルの仕方

デプロイの前にプリコンパイルをしておきましょう。コマンドラインから実行します。これをやっておかないと、アクセス時に「ファイルがプリコンパイルされていないよ」と怒られます。

$ rake assets:precompile


アセットパイプラインの特徴を生かすためには事前にプリコンパイルをしておくべき。でも、プリコンパイルされていないファイルを動的にプリコンパイルするよう設定しておくこともできます。

config.assets.compile = true


ファイル名にハッシュ値がつくということは、内容が少しでも変わる度に別のファイル名で保存されるということです。以前にプリコンパイルされた古いアセットファイルが public/assets/ ディレクトリにずっと残ってしまいますので、毎回削除してからプリコンパイルした方がいいでしょう。

public/assets/ 内に直接ファイルを作成しないように気をつけてください。

$ rm -rf public/assets
$ rake assets:precompile


ちなみに、アセットファイル名にハッシュをつけないように設定することも可能です。

config.assets.digest = false


今回は以上です。次回はプリコンパイルの対象となるファイルについて書きます。