RailsのAsset Pipelineの理解とgemで管理しないJavaScriptライブラリの配置

スポンサーリンク

Rails において bundler 管理の gem は vendor/bundle 以下にインストールされますし、自作のライブラリは普通に lib 以下に置けば良いのですが、gem で管理しないサードパーティ製の JavaScript ライブラリを Rails で使う場合にどのように管理するか。理解が曖昧だった Asset Pipeline (アセットパイプライン)について調べるとともに、Rails での js ライブラリ管理の方針を考えました。

【お知らせ】 英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください!
画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました
スポンサーリンク

— 環境 —
Rails 4.0.1

表題の対象とするのは、サードパーティ製のライブラリで、先日使ったモーダルウィンドウ表示用の jQuery plugin である Lightbox2 のような、複数のディレクトリ・ファイル群からなるライブラリ。Lightbox2 は、js, css, img の複数のディレクトリとそれらに含まれるファイル群から構成されます。以下、この Lightbox2 ライブラリを例とします。

サードパーティ製 JavaScript ライブラリは vendor/assets に配置する

Rails4 で普通のデフォルト状態で app/assets 以下に lightbox ライブラリのファイルをバラバラに設置するとなると、app/assets/images, app/assets/javascripts, app/assets/stylesheets と1つのライブラリのファイルが複数のディレクトリに散らばってしまい、ライブラリが増えると収集がつかなくなります。自作の js, css ファイルともごちゃ混ぜになるし、css 内からの画像 url 参照など相対パス指定でのトラブルの元になる可能性があるし、これはどう考えても悪手。

ということで、以下の情報などを参考にして、vendor/assets 以下に設置することにしました。

RailsでJavaScriptライブラリの配置に迷う – $ cat /var/log/shin
ASCIIcasts – “Episode 279 – Asset Pipelineを理解する”

また Lightbox2 ライブラリの一群のファイルを1つのディレクトリ配下で管理したかったため、vendor/assets/lightbox に設置しました。

Asset Pipeline のロードパス

ここで、Asset Pipeline のロードパスを確認してみます。

app/assets, vendor/assets, vendor/bundle/***/assets 直下のディレクトリがロードパスとして追加されています。今回設置した lightbox についても /path/to/rails_root/vendor/assets/lightbox がロードパスに追加されています。しかしこの場合、lightbox 利用で必要となる lightbox/js/lightbox-2.6.js, lightbox/css/lightbox.css は、このままでは自動で Asset Pipeline 読み込みの対象になりません。

manifest に require するファイルを指定

ここで登場するのが、app/assets/javascripts/application.js と app/assets/stylesheets/application.css。これらは manifest と呼ばれるそうで、Sprockets で管理されます。この manifest 内の require で指定したファイルが、先ほど確認した Rails.application.config.assets.paths(Asset Pipelineのロードパス)を起点にしてロードされるという仕組みになっている。

なので、lightbox を使う場合、それぞれ以下のように reqiuire するファイルを追加します。

app/assets/javascripts/application.js

app/assets/stylesheets/application.css

/path/to/rails_root/vendor/assets/lightbox からの相対バスで、.js, .css など拡張子を省いたファイル名を指定する。これで、/path/to/rails_root/vendor/assets/lightbox/js/lightbox-2.6.js, /path/to/rails_root/vendor/assets/lightbox/css/lightbox.css が Asset Pipeline の対象としてロードされます。

また manifest 内の “require_tree .” の指定(カレントディレクトリ内のファイル)により、app/assets/javascripts 以下の JavaScript ファイルは自動で Asset Pipeline に追加されることになる。

Lightbox2 を入れたことで、理解が曖昧だった Asset Pipeline についてだいぶ理解が進みました。Asset Pipeline については以下参考リンクを読んで、もう少し学習する予定。gem で管理しない JavaScript ライブラリは、以上の方針で管理していこうと思います。

【追記 2015/01/12】
kuboon さんから、コメントを頂きました。

どうせ rails が本番環境では圧縮してくれるので、 .min じゃないほうを使うほうが開発時のデバッグに便利です。

たしかにその通りです。lightbox-2.6.min.js → lightbox-2.6.js へと記事中で修正を行いました。kuboon さん、コメントありがとうございました!
【追記ここまで】

スポンサーリンク
パーフェクト Ruby on Rails は、最近読んだ Rails 本の中では一番役に立った本です。Chef や Capistrano など Rails と共によく使用される技術にも触れてあります。Ruby on Rails 4 アプリケーションプログラミングは、入門的な内容で Rails の機能全体を網羅されています。
 
スポンサーリンク
  • 2件のコメント
  • kuboon

    どうせ rails が本番環境では圧縮してくれるので、 .min じゃないほうを使うほうが開発時のデバッグに便利です。

    • taka

      kuboon さんこんばんは。記事に追記と .min.js → .js への修正を行いました。ご指摘どうもありがとうございました。

Leave Your Message!