forestec

勉強した内容をつらつらと備忘録として記していきます。

RailsのActive Adminで簡単な管理画面を作ってみた話

Ruby Active Admin Ruby on Rails

最近Railsを一度触ってみたかったので簡単なブログサービスを作ってました。
その中で管理画面の作成にActive Adminを使ったので備忘録として残しておこうと思います。

環境

Active Adminとは

ブログとかの編集画面(記事の作成とか編集とか)みたいなものをほぼ自動で作成してくれるruby gemのことです。
すごく便利で導入もかなり簡単。

ブログとかなら記事を管理するModelを作成⇨Active Admin導入ってすると、
記事の新規作成、更新、削除の管理画面がたちまち完成するといった感じです。

今回の備忘録

導入の細かい話はググればいくらでも出てくるので特にしません。

今回ブログを作る上で、
このはてなブログやQiitaのようにMarkDownでの記事の記述と、
それを編集画面でリアルタイムプレビュー出来る機能を実装したかったのでデフォルトの管理画面のカスタマイズを行いました。
その際の備忘録です。

自分は記事を管理するarticleというModelを作成してそれを管理画面で編集するようにしているのでその前提で話を進めます。

formをカスタマイズ

記事の新規作成画面と編集画面では共通のformが使用されているのでそれをカスタマイズします。
まずはapp/adminのarticle.rbファイルを修正します。
Active Adminを導入した際に自動生成されているはず。
以下の一行を追加

form partial: "form"

"form"と指定しているのがファイル名なので、
app/views/admin/article配下に_form.erbファイルを作成します。
以下はformのテンプレートです。

<%= semantic_form_for [:admin, @article], builder: ActiveAdmin::FormBuilder do |f| %>
  <fieldset class="inputs">
    <ol>
      <%= f.input :name %>
    </ol>
  </fieldset>

  <fieldset class="actions">
    <ol>
      <li><%= f.submit "保存" %></li>
      <li class="cancel"><%= link_to("取り消す", admin_users_path)%></li>
    </ol>
  </fieldset>
<% end %>

inputsクラス内に必要なinput項目を追加していくだけです。
<input>タグで記述することも可能です。

一覧画面をカスタマイズする場合

一覧画面のカスタマイズ方法も記載しておきます。
先程と同様にapp/adminのarticle.rbファイルを修正します。
formのカスタマイズと同じくerbファイルを作成して読み込ませることもできますが、
一覧画面に表示する項目の変更だけしたい場合などは以下の方法でも可能です。

  index do
    column :id
    column :published
    column :created_at
  end

index do 〜 endの間に表示したいカラムを指定して表示項目を変更できます。

最後に

Active Admin初めて触りましたが導入までがすごく簡単で早いです。
Railsは優秀なgemがたくさんあって驚きました。
ただカスタマイズの仕方については少し苦戦したので書き残しました。。。
他にもactionなども自前のControllerでカスタマイズしたり出来るようです。