Rails 4 + Bootstrap-Material-Design

出来上がったもの

• デモ ( Heroku )
• GitHub

使うもの

• Node.js v0.12.3
• Ruby 2.2.2

Bowerを入れる

$ npm install -g bower

Bundlerを入れる

$ gem install bundler

Rails new

$ bundle exec rails new material -T -B

Gemfileの編集

source 'https://rubygems.org'
gem 'rails'
gem 'sqlite3'
gem 'sass-rails'
gem 'uglifier'
gem 'coffee-rails'
gem 'jquery-rails'
gem 'turbolinks'

gem 'slim-rails' # slim 使う人は入れてください。デモでは使ってます。
gem 'bootstrap-sass' # この行を追加

Bundle install

$ bundle install --path .bundle

Bowerからbootstrap-material-designを入れる

$ echo '{"directory":"vendor/assets/bower_components"}' > .bowerrc
$ bower i bootstrap-material-design

config/application.rbを編集

require File.expand_path('../boot', __FILE__)

require 'rails'
require 'active_model/railtie'
require 'active_job/railtie'
require 'active_record/railtie'
require 'action_controller/railtie'
require 'action_mailer/railtie'
require 'action_view/railtie'
require 'sprockets/railtie'
Bundler.require(*Rails.groups)

module Material
  class Application < Rails::Application
    config.time_zone = 'Tokyo'
    config.i18n.default_locale = :ja
    config.active_record.raise_in_transactional_callbacks = true
    
    # この行を追加
    config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')
  end
end

app/assets/javascripts/application.jsを編集

//= require jquery
// 以下の２行を挿入
//= require bootstrap-sprockets
//= require bootstrap-material-design/dist/js/material
//= require jquery_ujs
//= require turbolinks
//= require_tree .

app/assets/stylesheets/application.css を application.scssへ名前変更

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

app/assets/stylesheets/application.scssを編集

# 内容をすべて削除して以下の3行を追加
@import 'bootstrap-sprockets';
@import 'bootstrap';
@import 'bootstrap-material-design/dist/css/material';

publicディレクトリにbootstrap-material-designの内容をコピー

$ cp -r vendor/assets/bower_components/bootstrap-material-design/dist/ public/

public/test.htmlを削除

$ rm public/test.html

おわり

これでRailsからbootstrap-material-designを使えるようになりました。
ここを見ながらパーツを組み合わせていけばおしゃれなサイトとかサービスがさくっと作れると思います。
デモ ( Heroku )の作り方は後日コードレシピに書こうと思います。