rails3.2でtwitter-bootstrap
こんばんは、south37です。
未だに風邪気味が治りません。別に熱は無いので活動出来るのですが、喉がずっと痛いのが地味につらいです。ここまで風邪に粘られると思ってなかったのでビビってます。
さて、今日は長らく放置してたYouTubeの動画をコメント付きで視聴出来るサービスに、bootstrapを導入してみようと思います*1。
現時点のスクリーンショットを撮ったんですが、こんな感じになっています。
ヘッダもタイトルも無いし、文章を小さな文字でダラダラと書いていて美しく無いですね。ここに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のものに変えたりしてみました。
何となくそれっぽくなりましたね!!
検索バーをつけてみたものの今のところ完全にダミーなのでw、今後は機能の実装もしようと思います。
*1:去年ノリで作ったヤツです。某人気動画サービスに似てると思うかもしれませんが、きっと気のせいです。
*2:ちなみに、LESSやSASSはCSSをより構造化して書く為のメタ言語です。JavaScriptにおけるCoffeeScript的な存在と思ってもらえばOKです。コンパイルされる事でCSSファイルが生成されます。