【Rails】Bootstrapを導入する
エンジニアのみでWebサービスなどを作成した際に困るデザインの部分、こちらをより簡単にしてくれるBootstrapを紹介します。
Bootstrapとは
「Bootstrap」は、HTMLの知識を持った人なら、Webページを簡単に作成できるCSSフレームワークとよばれるツールの中の１つです。
Bootstrapを利用すると、今まで時間のかかっていたレイアウトもすぐにできます。
BootstrapはWebサイトやWebアプリケーションを作成するフリーソフトウェアツール集である。 タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されている。
GitHubで最も人気があり[2]、アメリカ航空宇宙局やMSNBCなどに採用されている。
RubyOnRailsでBootstrapを使用するには？
最初の項目で引用している通りにBootstrapとはCSSフレームワークの一つ事です。特別なソフトを別に導入したりするわけじゃないので直接導入することも出来ます。
わかってしまえば簡単なんですが初めて導入する場合にここで混乱する事が結構あると思っています。自分も最初はよくわからない事が多くて悩みました。
2015年7月に調べた時点でわかっている導入方法を説明します。
CSSとJavascriptを直接参照する
Bootstrap本体はこちらからダウンロード出来ます。
Bootstrap本家ダウンロード
- ダウンロードしたzipファイルの解凍
- 解凍したフォルダを各対応したフォルダに振り分ける、今回はappフォルダにbootstrapを追加して配置します
・fonts – app/assets/fonts
・css – app/assets/css
・js?- app/assets/js
fontsだけは手動で参照してくれるように設定が必要です
/config/application.rb
# フォント追加
config.assets.paths << "#{Rails}/app/assets/fonts"
CDNを使用して参照する
こちらの参照先もBootstrap本家に書いてあります。
以下のコードをheadタグに追加して下さい。
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
gemを使用する
gemを使用する場合でもBootstrapを設定してくれるgemが複数のあるのでどれにするか検討が必要です。
- twitter-bootstrap-rails
- twitter-bootstrap3-rails
- bootstrap-sass
- sass-bootstrap-defunct
- less-rails-bootstrap
実際にはまだあるかもしれませんがまだ把握が全然出来ていません。個人的には最初の導入時にここでかなり混乱しました。何がどう違うのかは次の記事で説明出来ればと思っていますので今回はbootstrap-sassを使用した場合の設定方法だけを取り上げます。
ちなみに今回はRails4にBootstrapを追加する場合の作業です。
gem 'bootstrap-sass', '~> 3.0.3.0'
//= require bootstrap
*= require bootstrap
最後に
読まれて内容が理解出来た方なら分かっている事かもしれませんが、タイトルにRailsにと書きましたが直接参照系の手順だった場合はRailsに限定されません。当然ただのHTMLでも適応は可能です。
Follow me!
