active_adminを導入しよう

自作Webページにactive_ adminを導入してみたのでその記録をしてみる。

1.開発環境

• Docker 19.03.2
• Ruby 2.5.3
• Rails 5.2.3
• Mysql 5.7.27

2.導入理由

• GUIでDB操作ができるように管理者コンソールを作りたい
• 0-1で作るのは時間的に厳しいのでgemを使おう

qiita.com

上記Qiitaの記事を読んで、総合的に一番優秀そうな

「active_admin」

に決めました。

3.導入

3-1.Gemfileからのbundle install

gem 'activeadmin'
gem 'devise'

$ bundle install

※当方環境ではDockerを使用しているので、docker-compose build し直しました。
これも設定次第でbuildし直ししなくてもよくなるそうなので適用して近々記事にします！！

うまくいけば下記のように追加されます

3-2.Gemfile.lock

    activeadmin (2.4.0)
      arbre (~> 1.2, >= 1.2.1)
      formtastic (~> 3.1)
      formtastic_i18n (~> 0.4)
      inherited_resources (~> 1.7)
      jquery-rails (~> 4.2)
      kaminari (~> 1.0, >= 1.0.1)
      railties (>= 5.0, < 6.1)
      ransack (~> 2.1, >= 2.1.1)
      sassc-rails (~> 2.1)
      sprockets (>= 3.0, < 4.1)
      sprockets-es6 (~> 0.9, >= 0.9.2)
 
以下略.....
kaminariとかransackとかがありますね〜

3-3.Rails generateする

$ bundle exec rails g active_admin:install

      invoke  devise
    generate    devise:install
      create    config/initializers/devise.rb
      create    config/locales/devise.en.yml
  ===============================================================================

Some setup you must do manually if you haven't yet:

  1. Ensure you have defined default url options in your environments files. Here
     is an example of default_url_options appropriate for a development environment
     in config/environments/development.rb:

       config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

     In production, :host should be set to the actual host of your application.

  2. Ensure you have defined root_url to *something* in your config/routes.rb.
     For example:

       root to: "home#index"

  3. Ensure you have flash messages in app/views/layouts/application.html.erb.
     For example:

       <p class="notice"><%= notice %></p>
       <p class="alert"><%= alert %></p>

  4. You can copy Devise views (for customization) to your app by running:

       rails g devise:views

===============================================================================
      invoke    active_record
      create      db/migrate/20191007000038_devise_create_admin_users.rb
      create      app/models/admin_user.rb
      invoke      rspec
      create        spec/models/admin_user_spec.rb
      invoke        factory_bot
      create          spec/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_users.rb
      insert  config/routes.rb
    generate  active_admin:assets
      create  app/assets/javascripts/active_admin.js
      create  app/assets/stylesheets/active_admin.scss
      create  db/migrate/20191007000042_create_active_admin_comments.rb

うまくいきましたね。

3-4.DB Migration

$ bundle exec rails db:migrate

3-5.seedsでテストユーザを仕込む

$ bundle exec rails db:seed

3-6.ログインしてみる

active_adminの/adminが管理画面のデフォルトのルートになっているので ローカル環境でアクセスしたければ localhost:[ポート]/admin にアクセスしましょう。

⬆️作成したテストユーザのEmailアドレスとパスワードでログインしてください。

うまくログインできました！

カスタマイズ0でこんなに手軽に完成度の高い管理者コンソールができちゃいます！

4.現行環境に適用

デフォルトでは個別ページとして

• admin_user
• comment

のみModelとして登録されているので

既設のModelを登録するためにはactive_adminのresourceに追加する必要があります。

4-1.既存のUserモデルをactive_adminに追加

$ rails generate active_admin:resource User

      create  app/admin/users.rb

⬆️Users Modelの追加が確認できました

Modelの操作をする前に... 先ほど作成された「users.rb」に以下を追加しましょう。

permit_params :name, :admin

これでModel操作の準備ができました！

string属性のNameの入力フォームだけでなく

boolean属性のadminのチェックボックスも自動生成してくれます。

→ 必要情報を入力しCreate Userを選択すれば....

⬆︎testユーザの作成が確認できます。

まとめ

• 導入簡単
• Model操作もやってくれる
• カスタマイズには学習コスト要

以上です。 皆さんもぜひ試してみてください！