Date: 2013/10/18 Cate: rails, ruby Tags: , ,  

ActiveAdminで、Coolでモテる管理画面をつくろう!

Railsで管理画面をつくるときといえば、ActiveAdminですね!
超絶便利であっという間に使いやすい管理画面を作ることができます。

Active Admin | The administration framework for Ruby on Rails

このActiveAdmin、特に手を加えなくてもいい感じの管理画面を作ることができるのですが、
ちょっとしたテクニックでより一層イケてる管理画面を作ることができます!
Webサービスはローンチしてからが勝負。
イケてる管理画面を作れば、日々の作業もやりやすくなり、モテモテになること間違いなし!(主にディレクターから)
さらに、管理画面からなにか作業をするときに、ちゃんとアラートを出したり、そもそも制限をかけたりすることで、恐ろしい事故を未然に防ぐことができます!
安全に管理画面を運用できて、さらにモテモテ間違いなし!(主にディレクターから)

動作環境

  • Ruby 1.9.3
  • Rails 3.2.13
  • ActiveAdmin 0.6.0

目次

追記

1つ増やしたので、11個になりました(タイトルは10のテクニックのままにしてあります)


CSVをインポートしてDBにつっこむ

Railsのseedでcsvから初期データを突っ込むのでもいいのですが、そのへんの作業をディレクターがやったりしてくれるときは管理画面からデータを流し込めると便利です。
管理画面でcsvからデータ流し込めるようにするには、
ActiveAdminImportable
というGemを使うと簡単にできます。

#encoding: uhf-8
ActiveAdmin.register Items do

    ….

  active_admin_importable do |model, hash|
    model.create(:item_name => hash[:name], :price => hash[:price])
  end

end

こんなかんじで書くと、右上に「Import Items」みたいなボタンが表示されて、そこからCSVファイルをアップロードするとDBにデータを突っ込んでくれます。便利。


RailsのEnvironmentによって見た目を変える

ActiveAmin、超絶便利なのはありがたいのですが、本番環境だろうがステージング環境だろうが開発環境だろうが見た目が同じなので、

「開発環境やとおもって作業してたら本番環境やったー!!!!!ああぁぁぁぁあああああぁぁぁあああああ!!!!!!!!!」

ってことが起きたら本当に死にそうになります
そこで、RailsのEnvironmentによって管理画面の見た目を変えれば、ひと目で本番環境なのか開発環境なのかわかって、「本番環境と開発環境を勘違いしちゃった(・ω<)」みたいな事故を防ぐことができます。
そこで、以前私がつくったgem、ActiveAdminEnvironmentがありますので、こちらをお使い頂けるとサクッと見た目を変えることができます!!

【Rails】ActiveAdminをEnvironmentによって見た目かえるのGemにした « zoomAroid

こちらのgemをインストールして頂ければ、あっという間に本番環境の管理画面の見た目が
「すっげー気をつけて作業しろよ!!!!!」
みたいなかんじの色になります!!

Production

こんなかんじです!便利!


上部に表示されているグローバルメニューを階層化することで見やすくしたり、あるいはEnvironmentによってこのメニューは表示したくないだったり、メニューの表示順を変えたい、みたいなことがあるかと思います。
というわけでメニューの表示関係のサンプルコードです。

#encoding: uhf-8
ActiveAdmin.register Items do

  # 「ストア」という親メニューの下に「アイテム」という名前で表示
  # priorityの数字が小さいものから順番に、左から表示される
  menu parent: "ストア", label: "アイテム", priority: 3 
  
  if Rails.env == 'production'  # Productionのときは表示しない
    menu false
  end
    ….

end

メニューの数が増えてくるとレイアウトが崩れたりもするので、メニューを階層化してすっきりまとめると見やすくなります。便利!


日付をカレンダーから選択できるようにする

just-datetime-picker
こちらのgemを使うと簡単にできます。
使い方は、
active_admin.css.scss

@import "just_datetime_picker/base";

を追記。さらに

active_admin.js

//= require just_datetime_picker/nested_form_workaround

を追記すると、Datetime型のカラムに対して、

ActiveAdmin.register User do
  form do |f|
    f.inputs do
      f.input :born_at, :as => :just_datetime_picker
    end

    f.buttons
  end
end

というように書けて、管理画面でデータを新規作成するときに、DateTime型のデータを入れる際にカレンダーが表示されて便利です。
Calender
こんなかんじ。便利!


デフォルトでソートしておく

例えば、User一覧のページを表示する際にUserの名前でデフォルトでソートしたい!というときは、

ActiveAdmin.register User do
  config.sort_order = "name_asc"

   ....

end

のように書くと、表示するときにデフォルトでnameカラムを昇順でソートしておいてくれます。
便利ですね。


カスタムなActionを設定して、さらにアラートで確認してから実行するボタンをつくる

管理画面からバッチ処理的なことをボタンを押して実行させたい、みたいことがありますよね。
ただ、あんまり簡単に実行できちゃうと本番環境で間違えて実行しちゃって事故る、みたいなリスクもあるので、
・個別ページをつくって、
・その中でActionをつくって、
・ボタンをおしたらアラートが出てきてから、okを押すと実行される
くらいやっておけばまぁ安全ではないでしょうか。

#encoding: utf-8

ActiveAdmin.register_page "NiceBatch" do

  content do
    columns do
       column do
         panel "バッチ処理を実行します。" do
           button do # ボタンをつくる
             link_to "実行する",
               {
                 :controller => 'admin/nicebatch',
                 :action => 'run_batch'
               },
               method: :post,
               confirm: 'バッチ処理を実行します。よろしいですか?' # Alertを表示する
           end
         end
       end
    end
  end

  page_action :run_batch, :method => :post do  # バッチ処理
    Resque.enqueue(Class::NiceBatch)  # Resqueにバッチ処理を投げる
    flash[:notice] =  "バッチ処理を開始しました。"
    redirect_to "/admin/nicebatch"
  end

end

こんなかんじで個別の「NiceBatch」ページができて、その中に「実行する」ボタンがあり、それをクリックすると確認するアラートが表示されて、OKを押すと何かしらのバッチ処理を走らす、というようにできます。


Actionを制限する

新規作成は管理画面からできるようにしたいけど、更新はしたくない、みたいなことがあるかもしれません。
ということで、新規作成、更新、削除のActionを制限する方法です。

ctiveAdmin.register User do
  actions :index  # indexだけOKにする

  # or

  actions :all, :except => [:new, :destroy] # new, destory以外はOKにする

   ....

end

というように、どのActionを有効にするか、あるいはどのActionを無効にするかということを設定できます。


カスタムなColumnやRowをつくる

DB上ではBooleanで値を持っているけど、管理画面で表示するときはtrue, falseじゃなくて違う形で表示したい、ってことは意外とあると思います。
あるいは日付の表示をキレイにしたい、みたいなときに、カスタムなColumnとかを設定すれば簡単に表示を変更できて便利です。

まず、
config/initializers/active_admin.rb
に以下を追加します。

module ActiveAdmin
  module Views
    class TableFor

      def bool_column(attribute)
        column(attribute){ |model| model[attribute] ? "Yes" : "-" }
      end

      def date_column(attribute)
        column(attribute){ |model|model[attribute].strftime('%Y年%m月%d日 %H:%M:%S') }
      end
    # こんなかんじでカスタムなColumnを追加したり
    end

    class AttributesTable

      def bool_row(attribute)
        row(attribute){ |model| model[attribute] ? '✔'.html_safe : '✗'.html_safe }
      end
    # こんなかんじでカスタムなRowを追加したりできる
    end
  end
end

すると、app/admin/hoge.rbとかで

index do
  column :unko
  bool_column :is_deleted
  date_column :created_at
  actions
end

show do 
  attributes_table do
    row :unko
    bool_row :is_deleted
  end
end

みたいに自分でカスタマイズしたColumnやRowを使用することができます。


showで画像を表示する

例えばCarrierWaveなんかで画像をアップロードさせて、それをshowで表示したい、というときは

show do |item|
  attributes_table do
    row :item_name
    row :item_image do
      image_tag(item.item_image.url)
    end
  end
  active_admin_comments
end

みたいにすれば表示できます。
こういった表示周りはformtasticが使用されているので、formtasticの記法で書けばいろいろと表示をカスタマイズできます。


CSVでDLするときのエンコードを変える(無理やり)

ActiveAdminにデフォルトで付いている、CSVでのダウンロードを使うときに、UTF-8でCSVファイルが作られてしまうため、エクセルで開く際に毎度Shift-JISに変換してから開く必要があって面倒だったので、なんとかならんかなぁといろいろ試したのですが。
config/initializers/active_admin.rb

config.csv_options = {:encoding => 'Shift_JIS'}

を渡しても変わらない。
どうも、ActiveAdminの内部でCSVモジュールのgenerateを使って生成しているようなんですが、このオプションにencodingを渡してもうまく変換されないっぽくて、それで生成されたStringのエンコーディングを無理やり変えてやればいけました。
gemファイルを直接いじることになるのでちょっとあれですが・・・
vendor/bundle/ruby/2.0.0/gems/activeadmin-0.6.0/app/views/active_admin/resource/index.css.erb

<%-
  csv_lib = if RUBY_VERSION =~ /^1.8/
              require 'fastercsv'
              FasterCSV
            else
              require 'csv'
              CSV
            end

  col_sep = active_admin_config.csv_builder.column_separator || active_admin_application.csv_column_separator
  options = (active_admin_config.csv_builder.options || active_admin_application.csv_options).merge(:col_sep => col_sep)

  csv_output = csv_lib.generate(options) do |csv|
    columns = active_admin_config.csv_builder.columns
    csv << columns.map(&:name)
    collection.each do |resource|
      csv << columns.map do |column|
        call_method_or_proc_on resource, column.data
      end
    end
  end
  csv_output.encode!('Shift_JIS')
%>
<%= csv_output.html_safe %>

22行目にエンコーディングを無理やり変更するコードを追加。
かなり無理矢理ですがこれで一応変換されて、エクセルでも文字化けせず開くことができました。


DBでintで管理してるものを管理画面では日本語で扱う

例えばDBでitem_typeみたいなものがあったとして、それを
item_type
0 は サカナ
1 は 肉
2 は 野菜
ということにしてintで保存しておく、ということはよくあると思います。
こういうデータを管理画面から追加・表示するときに、数字のままだとわかりにくいので、ちゃんと対応する日本語で表示してやるとわかりやすくなってハッピーです。
app/admin/item.rb

# encoding: utf-8
ActiveAdmin.register Item do
  form do |f|
    f.inputs do
      item_type = { 0: "サカナ", 1: "肉", 2: "野菜"}.invert
      f.input :item_name
      f.input :item_type, :as => :select, :collection => item_type, :include_blank => false
    end

    f.buttons
  end
end

こんなかんじで、 :asでフォームのselectにして、:collectionにハッシュを突っ込むと、管理画面から追加する画面でキレイにセレクトボックスとして表示されます。
また、 :include_blankをfalseにするとフォームで選択するときに空のものが表示されなくなります。

ハッシュのkeyが日本語名、valueがDBでのintの値になるようにするのですが、なぜわざわざkeyにint、valueに日本語名をいれてからinvertでkeyとvalueを入れ替えているかというと、
・DBからとってきたintの値をハッシュのkeyにいれると日本語がとれるようにする
という用途が多いので、こんなかんじでkeyにintをいれて、SettingsLogicとかで管理しています。


例えば、SettingsLogicで

item_type:
  0: "サカナ"
  1: "肉"
  2: "野菜"

みたいにハッシュで持っておいて、さっきのコードで

item_type = Settings[:item_type].invert

というようにするとセレクトボックスでつかうハッシュがとれます。
で、カスタムなColumnやRowをつくるでやったように、

def item_type_column(attribute)
  column(attribute){ |model|
    type = model[attribute]
    case type
    when 0
      "サカナ"
    when 1
      "肉"
    when 2
      "野菜"
  end
  }
end

というようにカスタムなcolumnをconfig/initializers/active_admin.rb設定しておくと、

# encoding: utf-8
ActiveAdmin.register Item do
  
   ….

  index do
    column :id
    column :item_name
    item_type_column :item_type
    actions
  end
end

みたいにすると管理画面でレコード一覧が表示されるところで、ちゃんとSettingsLogicで設定した日本語で表示されるようになります。
便利ですね!


おまけ

英語ですが、ActiveAdminをいいかんじに使うためのTipsがいろいろ書いてあります。
参考まで。

Mastering ActiveAdmin – Staal Forge

Leave a Reply