Active Adminを使用したバックエンドの追加

Created by Rasmus Kjellberg / 翻訳者: Nana Matsuoka

このガイドは アプリ開発ガイドに沿って、Rails Girls appをすでに構築していることを前提としています。

Active AdminはRuby on Railsのプラグインであり、管理画面のインターフェイスを生成します。このプラグインによって一般的なビジネスアプリケーションのパターンが抽象化され、開発者は、見た目がよく、洗練されたインターフェイスを非常に少ない労力で実装することができます。Active Adminについて、詳しくはこちらをご覧ください。

「Active Admin」gemを追加

Gemfileを開き、以下の行を追加します。

gem 'devise'
gem 'activeadmin', github: 'activeadmin'
gem 'inherited_resources', github: 'activeadmin/inherited_resources'

gemをインストールするために、以下のコマンドを実行します。

bundle install

bundleの更新後、以下のコマンドでインストーラーを実行します。

rails generate active_admin:install

このインストーラーの実行によって、Active Adminで使用されるデフォルトを設定するための初期設定ファイルと、すべての管理設定を行うための新たなフォルダがapp/admin下に生成されます。

データベースをマイグレートし、サーバーを起動します。

rake db:migrate
$ rails server

最初の管理者アカウントの作成

Railsコンソールを開き、AdminUserモデルに紐づく新規ユーザーを作成します。

rails console
irb(main):001:0> AdminUser.create(:email => 'admin@railsgirls.com', :password => 'password123', :password_confirmation => 'password123')

以下のような表示がされるはずです。

# (0.3ms)  begin transaction
# SQL (0.4ms)  INSERT INTO "admin_users" ...
# (0.9ms)  commit transaction

exitとコマンドを打つことで、簡単にコンソールセッションを終了できます。

irb(main):002:0> exit

管理画面へのアクセス

http://localhost:3000/admin にアクセスし、先ほど作成した認証情報でログインします。

見てください!新しいActive Adminダッシュボードにアクセスできました。

バックエンドに「Ideas」を追加

Ideaモデルを Active Admin に登録するためには、以下を実行します。

$ rails generate active_admin:resource Idea

管理画面を更新すると、ナビゲーションにIdeasが表示されます。

「Idea」を任意のモデルに置き換えて、そのモデルを Active Admin に登録することもできます。

ストロングパラメータの設定

モデルを更新する際に、ActiveModel::ForbiddenAttributesError in Admin::IdeasController#update というエラーが発生するのを防ぐため、permit_params メソッドを使用して、変更可能な属性を定義する必要があります。

app/admin/idea.rb ファイルを開き、 :name:description:picturepermit_params に追加します。

ActiveAdmin.register Idea do
  permit_params :name, :description, :picture
end

ユーザーの “new”、”edit”、 “destroy” を削除する

管理者でないユーザーによる更新を防止したい場合には、ルーティングファイルを編集し、”index”と”show”のみを許可することで簡単にこの問題を解決することができます。config/route.rbonly: [:show, :index]を追加します。

resources :ideas, only: [:show, :index]

フロントエンドコードから、次のような、使用できなくなったリンクを削除するのを忘れないでください。 <%= link_to 'New Idea', new_idea_path %>, <%= link_to 'Edit', edit_idea_path(idea) %>, <%= link_to 'Destroy', idea, method: :delete, data: { confirm: 'Are you sure?' } %>

さあ見てください!新しい管理画面からアイデアを管理できるようになりました!

次は?