Rails環境にBowerを使って Mobile Angular UI を導入してみる。
※BowerはTwitter社が開発したフロントエンド周りのパッケージマネージャ（Node.jsでいうnpmやJavaでいうGradleみたいな位置付け）
Bowerのインストール
npmを使ってbowerをインストール。（事前にnpmをインストールしておく必要あり）
$ npm install bower
bower-railsのインストール
bower-railsを利用するとRakeタスクでbowerの実行ができるようになる。RailsプロジェクトのGemfileにbower-railsを追加し、bundle install。
gem "bower-rails", "~> 0.9.2"
Bowerで依存ライブラリをインストール
依存ライブラリの定義はJSON形式とBundlerライクなRubyのDSLで定義する方法があり、今回は後者を採用。
rails g bower_rails:initialize
を実行するとプロジェクトルートにBowerfileが、設定ファイルがconfig/initializers/bower_rails.rbに生成される。
生成されたBowerfileに使用するライブラリを定義する。
asset 'angular' asset 'bootstrap-sass-official' asset 'mobile-angular-ui'
Bowerで利用可能なライブラリはこのサイトで確認可能。
Bowerで依存ライブラリをインストールする↓
rake bower:install ... bower angular#* not-cached git://github.com/angular/bower-angular.git#* bower angular#* resolve git://github.com/angular/bower-angular.git#* bower mobile-angular-ui#* not-cached git://github.com/mcasimir/mobile-angular-ui.git#* bower mobile-angular-ui#* resolve git://github.com/mcasimir/mobile-angular-ui.git#* bower bootstrap-sass-official#* not-cached git://github.com/twbs/bootstrap-sass.git#* bower bootstrap-sass-official#* resolve git://github.com/twbs/bootstrap-sass.git#* bower mobile-angular-ui#* download https://github.com/mcasimir/mobile-angular-ui/archive/1.2.0-beta.11.tar.gz bower bootstrap-sass-official#* download https://github.com/twbs/bootstrap-sass/archive/v3.3.4.tar.gz bower angular#* download https://github.com/angular/bower-angular/archive/v1.3.15.tar.gz bower bootstrap-sass-official#* extract archive.tar.gz bower mobile-angular-ui#* extract archive.tar.gz bower bootstrap-sass-official#* mismatch Version declared in the json (3.3.3) is different than the resolved one (3.3.4) bower angular#* extract archive.tar.gz bower bootstrap-sass-official#* resolved git://github.com/twbs/bootstrap-sass.git#3.3.4 bower mobile-angular-ui#* resolved git://github.com/mcasimir/mobile-angular-ui.git#1.2.0-beta.11 bower angular#* resolved git://github.com/angular/bower-angular.git#1.3.15 bower jquery#>= 1.9.0 not-cached git://github.com/jquery/jquery.git#>= 1.9.0 bower jquery#>= 1.9.0 resolve git://github.com/jquery/jquery.git#>= 1.9.0 bower jquery#>= 1.9.0 download https://github.com/jquery/jquery/archive/2.1.4.tar.gz bower jquery#>= 1.9.0 extract archive.tar.gz bower jquery#>= 1.9.0 resolved git://github.com/jquery/jquery.git#2.1.4 bower bootstrap-sass-official#* install bootstrap-sass-official#3.3.4 bower mobile-angular-ui#* install mobile-angular-ui#1.2.0-beta.11 bower angular#* install angular#1.3.15 bower jquery#>= 1.9.0 install jquery#2.1.4 bootstrap-sass-official#3.3.4 bower_components/bootstrap-sass-official └── jquery#2.1.4 mobile-angular-ui#1.2.0-beta.11 bower_components/mobile-angular-ui angular#1.3.15 bower_components/angular jquery#2.1.4 bower_components/jquery
これでvendor/assets/bower_components以下にBowerfileで定義したライブラリがインストールされる。
Railsの設定
application.jsやapplication.cssに
//= require mobile-angular-ui //= require mobile-angular-ui/dist/js/mobile-angular-ui.gestures
*= require mobile-angular-ui *= require mobile-angular-ui/dist/css/mobile-angular-ui-base.min *= require mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min
と記載すればJSやCSSがロードされるようになる。
（mobile-angular-ui.gesturesやbase,desktopのcssはdistのパスを定義しないとロードされない？）
