QA@IT

Rails colorboxのcssとjsファイルの配置場所について

4942 PV

現在、railsアプリにcolorboxを導入する際に困っております。

0.jquery-rails (2.1.3)はインストール済

1.colorboxをhttp://www.jacklmoore.com/colorboxからダウンロード

2.colorbox.cssを/app/assets/stylesheets以下に配置

3.jquery.colorbox-min.jsを/app/assets/javascripts以下に配置

4.application.html.erbの内に以下を追記

これで、colorboxのタグ設定をして対象のボタンを押してみると、確かにそれっぽい開き方はするのですが、
CLOSEボタンなどレイアウトがおかしく、Logを見ると
ActionController::RoutingError (No route matches [GET] "/colorbox.css"): 
ActionController::RoutingError (No route matches [GET] "/jquery.colorbox-min.js"):

上記RoutingErrorが発生し、cssやjsファイルが読み取れないように見受けられます。
皆様のご叡智をご期待申し上げます。

回答

自分がメンテしてないアセットコード(=外部からダウンロードしてきたアセット)はcss, js, imagesなど、すべてvendor/assets配下に置くのが基本流儀です。と、公式ガイドに書いてあります。

http://guides.rubyonrails.org/asset_pipeline.html

さらに言うと、メジャーなJSライブラリは、多くの人が必要とするものなので、rails用のgemパッケージが用意されてることが多いです。momentjs-railsとかjqtree-railsとか。

ちょっと探してみると、colorboxもありました。(元ライブラリ名に-railsとつけるのが暗黙の了解となっています)

https://rubygems.org/gems/colorbox-rails

というわけで、

gem 'colorbox-rails'

とやるだけで、自前でメンテすることなく、colorboxの導入が可能になると思います。

追記

と、書いたあとでソース読んでみましたが、colorbox-railsは全然良くないコードでした。。。追加で探したところ、colorbox-on-railsのほうが素性が良さそうです(コードを流し読みしただけで試してはいません)。

編集 履歴 (1)

質問文に「以下に配置」の内容が記載されていませんが(2012/12/30 21:59)、Rails3.1 以降で AssetsPipeline を使っているなら、app/assets/javascripts/application.js, app/assets/stylesheets/application.css で require するのがよいと思います。IE用のJSなどで、どうしても erb で読み込む必要があるなら、javascript_include_tag(), stylesheet_link_tag() を使います。

jqPlot のJSの設定を例にすると、こんなかんじです。

▼ application.js

//= require jqplot/jquery.jqplot.min.js

▼ app/views/layouts/application.html.erb

    <!--[if lt IE 9]>
      <%= javascript_include_tag "jqplot/excanvas.min.js" %>
    <![endif]-->
編集 履歴 (1)
  • ご返答ありがとうございます。
    AssetsPipelineを有効にすると、app/assets以下に配置する事が可能なのですね。
    何も意識せずに実施すると、public以下に配置しなければ、イマイチ読み取ってくれませんでした。
    ありがとうございます。参考にさせて頂きます。
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。