RailsでTwitter Bootstrapを使う（その2）Bootswatch theme適用


前回Railsの新しいプロジェクトに[Bootstrapを使えるように設定](http://qiita.com/mm36/items/564fe34f57d9f9e3acf5)した後、Bootswatchのthemeも適用しよ〜としたら、色々エラーがあってハマった件。

こちらのURLを参考に、ごにょごにょしました。
参考：[Bootstrap/BootswatchをRails 4.1に導入！ - 酒と泪とRubyとRailsと](http://morizyun.github.io/blog/bootswatch-rails-setup/)


## 仕切りなおす
またわけがわからなくなるので、新しいプロジェクトを作る。
前回のGemfileだと、lessとsassがごちゃ混ぜになって変なエラーが沢山出て、素人の手に負えなったため。。
sassしか記法覚えてないけど、sassにする方が難しそう（ていうか今の知識レベルではムリ）なので、大人しくlessのみにする方針に決定。

```cmd
$ mkdir bootest
$ cd bootest
$ bundle init 	   # Gemfileのひな形作成
$ mvim Gemfile
```

### Gemfile編集

rails new でデフォルト作成されるGemfileをちょっと修正。

- therubyracerのコメントを外す。
# Twitter bootstrap関連でlessが導入されて、ないとエラーになるので。
- sass-railsはとりあえずコメントアウトしておく。
# 残ってても大丈夫っぽかったけど、変なエラーが出て回避出来なかった覚えがあるので・・

```cmd
$ mvim Gemfile
```

```ruby
source "https://rubygems.org"

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.0'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use SCSS for stylesheets
#gem 'sass-rails', '~> 4.0.3'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
gem 'therubyracer',  platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0',          group: :doc

# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring',        group: :development

# ここから追加
# Twitter Bootstrap
gem 'twitter-bootswatch-rails', '~> 3.1.1'
gem 'twitter-bootswatch-rails-helpers'

# hamlでやりたい人はこれも
gem 'haml-rails'
```

これでbundle install

```cmd
$ bundle install --path vendor/bundle
```


### Rails new

まだRailsのプロジェクトの形になっていないので、以下を実行。

```cmd
$ bundle exec rails new . -T
```

これでカレントディレクトリがRailsプロジェクトになる。
Gemfileは既にあるので、コンフリクトするけど、さっき作った方を残したいのでnで。

### hamlの設定

面倒なのでerbのまま進めようかと思ったけど、この後のコマンドで大量にerbファイルが作られるので、せっかくだからhamlで作ってくれるように設定する。

```config/application.rb
config.generators do |g|
  g.template_engine :haml
end
```

### Bootswatchの初期設定

ここからは参考サイトのまま。
適用するtheme名は"flatly"にしてみます。
[Bootswatch: Free themes for Bootstrap](http://bootswatch.com/)

```cmd
$ bundle exec rails g bootswatch:install flatly
$ bundle exec rails g bootswatch:import flatly
$ bundle exec rails g bootswatch:layout flatly
```

これで出来上がったerb(haml), css, javascriptを
```app/views/layouts/application.haml(erb).html```
に移植して使うなり、デフォルト側にコピーして使うなりすればOK
・・・とのことですが、Rails素人はここでまたハマりました。。
（読み込ませ方がわからなくて、flatly.css, flatly.jsの中身をそのままapplication.*にコピペしたりして、なんかおかしくない？とかやってました・・・←間違いだとさっき気づいた）

### 出来上がったcssを読み込ませる

先ほどの```bootswatch:install```でflatly.cssやらができているので、そいつを```app/assets/stylesheets/application.css```から読み込めるようにする。

もともと書いてあるrequire_selfの下に1行追加するだけでOK

```app/assets/stylesheets/application.css
 *= require flatly
```

### 出来上がったjavascriptを読み込ませる

同じく。元々書いてある読み込みの一番下に、以下を追記。

```app/assets/javascripts/application.js
//= require flatly
```

それぞれのflatly.css, flatly.jsに実際に必要なスタイルやらスクリプトの読み込み部分が記載されているので、application.*からは対応するファイルの拡張子なし名（この場合はflatly）をrequireすればよかった・・と。
この辺はRailsの基礎なんだろうな。。だから書いてなかったんだな・・（涙）

### application layoutを変更

layoutをさっきのgeneratorが作ってくれたflatly.html.hamlでapplication.html.hamlを上書き。

```cmd
$ mv app/views/layouts/flatly.html.haml app/views/layouts/application.html.haml
```

## 確認のためscaffold

このままではデフォルトのWelcomeページが出てしまうので、scaffoldする。

### scaffoldしたリソースにBootstrapを適用

```cmd
$ bundle exec rails g scaffold Post title:string content:text
$ bundle exec rake db:migrate
$ bundle exec rails g bootswatch:themed Posts -f
```

前回のオリジナルBootstrap版とほぼ同じコマンドで実行出来て素晴らしい！さすが。。

scaffoldしたviewを上書きさせるために-fをつける。
付けなくても一個ずつyで上書き確認でもOK

## 確認

サーバーを起動させて。

```cmd
$ bundle exec rails s
```

ブラウザから確認

## 追記

### variable @zindex-modal-background is undefined エラーが発生する

久々に新しいRails appで試したら、エラーが。。

#### 環境

```
$ rails -v
Rails 4.2.0

$ gem list twitter-bootstrap

*** LOCAL GEMS ***

twitter-bootswatch-rails (3.2.0.0)
twitter-bootswatch-rails-helpers (3.2.0.0)

$ bundle exec rails g bootswatch:install flatly
```
をやると、```variable @zindex-modal-background is undefine```が出てくる。

#### 回避策

```app/assets/stylesheets/flatly/variables.less
@zindex-modal-background: 0;
```
↑コレを追記すればOK。

参考URL: [[rails][bootstrap]Rails4.1でBootswatchを試すと variable @zindex-modal-background is undefined エラーが発生 | hello-world.jp.net](http://blog.hello-world.jp.net/ruby/2339/)