a big fish in a small pond

ロードバイク、rails 、料理、写真、ガシェットでお送りします。

そろそろrails開発23 たった5つの手順で bootstrap!!

1.絵心が無い、基本も知らない。であればデザインはNG

f:id:yoshidaagri:20140211104116p:plain

 私は、企業の基幹系システムのエンジニアである。いつも無機質な画面、log、Job、バッチ、Javaとにらめっこする日々であり、今流行りのECサイトを開発しているエンジニアが羨ましい限りである。

私は絵心が無い、というか書くのが苦手である。試しにrailsで試しアプリを作ってみると上の写真の通りである。ひどい、公開できない。

 

2.だったらbootstrapに頼る他無し

絵心は勝手につくわけではなく、考えるに、素質の多少はあれど、構図とか、色彩とか、その辺の基本が無いと「お、これは!」とユーザをうならせる絵はかけないでしょう。無理だ。不惑の足音が聞こえる今、そんな時間はない。

そこでTwitterさんが提供している、フロントエンドツール「twitter-bootstrap-rails」。カスタマイズ無しでも、アプリの最低限の体裁を整えてくれる、スタートアップに便利なツール。巷ではWebアプリの管理画面に使われている、と聞きますが、そんなの関係無いです、フロントエンドで堂々と使わせて頂く。

手順 1/5 geに以下を追加

gem 'simple_form'

gem 'therubyracer'

gem 'less-rails

gem 'twitter-bootstrap-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という便利なテンプレサイトがある。

f:id:yoshidaagri:20140211110935p:plain

・ サイトから気に入ったテンプレデザインの「variables.less」「bootswatch.less」をDLする。

・次にアプリのルート/app/assets/stylesheetsにbootswatchディレクトリを作り、DLした2つの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"

 

f:id:yoshidaagri:20140211113806p:plain

相当すっきりしました。以上です。お疲れ様でした。

 

おまけ:simple_formの導入

$ rails generate simple_form:install --bootstrap

 

参考にさせて頂きました。

railsにBootswatchを導入 - 田舎の技術者が奮闘中

simple_formとTwitter bootstrapで作る俺流鉄板Railsアプリ(その1) / Oh My Enter!