酒と泪と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.rbAppName::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

ハッカソンハウス始めました!

ハッカソンハウス
2014年2月8日からエンジニア・クリエイターのためのスペース「Hackathon House」始めました!エンジニアがプロダクトづくりに集中出来る環境を作るために『Camp Fire』のご協力よろしくお願いします!

なぜ始めたのか?

僕はアメリカの有名なインキュベーション・オフィスを少しだけ訪問させて頂いたことがあります。あそこはプロダクトの可能性を目一杯引き出してくれる夢のような空間でした。僕はあんな場所を日本にも作りたいとずっと想い続けてきました。この企画を一緒にやっているくりしーさんは、『サウス・バイ・サウスウエスト』を通して、「あのワクワクする空間、熱気溢れるカオスな空間を日本でも創りたい。」というビジョンで一緒にやっています!

どんな場所を作りたいのか?

僕が目指しているのは、日本を代表するようなプロダクトが芽吹く場所。そんなプロジェクトをやりたい本気な仲間と集まれる場所。そんな仲間を見つけられる「ルイーダの酒場」のような場所です。

また、プロダクト開発のために「仲間と一緒に」どこよりもリラックス・集中できる空間をコンセプトにHackathon Houseを育てていきたいです!



押さえておきたい書籍

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

Comments