LoginSignup
26

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-12-19

いつ使えるの?

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 にアクセスすると、シンプルな管理画面ができています。

管理画面のデザイン

activeadmin00.png

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

・ Email: admin@example.com
・ Password: password

管理画面の中のデザイン

activeadmin01.png

デフォルト画面の完成。

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の上記部分のコメントアウトを外して、メモリを与えるとエラーがなくなると思います。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
26