酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です！

Rails 3.2.13/Bootstrap/Haml プロジェクト新規作成 最短ガイドだよ！

Rails 3.2.13 + Bootstrap + Hamlのプロジェクト作成のフローを作成しました。

fpu_tmp_1353848330.5039_237fab

Rails プロジェクト作成 〜 index.html確認まで

Railsの新規プロジェクトを作成。

1

rails new test-app -d mysql --skip-test-unit --skip-bundle

RVMを使っている場合は、プロジェクト直下で.rvmrcを作成する。

1
2

cd test-app/
echo ruby-1.9.3-p327 > .ruby-version

Rails用の.gitignoreを作成します。.gitignoreを生成するgitignore-boilerplatesを使う場合はこちら。(Macでのインストール方法は、brew install giboを実行)

1
2

# Mac/RubyMineを使う場合の例です、gibo --listで確認して下さい
gibo OSX Ruby Rails RubyMine IntelliJ > .gitignore

GitHubから.gitignoreのテンプレートをダウンロードする場合はこちら。

1

wget https://raw.github.com/github/gitignore/master/Rails.gitignore;mv Rails.gitignore .gitignore

Gitリポジトリ作成を作成します。

1
2
3

git init
git add -A
git commit -m "new project"

Gemfileを編集して、bundle installでGemをインストール。
(gemは適宜カスタマイズしてください)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

source 'https://rubygems.org'

gem 'rails'
gem 'rake' # 本番rake実行時に必要だった

# Bootstrap
gem 'less-rails'
gem 'twitter-bootstrap-rails'

# Compress/Sassy-Buttons/Zurui-design
gem 'sass-rails'
gem 'compass-colors'
gem 'compass-rails'
gem 'sassy-buttons'
gem 'zurui-sass-rails'

# Font Awesome
gem 'font-awesome-rails'

# Form Builders
gem 'simple_form'
gem 'country_select'

# Haml
gem 'haml-rails'

# jQuery/json
gem 'jquery-rails'
gem 'jquery-cookie-rails' # jquery-cookie
gem 'json'

# MySQL
gem 'mysql2'

# Presenter
gem 'active_decorator'

# 定数管理
gem 'rails_config'

# スクレイピング
gem 'nokogiri'

# Seed管理
gem 'seed-fu'

# asset取得系のログを出力しない
gem 'quiet_assets'

group :assets do
  gem 'coffee-rails'
  gem 'therubyracer', "~> 0.10.2"
  gem 'uglifier'
  gem 'libv8', '~> 3.3.10'
end

group :development do
  # ドキュメント生成
  gem 'yard'

  # erbからhamlに変換
  gem 'erb2haml'

  # エラー画面をわかりやすく整形してくれる
  gem 'better_errors'

  # better_errorsの画面上にirb/pry(PERL)を表示する
  gem 'binding_of_caller'

  # フッターにデバック情報を表示
  gem 'rails-footnotes', '>= 3.7.9'

  # N+1問題の警告を出力
  gem "bullet"
end

group :development, :test do
  # Pow (Mac用のサーバです。Mac以外 or Pow以外のサーバ利用の方は不要)
  gem 'pow'
  gem 'rails3-generators'
end

gem 'powder'

config/application.rbの中にあるYourAppName::Application.configure内に以下を追加。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# Set timezone
config.time_zone = 'Tokyo'
config.active_record.default_timezone = :local

# 日本語化
config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}').to_s]
config.i18n.default_locale = :ja

# generatorの設定
config.generators do |g|
  g.orm :active_record
  g.template_engine :haml
  # scaffoldをgenerateするとDraperが自動で生成されます。
  # モデルがないとエラーが発生する可能性があるので注意してください
end

# load original validator(オリジナルのバリデーターがある場合のみ)
config.autoload_paths += %W(#{config.root}/lib/validators)

# libファイルの自動読み込み
config.autoload_paths += %W(#{config.root}/lib)
config.autoload_paths += Dir["#{config.root}/lib/**/"]

N+1問題の対策Gem Bulletの設定。
config/environments/development.rbのAppName::Application.configure内に以下を追記。

1
2
3
4
5
6
7
8

config.after_initialize do
  Bullet.enable = true # Bulletプラグインを有効
  Bullet.alert = true # JavaScriptでの通知
  Bullet.bullet_logger = true # log/bullet.logへの出力
  Bullet.console = true # ブラウザのコンソールログに記録
  Bullet.rails_logger = true # Railsログに出力
  Bullet.disable_browser_cache = true #ブラウザキャッシュの無効化
end

DBの作成。

1

rake db:create RAILES_ENV=development

Twitter Bootstrapのインストール。application.html.hamlが作成されるので、application.html.erbを削除。

1
2
3

rails g bootstrap:layout application fluid
rails g bootstrap:install
rm -rf app/views/layouts/application.html.erb

font-awesomeの設定を追加する。 app/assets/stylesheets/application.cssに以下のコードを追加。

1

 *= require font-awesome

Compassのインストール。

1

bundle exec compass init --syntax sass

Sassy-buttonsのインストール。No such framework: "sassy-buttons"と言われる場合はスキップ。

1

bundle exec compass install sassy-buttons

続いてSASS(CSS)を書くためのbase.css.sassファイルを作成。

1

rails g sass:assets base

base.css.sassに以下を追加して、zurui-design, compass, sassy-buttonsを使えるようにする。

1
2
3
4

@import compass/utilities
@import compass/css3
@import sassy-buttons
@import zurui-sass

Railsの日本語化ファイルを設定する。

1

wget https://raw.github.com/svenfuchs/rails-i18n/master/rails/locale/ja.yml -P config/locales/

rails_configの設定、設定用ファイルの生成。（利用方法はrailsjedi/rails_config | GitHub）

1

rails g rails_config:install

simple formの初期設定(bootstrap対応)

1

rails g simple_form:install --bootstrap

Apacheの場合は設定を行なって、ブラウザで表示を確認する。

Powを使っている場合

Powを使っている場合はPowへのリンクの作成。

1

powder link

RVM環境でPowを使っている場合はプロジェクトの直下に.powrcを作成して以下を追加。

1
2
3
4

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

表示を確認する。powder openを実行して、ブラウザでhttp://test-app.dev/を確認。

scaffold表示まで

scaffoldを追加の前にpublic/index.htmlを削除。

1

rm -rf public/index.html

scaffoldの作成してビューを追加。

1

rails g scaffold product name price:integer

config/routes.rbにて、ルートアクセス設定を追加。

1

root :to => "products#index"

DBのマイグレーション。

1

rake db:migrate

ブラウザでscaffordしたビューが見れることをブラウザで確認。

補足: open-uriでSSLをつかえるようにする

SSLエラー回避のためにconfig/initializers/bypass_ssl_verification_for_open_uri.rbを作成して以下を追加。

1
2
3

# SSLエラー回避
require 'openssl'
OpenSSL::SSL::VERIFY_PEER = OpenSSL::SSL::VERIFY_NONE

注意点として、この設定を行うとbypass_ssl_verification_for_open_uri.rb:3: warning: already initialized constant VERIFY_PEERという警告メッセージがでるようになりますが、気にしなくて良さそうです。

補足: ブラウザCSSのリセット

ブラウザにはデフォルトのCSSがセットされており、ブラウザによってデザインが変化する可能性があります。そこで、ブラウザのCSSをリセットしてくれるCSSがYUI(Yahoo! User Interface Library)から提供されています。
配布がUSのサーバだと思う(レスポンスが遅くなる)ので、プロジェクト側にcssファイルをダウンロード。

1

wget http://yui.yahooapis.com/3.8.0/build/cssreset/cssreset-min.css -P app/assets/stylesheets/

app/assets/stylesheets/application.css.lessに以下のコードを追加。
(このコードを追加する場合は// = require_tree .を削除して、cssを個別にインポートすること)

1
2

/* 1行目に置いて下さい
 *=require cssreset-min

関連記事

RSpec/Spork/Guard/Growl/Rails 3.2.9で作る - プリチーなTDD環境！ : モダンなTDD環境を構築して、ハッピーなテストライフをエンジョイしましょぃ！

Rals3.2.9で始める Git連携Capistranoによる自動デプロイ : サーバへのデプロイのプロセスにCapistranoを導入する手順です。

meta-tagsとsitemap_generatorで始めるRails 3.2のSEO対策 : Railsのお手軽SEO対策にレッツトライ。

Railsの人気ページネーター Kaminariはbootstrap/hamlでも超簡単に導入可能 : ページネーター導入の際は是非。

開発サーバをThinからPowに切り替えて開発効率アップ！ (Mac限定) にてPowに関する記事を載せました。サーバPowインストールがまだの方はぜひ。

Special Thanks

変更来歴

11/26 12:00 Thinサーバに関する記述を追加
11/26 14:00 Guardに関する記述を追加/Gemを見直し
11/28 16:40 Dev/Test環境のサーバをPowに変更
11/29 09:40 Foremanを削除、TDD関連の構築手順を別記事に
12/03 10:00 Gemfileにyardを追加
12/03 22:10 RSpec/FactoryGirlに関する情報をTDD記事に移動
12/05 12:25 定数管理のGem rails_configを追加
12/06 10:30 Gemfileにrakeを追加(本番でrake実行時必要だったため)
12/13 12:35 Gemfileにbetter_errorsを追加
12/19 14:50 記事のレイアウトを修正
12/21 18:30 Gemfileに「gem ‘libv8’, ‘~> 3.11.8’」を追加
12/23 23:40 RVM/POWを使う場合の設定を追加
12/24 17:15 .rvmrcにgemsetの記述を追加
12/25 09:35 gemsetに関する記述を削除
12/27 09:40 .giboに関する記述を追加、MySQLの記述を削除
12/27 11:00 リセットCSSに関する記述を追加
12/27 17:05 Gemfileにrails-footnotes/quiet_assetsを追加
01/01 20:45 Gemfileにfont-awesome-railsを追加
01/02 10:25 SSLエラー回避の対策にenvironment.rbに記述
01/02 12:00 draper => active_decoratorに浮気
01/09 11:05 public/index.htmlを削除するように修正
01/09 11:35 Gem therubyracer’, libv8’のバージョン変更
01/22 14:10 Gem Bulletの設定が抜けていたので追加
01/28 10:55 application.rb内のlocaleファイルの読み込み方法を変更
01/28 11:15 補足: open-uriでSSLをつかえるようにするを編集して作成
02/06 19:05 Bulletの設定についての記述を微調整
02/08 16:25 BootstrapのGemを変更、compress, sassy-buttons, zurui-design-railsを使うプロセスに変更
05/16 21:25 Rails 3.2.13環境

テスト環境

テスト環境は以下の通りです。

OS : Mac Mountain Lion(OS X 10.8)
Ruby : 1.9.3-p327
Rails : 3.2.13
haml : 3.1.7
coffee-script : 3.2.1
Rspec : 2.12.0

押さえておきたい書籍

いかがだったでしょうか？
もし説明がわかりにくかったり、間違っている場所があればぜひ一言！

Comments