読者です 読者をやめる 読者になる 読者になる

Shred IT!!!!

IT全般について試したこと・勉強したことを綴ったり、趣味について語るブログ

Rails 4.2 へ ActiveAdmin を導入して、日本語化する方法

概要


Rails4.2 の環境へ ActiveAdmin を導入してみる。
有名な gem だと思われるが、業務で扱ったことがなかった。
業務で利用することになったので、導入方法や簡単な設定までをまとめておく。

前提


下記で Rails の環境が構築済みとする。

  • Ruby2.2.2
  • rvm 1.26.11
  • bundler 1.10.5
  • Rails 4.2.3

Gemfile の準備とインストール


Rails のカレントディレクトリへ移動。

# vim Gemfile
gem 'activeadmin', '~> 1.0.0.pre1'
gem 'activeadmin-translate'
gem 'devise'
gem 'devise-i18n'

インストールする。

bundle install --path vendor/bundle

ActiveAdmin のインストール


bundler で gem のインストールが済んだら、下記を実行。
必要なファイルが生成・追加される。

# bundle exec rails g active_admin:install
      invoke  devise
    generate    devise:install
      create    config/initializers/devise.rb
      create    config/locales/devise.en.yml
      invoke    active_record
      create      db/migrate/20150718125632_devise_create_admin_users.rb
      create      app/models/admin_user.rb
      invoke      rspec
      create        spec/models/admin_user_spec.rb
      insert      app/models/admin_user.rb
       route    devise_for :admin_users
        gsub    app/models/admin_user.rb
        gsub    config/routes.rb
      insert    db/migrate/20150718125633_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
    generate  active_admin:assets
      create  app/assets/javascripts/active_admin.js.coffee
      create  app/assets/stylesheets/active_admin.css.scss
      create  db/migrate/20150718125633_create_active_admin_comments.rb

マイグレーションする。

# bundle exec rake db:migrate

管理画面を見てみる


Rails を起動する。

# bundle exec rails s -b 0.0.0.0

下記で管理画面へアクセスする。

http://192.168.33.10:3000/admin

初期状態のログイン用メールアドレスとパスワードは下記の通り。

この時点で管理者ユーザの一覧/詳細表示、追加・編集・削除の機能が備わっている。

管理機能を追加


適当なモデルを作って、それを管理する機能を作ってみる。

モデルを作る

モデルを作って、マイグレートする。

# bundle exec rails g model name name:string date:date
# bundle exec rake db:migrate
ActiveAdminでモデルを扱う

下記コマンドを実行すると、ファイルが作成される。

# bundle exec rails g active_admin:resource Name
      create  app/admin/name.rb

作成されたファイルは下記のようになっている。

ActiveAdmin.register Name do
  permit_params :name, :date # この行は追加
end

Nameはモデルを指定しているが、上記の形式でファイルを作成すれば指定モデルの管理メニューを追加することができる。
これだけで指定モデルの一覧・詳細・編集(CRUD)の機能を利用できる。
ちなみに編集したいパラメータはpermit_paramsで指定しなければいけない。

日本語化する前のスクリーンショット

f:id:jetglass:20150726104314p:plain

ActiveAdmin の日本語化


設定ファイルの編集

日本語を利用するように下記ファイルに追加。

# vim config/application.rb
...
    config.time_zone = 'Tokyo'
    config.i18n.default_locale = :ja
    config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}')]
...
各ja.yml の準備

よく利用されている yml があるので、ダウンロードして設置すること。

別途、モデル向けの ja.yml を準備する。

# vim config/locales/model/ja.yml
ja:
  activerecord:
    models:
      admin_user: 管理者
      comment: コメント
      name: 名前
    attributes:
      admin_user:
        email: メールアドレス
        current_sign_in_at: 最新ログイン日時
        sign_in_count: ログイン回数
        created_at: 作成日時
      name:
        name: 名前
        date: 日付
        created_at: 作成日時
        updated_at: 更新日時

もう一つ、active_admin 向けの ja.yml を準備する。
これを準備しないと自動生成されるボタンが日本語化されない。

# vim config/locales/active_admin/ja.yml
 ---
ja:
  formtastic:
    :yes: 'はい'
    :no: 'いいえ'
    :create: '%{model}を作成'
    :update: '%{model}を更新'
    :submit: '%{model}を投稿'
    :cancel: '%{model}を中止'
    :reset: '%{model}を初期化'
    :required: '必須'
日本語化した後のスクリーンショット

f:id:jetglass:20150726104415p:plain

エラーメッセージ


エラーメッセージを追加で表示する

モデルにバリデートを追加した場合、編集画面でエラーが表示される。

# app/models/name.rb
class Name < ActiveRecord::Base
  validates :name, presence: true
  validates :date, presence: true
end

f:id:jetglass:20150726110146p:plain


画面の上部にエラーメッセージを表示する方法。

# app/admin/name.rb
...
  form do |f|
    # エラー表示枠を表示、シンボルで項目を指定
    f.semantic_errors :name
    # モデルの入力項目を表示
    f.inputs
    # 登録・更新などのボタンの表示
    f.actions
  end
...

f:id:jetglass:20150726110206p:plain

ドキュメント

Active Admin | The administration framework for Ruby on Rails

ActiveAdmin は一覧画面や編集画面でわりと自由にカスタマイズができる。

1つのモデルに対して管理機能を付けるのは今回紹介した通り簡単だが、 モデルにリレーションがある場合はそれぞれの画面で表示する項目や一覧画面の検索項目を変更・追加したい場合がある。

そんなときにもある程度の対応ができそう。
カスタマイズすることがあれば、また記事に残していこうと思う。

参考