ActiveAdminを使用する場合はassetの汚染に注意

ActiveAdmin を使用すると簡単にデータの管理画面が作れますがデフォルトだとasset周りで問題が発生しやすいのでメモしておきます。

使用したバージョン

• rails 4.0.2
• activeadmin 1.0.0.pre

発生した問題

• 管理画面以外の画面にもActiveAdminのcssが読み込まれ、ボタン等が管理画面と同じものになる
• 管理画面以外の画面にもActiveAdminが保持するjQueryが読み込まれ、jQuery Pluginが動作しなくなる

どちらもActiveAdminを使用しないページにまでActiveAdminのassetが読み込まれてしまうのが原因です。

rails generate active_admin:install

を実行した際にapp/assets/javascripts/active_admin.jsとapp/assets/stylesheets/active_admin.cssが作成されますが、これらがapplication.js、application.cssによって読み込まれてしまっています。

解決方法

管理画面でのみActiveAdminのassetが読み込まれるようにします。
以下のページを参考にしました。

Excluding active_admin JS and CSS from your Rails app - Dan Adams

まず、app/assets/javascripts/adminディレクトリを作成し、そこにactive_admin.jsを移動します。
次に、app/assets/javascripts/mainディレクトリを作成し、管理画面以外の画面のjsファイルを移動します。
そして、application.jsの//= require_tree .を//= require_tree ./mainに変更します。

cssについても同様です。

それらが済んだらconfig/initializer/active_admin.rbに以下の内容を追加します。

config.clear_stylesheets!
config.register_stylesheet 'admin/active_admin.css'

config.clear_javascripts!
config.register_javascript 'admin/active_admin.js'

Herokuを使用している場合はさらにconfig/application.rbに以下の内容を追加します。

config.assets.precompile += %w[admin/active_admin.css admin/active_admin.js]

rails serverを再起動して意図した通りにassetが読み込まれていればOKです。

ActiveAdminに限らずjQueryをバンドルしているgemはたまにあるので同様の問題に注意する必要があります。
speed_gun gemはconfigでjQueryの読み込み設定が可能でした。

なお、解決方法を探してるとActiveAdminのassetをvendor/assetsに配置するという情報もありましたが手元で試した限りでは解決しませんでした。

GitHubの方に今回の問題に関するIssueがあったのでそのうち公式に解決されるかもしれません。