開発メモ: Rails 4.2.0 にTwitter Bootstrapの導入

概要環

環境

Ruby 2.1.0p0
Rails 4.2.0
nginx
unicorn
twitter-bootstrap-rails 3.2.0

1. Twitter Bootstrapのインストール方法

Bootstrpeの公式ページからファイルをダウンロードし、Railsに追加する方法を説明します。

まずBootstrapのダウンロードページからBootstrapのソースコードをダウンロードします。

そして、解凍し、dist内の下記のファイルをRailsプロジェクトにコピーします。

コピー元	コピー先
dist/css/bootstrap.min.css	vendor/assets/stylesheets/.
dist/js/bootstrap.min.js	vendor/assets/javascripts/.
dist/fonts	vendor/assets/.

そして、Railsに追加したbootstrapを読み込ませるようにします。

# app/assets/javascripts/application.js

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

#app/assets/stylesheets/application.css

 ...
 *
 *= require bootstrap.min
 *= require_tree .
 *= require_self
 */

4. カスタマイズ（ViewファイルへのTwitter Bootstrapの適用）

では、ここからはカスタマイズをして行きましょう。
基本的に、それぞれのカスタマイズ項目は独立していますが、少し依存関係がある箇所もありますのでご注意ください。

これは、適切なTwitter Bootstrap用のclass値が設定されていないためです。

先ほどの少しだけソースコードを見てみましょう。

table table-stripedやbtn btn-primaryなどTwitter Bootstrapのclass値が指定されていますね。
実際にどのようなclass値が使えるかは公式ドキュメントを参照して下さい。

# app/views/products/index.html.erb
...
class

="table table-striped"> ... <%= link_to t('.new', :default => t("helpers.links.new")), new_product_path, :class => 'btn btn-primary' %>

5. カスタマイズ（サクセス、エラーメッセージの表示）

実は、現在２つ問題があります。
・データを作成/更新したときにサクセスメッセージとエラーが発生したときにエラーメッセージが表示されない
・フォームでエラーメッセージ表示されない

１つ目について、ここで解消します。２つ目は次の「simple_formとの連携」で解消します。
サクセスメッセージやエラーメッセージは、flash[:notice]かflash[:error]のどちらかに入ってきます。
また、Twitter Bootstrapでは、アラートは、alert alert-successalert alert-errorで表示させます。
そのため、下記のようなコードを追加します。

# app/views/layouts/application.html.erb
  ...

<% flash.each do |name, msg| %>
  
class

="alert alert-<%= name == "notice" ? "success" : "error" %>"> "close" data-dismiss="alert">× <%= msg %> <% end %> <%= yield %>

6. カスタマイズ（simple_formとの連携: フォーム上でのエラーメッセージの表示）

では、もう１つの問題の、フォーム上でエラーメッセージを表示しましょう。
まず、エラーメッセージを出すために、ModelにValidationを追加します。

# app/models/product.rb
class Product < ActiveRecord::Base
  validates :name,  presence: true
  validates :price, presence: true
end

次に、simple_formを導入します。

# Gemfile
gem 'simple_form'

そして、gemをインストールします。

$ bundle install

$ rails g simple_form:install --bootstrap
      create  config/initializers/simple_form.rb
      create  config/initializers/simple_form_bootstrap.rb
       exist  config/locales
      create  config/locales/simple_form.en.yml
      create  lib/templates/erb/scaffold/_form.html.erb
===============================================================================

  Be sure to have a copy of the Bootstrap stylesheet available on your
  application, you can get it on http://twitter.github.com/bootstrap.

  Inside your views, use the 'simple_form_for' with one of the Bootstrap form
  classes, '.form-horizontal', '.form-inline', '.form-search' or
  '.form-vertical', as the following:

    = simple_form_for(@user, html: {class: 'form-horizontal' }) do |form|

===============================================================================

フォームをsimple_formで書き換えます。

# app/views/products/_form.html.erb
<%= simple_form_for @product, :html => { :class => 'form-horizontal' } do |f| %>
  <%= f.input :name %>
  <%= f.input :price %>

  <div class="form-actions">
    <%= f.submit nil, :class => 'btn btn-primary' %>
    <%= link_to t('.cancel', :default => t("helpers.links.cancel")),
                products_path, :class => 'btn' %>
  </div>
<% end %>

これで、完成です。画面を開き、エラーメッセージを表示させましょう。

もし、simple_formについて、より詳しく知りたい場合は、Railsのgemフォームコードをすっきりさせる simple_form - Rails Webookを参照ください。

サイドバーを追加して行きますが、Twitter Bootstrapでは、

fixed：940pxで横幅が要素の位置が固定される
fluid：ブラウザサイズに応じてと要素が広がる

の２つがあります。

今回は、fixedでサイドバーを追加して行きます。
Twitter Bootstrapでは、下記のような構成でレイアウトを作っていきます。

...
<body>
<div class="container"> 
  <div class="row"> 
    <div class="span8"> 
      ... メインコンンツを記載 ...
    </div>
    <div class="span4"> 
      ... サイドバーコンンツを記載 ...
    </div>
  </div>
</div>
</body>

では、上記の構成を全体のレイアウトファイルに適用させましょう。

# app/views/layouts/application.html.erb
....
<body>
<div class="container">
  <div class="row">
    <% flash.each do |name, msg| %>
      <div class="alert alert-<%= name == "notice" ? "success" : "error" %>">
        <a class="close" data-dismiss="alert">×</a>
        <%= msg %>
      </div>
    <% end %>
    <div class="span8">
      <%= yield %>
    </div>
    <div class="span4">
      <h2>Side bar</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</div>

</body>
</html>

では、サイドバーが追加されたことがわかると思います。

ちなみに、ブラウザの横幅を狭めていくと、サイドバーが下側に移動すると思います。既に、レスポンシブデザインが適用されている証拠です。

可読性を上げるために、headerを外部ファイル化します。
renderメソッドでheaderを呼び出ます。

# app/views/layouts/application.html.erb
...

<%= render 'layouts/header' %>

class

="container">

class

="row">

class

="span8"> ...

では、headerファイルを作ります。
Twitter BootstrapのNavigation Barの項目を参考に作成します。

# app/views/layouts/_haeder.html.erb
<header>
  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-inner">
      <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#">Some Store</a>
        <div class="nav-collapse">
          <ul class="nav">
            <li><%= link_to "Products", products_path %></li>
            <li><%= link_to "Price List" %></li>
            <li><%= link_to "Contact Us" %></li>
            <li><%= link_to "Cart" %></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</header>

また、IEの古いバージョンだとHTML5が上手く動かないので、それに対処するコードを追加します。
さらに、モバイル端末での表示が良くするために、viewportを指定します。

# app/views/layouts/application.html.erb
...
<head>
  <title>TwitterBootstrap</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
...

では、画面にナビゲーションバーが表示されていることを確認しましょう。

参考文献

Bootstrap · The world's most popular mobile-first and responsive front-end framework.
seyhunak/twitter-bootstrap-rails · GitHub

開発メモ

2015年2月8日日曜日

Rails 4.2.0 にTwitter Bootstrapの導入

概要環

環境

1. Twitter Bootstrapのインストール方法

4. カスタマイズ（ViewファイルへのTwitter Bootstrapの適用）

5. カスタマイズ（サクセス、エラーメッセージの表示）

6. カスタマイズ（simple_formとの連携: フォーム上でのエラーメッセージの表示）

7. カスタマイズ（Sidebarの追加）

8. カスタマイズ（NavigationBarの追加）

参考文献

0 件のコメント:

コメントを投稿

ブログアーカイブ