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:admin@example.com
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

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


コメント

このような有益なウェブサイト!大感謝!あなたのサイトを訪れて楽しい時間をありがとう。それは本当にすてきな情報で満たされたこのようなウェブサイトを理解する喜びです。ありがとう!

2012年5月29日9:45 AM | website seo

コメントする