Railsで管理ツールをサクッとつくる！


RailsでActiveAdminというGemを社内で利用しています。ActiveAdminを利用することでマスタデータの作成、更新、削除などの操作が簡単に行なえる機能をサクッと作ることができます。

大概の操作方法は公式のドキュメントにありますが、その中で実務上よく使ったものやカスタマイズで加えたものを共有していきます。

# 環境
- rails: 4.2.5
- ruby: 2.2.4

# 導入
Rails環境が存在している(rails newしていて、DBに接続できる）ことを前提とします。

- Gemインストール

```Gemfile
gem 'activeadmin', github: 'gregbell/active_admin'
gem 'devise'
gem 'just-datetime-picker'
gem 'active_admin_environment'
```

上記をGemfileに追記し

```
bundle install
```

を実行しGemを入れる。

- active_adminインストール

```
bundle exec rails g active_admin:install
```

を実行し必要なファイルを配置する。

migrationのファイルも作成されるので、

```
bundle exec rake db:migrate
```

を実行し反映させる。さらに初期のデータも反映させておきます。

```
bundle exec rake db:seed
```

- 確認

ローカルでサーバーを起動し、動作の確認を行う。

```
bundle exec rails s
```
サーバー起動後以下にアクセス。
http://localhost:3000/admin


初期のアカウント情報は下記になります。
Email:admin@example.com
Password:password


ログインすると現在はテーブルは独自に作成していないので、ActiveAdmin側で生成したテーブルのAdmin Usersというメニューが確認できるかと思います。

![kobito.1453280320.666901.png](https://qiita-image-store.s3.amazonaws.com/0/83404/1542f5f6-cde1-9561-b5a4-9d8eb219944b.png "kobito.1453280320.666901.png")

次に何か独自でモデルを追加してみたいと思います。

```
bundle exec rails g model User name:string age:integer born_at:datetime
bundle exec rake db:migrate
bundle exec rails g active_admin:resource User
```
するとUsersのメニューが追加されます。

![kobito.1453280525.221399.png](https://qiita-image-store.s3.amazonaws.com/0/83404/c6411963-3511-6846-3f8c-4fd49147173f.png "kobito.1453280525.221399.png")

このようにモデル単位でメニューを追加することで、ActiveAdminではデータの管理を行えます。

この時点で`app/admin/user.rb`というファイルが作成されているかと思います。このファイルを見ていきます。

```app/admin/user.rb
ActiveAdmin.register User do

# See permitted parameters documentation:
# https://github.com/activeadmin/activeadmin/blob/master/docs/2-resource-customization.md#setting-up-strong-parameters
#
# permit_params :list, :of, :attributes, :on, :model
#
# or
#
# permit_params do
#   permitted = [:permitted, :attributes]
#   permitted << :other if resource.something?
#   permitted
# end


end
```
コメントアウトされていますが、permit_paramsに続けて許可するパラメータを追加することで、active_adminでのデータの管理を許可することができます。Userモデルではnameとageとborn_atをカラムに持っていますのでこれらを追加します。

```app/admin/user.rb
ActiveAdmin.register User do
  permit_params :name, :age, :born_at
end
```

そうするとNew Userというボタンからデータの追加を行えたり、作成したデータの閲覧、編集、削除が行えるようになっているかと思います。

![kobito.1453281115.927937.png](https://qiita-image-store.s3.amazonaws.com/0/83404/2dc90376-b7bc-cf29-6d99-2a9c257c948a.png "kobito.1453281115.927937.png")

このような手順でモデル単位でActiveAdminのメニューを増やしていき、データを管理してくのが基本になります。

# カスタマイズ
業務上実装したカスタマイズを公式のドキュメントにのっているもの、のっていないもの問わず記載します。

## メニューをDropDownで階層化して表示させる
menuのあとにpriority、label、parentを指定して実装することができます。ActiveAdmin管理するモデルが増えた時に、地味に威力を発揮します。priorityで表示順を操作できますが、自分の好みで10刻みで行っています。

```app/admin/user.rb
ActiveAdmin.register User do
  menu priority: 10, label: "ユーザー", parent: "親"
  permit_params :name, :age
end
```

![kobito.1453281601.044243.png](https://qiita-image-store.s3.amazonaws.com/0/83404/767a6270-ee72-e7fa-b897-7f27f936232e.png "kobito.1453281601.044243.png")

## 本番環境ではActiveAdminを真っ赤に染めたい！
Production環境で注意喚起をしたい場合に背景を真っ赤にすることで緊張感を高めることができます。すでに入っている`active_admin_environment`というGemを利用します。
- インストール

```
bundle exec rails generate active_admin_environment:install
```
config/initializers/assets.rbのprecompile対象に追加する必要します。

```config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( active_admin_environment/* )
```

下記のように左上に「！Development」とつくようになればOKです。

![kobito.1453282027.774424.png](https://qiita-image-store.s3.amazonaws.com/0/83404/577ab577-382c-5883-f33e-22f95d776610.png "kobito.1453282027.774424.png")

この状態でProduction環境にもっていくと下記のように真っ赤になります。

![kobito.1453282267.085311.png](https://qiita-image-store.s3.amazonaws.com/0/83404/eb74ccf9-8a63-e029-cfbd-4c1ab1360d9c.png "kobito.1453282267.085311.png")

スタイルが好み出ない場合は`app/assets/stylesheets/active_admin_environment`配下のcssをいじれば反映されますので、お好みで変更してください。

## フォームでの日付の管理でカレンダーからデータ入力したい
今回`just-datetime-picker`というGemを利用します。下準備としてmodel側に下記のように追記する必要があります。（カラム名はそれぞれのものに合わせてください）

```app/models/user.rb
class User < ActiveRecord::Base
  just_define_datetime_picker :born_at
end
```

```app/assets/stylesheets/active_admin.scss
@import "active_admin/mixins";
@import "active_admin/base";
@import "just_datetime_picker/base";
```
この`just_datetime_picker/base`をしないとカレンダーがちゃんと表示されないので、注意です。

```app/admin/user.rb
# form部分以外は省略してます

  form do |f|
    f.inputs "サンプル" do
      f.input :born_at, :as => :just_datetime_picker, label: "時間"
      f.submit
    end
  end
```
![kobito.1453282986.294209.png](https://qiita-image-store.s3.amazonaws.com/0/83404/420df6d5-35a4-7a8f-4a69-2a9034948a55.png "kobito.1453282986.294209.png")

## Scopeを追加する
Scopeを追加することで、データの絞込が行えます。下記のようにscopeを追記すると画面上に絞込用のボタンが表示され、それをクリックすることで、scopeで定義した条件下でのデータが表示されます。
※ActiveRecord側でscopeを作っておくと、ここではそのscopeの指定だけで済むので楽です。

```
ActiveAdmin.register User do
  permit_params :name, :age

  scope "sample" do |users|
    users.where(name: "sample")
  end
end
```

![kobito.1453283896.609812.png](https://qiita-image-store.s3.amazonaws.com/0/83404/7f5c5a6e-299c-c67c-14d3-f81c99ba40cc.png "kobito.1453283896.609812.png")

今回いくつかカスタマイズしてきましたが、他にもActiveAdminにはカスタマイズできる箇所が多々あるので、興味があれば一度さわってみてください。