そろそろrails開発23 たった5つの手順で bootstrap!!
1.絵心が無い、基本も知らない。であればデザインはNG
私は、企業の基幹系システムのエンジニアである。いつも無機質な画面、log、Job、バッチ、Javaとにらめっこする日々であり、今流行りのECサイトを開発しているエンジニアが羨ましい限りである。
私は絵心が無い、というか書くのが苦手である。試しにrailsで試しアプリを作ってみると上の写真の通りである。ひどい、公開できない。
2.だったらbootstrapに頼る他無し
絵心は勝手につくわけではなく、考えるに、素質の多少はあれど、構図とか、色彩とか、その辺の基本が無いと「お、これは！」とユーザをうならせる絵はかけないでしょう。無理だ。不惑の足音が聞こえる今、そんな時間はない。
そこでTwitterさんが提供している、フロントエンドツール「twitter-bootstrap-rails」。カスタマイズ無しでも、アプリの最低限の体裁を整えてくれる、スタートアップに便利なツール。巷ではWebアプリの管理画面に使われている、と聞きますが、そんなの関係無いです、フロントエンドで堂々と使わせて頂く。
手順 1/5 geに以下を追加
gem 'simple_form'
gem 'therubyracer'
gem 'less-rails'
手順 2/5 bundleする
$bundle install
手順 3/5 bootstrapのインストール
$ rails generate bootstrap:install less
手順 4/5 基本レイアウトファイルの作成（例は可変レイアウト）
$ rails g bootstrap:layout application fluid
Overwrite app/views/layouts/application.html.erb? (enter "h" for help) [Ynaqdh]
お、上書きしていいか？と聞かれていますので「Y」と入力しEnter!
するとforceで上書きしたぜ！と帰ってきます。
手順 5/5 Bootswatchで好みのデザインを
bootswatchという便利なテンプレサイトがある。
・ サイトから気に入ったテンプレデザインの「variables.less」「bootswatch.less」をDLする。
・次にアプリのルート/app/assets/stylesheetsにbootswatchディレクトリを作り、DLした２つのlessファイルを格納する。
・そして、/app/assets/stylesheets/bootstrap_and_overrides.css.lessを編集する。
@import "twitter/bootstrap/bootstrap";
@import "twitter/bootstrap/responsive";
//bootswatchのlessを追加
@import "./bootswatch/variables";
@import "./bootswatch/bootswatch";
・最後にequire_treeはstylesheet以下のlessファイル全てをコンパイルしてしまうので、「bootstrap_and_overrides」だけコンパイルするよう記述。
(変更前)*= require_tree .
(変更後)*= require "bootstrap_and_overrides"
相当すっきりしました。以上です。お疲れ様でした。
おまけ：simple_formの導入
$ rails generate simple_form:install --bootstrap
参考にさせて頂きました。
railsにBootswatchを導入 - 田舎の技術者が奮闘中
simple_formとTwitter bootstrapで作る俺流鉄板Railsアプリ（その１） / Oh My Enter!
