【Rails】ActiveAdminで、開発環境と本番環境で見た目を変える の記事を見て、ずっとやりたいと思っていたことだったので試してみた。
設定したらサクッと動いた。最高！！簡単な概要は以下の2点だけ
- app/assets/stylesheets/ 配下にスキンを変えた独自のCSSを配置する。
- config/initializers/active_admin.rb でスキンを変えた独自のCSSを読み込む指定をする。
本番にも反映しようとenvironmentをproductionなどに変えてみて確認していたら、アセットパイプラインをprecompileする環境では、デフォルトだとapplication.cssしかprecompileされないので、独自に定義したCSSがprecompileされない状態でCSSの404エラーが出る状態だった。
developmentなど、アセットパイプラインを動的にコンパイルする環境では動きました。
要するに、、
【Rails】ActiveAdminで、開発環境と本番環境で見た目を変える の記事の設定に加えて、assets:precompileする環境のために、独自のCSSを明示的にprecompileする対象に加えてあげる必要があります。
対応方法は以下の2パターン！
まずやりたいことをおさらいしておくと、、、
目的
development, production, stagingでそれぞれ違う見た目にする。（assets:precompileが必要な環境でも動作するように）
前提条件
- 関連するファイルのディレクトリ構成は以下のとおり（【Rails】ActiveAdminで、開発環境と本番環境で見た目を変える）とは少し構成を変えています。
RAILS_ROOT
├── app
│ └── assets
│ └── stylesheets
│ └── admin
│ ├── development.css.scss
│ ├── production.css.scss
│ └── staging.css.scss
└── config
├── initializer
│ └── active_admin.rb
└── environments
├── development.rb
├── production.rb
├── staging.rb
└── test.rb
- config/initializer/active_admin.rb に環境に応じてカスタムした独自CSSの読込を変更する設定を入れておく
…省略
if Rails.env.production? || Rails.env.development? || Rails.env.staging?
config.register_stylesheet "admin/#{Rails.env.to_s}.css"
end
…省略
- カスタムした独自CSS(production用)は以下のとおり。上記参考サイトの内容をそのまま使わせていただきました。 （development, stagingもほぼ同じでカラーなどを変えているだけ）
body.active_admin {
#header{
background: -webkit-linear-gradient(-90deg, #6a7176, #4d5256);
}
#page_title {
position: relative;
}
#page_title:before {
content: "Production - ";
padding-left: 40px;
color: #ff6600;
}
#page_title:after {
position: absolute;
top: -8px;
left: 0;
width: 30px;
height: 30px;
padding: 0;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
background: #ff6600;
content: "!";
color: #ffffff;
text-align: center;
line-height: 30px;
font-weight: normal;
font-size: 24px
}
}
【1パターン目】 config/environments/ 配下の各環境の設定ファイルで、独自CSSをprecompileする対象に追加する
このやり方が単純で見た目を変えたい環境がProductionのみなど少なければすぐ出来る。
app/assets/stylesheets/admin 配下に環境ごとのスキンを変えた独自CSSを配置している状態で、
config/environments 配下にある各環境の設定ファイルで「 config.assets.precompile 」の項目にprecompileする対象の独自CSSを指定する
例としてproduction環境の設定を変更する箇所は以下のようになります。（同様にstaging, development も同様に設定する）
# Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
# config.assets.precompile += %w( search.js )
config.assets.precompile += %w( admin/production.css )
これで「rake assets:precompile」を行うと、public/assets/admin/production.cssというファイルがコンパイルされて生成される。
【2パターン目】 config/initializer/active_admin.rb の中でプリコンパイルする独自CSSを一括指定する
上記の場合だと、environments/staging.rb, environments/development.rbにもそれぞれ設定を書かなきゃならず、環境が増えてもその都度設定しないといけないのが面倒なので、
Rubyのオープンクラスの特徴を活かすのと正規表現を使い、一括で指定します。
config/initializer/active_admin.rbファイルの末尾などに以下の内容を記載することで
app/assets/stylesheets/admin/*.css のファイルを一括で指定できます。
…省略
APP_NAME::Application.configure do
config.assets.precompile += [ /^admin\/.*\.css$/ ]
end
※APP_NAMEには対象のRailsアプリの識別子を入れます。
以上で、precompileする対象に独自CSSを加えられるので、無事各環境に応じた管理画面が見た目が変わって、色々とはかどります。