[Rails]管理画面をActiveAdminで作りたいのは俺だけか？

はじめに

とあるプロジェクトで管理画面を作る！ってなったのですが、管理画面を作るのは初めてで、どうしたものかと調べると、ActiveAdminという便利なgemを見つけました。
それを使った経験を忘れないように備忘録を踏まえて、発信したいと思います。

導入手順

1.Gemfileに以下を記述し、ActiveAdminとDeviceのインストール。

gem 'activeadmin'
gem 'devise'

こちらも忘れず実行する。

$ bundle install

2.インストール完了後、ActiveAdminに必要なファイルを生成する。

$ rails g active_admin:install

※既存のユーザークラスを使用する場合は、引数として指定します。

$ rails g active_admin:install Staff

3.マイグレーションの実行と初期データの作成を行う。
※先ほどのコマンドでマイグレーションファイルが作成され、seeds.rbに記述が追記されています。

$ rails db:migrate

$ rails db:seed

4.サーバを起動した後にこちらにアクセスすると、ログイン画面が表示されるので、下記のユーザ情報でログインする。
※もし、サーバーを起動していた場合は再起動する。

User ... [e-mail]
Password ... password

5.必要なモデルに対する管理ページを作成する。

$ rails g active_admin:resource User # 任意のモデル名

6.先ほどのコマンドで作成されたファイルに、許可したいパラメータのみを記述する。

app/admin/user.rb

ActiveAdmin.register User do
  permit_params :name, :age, :email, { images_attributes: [ :image, :id, :_destroy ] }
end

7.ページが作成されるので、データを打ち込んでいく。

役立つ知識

ここでは、より使いやすい管理画面を作成するためのテクニックを記載しています。

フォームをカスタマイズしたいとき

• input

  • テキストフィールド。
  • asを使うことで、file_fieldなど、指定したinputのtype属性を指定できる。

• allow_destroy: true

  • 削除ボタンを生成。

• input_html

  • inputタグに詳細情報を設定する。

• hint

  • 注釈を入れる。

• f.has_many

  • has_manyな関係のテーブルについてのフォームを作成。

• f.actions

  • submitタグの生成。

ActiveAdmin.register User do
  permit_params :name, :age, :email, { images_attributes: [ :image, :id, :_destroy ] }

  form do |f|
    f.inputs  do
      f.input :name
      f.select :age
      f.input :email
    f.inputs do
      f.has_many :images , allow_destroy: true do|t|
        t.input :image, as: file, input_html: { accept: 'image/*' },
                        :hint => t.object.new_record? ? "プロフィール画像を指定して下さい" : image_tag(t.object.image.url{:thumb})
      end
    end
    f.actions
  end
end

終わりに

いかがでしたでしょうか？
一から管理画面作成となると、なかなか骨が折れる作業ですが、gemを使うとかなりスピーディに作成できるので、機会があれば使ってみてください！！

参考

[Railsで最速で管理画面を作る！]
(https://qiita.com/enomotodev/items/5f6d9348207124a41bf9)

[Active Admin 徹底解説]
(https://qiita.com/MariMurotani/items/aed93986e29249fd65e5)

[ActiveAdminでちょっと使い勝手の良い管理画面を作るTips]
(https://blog.mmmcorp.co.jp/blog/2015/02/18/activeadmin/)

[公式ドキュメント]
(https://github.com/activeadmin/activeadmin/wiki)

[activeadmin.info]
(https://activeadmin.info/0-installation.html)

[ActiveAdmin を導入します-関連モデルの導入]
(https://ccbaxy.xyz/blog/2019/11/11/ruby13/)

[Active Adminのデザインをちょっとカッコよくするgemまとめ]
(https://blog.mmmcorp.co.jp/blog/2016/04/18/active_admin_design/)

[Ruby on Rails "Active Admin" + "CarrierWave"で画像アップロード]
(https://teki-com.hateblo.jp/entry/2019/05/14/124107)

[Rails に ActiveAdmin で管理画面を追加してみた]
(https://qiita.com/yutackall/items/2b16d1ac2bd64dedd16e)