Railsでシンプルな管理画面をサクッとつくれる「ActiveAdmin」

いつ使えるの？

Railsでサクッと管理画面を作成したい時に使えます。

公式リポジトリ

activeadmin

activeadminをインストール

Gemfile

gem 'activeadmin', github: 'gregbell/active_admin'
gem 'sass-rails' # 入っていなければ追記
gem 'devise' # ユーザー認証

$ bundle install --path vendor/bundle

で gem をインストールします。

セットアップ

activeadminをセットアップした後、DBを作成してサーバ起動します。

$ bundle exec rails g active_admin:install
      invoke    active_record
      create    db/migrate/20141216115002_devise_create_admin_users.rb
      create    app/models/admin_user.rb
      invoke    test_unit
      create    test/models/admin_user_test.rb
      create    test/fixtures/admin_users.yml
      insert    app/models/admin_user.rb
       route    devise_for :admin_users
        gsub    app/models/admin_user.rb
        gsub    config/routes.rb
      insert    db/migrate/20141216115002_devise_create_admin_users.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
      create    app/assets/javascripts/active_admin.js.coffee
      create    app/assets/stylesheets/active_admin.css.scss
      create    db/migrate/20141216115007_create_active_admin_comments.rb

$ bundle exec rake db:migrate 
$ bundle exec rails s

あとはサーバーを立ち上げて http://localmoss:3000/admin にアクセスすると、シンプルな管理画面ができています。

管理画面のデザイン

デフォルトのEmailとパスワード

・ Email: [e-mail]
・ Password: password

管理画面の中のデザイン

デフォルト画面の完成。

bookモデルを作成して管理

$ bundle exec rails g model book title:string color:string 

$ bundle exec rake db:migrate

# Ativeadminで管理できるように
$ bundle exec rails g active_admin:resource book
    create  app/admin/book.rb

管理画面を編集

app/admin/book.rb

register Book do
  permit_params :id, :title, :color

  index do
    column "ID", :id
    column "タイトル", :title
    column "色", :color
    # 管理画面に画像を表示させる
    # column "画像", :image_thumbnail do |c|
    #   image_tag(c.image, :height => '100')
    #end
    actions
  end

# Newするとき
  form do |f|
    f.inputs Book do
      f.input :title
      f.input :color

      f.actions
    end
  end

  show do |b|
    attributes_table do
      row :id
      row :title
      row :color
    end
      active_admin_comments
  end

end

# 検索
ActiveAdmin.register Book do |u|
    filter :id, :label => 'IDで検索'
end

こんな感じで表示するものを変更できます。

$ bundle exec rake db:migrate 

Vagrantで開発している方

Vagrantで開発している場合は、メモリ不足でエラーになることがあるので注意してください。

Vagrantfile

   config.vm.provider "virtualbox" do |vb|
     # Don't boot with headless mode
     vb.gui = true
  
     # Use VBoxManage to customize the VM. For example to change memory:
     vb.customize ["modifyvm", :id, "--memory", "1024"]
   end

Vagrantfileの上記部分のコメントアウトを外して、メモリを与えるとエラーがなくなると思います。