railsのactive_adminで作る管理画面

railsには簡単に管理画面を作れるライブラリactive_adminがあります。
インストールの仕方から簡単にブログを作るところまで解説していきます。

active_adminのインストール

Gemfileにライブラリ名を書きbundleでインストールします。

$vi Gemfile

～略～
gem 'activeadmin'
～略～

$bundle install

これでライブラリのインストールは完了です。

基本的な使い方

Railsにactive_adminをインストールします

$rails g active_admin:install

最後に

========================================
Some setup you must do manually if you haven't yet:

  1. Setup default url options for your specific environment. Here is an
     example of development environment:

       config.action_mailer.default_url_options = { :host => 'localhost:3000' }

     This is a required Rails configuration. In production it must be the
     actual host of your application

  2. Ensure you have defined root_url to *something* in your config/routes.rb.
     For example:

       root :to => "home#index"

  3. Ensure you have flash messages in app/views/layouts/application.html.erb.
     For example:

       
<%= notice %>
       
<%= alert %>

  4. If you are deploying Rails 3.1 on Heroku, you may want to set:

       config.assets.initialize_on_precompile = false

     On config/application.rb forcing your application to not access the DB
     or load models when precompiling your assets.
=================================================

が表示されるのでWeblickで動かすときは1をenviroment.rbに記述します。
そして、データベースを準備して

$rake db:migrate

完了です。

管理画面に入る

管理画面でのURLは『ルートドメイン/admin』になります。
例：ローカルの環境の場合
http://localhost:3000/admin
初期のIDとPASSは
ID:[email protected]
PASS:password
になります。
これで管理画面を見れるようになります。

簡単ブログを作ってみる

activeadminを使って簡単なブログ管理サイトを作ってみます。

下準備

まずは基本構造作り

$rails new blog

activeadminのインストール

$vi Gemfile

～略～
gem 'execjs'
gem 'therubyracer'
gem 'activeadmin'
～略～

execjs,therubyracerはエラーを防ぐために書いています。

$bundle install

これで下準備は完了です。

activeadminのインストール

先ほどの解説と同じように

$rails g active_admin:install

$rake db:migrate

で完了です。

modelの準備

blogのデータベースを準備します。
今回はカテゴリを選ぶ簡単なブログの構造にします。
・ブログを投稿していくデータベース

$rails g model blog title:string genre_id:integer description:text 

・カテゴリを投稿するデータベース

$rails g model genre name:string

データベースを作ります。

$rake db:migrate

1対多の関係があるのでblogのmodelにbelongsを追加します。

$vi app/model/blog.rb

class Blog < ActiveRecord::Base
  belongs_to :genre
end

を追加します。

activeadminで使えるようにする。

activeadminで管理できるようにします。

$rails g active_admin:resource blog
$rails g active_admin:resource genre

で管理できるようになります。
あとは、管理画面から入って

左上のBlogsから記事の投稿、Genreからカテゴリの投稿が可能になっています。

ブログ記事を表示させる

controllerでviewを作成します。

$rails g controller blog index show

コントローラーの定義を行います。

$vi app/controller/blog_controller.rb

データベースBlogからデータを読み込みます。

def index
 @blogs = Blog.all
end

showページでは個別ページのデータを読み込ませます。

def show
 @blog = Blog.find(params[:id])
end

・indexページを製作します。

$vi app/views/blog/index.html.erb

<% @blogs.each do |blog| %>
<div class="blog">
<h2><%= blog.title %></h2>
<p><%= truncate(blog.description) %><br />
<a href="/blog/<%= blog.id %>">さらに詳しく</a>
</p>
</div>
<% end %>

truncateははじめの30文字だけを表示してくれる関数です。
・showページを製作します。

<h2><%= @blog.title %></h2>
<p><%= @blog.description %></p>

・最後にrouteの設定を行います。
config/routes.rbにトップページを定義します。

$vim config/routes.rb

下記を記述します。

root to: "blog#index", as:"blog"
resources :blog

これで簡単なブログを表示させるプログラムの準備は完了です。
あとは、css等を使ってデザインすることで、素敵なサイトを作っていくことができます。

番外編：active_adminの変更

タイトルバーの表示を日本語に変更

active_adminの管理画面内部のタイトルバーを日本語表示に変更させます。

$vi app/admin/blog.rb

日本語を表示させるために、utf-8を入れます。

# -*- coding: utf-8 -*-
ActiveAdmin.register Shop do
 index do
   column :id
   column "タイトル",:name
   column "詳細",:description
   column "カテゴリ",:genre
end

投稿フォームを変更

管理画面内部のデータ投稿フォームを変更します。

 form :html => { :enctype => "multipart/form-data" } do |f|
  f.inputs "Details" do
   f.input :title
   f.input :genre
   f.input :description
  end
  f.buttons
 end

※carrierwaveを使って画像をアップロードできるよう（詳しく）にしたら、modelにimageカラムを追加し
下記のようにフォームを作ることでimageを追加できるようにできます。

f.input :image,:as=> :file

で画像追加ができるフォームにできます。