deviseの標準画面をカスタマイズする ～bootstrapを当ててみる～

この記事金曜に投稿しようと思ってたのですが、ジョジョ見てたら忘れてました。

＃きっとキング・クリムゾンの攻撃をうけたのでしょう。

で、今回から数回はdeviseで自動生成された画面をチョットカスタマイズしましょう、という話。

まずは、はやりのTwitter bootstrapを当ててかっこ良くしようと考えています。

というわけで以下。

1. bootstrapについて

この後bootstrapについて自分の理解を書いています。

Twitter bootstrapとも。

ざっくり言うと、

『見栄えがよくてかっこいい動きをするサイトをつくるためのCSS（ちょっとJavaScript）フレームワーク』

ということだと思う。

じゃ、『フレームワークってなんだよ』、という話ちょっと扱いを間違えると宗教戦争的な発展を見せるので、今はざっくり

『ある目的を達成をしようとする場合は、その目的を達成するのに特徴的な行為とその目的でなくても必要となる一般的な行為を合わせて実行することが多い』

『そのため特徴的な部分の実行に注力できるように、一般的な行為の代行をすると共に行為全体の実行順序制御御を代行してしまう枠組みが効果的である』

『このような枠組みをフレームワークと呼ぶ』

ということでおいておいてください。

＃ムロンざっくりで無いことは認識済。

で、↑の定義を今回の話に置き換えてみると、サイトの見栄えを良くするためには大体以下のことをやるはず。

• かっこいいよく見せるためのCSSの定義（色/フォント/形/背景）
• フォームにclass属性やid属性の追加
• JavaScriptでイベントをハンドリングして動的にCSSが適用されるようにする

最終型がファンシーなサイトになるにせよエロサイトになるにせよ、

『CSSを定義し、それが適用されるようにHTMLを記述し、また動的な表現ができるようにJavaScriptを記述する』

という行為は変わらないはず。

そこでCSSフレームワークbootstrapの出番となる。

bootstrapは以下のことをやってくれる。（キャッチーな機能を抽出してるので全部ではないです）

• 簡単にグリッドレイアウトが組めるようなCSS定義
• ラベルやボタンなどのフォームがきれいな見栄えになるようなCSS定義
• 普通なら自分でCSSを定義して自分でJavaScriptを書く必要があるナビゲーションやタブなどが簡単につくれるようなCSS定義＆JavaScript

こいつはベンリだ。しかもTwitterが使ってるものだしかっこよくなるのが目に見えてるぜ。

というわけで使ってみましょうというのが今回の話。（なんかやたら前置きが長くなったけど）

＃ムロンスライドでも言ってるように、『Twtterみたいな見栄えになっちゃう』、というデメリットはあるが。

2. bootstrapの導入方法

http://twitter.github.com/bootstrap/getting-started.html

からダウンロードする。

Download Compiledの方を落としてくる。

落としてきたzipファイルを解凍すると

css

img

js

というフォルダがあるはずなので。

コレをrailsのアプリに取り込めばいい。

のだが取り込み方にちとコツ（というか注意）がある。

まず、簡単なJavaScriptの方から。

これはほぼ何も考えずに

{導入しようとしているrailsのアプリフォルダルート}/app/assets/javascripts

においてしまえばいい。

application.jsで

require tree

しているならそれで読み込まれるし、それ外してコントローラ単位にレイアウト作ったりしてるならそこで

<%= javascript_include_tag 'bootstrap.js' %>

とかして読みこめばいい。

次にCSSと画像なのだが、

『こんなもんCSSをassets/stylesheetsにおいて画像をassets/imagesにおけばいいんだろ、ちょろいもんだぜハハハ』

とかやると失敗する。

理由は、

『スタイルシートの中で背景画像を定義する部分においてスタイルシートファイルからの相対パスで画像のURLを指定している』

ため。

bootstrap.css には

  background-image: url("../img/glyphicons-halflings.png");

のような背景画像を読み込む定義があるのだが、↑のようにurlを相対パス（../img・・・）で指定している。

そのため、さっきのような置き方（assets/imagesに配置）とかだとパスが合わなくて画像が読み込めなくなる。

解決策としては以下2点となる。

• cssの背景画像読込のURLを修正する
• 画像の配置場所を修正する

で、どこをどう考えても後者の方がラクチンなのでそれを採用します。

で、『フォルダ構造とか一旦いいからとりあえず動かしてみたいよ』という人は

css

img

の二つのフォルダをassets/stylesheetsフォルダにコピーすればいいです。

あとはさっきのJavaScriptと同じように

application.css で

 *= require_tree

やってるなら（たぶん）読み込まれる。

各レイアウトで読み込むなら、

<%= stylesheet_link_tag    "css/bootstrap", :media => "all" %>
<%= stylesheet_link_tag    "css/bootstrap-responsive", :media => "all" %>

みたいなかんじでよいはず。

＃今回はこっちでやった。

3. bootstrap当てたらどんな風になるか

beforeがこう。

＃前にも出したやつ。

で、当ててみるとこうなった。

うむ、ぜんぜん違う。
パッと見でも

• フォントが柔らかい
• テキストボックスが角丸
• リンクの色が違う
• チェックボックスの横の文字列が改行してる
• （あとこの画像だとわからないけど）テキストボックスにフォーカス入れると強調表示される

とかになっている。
次回はこの画面に対して

• 日本語対応
• レイアウト調整
• 余裕があればbootstrapをチョット試してみる

とかをやっていきたい。
一旦以上。