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

rails3.2でtwitter-bootstrap

こんばんは、south37です。
未だに風邪気味が治りません。別に熱は無いので活動出来るのですが、喉がずっと痛いのが地味につらいです。ここまで風邪に粘られると思ってなかったのでビビってます。

さて、今日は長らく放置してたYouTubeの動画をコメント付きで視聴出来るサービスに、bootstrapを導入してみようと思います*1

現時点のスクリーンショットを撮ったんですが、こんな感じになっています。

f:id:south37:20140201205030p:plain

ヘッダもタイトルも無いし、文章を小さな文字でダラダラと書いていて美しく無いですね。ここにbootstrapを適用して、カッコ良くしてみたいと思います。

bootstrapとrails

さて、bootstrapをrailsで使うにあたって、アプローチはいくつかあるみたいです。railsはデフォルトでSASSをサポートしている一方、bootstrapで使われるのはLESSである為、そのへんの不一致を何とかしてやる必要があります*2このページのようにrailsでLESSを使えるようにする方法と、このページこのページのようにbootstrapをSASSベースで使えるようにする方法があるみたいですが、今回は後者でいきます。

まず、手順に従ってGemfileに以下を追加します。

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

で、bundle install

bundle install

その後、

@import "bootstrap"

と記入したbase.css.sassを作成し、scaffolds.css.scssは消去。さらに、application.jsに

//= require bootstrap

と追記し、さらにconfig/application.rbのApplicationクラス内に

module SampleApp
  class Application < Rails::Application
    ~
    #AssetPipelineによるコンパイル対象を増やす
    config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
  end
end

と追記。これで、bootstrapがcss、js共に適用されます。

さらに、bodyタグの中身をcontainerに突っ込んでおきます。Glidシステムを使う為です。

<body>
  <div class="container">
    <div class="row">
      <%= yield %>
    </div>
  </div>
</body>

とりあえずここまでやれば下準備はOKですね!

で、ナビゲーションバーを追加したりボタンをbootstrapのものに変えたりしてみました。
http://comment-movie.herokuapp.com/movies?url=xe9pvmZM1mA/

何となくそれっぽくなりましたね!!

検索バーをつけてみたものの今のところ完全にダミーなのでw、今後は機能の実装もしようと思います。

*1:去年ノリで作ったヤツです。某人気動画サービスに似てると思うかもしれませんが、きっと気のせいです。

*2:ちなみに、LESSやSASSはCSSをより構造化して書く為のメタ言語です。JavaScriptにおけるCoffeeScript的な存在と思ってもらえばOKです。コンパイルされる事でCSSファイルが生成されます。