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


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

activeadmin/activeadmin · GitHub

(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.rbconfig.mailer_senderですので、適宜変更してください。

🚌 View側の設定

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

<!-- 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ファイルが生成されます。

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

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

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

😼 参考リンク

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) Rails 4.2対応!

(2015-01-17 10:20) BulletでN+1の警告が出る場合

(2015-01-18 09:15) Active AdminのTipsを追加

📚 おすすめの書籍

🖥 サーバについて

このブログでは「Cloud Garage」さんのDev Assist Program(開発者向けインスタンス無償提供制度)でお借りしたサーバで技術検証しています。 Dev Assist Programは、開発者や開発コミュニティ、スタートアップ企業の方が1GBメモリのインスタンス3台を1年間無料で借りれる心強い制度です!(有償でも1,480円/月と格安)