MacOS X上にRuby on Railsの環境を構築〜Foundationプロジェクトの作成まで〜

#MacOS X上にRuby on Railsの環境を構築〜Foundationプロジェクトの作成まで〜

#1 XCodeをインストール
AppStore等で最新版のXCodeをインストールします。

#2 Command Line Toolsをインストール
[Apple公式ページ](https://developer.apple.com/downloads/)から、Command Line Toolsをダウンロード、インストールします。

#3 Homebrewのインストール

- インストール

```bash
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

- 更新

```bash
brew update
brew update
brew prune
brew doctor
```

#4 便利なパッケージの導入

```bash
brew install git
brew install readline
brew install openssl
```

#4.1 PostgreSQLの導入

```bash
pg_ctl stop -D /usr/local/var/postgres.org/postgres
brew install postgresql

#続いて、DBを初期化する前に既存のposgreSQL環境を移動。
rm -rf /usr/local/var/postgres.org
mv /usr/local/var/postgres /usr/local/var/postgres.org

#PostgreSQLデータベースの初期化
initdb /usr/local/var/postgres -E utf8

#Macにプリインストール(?)されているpostgresを見に行かないように設定を修正。(詳細はhttp://nextmarvel.net/blog/2011/09/brew-install-postgresql-on-os-x-lion/)
wget http://nextmarvel.net/blog/downloads/fixBrewLionPostgres.sh
sh fixBrewLionPostgres.sh
sudo mkdir /var/pgsql_socket
sudo chmod 777 /var/pgsql_socket

#PostgreSQLサーバーの起動
pg_ctl -D /usr/local/var/postgres -l /usr/local/var/postgres/server.log start

psql -l
echo 'export PGDATA=/usr/local/var/postgres' >> ~/.bashrc
source ~/.bashrc
#自動起動リストにPostgreSQLを追加
ln -sfv /usr/local/opt/postgresql/*.plist ~/Library/LaunchAgents
launchctl load ~/Library/LaunchAgents/homebrew.mxcl.postgresql.plist
```

#5 ruby-build, rbenvのインストール

```bash
brew install ruby-build
brew install rbenv
brew install --HEAD libsass
```

```bash
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
source ~/.bash_profile
```

#6 rubyのインストール

```bash
rbenv install -l
rbenv install 2.2.3
rbenv global 2.2.3
rbenv versions
```

#7 Ruby on Railsのインストール

- インストール済みのgemを全て削除(必要な場合)

```bash
gem uninstall -axI `gem list --no-versions | egrep -v 'test-unit|rdoc|psych|minitest|io-console|rake|bigdecimal|json'`
gem install power_assert
```

```bash
gem update
gem install rails
gem install bundler
gem install compass
gem install foundation
env ARCHFLAGS="-arch x86_64" gem install pg
gem pristine nokogiri --version 1.6.6.2
gem update
rbenv rehash
```

#8 sassのインストール保留

```bash
gem install sass
gem update
rbenv rehash
```

#9 bowerのインストール

```bash
sudo su -
```

```bash
npm install bower -g
```

```bash
exit
```

#10 gruntのインストール

```bash
sudo npm install -g grunt-cli
```

#8.1 CodeKitのインストール

http://incident57.com/codekit/

#9 Foundationのプロジェクトを作成
- Foundationプロジェクトの作成は、`rails new`コマンドでRailsプロジェクトを作成した後、`Gemfile`に`gem 'foundation-rails'`を追記するだけです。

- プロジェクト名を入力

```bash
echo -n 'Enter the project name >';read PRJ_NAME
```

```bash
rails new $PRJ_NAME -d postgresql
gem update
rbenv rehash
cd $PRJ_NAME
```

- Foundationをgemとして追加する。

- `vi Gemfile`

```ruby
gem 'jquery-turbolinks'
gem 'bcrypt', '~> 3.1.7'
gem 'simple_form'
gem 'rspec-rails'
gem 'ruby-debug-ide'
gem 'debase'
gem 'foundation-rails', '~> 5.4.5'
gem 'foundation-icons-sass-rails'
gem 'bower-rails'
```

- 必要なgemを先にインストール後、foundationをプロジェクトに追加
- **spring server**が動いていると、止まってしまうため、予めkillしてから実行します。

```bash
bundle install --path vendor/bundle
gem update
rbenv rehash
pgrep -f spring | xargs kill
rails g simple_form:install --foundation
pgrep -f spring | xargs kill
rails g rspec:install
pgrep -f spring | xargs kill
rails g foundation:install --force
```

- `app/assets/stylesheets`に、`/Users/soushi/OneDrive/railsapp/foundation5stylesheets`フォルダの中身をコピーする。

```bash
cp -r /Users/soushi/OneDrive/railsapp/foundation5stylesheets/* app/assets/stylesheets/
```
- Bowerを使えるようにする

- `vi config/initializers/assets.rb`に以下を追記

```ruby
Rails.application.config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')
```

- PostgreSQLデータベースの作成

```bash
createdb ${PRJ_NAME}_development -O soushi
createdb ${PRJ_NAME}_test -O soushi
createdb ${PRJ_NAME}_production -O soushi
```

- データベースユーザーの確認(データベースの作成権限があるかを確認)

```bash
psql ${PRJ_NAME}_development
```

```psql
プロジェクト名_development=# \du
```

- RubyMineのデータベースをVagrant上のPostgreSQLに接続する。

- Databaseを作成(+)->Data Source->PostgreSQL
- Databaseタブ

|****|****|
|----|----|
|Host|127.0.0.1|
|Port|5432(default)|
|Database|プロジェクト名_development|
|User|Macのユーザー名(正確にはPostgreSQL上でのデータベース操作ユーザー)|
|Password|Macのパスワード(正確にはPostgreSQL上でのデータベース操作ユーザーのパスワード)|

- psqlアクセス可能エリアの確認

- `vi /usr/local/var/postgres/pg_hba.conf`

```pg_hba.conf
# ↓ 既存のルールを削除(ループバックのみ記述してあるはず)し、下記の通り書き換える(trustは無条件,md5が推奨)
local   all             all                                     trust
host    all             all             127.0.0.1/32            trust
host    all             all             ::1/128                 trust
host    all             all             10.0.0.0/8              md5
host    all             all             172.16.0.0/12           md5
host    all             all             192.168.0.0/16          md5
host    all             all             127.0.0.1/32            md5
```

- マイグレーション

```bash
rake db:migrate
```

- RubyMineのRubyをrbenvのRubyに変更

RubyMine->Preferences->Languages & Frameworks->Ruby SDK and Gems->rbenv 2.2.3を選択

- sassファイルの自動コンパイル
- メモ：キャッシュクリアは `rake tmp:cache:clear`

```bash
sass --watch app/assets/stylesheets:app/assets/stylesheets
```

- guard-livereloadを使った、自動ブラウザリロード
- [こちらを参考](http://blog.digital-squad.net/article/208744178.html#LaunchGuard)

- `vi Gemfile`の`group :development do`セクションに次を追加

```ruby
group :development do
    gem install guard-livereload
end
```

- guard-livereloadのインストールと初期化 -> Guardfileが生成される。

```bash
bundle install --path vendor/bundle
guard init livereload
```

- ブラウザで、Guardの拡張機能をインストール
- [こちらからダウンロード](https://chrome.google.com/webstore/detail/jnihajbhpnppcggbcgedagnkighmdlei)

- guard/rails serverを起動

```bash
guard
rails s
```

- 拡張機能のアイコンをクリックしてGuardをONにすると、保存するだけで、再読み込みされる。


- モデルの作成

```bash
rails generate model モデル名(小文字,単数系, ex:user) カラム名1:型 カラム名2:型
```

- コントローラの作成

```bash
rails generate controller コントローラ名(小文字,モデル名の場合は複数系)
```

##9.1 Bowerコンポーネントを追加する場合

- `vi Bowerfile`を作成

```
asset 'csshake'
```

- bowerコンポーネントをインストール

```bash
bundle exec rake bower:install
```

- CSSの場合 `vi app/assets/stylesheets/application.scss`
- JSの場合 `vi app/assets/javascripts/application.js`
- に、以下を追記

- CSSの場合は

```
 *= require コンポーネント名
```

- JSの場合は

```
//= require コンポーネント名
```