はじめに

とあるプロジェクトで管理画面を作る！ってなったのですが、管理画面を作るのは初めてで、どうしたものかと調べると、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 ... admin@example.com
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