Rails5 + ActiveAdmin 使い方

基本設定

Gem導入してまず動かすことをゴールでRails5へのActiveAdminの導入をみてそのまままずやってみました。

1.Gemfileを編集

依存関係にあるのでdevise未導入の場合は一緒に導入

Gemfile

# framework for creating administration style interfaces
gem 'activeadmin', github: 'activeadmin'
gem 'inherited_resources', github: 'activeadmin/inherited_resources'
gem 'devise' # if you need

2. bundle install

3. インストーラを実行

rails g active_admin:install 

4. DB migration

AdminUserモデルのmigrationファイルが生成され、seed.rbに初期ユーザのseedが追記されているので反映
この際、初期管理者ユーザのmail, P/W は以下を編集しておけば変更できる

db/seed.rb

AdminUser.create!(email: '[e-mail]', password: 'password', password_confirmation: 'password')

migrationを実行

rails db:migrate
rails db:seed

5. 動作確認

bundle exec rails s

http://localhost:3000/admin へアクセスして、初期管理者ユーザのmail, P/Wでログインできれば成功

Theme

色んなThemeがありますが、保守や活用度を検討してactive_bootstrap_skinを導入しました。

1.Gemfileを編集

Gemfile

gem 'bootstrap-sass'
gem 'active_bootstrap_skin'

2.active_admin.scssを編集

app/assets/stylesheets/active_admin.sccs

// Active Admin's got SASS!
// @import "active_admin/mixins";
// @import "active_admin/base";

// Active Bootstrap
@import "active_bootstrap_skin";

3.active_admin.js編集

app/assets/javascripts/active_admin.js.coffee

#= require active_admin/base
#= require bootstrap-sprockets
#= require active_bootstrap_skin

少し不具合やスタイルが不備なことがあったのでforkして使っています。

4.Gemfile編集

ライブラリをロカール開発の時にはforkで作業中のdirectoryを参照させ、サーバーではfork中のgithubから参照させます。

Gemfile

group :development do
gem 'active_bootstrap_skin', path: '/Users/user-name/work-folder/active_bootstrap_skin'
end

group :production, :staging, :test do
gem 'active_bootstrap_skin', github: 'user-name/active_bootstrap_skin'
end

やったこと

* 権限機能

ActiveAdminとCanCanCanを使って管理画面に権限機能をつけるに書いてあることをまずやります。

* Footer修正

Powered by ActiveAdmin ... 表示をさせない

cofig/initializers/active_admin.rb

config.view_factory.footer = ActiveAdmin::Component

* Google Chartライブラリのchartkickを追加

1) Gemfileを編集

Gemfile

gem 'chartkick'

2) active_admin.js編集

app/assets/javascripts/active_admin.js.coffee

#= require chartkick

3) chartkickを参考して使う

* assets/adminにあるjs/cssなどを必要に応じて使う

active_admin.js.coffeeでrequireしておいてもいいが画面毎に必要な時のみに呼び出して使いたいためprecomileして置きました。

config/iniializers/assets.rb

Rails.application.config.assets.precompile += %w( admin/*.* )

###* 画面ごとに使うjsのみをheadに追加

app/admin/xxx.rb

  content do
    within @head do
      script :src => javascript_path('admin/xxx.js'), :type => "text/javascript"
    end
    render partial: 'admin/xxx'
  end

* Navigationメニューにグループ(dropdown)として追加

config/initializers/active_admin.rb

  config.namespace :admin do |admin|
    admin.build_menu do |menu|
      menu.add label: 'A', priority: 3 
    end
  end

* 特定のメニューにサブメニューとして属するように設定

app/admin/a-a.rb

  ActiveAdmin.register_page "a-a" do
  menu parent:  "A" #メニュー'A' の下に 'a-a'が追加されている

#　その他

• Awesome ActiveAdmin関連リンクを集めているページ
• ActiveAdmin 公式サイト