Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
26
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

Organization

Rails4でbowerでJavaScriptを管理する - bower-rails (Bootstrap3を入れてみる)

bowerを使ってみたい

RailsでJavaScriptライブラリを管理する時、どうしたら良いのか悩んでいた。bowerを使いたい。。
がそのままbower installしてbower_componentsできても、asset pipelineにうまく乗ってくれるかわからん。
asset pipeline難しすぎ;;

bower-rails がすべてを解決してくれるらしい!

前提

  • bowerはインストール済
  • いろいろやらかしてよいrailsのディレクトリは用意済
  • railsはbundlerでインストールした

bower-railsをインストール

Gemfileを編集

以下を追加。

gem "bower-rails"

bundle updateする。

bower-railsの初期設定

$ bundle exec rails g bower_rails:initialize

以下の設定ファイルが作られる。
- Bowerfile
- config/initializers/bower_rails.rb

最初、bower_rails:initializeしないで、エディタでBowerfile作ってみたら、エラー吐いて止まった。。

インストールするライブラリを決める(Bowerfileの編集)

とりあえずbootstrap入れてみる。

asset 'bootstrap'

bower-railsの実行(install)

$ bundle exec rake bower:install

bowerでのインストールが走る。行き先はvendor/assets/bower_components

今回はbootstrapをインストールしたので、一緒に必要なjqueryも入ってくるみたい。

初回インストールの場合、bower.jsonも作られる。

Rails側の読み込み設定

assetsとしては読み込み対象になってる場所に入ってるらしく、config設定はいらない。
css, javascriptの読み込み設定のみ。

css (app/assets/stylesheets/application.css)

以下を追加。

*= require bootstrap

javascript (app/assets/javascripts/application.js)

以下を追加。

//= require bootstrap

bootstrap用のlessを使えるようにする

Gemfileにlessが入ってないと、エラーになるので、以下のgemも追加する。
rubyracerはrailsのデフォルトでコメントアウトされてるので、コメント外せばOK

gem "less"
gem "therubyracer"

bundle update 忘れずに。

おまけ(動作確認)

rails newしたばかりのrails appで試していたので、ちゃんとスタイル適用が成功したところがわからない。
静的ページ1個作って動作確認したところを書いとく。
(RailsTutorialの静的ページのところ)

$ bundle exec rails g controller StaticPages home help --no-test-framework

出来上がったapp/views/static_pages/home.html.erbを編集してbootstrapのスタイルが適用されているかチェック。
glyphiconの読み込みチェックもすると、ちゃんとasset pipelineに読み込まれてることがわかって良い感じ。

<a href="#" class="btn btn-success">
  <i class="glyphicon glyphicon-plane"></i>
  <span> ファイルをアップロード</span>
</a>

bundle exec rails sでサーバー起動。
http://localhost:3000/static_pages/home
でちゃんとボタンとglyphiconが読み込まれていればOK

bootstrap jsの読み込みも確認したければ、ドロップダウンとか書いてみると良い。(読み込まれてない場合ドロップダウンクリックしても何も起きない)

<ul class="nav nav-tabs" role="tablist">
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
      <li>ドロップダウン1</li>
      <li>ドロップダウン2</li>
    </ul>
  </li>
</ul>

愚痴

ほんとは Middleman + bower やりたかったんだけど、そっちでもasset pipeline機構に阻まれて、結局解決できずでじゃあrailsはどないなっとんねん?と思って調べてたら以下の参考リンク達に救われた。。
middleman では bootstrap css の読み込みまではできたけど、 glyphicon のロードがうまくできず、挫折・・


参考リンク

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
26
Help us understand the problem. What are the problem?