active_admin Rails 4.2の管理画面を最短時間で作ろう！　active_admin[Devise入り]

Railsで管理画面を作成する際に活躍してくれるGem active_adminの紹介です。このGemは納品ができる位のきれいなデザインの管理画面を簡単に作成してくれます。もちろん管理者ログインの機能も一緒に追加されます。

(2015-01-10 11:10) Rails 4.2対応！

🚜 Gemのインストール

いつ戻おりGemfileに以下を追加して、bundle installを実行してください。

# ActiveAdmin
gem 'activeadmin', github: 'activeadmin'
gem 'inherited_resources', github: 'josevalim/inherited_resources', branch: 'rails-4-2'

🐰 active_adminの設定ファイル生成

ターミナルで次のコマンドを実行すると必要なファイルが追加されます。

rails g active_admin:install

😸 action_mailerの設定

次にaction_mailerの設定を書きます。今回は1.3万通/月まで無料な『Mandrill』を使います。
config/environments/development.rbを作成して次の設定を追記します。(環境ごとに適宜設定を書き換えてください)

# --------------------------------
# メール設定(using Mandrill)
# --------------------------------
config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }
config.action_mailer.raise_delivery_errors = true
config.action_mailer.delivery_method = :smtp
config.action_mailer.smtp_settings = {
    address: 'smtp.mandrillapp.com',
    port: 587,
    user_name: 'MandrillのSettingsにあるユーザー名',
    password: 'MandrillのSettingsで発行したAPI Key',
    authentication: :plain,
    enable_starttls_auto: true
}

ちなみに送信元のメールアドレスは、config/initializers/devise.rbのconfig.mailer_senderですので、適宜変更してください。

🗻 View側の設定

次にview側にタグを追加します。app/views/layouts/application.html.haml(ERB/slim)に以下を追加。


<% if notice.present? %>
  <%= notice %>
<% end %>
<% if alert.present? %>
  <%= alert %>
<% end %>


- if notice.present?
  %p.notice= notice
- if alert.present?
  %p.alert= alert


- if notice.present?
  p.notice= notice
- if alert.present?
  p.alert= alert

あとは、devise側のviewもカスタマイズしたい場合には、ターミナルで次のコマンドを実行するとapp/views/deviseフォルダ配下にdevise用のviewファイルが生成されます。

rails g devise:views

🏀 マイグレーション

ユーザー管理用テーブルadmin_usersと管理画面内のコメント情報のテーブルactive_admin_commentsのマイグレーション処理を実行。

bundle exec rake db:migrate

🎃 表示確認

ブラウザから、http://localhost:3000/adminを見ると管理画面へのログイン画面が出てきます。
初期の管理ユーザーとパスワードは以下のとおりです。

(管理User/Passwordはログイン後に管理画面から修正できます)

User: admin@example.com
Password: password

🐯 管理対象のモデルの管理画面を生成

さらにコマンドラインから管理する対象のモデルの管理画面を生成。

rails g active_admin:resource model_name

これで、active_adminの設定は完了です。

😎 管理画面の機能

管理画面のサンプルはこちら。

スクリーンショット 2013-01-18 17.55.49

管理画面の機能は次のとおりです。

レコードのソート表示
レコードの検索、検索時のフィルタリング
レコードを編集・追加・削除
レコードをCSV,XML,JSON形式で出力
レコードにコメントを記述

🚌 一覧画面に表示するカラムを制限

管理画面に表示されるカラムは初期状態ではすべて表示されて若干見にくいです。表示するカラムを制限して可読性を上げたい場合は、app/admin/model_name.rbを次のように編集します。

ActiveAdmin.register ModelName do
  index do
    column :id
    column :title

    # belongs_to でつながっている parent_model のリンク付きの項目
    column :parent_model do |model_name|
      link_to model_name.parent_model.title, admin_parent_model_path(model_name.parent_model)
    end
  end
end

ちなみに、helperメソッドを使うこともできるので、必要に応じてヘルパーメソッドを使って表示形式を編集してください。

🐮 一覧画面のサイドバーの項目を変更

一覧画面の右側のサイドバーの項目を必要な項目だけに絞ることができます。

FILTER_COLUMNS = %w(id title)
# filter setting
FILTER_COLUMNS.each do |col|
  filter col.to_sym
end

# belogs_to でつながっている parent_model のfilter
filter :parent_model_id, as: :select, collection: ParentModel.all.order(title: :asc).map { |parent| [parent.title, parent.id] }

🗽 編集画面のフォームを変更

管理画面からレコードを編集・追加するときに使うフォームの形式も簡単に変更できます。
app/admin/model_name.rbを次のように追加します。

ActiveAdmin.register ModelName do
  PERMIT_COLUMNS = %w(id title)
  permit_params PERMIT_COLUMNS

  form do |f|
    f.inputs "Admin Details" do
      f.input :id
      f.input :title
    end
    f.actions
  endd
end

🚕 オリジナルの管理画面ページを作成

オリジナルの管理画面のページ(アクション)を作成することも簡単にできます。
まず、app/admin/model_name.rbを次のように追加します。

ActiveAdmin.register ModelName do
  collection_action :test, :method => :get do
    render :text => "app/admin/model_name/test 表示成功"
  end
end

すると、http://localhost:3000/admin/model_name/testにブラウザでアクセス出来ます。

スクリーンショット 2013-01-18 18.52.43

Viewを編集する場合は、/app/views/admin/model_name/test.html.ERB(haml/slim)です。

もし、管理画面が必要なときはぜひこのGemを使ってみてください。ちなみに、英語ですがactive_adminは公式のドキュメントがすごくわかりやすくて充実しています。もし良ければWikiも見てみてください。

activeadmin/activeadmin Wiki · GitHub

🤔 Active Admin Tips

ここからはActive Adminを使っていく中でためているTipsを書いていきます。

BulletでN+1の警告が出る場合

開発環境でBulletを使っていると、リレーションのあるカラムを表示しているときにN+1の指摘を受けます。
その対策方法の記事を見付け足のでメモ。

controller do
  def scoped_collection
    Product.includes(:maker) # productのリストを取得時に予めmakerをincludeする
  end

  def find_resource
    Product.where(id: params[:id]).joins(:maker).first! # productの取得時に予めmakerをjoinしておく
  end
end

Preventing N+1 Query Problem in Active Admin index action. - ravelllの日記

独自アクションのボタンを設置する

active_adminで作ったindex/showなどのページに独自のボタンを追加する方法。

# ----------------------------------------
# Custom Action
# ----------------------------------------
member_action :hoge_method, :method => :get do
  Product.find(params[:id]).xxxx
  redirect_to url_for({ action: :show }), :notice => '何かの処理'
end

action_item(:show) do
  link_to('何かの処理', { controller: 'admin/sales', action: :hoge_method, id: params[:id] }, method: :get)
end

ActiveAdminにカスタムアクションを追加する - sessanの日記

serializedされたカラムを扱う

serializedされたカラムをactive_adminで扱う方法。

まずは、active_adminの設定部分(app/admin/product.rb)。

ActiveAdmin.register Product do
  permit_params %w(name keywords_raw)

  form do |f|
    f.inputs do
      f.input :name
      f.input :keywords_raw, :as => :text
    end
    f.actions
  end
end

次にモデル側(app/models/product.rb)。

# ----------------------------------------
# Serialization
# ----------------------------------------
serialize :keywords, Array
attr_accessor :keywords_raw

# ----------------------------------------
# active_adminでserializeされた keywords を扱うための仕組み
# ----------------------------------------
# keywords => keywords_raw に変換
def relation_keywords_raw
  self.relation_keywords.join("\n") unless self.relation_keywords.nil?
end

# keywords_raw => keywords に変換
def relation_keywords_raw=(values)
  self.relation_keywords = []
  self.relation_keywords = values.gsub("\r", '').split("\n")
end