もた日記

くだらないことを真面目にやる

トップ > Ruby on Rails > Railsメモ(5) : Bootswatch(Bootstrap)で見た目を変更する

Railsメモ(5) : Bootswatch(Bootstrap)で見た目を変更する

Ruby on Rails

手っ取り早く見た目を良くするならBootstrapだが、今回は色々なテーマが選択できるBootswatchを使用してみる。

f:id:wonder-wall:20150805234534p:plain

RailsでBootswatchを使うgemとしては、

があるみたいだが、Star数などの多いmaxim/bootswatch-railsを使用してみる。

READMEを見てみると、

が必要のようなので、まずこれを使えるようにする。

bootstrap-sass

Gemfileにbootstrap-sassを追加してbundle installする。sass-railsも必要らしいがデフォルトで記述があるので追加は不要。

gem 'bootstrap-sass', '~> 3.3.5'

bootstrap-sassでは拡張子が.scssのapplication.scssを編集するため、下記コマンドでリネームする。

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

次にapplication.scssの

 *= require_tree .
 *= require_self

を削除して、かわりに

// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";

を追加する。

続いて、JavaScriptの機能も使用するためapp/assets/javascripts/application.jsのjqueryより後ろにbootstrap-sprocketsを追加する。

//= require jquery
//= require bootstrap-sprockets

これでbootstrap-sassの設定は完了。

bootswatch-rails

Gemfileにbootswatch-railsを追加してbundle installする。

gem 'bootswatch-rails'

そしてapplication.scssを以下のように編集する。ここで使用するテーマ名を選択するが、READMEにあるCeruleanを試すことにする。

// Example using 'Cerulean' bootswatch

//Import bootstrap-sprockets
@import "bootstrap-sprockets";

// Import cerulean variables
@import "bootswatch/cerulean/variables";

// Then bootstrap itself
@import "bootstrap";

// Bootstrap body padding for fixed navbar
body { padding-top: 60px; }

// And finally bootswatch style itself
@import "bootswatch/cerulean/bootswatch";

// Whatever application styles you have go last
@import "base";

編集後サーバーを再起動してアクセスしてみるが、下記エラーが表示されてうまくいかない。

ActionView::Template::Error (File to import not found or unreadable: base.
Load paths:
　…省略…

調べたところ最後の@import "base";は追加したいスタイルがなければ不要なのでコメントアウトする。
これでbootswatch-railsの設定は完了。

ビューの編集

Bootswatchが適用されているか確認するためにビューを編集する。
最初にapp/views/layouts/application.html.erbのbodyタグ内を編集してNavbarを追加する。

　…省略…
<body>
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <%= link_to 'Billboard', root_path, class: 'navbar-brand' %>
      </div>
    </div>
  </div>
  <div class="container">
    <%= yield %>
  </div>
</body>
　…省略…

次にapp/views/songs/index.html.erbのtableタグにclass属性を追加する。

<table class="table table-striped table-hover">
　…省略…
</table>

これで全ての設定が完了。ブラウザでアクセスすると下図のようにBootswatchのテーマが適用された画面が表示される。


f:id:wonder-wall:20150806220545p:plain


テーマを変えたくなったら、テーマ名が記述してる下記2行を別のテーマ名に変更する。
図はテーマをCeruleanからDarklyに変更した結果。

　…
@import "bootswatch/darkly/variables";
　…
@import "bootswatch/darkly/bootswatch";
　…


f:id:wonder-wall:20150806220600p:plain

パーフェクト Ruby on Rails

パーフェクト Ruby on Rails