- 更新日: 2014年3月18日
- Rails
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 のロードパスを確認してみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$ bundle exec rails c Loading development environment (Rails 4.0.1) [1] pry(main)> y Rails.application.config.assets.paths --- - /path/to/rails_root/app/assets/images - /path/to/rails_root/app/assets/javascripts - /path/to/rails_root/app/assets/stylesheets - /path/to/rails_root/vendor/assets/javascripts - /path/to/rails_root/vendor/assets/lightbox - /path/to/rails_root/vendor/assets/stylesheets - /path/to/rails_root/vendor/bundle/ruby/2.0.0/gems/turbolinks-1.3.1/lib/assets/javascripts - /path/to/rails_root/vendor/bundle/ruby/2.0.0/gems/jquery-rails-3.0.4/vendor/assets/javascripts ... |
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
|
1 |
//= require js/lightbox-2.6 |
app/assets/stylesheets/application.css
|
1 |
*= require 'css/lightbox' |
/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 さん、コメントありがとうございました！
【追記ここまで】
- – 参考リンク –
- Assets Pipeline – web-k.log
- アセットパイプライン（Asset Pipeline）in Ruby on Rails｜シフルIT
- Rails3.1から導入されたAsset Pipelineがよくわかってなかったから調べた – (ﾟ∀ﾟ)o彡 sasata299’s blog
- Rails の関連記事
- RailsでMySQLパーティショニングのマイグレーション
- Rails ActiveRecordでdatetime型カラムのGROUP BY集計にタイムゾーンを考慮する
- RailsプラグインGemの作成方法、RSpecテストまで含めたrails pluginの作り方
- RailsでAMPに対応するgemをリリースしました
- Railsでrequest.urlとrequest.original_urlの違い
- Railsでwheneverによるcronバッチ処理
- Google AnalyticsのRails Turbolinks対応
- Railsアプリにソーシャル・シェアボタンを簡単設置
- Rails監視ツール用にErrbitをHerokuで運用
- Facebook APIバージョンのアップグレード手順(Rails OmniAuth)
- 2件のコメント
どうせ rails が本番環境では圧縮してくれるので、 .min じゃないほうを使うほうが開発時のデバッグに便利です。
kuboon さんこんばんは。記事に追記と .min.js → .js への修正を行いました。ご指摘どうもありがとうございました。