酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

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

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

activeadmin/activeadmin · GitHub

(2015-01-10 11:10) Rails4.2対応!


Gemのインストール

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

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

active_adminの設定ファイル生成

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

1
rails g active_admin:install

action_mailerの設定

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# --------------------------------
# メール設定(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.rbconfig.mailer_senderですので、適宜変更してください。

View側の設定

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- erb -->
<% if notice.present? %>
  <p class="notice"><%= notice %></p>
<% end %>
<% if alert.present? %>
  <p class="alert"><%= alert %></p>
<% end %>

<!-- haml -->
- if notice.present?
  %p.notice= notice
- if alert.present?
  %p.alert= alert

<!-- slim -->
- if notice.present?
  p.notice= notice
- if alert.present?
  p.alert= alert

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

1
rails g devise:views

マイグレーション

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

1
bundle exec rake db:migrate

表示確認

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

User: admin@example.com
Password: password

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

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

1
rails g active_admin:resource model_name

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

管理画面の機能

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
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メソッドを使うこともできるので、必要に応じてヘルパーメソッドを使って表示形式を編集してください。

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

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

1
2
3
4
5
6
7
8
  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を次のように追加します。

1
2
3
4
5
6
7
8
9
10
11
12
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を次のように追加します。

1
2
3
4
5
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の指摘を受けます。 その対策方法の記事を見つけたのでメモ。

1
2
3
4
5
6
7
8
9
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などのページに独自のボタンを追加する方法。

1
2
3
4
5
6
7
8
9
10
11
  # ----------------------------------------
  # 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)。

1
2
3
4
5
6
7
8
9
10
11
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)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  # ----------------------------------------
  # 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

たったこれだけでserializeされたカラムも簡単に扱えるようになります。active_adminまじぱないっす。

ruby - How do you handle serialized edit fields in an Active Admin resource? - Stack Overflow

Special Thanks

Rails4 の ActionMailer でメール送信 | EasyRamble

NAMAKESUGI |[Rails]管理画面プラグイン ActiveAdmin その2(サイドバー編)

NAMAKESUGI | [Rails]管理画面プラグイン ActiveAdmin その1(導入編)

Rails3の管理画面プラグインActiveAdmin - chulip.org

Active Admin | The administration framework for Ruby on Rails

変更来歴

(2013-01-19) 新規作成
(2015-01-10 11:10) Rails4.2対応!
(2015-01-17 10:20) BulletでN+1の警告が出る場合
(2015-01-18 09:15) Active AdminのTipsを追加

おすすめの書籍