出来上がったもの
使うもの
- 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 // 以下の2行を挿入 //= 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 )の作り方は後日コードレシピに書こうと思います。