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

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

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

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

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

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

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

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

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

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

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

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

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

Gemfileを編集して、bundle installでGemをインストール。

(gemは適宜カスタマイズしてください)

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内に以下を追加。

# 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内に以下を追記。

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の作成。

rake db:create RAILES_ENV=development

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

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に次のコードを追加。

*= require font-awesome

Compassのインストール。

bundle exec compass init --syntax sass

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

bundle exec compass install sassy-buttons

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

rails g sass:assets base

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

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

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

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

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

rails g rails_config:install

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

rails g simple_form:install --bootstrap

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

🎂 Powを使っている場合

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

powder link

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

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を削除。

rm -rf public/index.html

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

rails g scaffold product name price:integer

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

root :to => "products#index"

DBのマイグレーション。

Rake db:migrate

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

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

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

# 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ファイルをダウンロード。

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行目に置いて下さい
 *=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インストールがまだの方はぜひ。

🐯 参考リンク

🎳 変更来歴

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

🖥 VULTRおすすめ

「VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります！

酒と泪とRubyとRailsと

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

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

🎂 Powを使っている場合

😀 scaffold表示まで

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

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

🎉 関連記事

🐯 参考リンク

🎳 変更来歴

🍮 テスト環境

🖥 VULTRおすすめ

📚 おすすめの書籍

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

🎂 Powを使っている場合

😀 scaffold表示まで

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

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

🎉 関連記事

🐯 参考リンク

🎳 変更来歴

🍮 テスト環境

🖥 VULTRおすすめ

📚 おすすめの書籍

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

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