読者です 読者をやめる 読者になる 読者になる

Bootstrap3ベースの管理画面を作る

  • ruby 2.1.1
  • Rails 4.1.0
  • bootstrap-sass 3.1.1.1
  • devise 3.2.4

まずは、Railsアプリケーションの作成。

  • irkitというプロジェクト名
  • unit testをスキップ
  • データベースはsqlite3
  • bundle installを行わない
rails new irkit -T -d sqlite3 --skip-bundle
cd irkit

とりあえず、git管理下に置きましょう。

git init
git add .
git commit

Gemfileに下記を追加します。

# 認証処理
gem 'devise', '~> 3.2.4'

# bootstrap
gem 'bootstrap-sass', '~> 3.1.1.1'
gem 'bootstrap-sass-extras', '~> 0.0.6'

vendor/bundle以下にbundle install。

bundle install --path=vendor/bundle

.gitignore に下記を追加します。

/vendor/bundle

また、一旦gitにコミットします。

git add .
git commit

deviseの設定を行います。

rails generate devise:install
rails generate devise user
bundle exec rake db:migrate

rootページが必要なので、controllerを作成します。

rails generate controller welcome index

config/routes.rb にコメントがたくさん書いてあるのを消して、下記のようにします。

Rails.application.routes.draw do

  root 'welcome#index'

  devise_for :users

  get 'welcome/index'
end

app/controllers/application_controller.rb を下記のようにします。

class ApplicationController < ActionController::Base
  # Prevent CSRF attacks by raising an exception.
  # For APIs, you may want to use :null_session instead.
  protect_from_forgery with: :exception

  before_action :authenticate_user!
end

とりあえず、一回サーバを起動してみます。

rails s

http://localhost:3000/ にアクセスして、 http://localhost:3000/users/sign_in にリダイレクトされ、認証画面が出て来れば、とりあえずOKです。

次に、bootstrapの設定です。
app/assets/stylesheets/application.css を application.css.scss にリネームし、下記を追加します。

@import "bootstrap";

app/assets/javascripts/application.js のrequire部分を下記のようにします。

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require_tree .

bootstrapの設定を行います。
app/views/layouts/application.html.erb がコンフリクトしていると言われますが、y で。

rails g bootstrap:install
rails g bootstrap:layout application fluid

エラーメッセージがぎりぎりに出てくるのが嫌なので、application.css.scss で全体的にずらします。

body {
  padding-top: 70px;
}

というより、deviseの画面でメニューとかが出てるのがおかしいので、layoutを変えます。
app/controllers/application_controller.rb を下記のように変更します。

class ApplicationController < ActionController::Base
  # Prevent CSRF attacks by raising an exception.
  # For APIs, you may want to use :null_session instead.
  protect_from_forgery with: :exception

  before_action :authenticate_user!

  layout :layout_by_resource

  protected

  def layout_by_resource
    if devise_controller?
      "devise"
    else
      "application"
    end
  end
end

app/views/layouts/devise.html.erb を作成します。
基本的には、app/views/layouts/application.html.erb をコピペ。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <%= viewport_meta_tag %>
    <title><%= content_for?(:title) ? yield(:title) : "Irkit" %></title>
    <%= csrf_meta_tags %>

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js" type="text/javascript"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.3.0/respond.js" type="text/javascript"></script>
    <![endif]-->

    <%= stylesheet_link_tag "application", :media => "all" %>

    <!-- For third-generation iPad with high-resolution Retina display: -->
    <!-- Size should be 144 x 144 pixels -->
    <%= favicon_link_tag 'apple-touch-icon-144x144-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '144x144' %>

    <!-- For iPhone with high-resolution Retina display: -->
    <!-- Size should be 114 x 114 pixels -->
    <%= favicon_link_tag 'apple-touch-icon-114x114-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '114x114' %>

    <!-- For first- and second-generation iPad: -->
    <!-- Size should be 72 x 72 pixels -->
    <%= favicon_link_tag 'apple-touch-icon-72x72-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '72x72' %>

    <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
    <!-- Size should be 57 x 57 pixels -->
    <%= favicon_link_tag 'apple-touch-icon-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png' %>

    <!-- For all other devices -->
    <!-- Size should be 32 x 32 pixels -->
    <%= favicon_link_tag 'favicon.ico', :rel => 'shortcut icon' %>
    <%= javascript_include_tag "application" %>
  </head>
  <body>

    <div class="container">
      <%= bootstrap_flash %>
      <%= yield %>

      <footer>
        <p>&copy; Company 2014</p>
      </footer>

    </div> <!-- /container -->

  </body>
</html>

とりあえず、もう一回コミットしておく。

git add .
git commit

deviseのviewをファイルに出力しておきます。

rails generate devise:views

ためしに、app/views/devise/sessions/new.html.erb を下記のように書き換えます。
(基本的に、 http://getbootstrap.com/examples/signin/ のパクリ)

<%= form_for(resource, as: resource_name, url: session_path(resource_name), html: {role: 'form', class: 'form-signin'}) do |f| %>
  <h2>Sign in</h2>
  <%= f.email_field :email, autofocus: true, class: 'form-control', required: true, placeholder: 'Email address' %>
  <%= f.password_field :password, class: 'form-control', required: true, placeholder: 'Password' %>

  <% if devise_mapping.rememberable? -%>
    <div><%= f.check_box :remember_me %> <%= f.label :remember_me %></div>
  <% end -%>

  <div><%= f.submit "Sign in", class: 'btn btn-lg btn-primary btn-block' %></div>

  <%= render "devise/shared/links" %>
<% end %>

なんとなく、それっぽくなります。

f:id:suzaku114:20140505014921p:plain

あと、jsとcssがバラバラにダウンロードされると、ログがウザいので、 config/environments/development.rb を変更します。

config.assets.debug = false

適当なモデルを作成します。

rails g scaffold command name:string json:text
bundle exec rake db:migrate
rails g bootstrap:themed commands

app/views/layouts/application.html.erb のli部分を下記に変更します。
ついでに、"col-md-3"で作成されているサイドバー部分を削除します。

<li><%= link_to "command", commands_path %></li>

あと、ボタンの文字色が変なので、app/assets/stylesheets/scaffolds.css.scss にある下記のaタグの部分を削除します。

a {
  color: #000;
  &:visited {
    color: #666;
  }
  &:hover {
    color: #fff;
    background-color: #000;
  }
}

なんとなくデータを入れると、それっぽく見えます。

f:id:suzaku114:20140505151406p:plain

とりあえず、ここまでの作業時点のタグは下記の通り。 https://github.com/noboru-i/irkit/tree/hatena-20140505

メモ取りながら開発するって、凄い疲れる。。。

Ruby on Rails 4 アプリケーションプログラミング

Ruby on Rails 4 アプリケーションプログラミング

RailsによるアジャイルWebアプリケーション開発 第4版

RailsによるアジャイルWebアプリケーション開発 第4版