Help us understand the problem. What is going on with this article?

Rails 4 & Active Admin で、マスタCRUD系の管理画面を秒速で作る方法

More than 5 years have passed since last update.

Rails 4 で Active Admin を試してみたので、導入手順をメモしておきます。
タイトルどおり、Rails でそれなりの管理画面が簡単に作成できます。

公式のデモ⇒http://demo.activeadmin.info/admin

今回の環境

  • ローカルの Mac に 構築した Rails 環境に導入しています。
    • OS: Mac OS X 10.9.4 (Mavericks)
    • Ruby: 2.1.2
    • Rails: 4.1.1

導入手順

  • Active Admin の GitHubページ に記載されているとおりに、Gemfile に追記します。

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

    ※ devise はログイン認証で必要な模様。

  • それらを bundle install します。

    $ bundle install --path vendor/bundle
    

    ※ 私の場合は、vendor/bundle に gem を配置しています。適宜、読み替えてください。

使ってみる

Active Adomin の ドキュメント を参考に進めます。

  • 下記コマンドを実行。

    $ ./bin/rails g active_admin:install
    

    いろいろファイルが追加されました。

    スクリーンショット 2014-08-10 18.17.57.png

  • 下記コマンドを実行。

    $ ./bin/rake db:migrate
    

    テーブルが生成されたようです。

    スクリーンショット 2014-08-10 18.20.58.png

    ※ RubyMine(IDE) で閲覧しています。

  • ローカルWEBサーバを起動。

    $ ./bin/rails s
    
  • ブラウザで http://localhost:3000/admin/ へアクセスしてみます。

    スクリーンショット 2014-08-10 18.24.23.png

  • ドキュメントに記載されているとおり、次の ID/PASS でログインします。

    User: admin@example.com
    Password: password

  • ログインできました。

    スクリーンショット 2014-08-10 18.31.37.png

  • まだ管理対象のデータ(モデル)が何もないので、モデルを作ってみます。適当に scaffold し、

    $ ./bin/rails g scaffold Hoge name:string age:integer
    $ ./bin/rake db:migrate
    

    ※ scaffold でなく、モデルだけ作るのでもいいかも。

  • 次のように Active Admin の管理対象にします。

    $ ./bin/rails generate active_admin:resource Hoge
    
  • もう一度、http://localhost:3000/admin/ へアクセスすると、メニューが追加されています。

    スクリーンショット 2014-08-10 19.08.00.png

  • が、このままだと、管理画面からデータ登録した際、次のようにエラーになってしまいます。

    スクリーンショット 2014-08-10 19.43.09.png

  • app/admin/hoge.rb で、登録を許可するパラメータを次のように追加すると、エラーは出なくなります。

    app/admin/hoge.rb
    ActiveAdmin.register Hoge do
    
      # See permitted parameters documentation:
      # https://github.com/gregbell/active_admin/blob/master/docs/2-resource-customization.md#setting-up-strong-parameters
      #
      # permit_params :list, :of, :attributes, :on, :model
      #
      # or
      #
      # permit_params do
      #  permitted = [:permitted, :attributes]
      #  permitted << :other if resource.something?
      #  permitted
      # end
    
      permit_params :name, :age
    
    end
    
  • データ登録できました!

    スクリーンショット 2014-08-10 19.48.39.png

おわりに

hkusu
Software Engineer @ Yumemi, Inc JavaScript / Android / Kotlin / AWS etc..
http://hkusu.github.io
yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。Twitterで情報配信中https://twitter.com/yumemiinc
http://www.yumemi.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away