前回、Herokuへのアップロードまで行いましたが、今回は画面を
ブラッシュアップしていきます。
Twitter Bootstrap（以下、Bootstrap）を導入する事で簡単に見栄えの
良いものが作れます。
BootstrapとはCSSのスレームワークでデザインに便利な
スタイルやフォント、JavaScript、アイコンが用意されています。
様々なOS（スマフォも）、ブラウザに対応しているので
Bootstrapを使うだけで様々なものに対応できます。
便利な機能としてはグリッドシステム（画面を等分に分割して簡単に
レイアウトできる思想、機能）や画像ファイルを自動で拡大・縮小する
機能などがあります。
勿論、タブなんかも簡単に作れます。
■1.ダウンロード
こちらからダウンロードします。今回は3.3.2
http://getbootstrap.com/getting-started/#download
■2.各種ファイルの移動
ダウンロードが終わったらダウンロードしたファイルを
プロジェクト内の下記の位置に移動します。
dist/css 配下 → vendor/assets/stylesheets
dist/fonts 配下 → vendor/assets/fonts
dist/js 配下 → vendor/assets/javascripts
■3.各種ファイルの読込
railsではSprocketsというアセットパイプラインを行うライブラリを
使用しています。
アセットパイプラインはJavaScriptやCSSを結合、圧縮して読込む
事でリクエスト量を減らす機能です。
このSprocketsの設定が必要になります。
プロジェクト配下の下記ファイルに緑の文字部分を追加して下さい。
[app/assets/javascripts/application.js]
//= require turbolinks
//= require_tree .
//= require bootstrap
//= require_tree .
//= require bootstrap
[app/assets/stylesheets/application.css]
*= require bootstrap.min
*= require_tree .
*= require_self
*= require_tree .
*= require_self
こうする事でBootstrapがhtmlに対して読み込まれます。
■4.クラスの指定
勿論、読込んだだけでは意味が無いのでCSSのクラスを指定し
反映させます。
追加したのは下記の緑の部分です。
[index.html.erb]
<h1>Listing tasks</h1>
<table class="table table-striped">
<thead>
<tr>
<th>Title</th>
<th>Priority</th>
<th>Start</th>
<th>End</th>
<th>Location</th>
<th>Person</th>
<th colspan="3"></th>
</tr>
</thead>
<tbody>
<% @tasks.each do |task| %>
<tr>
<td><%= task.title %></td>
<td><%= task.priority %></td>
<td><%= task.start %></td>
<td><%= task.end %></td>
<td><%= task.location %></td>
<td><%= task.person %></td>
<td><%= task.tag %></td>
<td><%= link_to 'Show', task %></td>
<td><%= link_to 'Edit', edit_task_path(task), :class => 'btn btn-primary' %></td>
<td><%= link_to 'Destroy', task, method: :delete, :class => 'btn btn-warning', data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
</tbody>
</table>
<br>
<%= link_to 'New Task', new_task_path, :class => 'btn btn-primary' %>
<table class="table table-striped">
<thead>
<tr>
<th>Title</th>
<th>Priority</th>
<th>Start</th>
<th>End</th>
<th>Location</th>
<th>Person</th>
<th colspan="3"></th>
</tr>
</thead>
<tbody>
<% @tasks.each do |task| %>
<tr>
<td><%= task.title %></td>
<td><%= task.priority %></td>
<td><%= task.start %></td>
<td><%= task.end %></td>
<td><%= task.location %></td>
<td><%= task.person %></td>
<td><%= task.tag %></td>
<td><%= link_to 'Show', task %></td>
<td><%= link_to 'Edit', edit_task_path(task), :class => 'btn btn-primary' %></td>
<td><%= link_to 'Destroy', task, method: :delete, :class => 'btn btn-warning', data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
</tbody>
</table>
<br>
<%= link_to 'New Task', new_task_path, :class => 'btn btn-primary' %>
修正はわずかですが、反映前と反映後を比較するとかなりイメージが
変わっているのが分かります。
[反映前の画面]
[反映後の画面]
BootstrapはCSSやJavascriptなので、Rails以外への適用もできます。
簡単に見栄えがよくなるので一度使ってみるのをオススメします。