Twitter BoostwatchとはTwitter Bootstrapのフリーのテンプレート集ですね。
http://bootswatch.com/
デフォルトのBootstrapのまま使うより随分とオシャレになるので非デザイナーには大変ありがたい存在。
Railsの場合はgemがあるので使わせていただきますです。
https://github.com/scottvrosenthal/twitter-bootswatch-rails
githubのREADME通りにやったけどなぜかうまく行かなくて、最初からやりなおしてみた。ちょっとした勘違いをしていたのが原因だった。
手順
新しいプロジェクトを作ります。
|
1 |
$ rails new boostwatch |
Gemfileに追記
|
1 2 |
gem 'twitter-bootswatch-rails', '~> 3.2.0' gem 'twitter-bootswatch-rails-helpers' |
|
1 |
$ bundle install |
jsとcssを生成しようとすると therubyracer がねえよオラ！と怒られます。
Gemfileの該当部分のコメントアウトを解除しましょう。
|
1 2 |
$ rails g bootswatch:install lumen [WARNING] Please install gem 'therubyracer' to use Less.<br /> |
もう一回。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$ rails g bootswatch:install lumen gsub app/assets/javascripts/application.js gsub app/assets/stylesheets/application.css create app/assets/javascripts/lumen.js create app/assets/stylesheets/lumen.css create app/assets/javascripts/lumen create app/assets/javascripts/lumen/loader.js create app/assets/javascripts/lumen/bootswatch.js create app/assets/stylesheets/lumen create app/assets/stylesheets/lumen/loader.css.less create app/assets/stylesheets/lumen/variables.less create app/assets/stylesheets/lumen/mixins.less create app/assets/stylesheets/lumen/bootswatch.css.less create app/assets/stylesheets/lumen/base.less |
layoutを生成します。こちらも同様にlumenを指定。
|
1 2 |
$ rails g bootswatch:layout lumen create app/views/layouts/lumen.html.erb |
lumenテーマをimportします。これが抜けてて一向にテーマが適用されず悩んでた。
|
1 2 3 4 5 6 7 |
$ rails g bootswatch:import lumen create app/assets/stylesheets/lumen create app/assets/stylesheets/lumen/variables.less create app/assets/stylesheets/lumen/bootswatch.css.less prepend app/assets/stylesheets/lumen/bootswatch.css.less gsub app/assets/stylesheets/lumen/variables.less gsub app/assets/stylesheets/lumen/variables.less |
画面を確認するためになんらかのリソースを定義してscaffoldします。
|
1 2 3 4 5 6 |
$ rails g scaffold Post title:string description:text $ rake db:migrate # テーマを適用したviewを生成 # conflictするけど全部yでおけ $ rails g bootswatch:themed Posts |
|
1 2 3 4 |
class ApplicationController < ActionController::Base protect_from_forgery with: :exception layout "lumen" end |
configにassets precompileするファイルを追加
|
1 |
config.assets.precompile += %w( lumen.css lumen.js ) |
できたああああ！
The following two tabs change content below.
原田 敦
日本CAWのエンジニア。もふもふ部の部長。得意分野はRuby on Railsを使った小規模WEBアプリケーションを高速で開発すること。週末の楽しみは一人お菓子パーティー。三度の飯より小動物をもふもふするのが好きです。
最新記事 by 原田 敦 (全て見る)
- Rails Engineでブログ機能追加するgemを作る - 2015年3月15日
- WEBエンジニア一人だけでサービスを作りきる方法-夫婦のための自動ごはん予定お知らせサービス「GoHaaan」制作でやったこと - 2015年3月7日
- CentOS6でMariaDBのDynamic Columnsを試してみた - 2015年2月28日