Rails 4でRSpecとTwitter Bootstrap

あれ？いつの間にか日曜日だ。

昨日の続き。
作るものは多言語ブログに決まった。だいたいこんな感じ。

キラキラネームがいいらしいので、名前はKonnyakuにする。これなら将来gem化するようなことがあっても被らないだろう。（Konjacにしようと思ったら既にあってビビったけど）
デザインはTwitter Bootstrapベース
コメントとRSSぐらいは付けたい
あと画像アップロードも。
日・英で書ける
（他の言語はとりあえず考慮しない。ブログ書くぐらいネット使ってて英語読み書きできないのは日本語ネイティブぐらいだよね？）
markdownで書く
markdownのコンパイル、コードのシンタックスハイライトはクライアントサイドで。
（RedcarpetとかPygmentsに依存すると他の人に気軽に使ってもらいにくくなるので）
→ 勘違いしてた。Redcarpetは簡単にインストールできるのでmarkdownのパースはサーバ側でやることにする。
Travis CI使いたい
PostgreSQLに慣れとかないとそろそろやばそうなので無理やり使う
（tagsをarrayでやってみりゃいいのかな？）

前回はただrails newしてscaffoldしただけだったけど、今回はrspec入れたりとかいろいろやって、開発をスタートできるとこまで持っていく。
この作業はそれなりに面倒い予感がする。

プロジェクト作成

いつもの作業。データベースはpostgresql。

# プロジェクト作成
$ rails new konnyaku -T -d postgresql
$ cd konnyaku/

# rubyのバージョン指定
$ vim .rvmrc
rvm use 2.0.0

# データベース設定
$ cp config/database.yml config/database.yml.example
$ vim config/database.yml
  username: xxxx
  password: yyyy

# 動作確認
$ spring rake db:create
$ spring rake db:migrate
$ powder link

# .gitignoreにいくつか追加
$ vim .gitignore
# Mac
.DS_Store

# Vim
*~
.*.sw*

# Rails
public/assets
config/database.yml
coverage

# プロジェクト作成

$ rails new konnyaku -T -d postgresql

$ cd konnyaku/

# rubyのバージョン指定

$ vim .rvmrc

rvm use 2.0.0

# データベース設定

$ cp config/database.yml config/database.yml.example

$ vim config/database.yml

username: xxxx

password: yyyy

# 動作確認

$ spring rake db:create

$ spring rake db:migrate

$ powder link

# .gitignoreにいくつか追加

$ vim .gitignore

# Mac

.DS_Store

# Vim

.*.sw*

# Rails

public/assets

config/database.yml

coverage

動作確認。

# http://konnyaku.dev/ でアクセスできることを確認
$ open -a Safari http://konnyaku.dev/

※ .powrcに
if [ -f "$rvm_path/scripts/rvm" ] && [ -f ".rvmrc" ]; then
  source "$rvm_path/scripts/rvm"
  source ".rvmrc"
fi
が必要（初回アクセス時のnotice画面から追加できる）

# http://konnyaku.dev/ でアクセスできることを確認

$ open -a Safari http://konnyaku.dev/

※ .powrcに

if [ -f "$rvm_path/scripts/rvm" ] && [ -f ".rvmrc" ]; then

source "$rvm_path/scripts/rvm"

source ".rvmrc"

が必要（初回アクセス時のnotice画面から追加できる）

いけた。

RSpec

続いてRSpec。標準のままいきたいところだけど、まだRSpecも習得しきれていないので他に手を出すのはやめておく。

$ vim Gemfile
group :development, :test do
  gem 'rspec-rails'
end

$ bundle
$ rails g rspec:install

$ vim config/initializers/generators.rb
Rails.application.config.generators do |g|
  g.test_framework :rspec, :fixture => false, :views => false, :helpers => false
end
※ なぜか効いてなくてhelper/view specが作られちゃう。クリティカルではないので後で調べる。
  → view_specs: false, helper_specs: falseだった
　　　→ ん？やっぱviewはできちゃってる気がする。

$ spring g controller welcome index

$ vim Gemfile

group :development, :test do

gem 'rspec-rails'

end

$ bundle

$ rails g rspec:install

$ vim config/initializers/generators.rb

Rails.application.config.generators do |g|

g.test_framework :rspec, :fixture => false, :views => false, :helpers => false

end

※ なぜか効いてなくてhelper/view specが作られちゃう。クリティカルではないので後で調べる。

→ view_specs: false, helper_specs: falseだった

　　　→ ん？やっぱviewはできちゃってる気がする。

$ spring g controller welcome index

はじめてのテスト。

$ spring rake spec
1 example, 0 failures

1 2	$ spring rake spec 1 example, 0 failures

通った。

twitter-bootstrap-rails

デフォルトSCSSなのになんでわざわざLESS使うの？という突っ込みはもっともだと思います。
僕もデフォルト教の信者なのですが、このケースではRailsではなく、「Twitter Bootstrapのデフォルト」を優先したい気分なのでいつもlessを使ってます。

# lessとtwitter-bootstrap-railsのインストール
$ vim Gemfile
group :assets do
  # コメントアウト
  #gem 'sass-rails',   '~> 4.0.0.beta1'

  # アンコメント
  gem 'therubyracer', platforms: :ruby

  # 追記
  gem 'less-rails'
  gem 'twitter-bootstrap-rails', :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git'
end

$ bundle

# assets、layoutの生成
$ rails g bootstrap:install
$ rails g bootstrap:layout application

# コントローラ作りなおす
$ rails destroy controller welcome index
$ spring g controller welcome index

# Turbolinksを有効化
$ vim app/views/layouts/application.html.erb
  <!-- 変更 -->
  <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
  <!-- head内に移動して変更 -->
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>

# いつものnavbar-fixed-top向け調整
$ vim app/assets/stylesheets/bootstrap_and_overrides.css.less
@import "twitter/bootstrap/bootstrap";
body {
  padding-top: 60px;
}
@import "twitter/bootstrap/responsive";

# lessとtwitter-bootstrap-railsのインストール

$ vim Gemfile

group :assets do

# コメントアウト

#gem 'sass-rails', '~> 4.0.0.beta1'

# アンコメント

gem 'therubyracer', platforms: :ruby

# 追記

gem 'less-rails'

gem 'twitter-bootstrap-rails', :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git'

end

$ bundle

# assets、layoutの生成

$ rails g bootstrap:install

$ rails g bootstrap:layout application

# コントローラ作りなおす

$ rails destroy controller welcome index

$ spring g controller welcome index

# Turbolinksを有効化

$ vim app/views/layouts/application.html.erb

<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>

<%= javascript_include_tag "application", "data-turbolinks-track" => true %>

# いつものnavbar-fixed-top向け調整

$ vim app/assets/stylesheets/bootstrap_and_overrides.css.less

@import "twitter/bootstrap/bootstrap";

body {

padding-top: 60px;

}

@import "twitter/bootstrap/responsive";

動作確認

$ touch tmp/restart
$ open -a Safari http://konnyaku.dev/

1 2	$ touch tmp/restart $ open -a Safari http://konnyaku.dev/

いけてる。
テストも一応。

$ spring rake spec
1 example, 0 failures

1 2	$ spring rake spec 1 example, 0 failures

問題なさそうな気がする。

長くなってきたのでcapybaraとかsimple-cov（rails4対応してるのかな？）とかはまた後で入れる。
どうせ今入れてうまくいった気になってもDBがからんできたら、あれ？ってなるだろうし。

いろいろ端折ってるので中身をもっと知りたい場合は、
tnantoka/konnyaku · GitHub
からどうぞ。

WEB+DB PRESS Vol.73

tobioka.net

You Ain't Gonna Need It