Rails4でサイト構築をする – Bootstrap導入編

[Rails4でサイト構築をする]
Rails環境構築編
Scaffold利用編
Bootstrap導入編
WYSIWYG導入編
– CSV出力機能編
スクレイピング機能編(nokogiri)
– 非同期処理導入編(delayed_job)
– デプロイ環境構築編(capistrano3)
上記を毎週1つずつ出す予定

Ogawaです。今回はBootstrapを使ってデザインを付けてみたいと思います。
※タイトルにRailsと入っていますが、RailsでしかBootstrapが使えないということは全くありません。
Bootstrapを使う前にまず、対応ブラウザの確認は必ず行ってください

Bootstrapの利点と欠点

Bootstrapを使う前にBootstrapにどのような利点や欠点があるのか考えてみたいと思います。
・そもそもBootstrapはHTMLやCSSなどのテンプレートをまとめたものです。
既にCSSなどはある程度組まれているため、1からHTMLを作るよりも簡単にきれいなサイトができます。
しかし、その反面、CSSがある程度決まっているので、オリジナリティのあるものを作る場合はあまりBootstrapの効果は期待できません。
・BootsrapはCSS3の機能を多く使っています。
そのため、CSS3の対応がイマイチなブラウザに対応しなければならない場合は、
Bootstrapを使う利点が薄れてしまいます。
・Bootstrapの多くは、レスポンシブデザインに対応しています。

まとめると以下のようになります。
Bootstrapの利点
・ Bootstrapのテンプレートに沿う形であれば速くできる
・ レスポンシブデザインが簡単に実現できる

Bootstrapの欠点
・ デザイン重視やUI重視のサイト(特にB to C系のサイトは見た目が重要なのでデザイナーが作ったデザインからHTMLを起こすことが多い)では使えない
・ 古いブラウザの対応が必要の場合は使えなかったりする。IE7とか

Bootstrapをダウンロードする

Railsの場合、Bootstrapをダウンロードするのは簡単です。
Gemfileに以下を追加します。

gem 'twitter-bootstrap-rails'
または
gem 'twitter-bootstrap3-rails'

上は2系で下は3系のBootstrapが入ります。

今回は3系のBootstrapを使います。

Bootstrapファイルの作成

CSSとかJSを作成する

rails generate bootstrap:install static

レイアウトを作成する

rails g bootstrap:layout application fluid #レスポンシブ
または
rails g bootstrap:layout application fixed

[結果]
tech8
デザインがつきました。

Bootstrapで用意されているCSSを使ってサイトのデザインを作る

http://getbootstrap.com/
上のサイトを参考にしてフォームなどのデザインを整えていきます。
tech9

こんな感じにフォームを修正
app/views/artiles/_form.html.erb

<%= form_for(@article, :html => {:class => "form-horizontal", :role=>"form"}) do |f| %>
  <% if @article.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@article.errors.count, "error") %> prohibited this article from being saved:</h2>

      <ul>
      <% @article.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="form-group">
    <%= f.label :title, class: 'col-sm-2 control-label' %>
    <div class="col-sm-10">
    <%= f.text_field :title %>
    </div>
  </div>
  <div class="form-group">
    <%= f.label :content, class: 'col-sm-2 control-label' %>
    <div class="col-sm-10">
    <%= f.text_area :content %>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
    <%= f.submit '登録', class: 'btn btn-default' %>
   </div>
  </div>
<% end %>

その他のBootstrap

WrapBootstrap(有料)
https://wrapbootstrap.com/
Bootswatch(MITライセンス)
http://bootswatch.com/

BootstrapのCSSを上書きする場合の参考


3年間かけて培ったWebシステム開発におけるHTML/CSSコーディングまとめ

以前に書いた記事です。

まとめ

Bootstrapは簡単にそれなりにかっこいいデザインを作ることができます。
1からHTMLを作るよりも遥かにコストが抑えられるので、
管理画面等では、お客さんと相談して積極的に導入するとよいと思います。
また、BootstrapはHTMLやCSSの勉強にも良いです。
各UIパーツの作り方やクラスの付け方、HTMLの構造をどのように作っているかなど、
1度ちゃんと見てみるとかなり勉強になります。

Ruby on RailsによるWEBシステム開発、Android/iPhoneアプリ開発、電子書籍配信のことならお任せください この記事を書いた人と働こう! Ruby on Rails の開発なら実績豊富なBPS

週刊Railsウォッチ

インフラ

BigBinary記事より

ActiveSupport探訪シリーズ