Active Admin 徹底解説

はじめに

ActiveAdminを仕事でいじったので分かった事をまとめてみます。
(Ruby on rails 4.3)

ActiveAdminとはModelに設定したパラメータを利用してCRUDをサポートする画面をほぼ動で作成できるruby gemです。管理権限をもった認証機能はDeviceとCancanの連携で実現する事ができます。
表示される入力フォームにはFormasticを利用しています。
Validationについてはモデルのvalidation設定に従ってエラーを表示するようになっているのでモデル側に記載する事になります。

ActiveAdmin
http://activeadmin.info/docs/documentation.html
http://www.rubydoc.info/github/activeadmin/activeadmin

Formastic
http://www.rubydoc.info/github/justinfrench/formtastic/Formtastic/Helpers/InputHelper

CanCan
http://www.rubydoc.info/github/CanCanCommunity/cancancan

1. 各ページのオーバーライド

1. モデルの一覧を表示する #index
2. モデルの詳細表示をする　 #show
3. モデルの編集をする　#edit
4. CSVを出力する　　#csv

上記のアクションがデフォルトで生成されます。
app/admin/配下にファイルを作成します。
ファイル名はmodel.rbになります。
モデルと作成するファイルは１対1である必要があります。
一つのモデルに違う画面を作成したい場合は元のモデルを継承して小クラスとなるモデルを作成しましょう。
下記がActiveAdminにモデルを登録するベーシックなコードになります。

ActiveAdmin.register $モデル名 do
# 全ての処理設定を記載
end

1.1. コントローラーのイベントハンドラ

上記のブロック内でオーバライドできるメソッドは下記に記載されています。
[resource_dsl.rb]
(https://github.com/activeadmin/activeadmin/blob/master/lib/active_admin/resource_dsl.rb)
上記の　「全ての処理設定を記載」の部分に下記のようにアクションごとのカスタマイズ処理を入れていく事ができます。
index

index do
 # check this page
 column :現在のモデルのフィールド
 actions　　# 後述するpermit_paramsの設定に応じて閲覧編集削除などのリンクを表示します
end

show

show do
  show do
    attributes_table do
      row :モデルのフィールド
      end
    end
    active_admin_comments　　#コメントフォーム
    render 'some_partial'　#viewに記載したものをrenderする事も可能
end

form
この時のfの値はActionViewである事に注意します。

form do |f|
    inputs 'タイトル' do
      input :モデルのフィールド
    end
end

csv

csv do
    column :モデルのフィールド
end

その他独自のアクションを追加してページを増やしたい場合には、
[action_item]
(http://activeadmin.info/docs/10-custom-pages.html#add-an-action-item)などが利用可能なので是非使ってみましょう。

1.2. モデルのハンドラ

controller doの中でオーバライドできるメソッド一覧は下記に記載されています。
data_access.rb
モデルに対して何か処理を行いたい場合に条件を付与したり上書きしたい時に利用します。
例えば、indexページで一覧を表示する際には、scoped_collection内に処理を記載します。createは新規作成、updateは更新処理に利用されます。
ActiveRecordのloading機能を意識してscoped_collection内でモデルをpreloadしておいたりする事も可能です。

controller do
   def scoped_collection
     super　# modelの呼び出し
     super.where(filter: condition) # モデルにActiveRecordの条件式を付与
     モデル名.includes(:モデル名)
   end
    def find_resource
      # 編集、閲覧対象のリソースを表示する際に処理を追加
    end
   def create
      # 新規作成時のPOSTに対する処理を追加
   end
   def update
      # 更新時のPOSTに対する処理を追加
   end
  end
end

1.3 カスタムエンドポイント

ajaxからのアクセスやページを増やしたい時に便利
/admin/users/:id/lock

ActiveAdmin.register User do
  member_action :lock, method: :put do
    resource.lock!
    redirect_to resource_path, notice: "Locked!"
  end

end

2.認証

ActiveAdminの認証周りについてです。
authentication

2.1. 設定

config/initializers/active_admin.rbに認証用の処理を記載します。

# コントローラーが強制的に認証する際に利用するメソッド
config.authentication_method = :authenticate_admin_user!

# 現在ログインしているユーザーへのアクセスに利用するメソッド
# 上述のActiveAdmin.register　内でcurrent_admin_userを呼び出す事でcurrent_admin_userのAdminUserモデルが取得できます。
config.current_user_method = :current_admin_user

2.2. Cancan

ActiveAdminをインストールするとAdminUser,AdminUserAssign,AdminRoleという３つのモデルが作成されます。app/models/ability.rbにモデルごとのCRUD設定を記載します。

cancan設定

class Ability
  include CanCan::Ability
  def initialize(user)
    can :manage, $モデル名
  end

  def $ロール名
    can :manage, $モデル名
  end
end

2.3. リソースアクセスの制限

ActiveAdmin.registerブロック内にpermit_paramsを記載する事でモデルの
フィールドに対するアクセス制御をかける事ができます。
actionsの記載でCRUD操作自体に制限を設ける事も可能です。
permit_params

permit_params :$フィールド名, :$フィールド名
actions :all, except: [:update, :destroy]

3. 検索ボックスやスコープのカスタマイズ

3.1 検索ボックス

画面右側の検索ボックスもカスタマイズ可能です
ActiveAdmin.registerブロック内にfilterを直接記述可能です。
sidebar

filter :モデルのフィールド名
filter :モデルのフィールド名, collection: proc{ #something }.call

3.2 スコープ

スコープというのを設定すると画面上部にボタンが表示されます。
scope

scope :all, default: true do |user|
  # do something
end
scope :$フィルタ名 do |user|
  # do something
end

4. ついでに

4.1 メニューのカスタマイズ

画面上部のメニューのカスタマイズが可能です。
デザイン時にどうしても必要になると思うので是非頭の片隅に入れておきましょう。
menu

4.2 新規のページ作成

Modelが関係ないページを作成したい場合はActiveAdmin.register_pageを利用します。
register_page
だたのスタティックページや通常のviewを利用したページ出力をしたい場合に利用できます。
気をつけたいのは、@インスタンス変数のスコープです。
controller doや show,indexなどは別のクラスインスタンスなのでインスタンス変数の利用ができません。その場合、renderする際にローカル変数を渡してやる必要があるみたいです。

content do
  render partial: '$page_path'　
  render $page_path'　, { data: @data }
end

おまけ

ActiveAdmin関連の便利GEM

http://poyopoyo69.hatenablog.com/entry/2017/01/21/165245
https://blog.mmmcorp.co.jp/blog/2016/04/18/active_admin_design/
http://clc.gonna.jp/2017/05/activeadmin%E3%81%ABckeditor%E3%82%92%E5%85%A5%E3%82%8C%E3%82%8B/

スキンがあんまりいけてないのでこれはいい！！
https://github.com/rstgroup/active_skin

パネルとかを使うコツはこちら！
https://code.tutsplus.com/tutorials/create-beautiful-administration-interfaces-with-active-admin--net-21729

プラグインがまとまってるページ