こんにちは、Masaです。
今回は前回の続きのActive Adminのカスタマイズの続きをしていこうと思います。

前回はページのカスタマイズについてお話しましたが、今回は日本語化やActive Adminのデザインを大きく変更する方法を教えていこうと思います。

Active Adminの日本語化

※railsで日本語化対応やってたことがある人は同じやり方なので飛ばしてもらっても構わないです。

config/locals/ja.ymlを作成してください。

https://github.com/svenfuchs/rails-i18n/blob/master/rails/locale/ja.yml

上記のページをコピーしてもらえば基本的なものは対応できると思います。

自分の追加したモデルを日本語化対応する場合は以下のコードの様に入れてもらえばカスタマイズできます。

activerecord:
  attributes:
    Hoge:
      title: タイトル

Active Adminのデザインを変更するgem

active_bootstrap_skin

https://github.com/vinhnglx/active_bootstrap_skin

みなさん大好きBootstrapの様な見た目に変更してくれるgemです。少し使ってみたのですが、私は好きじゃなかったです。見にくい部分ができたりしていたのであまりお勧めじゃないです。

flattened_active_admin

https://github.com/Papercloud/flattened_active_admin

デフォルトに近い見た目なので、所々、デザインがフラットになっていてカッコ良いです。デフォルトに少し見た目変更したいなら良いかもしれないです。

face_of_active_admin

https://github.com/kvokka/face_of_active_admin

かなりポップな感じで、色もたくさん装飾されているので管理画面もポップな感じにしたい人向けです。

ActiveSkin

https://github.com/SoftwareBrothers/active_skin

face_of_active_adminほどポップな感じはしませんが、色も結構付いているので私はこちらの方が好みです。

ActiveMaterial

https://github.com/vigetlabs/active_material

今まで上げてきたgemの中では比較的更新が最近なので、昔のgem使うの怖いなって思う方はこちら使った方が良いです。デザイン面に関してはほどほどに色が装飾されているので見やすいかと思うので私は好みです。

active_admin_theme

https://github.com/activeadmin-plugins/active_admin_theme

こちらも更新は比較的最近で2ヶ月前に更新されているので、昔のgem怖いなって思う方はこちらおすすめです。デザイン面に関してもスタイリッシュで見やすいイメージですね、私は好きです。

ActiveAdminFlatSkin

https://github.com/ayann/active_admin_flat_skin

active_admin_themeよりもスタイリッシュな感じします、しかし、更新が結構止まっていて昔のgem使うの怖いなって方は上のactive_admin_themeを使った方がいいですね。今までのgemは画面の右側に検索欄があったのですが、こちらのgemは検索ボタンで検索条件を入力する形なのでUI的には私はこちらが好きです。

 

上記のデザインに変更するためにはGemfileに上記のgemを追加してください。また、上記のgemを追加すると新たに設定をしないといけない可能性もあるので工数は増えるかもしれないです。

 

まとめ

管理画面を作る時に非常に有用なGemであるActive Adminを紹介していただきました。CRUD機能のみならず、Viewも自分らで用意しなくて済むのは非常に楽ですね。デザインも新たにgemを追加すると良いデザインの物も多いので非常に入れるのをお勧めします。

 

以上です、ここまで読んでくださりありがとうございます。