SNSでシェアする

railsの管理画面gem「ActiveAdmin」がもたらすassetsのエラー対処法/CSSフレームワーク「Foundation」との相互性

SNSでシェアする

スポンサーリンク
 
是非購読クリックお願いします☆

ada
&
foundation

railsで管理画面を簡単に作ってくれるgemはいくつかありますが、今回は「ActiveAdmin」がもたらすassetsのエラーについての対処法を書いておこうと思います。

github.com

ActiveAdminを入れる事でassetsのどんな問題が起こるのか!?

ざっくり言うとcssとjsの読み込みについて意図しない事が起こり、CSSデザインが崩れたりjQueryが動かなくなったりしてしまう問題です。

今回私の場合は、CSSフレームワーク「Foundation」を導入していたのですが、「ActiveAdmin」を導入した後にデザインが全て崩れてしまいました。

これはActiveAdminのファイルと、Foundationのファイルとのバッティングによる読み込みに関するエラーだったわけなんですね。

ActiveAdminを導入する事で生成される、

  • app/assets/javascripts/active_admin.js
  • app/assets/stylesheets/active_admin.css

がapplication.js、application.cssによって全て読み込まれてしまう事で意図しない結果となってしまっていたわけなんです。

具体的な問題点

  • ActiveAdminの管理画面以外にもactive_admin.cssが読み込まれてしまい、意図しないデザインが反映されてしまう。
  • ActiveAdminを導入する事で読み込まれるjQueryが影響して、元々導入していたjQueryプラグインなどが動作しなくなる。

これは、どちらもActiveAdminを使用しないページにまでActiveAdminのassetsファイルが読み込まれてしまうのが原因のようです。

解決方法

ActiveAdminの管理画面でのみ以下のassetsファイルを読み込むように設定します。

※このファイルは管理画面でしか使う必要が無いので。

ディレクトリを新しく作る

具体的な策としては、新しくディレクトリを作りそれぞれを別で読み込むように設定していきます。

app/assets/javascripts/以下に「admin」と「common」(任意の名称)のディレクトリを生成します。

  • app/assets/javascripts/admin
  • app/assets/javascripts/common

cssも同様です。
app/assets/stylesheets/以下に「admin」と「common」(任意の名称)のディレクトリを生成します。

  • app/assets/stylesheets/admin
  • app/assets/stylesheets/common

続いて、作ったディレクトリにファイルを移動させていきます。

ディレクトリが生成できたら、以下のようなディレクトリ構造にします。

(ActiveAdmin関係のファイルのみadmin以下に配置)

また、application.jsとapplication.cssはapp/assets/の直下に置いています。

application.css/application.jsの中の記述を変更する

application.cssの記述を変更します。

application.jsの記述も変更します。

※foundationの導入方法の違いで一部記述が違うこともあります。

config/initializers/active_admin.rbに設定を追記する

以下を追記していきます。

ここまで出来れば、rails sを再起動してassets以下が意図した読み込みになっているか確認してみてください。

正しく設定できていれば、ActiveAdminのファイルは管理画面でのみ読み込みをしてくれるので、CSSデザインは意図したものに復活できたはずです。

まとめ

今回のような「ActiveAdmin」と「Foundation」との相互性に限らず、gemのassets問題では今回の対応を応用して使えそうです。

自分のメモとして書いたつもりですが、誰かの参考になってもらえれば幸いです。

スポンサーリンク
スポンサーリンク