更新日: 2016年11月22日
Rails

ActiveAdminでRails管理画面を作成

Rails の管理画面用 gem としては、Active Admin と Rails Admin の2つが有名です。両方試そうと思いますが、まずは ActiveAdmin から試してみました。

— 環境 —
rails 5.0.0.1
activeadmin 1.0.0

【追記　2016/11/18】
Rails 5 環境での active admin インストールと設置を検証してみましたので、それについて追記を行いました。以下見出しの「Rails 5 での ActiveAdmin インストールと設置」のパラグラフです。
【追記ここまで】

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

Rails 5 での ActiveAdmin インストールと設置

Rails 5 環境での ActiveAdmin のインストールと設置方法です。基本的に、以下 GitHub の公式ドキュメントを参考にしています。

https://github.com/activeadmin/activeadmin
https://github.com/activeadmin/activeadmin/blob/master/docs/0-installation.md

まずは、Gemfile に以下を追記する。

Gemfile

gem 'activeadmin', github: 'activeadmin'
gem 'inherited_resources', github: 'activeadmin/inherited_resources'

1 2	gem 'activeadmin', github: 'activeadmin' gem 'inherited_resources', github: 'activeadmin/inherited_resources'

ActiveAdmin Gem をインストール。


$ bundle install

$ bundle install

ActiveAdmin 本体をインストールして、必要なファイルを生成する。


$ bundle exec rails generate active_admin:install
Running via Spring preloader in process 41234
      invoke  devise
    generate    No need to install devise, already done.
      invoke    active_record
      create      db/migrate/20161118013534_devise_create_admin_users.rb
      create      app/models/admin_user.rb
      invoke      rspec
      create        spec/models/admin_user_spec.rb
      invoke        factory_girl
      create          test/factories/admin_users.rb
      insert      app/models/admin_user.rb
       route    devise_for :admin_users
        gsub    app/models/admin_user.rb
        gsub    config/routes.rb
      append    db/seeds.rb
      create  config/initializers/active_admin.rb
      create  app/admin
      create  app/admin/dashboard.rb
      create  app/admin/admin_user.rb
      insert  config/routes.rb
    generate  active_admin:assets
Running via Spring preloader in process 41305
      create  app/assets/javascripts/active_admin.js.coffee
      create  app/assets/stylesheets/active_admin.scss
      create  db/migrate/20161118013554_create_active_admin_comments.rb

$ bundle exec rails generate active_admin:install

Running via Spring preloader in process 41234

invoke devise

generate No need to install devise, already done.

invoke active_record

create db/migrate/20161118013534_devise_create_admin_users.rb

create app/models/admin_user.rb

invoke rspec

create spec/models/admin_user_spec.rb

invoke factory_girl

create test/factories/admin_users.rb

insert app/models/admin_user.rb

route devise_for :admin_users

gsub app/models/admin_user.rb

gsub config/routes.rb

append db/seeds.rb

create config/initializers/active_admin.rb

create app/admin

create app/admin/dashboard.rb

create app/admin/admin_user.rb

insert config/routes.rb

generate active_admin:assets

Running via Spring preloader in process 41305

create app/assets/javascripts/active_admin.js.coffee

create app/assets/stylesheets/active_admin.scss

create db/migrate/20161118013554_create_active_admin_comments.rb

上記のように Active Admin 関連のファイルが生成されました。

続いて、db/seeds.rb に追記された、管理者ユーザー作成のコードでEメールアドレスとパスワードを編集します。

db/seeds.rb

AdminUser.create!(email: 'admin@example.com', password: 'password', password_confirmation: 'password')

1	AdminUser.create!(email: 'admin@example.com', password: 'password', password_confirmation: 'password')

マイグレーション実行と db:seed 実行。


$ bundle exec rake db:migrate
$ bundle exec rake db:seed

$ bundle exec rake db:migrate

$ bundle exec rake db:seed

サーバー起動。


$ bundle exec rails s

$ bundle exec rails s

http://localhost:3000/admin から ActiveAdmin の管理画面にログインできます。

production 環境では Capistrano で db:seed を実行するようにしました。Capistrano の config/deploy.rb に db:seed 用のタスクを作成します。

config/deploy.rb

namespace :deploy do
  desc 'rake db:seed'
  task :db_seed do
    on roles(:db) do |host|
      # execute "cd #{current_path} && bundle exec rake db:seed"
      within current_path do
        with rails_env: fetch(:rails_env) do
          execute :rake, 'db:seed'
        end
      end
    end
  end
end

namespace :deploy do

desc 'rake db:seed'

task :db_seed do

on roles(:db) do |host|

# execute "cd #{current_path} && bundle exec rake db:seed"

within current_path do

with rails_env: fetch(:rails_env) do

execute :rake, 'db:seed'

end

デプロイ後に db_seed タスクを実行する。


$ bundle exec cap production deploy
$ bundle exec cap production deploy:db_seed

$ bundle exec cap production deploy

$ bundle exec cap production deploy:db_seed

ActiveAdmin で管理するモデルを追加する。


$ bundle exec rails generate active_admin:resource MyModel

$ bundle exec rails generate active_admin:resource MyModel

User モデルを管理対象に追加する場合。


$ bundle exec rails generate active_admin:resource User

$ bundle exec rails generate active_admin:resource User

以上ここまでが Rails 5 における ActiveAdmin のインストールと設置方法でした。エラー対策などは記事末尾に記載したものと同様です。

Rails 4.1 での ActiveAdmin インストール

以降の内容は、記事初回公開時の Rails 4.1 環境による検証です。

— 環境 —
rails 4.1
devise 3.2.2
activeadmin 1.0.0

gregbell/active_admin

Gemfile に activeadmin を追加して bundle install

Gemfile

gem 'activeadmin', github: 'gregbell/active_admin'

1	gem 'activeadmin', github: 'gregbell/active_admin'


$ bundle install

$ bundle install

active_admin を install


$ bundle exec rails generate active_admin:install

$ bundle exec rails generate active_admin:install

これで、admin_users用とactive_admin_comments用の2つのマイグレーションファイルが作成されますが、なぜか管理者用テーブル（admin_users）用のマイグレーションファイルが .rb の拡張子なしで作成されていたので手動で修正。.rb なしのファイルはマイグレーション実行でスキップされてしまいますので。


$ mv db/migrate/***_devise_create_admin_users db/migrate/***_devise_create_admin_users.rb

$ mv db/migrate/***_devise_create_admin_users db/migrate/***_devise_create_admin_users.rb

マイグレーション実行。


$ bundle exec rake db:migrate

$ bundle exec rake db:migrate

webrick 再起動。


$ bundle exec rails s

$ bundle exec rails s

管理者ユーザーを作成して管理画面にログイン

http://localhost:3000/admin にアクセスするとログイン画面が表示されます。

Github の Readme には、以下の初期ユーザーとパスワードでログインできると書いてありましたが、私の環境では管理者用の初期ユーザーが自動では作成されませんでした。

User: admin@example.com
Password: password

なので、コンソールから管理者アカウントを作成しました。


$ bundle exec rails c
pry(main)> AdminUser.create!(:email => 'admin@example.com', :password => 'password', :password_confirmation => 'password')

$ bundle exec rails c

pry(main)> AdminUser.create!(:email => 'admin@example.com', :password => 'password', :password_confirmation => 'password')

管理者アカウントでログイン後、http://localhost:3000/admin にてダッシュボードを確認できます。

管理対象のモデルを追加

管理するモデルを追加、ここでは User モデルを管理対象にします。


$ bundle exec rails generate active_admin:resource User

$ bundle exec rails generate active_admin:resource User

これで、ダッシュボード上部メニューに”ユーザー”という項目が追加され、User モデルの管理が可能となります。

エラー対策など

will_paginate を使っている場合、User モデルの管理画面（http://localhost:3000/admin/users）にアクセスしようとすると、以下のエラーが発生します。


undefined method `per' for #<User::ActiveRecord_Relation:****>

undefined method `per' for #<User::ActiveRecord_Relation:****>

これは、will_paginate と active_admin が依存している kaminari が conflict するのが原因です。その解消のために以下を作成。

config/initializers/kaminari.rb

Kaminari.configure do |config|
  config.page_method_name = :per_page_kaminari
end

Kaminari.configure do |config|

config.page_method_name = :per_page_kaminari

end

またもう一つ。ActiveAdmin の CSS が Rails アプリケーション全体で有効になってしまいます。これを防ぐために以下を実行して、active_admin.css.scss を vendor/assets/stylesheets 以下に移動させておきます。


$ mv app/assets/stylesheets/active_admin.css.scss vendor/assets/stylesheets

$ mv app/assets/stylesheets/active_admin.css.scss vendor/assets/stylesheets

以上ですが、比較的簡単に active_admin を導入できました。

パーフェクト Ruby on Rails は、最近読んだ Rails 本の中では一番役に立った本です。Chef や Capistrano など Rails と共によく使用される技術にも触れてあります。Ruby on Rails 4 アプリケーションプログラミングは、入門的な内容で Rails の機能全体を網羅されています。

パーフェクト Ruby on Rails

Ruby on Rails 4 アプリケーションプログラミング