bootswatchのインストール手順

私的メモ
今度もう少しわかりやすいように書き直す予定

実行環境
cloud9
rubyRails 4.2.5
ruby 2.3.0p0

bootswatchのインストールの流れ

やる内容によって作業ルートが変わります。

既存のapplication.htmlerbを使って1から作り上げていく用
　1→2→3-1→4-1→5

予めテーマで用意されたレイアウトをドンっと使う場合
1→2→3-2→4-2→5

1. Gemへの追記

Gemfileに必要なものを追記する。

#bootswatch用
gem 'twitter-bootswatch-rails', :github => 'scottvrosenthal/twitter-bootswatch-rails'
gem 'therubyracer'
gem 'execjs'

からの
bundle install

Important:You may need to add a javascript runtime to your Gemfile in order for bootstrap's LESS files to compile to CSS.
と、表示されたら
gem install execjsとコンソールに打ち込む

2. boostwatchのインストール

下のコマンドを打っていく。
1つめのコマンド:[theme_name]の箇所は適用させたいbootswatchのテーマ

2つめのコマンドは、viewsのlayoutsに[theme_name].html.erbと生成される。
注1※これは、layoutフォルダに生成される、[theme_name].html.erbを、application.html.erbに代わり使用するためで、そのまま既存のapplication.html.erbを使用、もしくは1からレイアウトを自分で作り上げていく場合は不要。

3つめのコマンドは実行後、ファイルの上書きを聞かれるので「y」を入力

4つ目のコマンドは、scaffoldでモデルを作った人だけ。[RESOURCE_NAME]はscaffoldモデル名で、コマンド実行後はファイルの上書
き確認されるので「y」入力して許可する

>rails g bootswatch:install [theme_name]
>rails g bootswatch:layout [theme_name]
>rails g bootswatch:import [theme_name]
>rails g bootswatch:themed [RESOURCE_NAME]

例:rails g bootswatch:install journal

3-1. application.cssの変更 (既存application.html.erbを使う場合のみ)

注1.で述べたようにそのままapplication.html.erbを使用する場合にのみ行う。
これをしないと、application.html.erbでテーマが適用されない。

require_selfの後に3行目と4行目を追記。[theme_name]は選んだテーマ名に変更

 *
 *= require_self
 *= require [theme_name]/loader
 *= require [theme_name]/bootswatch
*/

例:require journal/bootswatch

追記.application.cssでエラー「couldn't find file '[theme_name]/bootswatch' with type 'text/css'と表示されapplication.cssの[theme_name]を全部小文字にしたら治った.
年のために、application.jsも同じようにしたほうがいいのかな？

4-1. application.jsの変更 (既存application.html.erbを使う場合のみ)

注1.で述べたようにそのままapplication.html.erbを使用する場合にのみ行う。
これをしないと、application.html.erbでテーマが適用されない。

application.jsを開いて以下、2行を追記。

//= require [theme_name]/loader
//= require [theme_name]/bootswatch

3-2. Applicationコントローラーの変更(layoutした人だけ)

これは、最初にrails g bootswatch:layout [theme_name]でlayoutを丸々作った人だけ行います

application_controller.rbに以下追記
layout '[theme_name]'

class ApplicationController < ActionController::Base
  # ...
  layout 'journal'
end

4-2. assetsの変更(layoutした人だけ)

config/initializers/assets.rbに最終仕上げとして2行最後に追記

Rails.application.config.assets.precompile += %w( [theme_name].css )
Rails.application.config.assets.precompile += %w( [theme_name].js )

.省略
.
Rails.application.config.assets.precompile += %w( journal.css )
Rails.application.config.assets.precompile += %w( journal.js )

5. 仕上げ

で、あとはサーバーの再起動で動くはず。2016年5月27日現在