Bootstrapのcarouselをつかってみる その２ 使ってみる

というわけでBootstrapのcarouselを実際に使ってみましょうというやつです。

の冒頭のサンプル

<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

を使ってみます。
で、実際に使ってみたんですがこんなカンジになりました。

右上の○をクリックすると各ページに移動して、左右の△をクリックすると次/前ページ移動になります。 これとさっきのソースを照らし合わせてみてみると以下のカンジです。 ＃ソースに解説をつけただけです。

<!-- carousel全体のdiv --!>
<!-- class属性にcarouselとslideを指定する必要がある --!>
<div id="myCarousel" class="carousel slide">
  <!-- 右上のページ指定移動リンク -->

  <!-- carousel-indicators のclass指定で ○が横に並ぶのを実現（実際にはcssがやってくれる） -->
  <ol class="carousel-indicators">
    <!-- 右上の○の１つ１つ data-slide-to で移動先スライドを指定 -->
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- Carousel items -->

  <!-- 表示する写真たち carousel-innerをclassに指定するとスライドセットとして認識される -->
  <div class="carousel-inner">
    <!-- … という部分にはimgタグ等で写真を表示する -->
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->

  <!-- ページめくりボタン -->
  <!-- classにcarousel-control left（right）と指定してdata-slide にprev(next)を指定すると機能する --!>
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

うむ、簡単だ。

carouselは使ったカンジのメモとしては以下のようなものがあります。

スライドショーの全体幅を調整するには？
大外のdiv（#myCarousel）にwidthを設定すればいい

自動スライドショーを止めるには？
大外のdiv（#myCarousel）に data attribute形式で指定
以下の感じ
data-interval="false"
ちなみに指定されない場合のデフォルトは多分5000ミリ秒になってるんだと思う（感覚）

サイズの違う画像をめくろうとするとどうなる？
大外のdiv（#）で指定したwidthに収まるようにリサイズされた
恐らくwidth,heightのうちオーバーする方に勝手にリサイズされるのだろう（多分divのフツーの挙動）

ページめくり画像ってどうしてるんだ？
『>』っていう文字を装飾しているようだ
なーる

右上の○○○は画像に引きずられて移動するの？
しない
CSSで
position: absolute;
top: 15px;
right: 15px;
と指定されてる

ちなみにposition: absolute;は
親要素が position:static のときはウィンドウの左上、親要素が position:static 以外の時は親要素の左上を基準位置とし、top, left あるいは right, bottom で指定されたオフセットの絶対位置に表示します。
らしいので、この場合は親divがposition:relative; なので親要素の左上が基準位置になっている

これモーダルダイアログ化できる？
（かなり簡単に）できた
ダマされたと思ってモーダルのデモコードのbodyの部分にcarouselのコードを挿入してみなさい


と言ったところでcarouselはこんなもんで（簡単なので）
それではまた次回までごきげんよう。

Bootstrapのcarouselをつかってみる その１ マニュアル確認

だいぶ間が空いてました
すいません

で、今回から２回ぐらいでBootstrapのcarouselの使い方を見ていきます。
carouselというのはあれです。
写真とかをプレビューしてページ送りするようなやつです。

まずものは

http://twitter.github.io/bootstrap/javascript.html#carousel

にあります。
ちなみになんでコレがcarouselなんだ？ と思った人は英語の辞書でcarouselを引いてみましょう。
carousel というのはおなじみスペースアルクで引いてくると

1. 〔遊園地の〕回転木馬◆【同】merry-go-round
2. 〔空港などの〕回転式コンベヤー
3. 〔書店などの〕回転式棚
4. 〔中世の騎士の〕馬上試合

というカンジなので、くるくる回って見えるものが変わるというのを表現しているのでしょう。

＃まあ、ものを見れば一発でわかります。

で、チョット翻訳してみます。

＃わかりにくいんで翻訳は青文字にしておきます。

＃あと、（）で囲まれているのは本文には無いけど、意味が通りやすいようにワタクシが補足した部分です。

Carousel bootstrap-carousel.js

Example carousel

The slideshow below shows a generic plugin and component for cycling through elements like a carousel.

は（ほぼ訳すまでもないですが）

（Bootstrap carouselは）カルーセルみたいに回転するスライドショーのプラグインとコンポーネントです

というかんじですね。

＃全然関係ないですがカルーセルとセガールってちょっとにてますね。

Usage

Via data attributes

Use data attributes to easily control the position of the carousel. data-slide accepts the keywords prev or next, which alters the slide position relative to it's current position. Alternatively, use data-slide-to to pass a raw slide index to the carousel data-slide-to="2", which jump's the slide position to a particular index beginning with 0.

データ属性でカルーセルを使う場合。

データ属性でカルーセルを使えば位置を簡単にコントロールできます。

data-slide属性にはpref/nextを設定でき、スライドめくり（次のスライド/前のスライド）という操作を実現できます。

（exampleにあるようにリンクなどに追加すると、そのリンククリックでスライドめくりができるようになるということです。）

スライドめくりのもう一つの方法としてdata-slide-to属性でスライドのページ数を指定する方法があります。スライドのインデックスは0から始まります。

次、JavaScriptの方

Via JavaScript

Call carousel manually with:

$('.carousel').carousel()

Options

Options can be passed via data attributes or JavaScriptz. For data attributes, append the option name to data-, as indata-interval="".

Name	type	default	description
interval	number	5000	The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
pause	string	"hover"	Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.

JavaScriptで実現する場合は

$('.carousel').carousel();

で初期化します。

（おなじみですが $('.carousel')の部分は要素抽出セレクタなので対象が指定できるならidでもいいんでしょう）

初期化の際のオプションとしては以下があります。

データ属性で実現する場合はprefixとして data- をつけたデータ属性をcarouselのコンポーネントに記述します。

（ようはcarouselの大元のdivにdata-pause="hover" とか書くということです）

オプション

interval 自動でページめくりされる時の間隔（おそらく単位はミリ秒）

pause マウスオーバーで自動めくりを停止しマウスリリースで自動めくりを再開する（と書いてあるのだが、hover→unhoverはいがいの切替セットはどうするのだろうか…）

といったあたりで大体翻訳を終わりにします。

後書いてあるのは各メソッドについて（初期化/ページめくり/停止）なのでサンプルを見ていけばわかるでしょう、ということです。

というわけで今回はここまで。

Twitterのbootstrapを使ってみるその２ ～使ってみる～

というわけで前回の続きをやっていきます。

今回やるのは

1. 挙動制御はデータの属性ではなくJavaScript制御にしたい
2. モーダル起動のフォームがリンクになっているのでボタンにしたい。
3. モーダルの中身を修正したい
4. ボタンのテキストを変えたい

というできる人なら速攻でできそうなヤツです。

でもワタクシはできる人ではないので少しずつ見ていきます。

JavaScriptで動かす場合は、

コントローラフォーム（『押したときにモーダルを立ち上げようとするボタンとかリンク』のこと）のclickイベントをハンドリングして、modal('show');

を呼び出すとモーダルが立ち上がる、という感じなので以下のコードになりました。

htmlのほう

    
    
  
  
  


    



      
      


これがヘッダーとして表示される


    


ここにモーダルのメインコンテンツが表示される

    



      
      
      
    

クリックイベントでモーダルを立ち上げるJavaScriptは以下のカンジ

＃ムロンreadyイベント中にハンドリングしている

    // イベント詳細ボタンが押されたらモーダル立ち上げ
    $("#button-showmodal").click(function(){
        // HTMLで定義したtestModalをセレクトしてモーダルメソッドを呼び出し
        $("#testModal").modal('show');
    });

ソースコメントにも記載したけど、モーダルを表示させる際のポイントは以下のカンジ

• アンカー（a）からボタン（button）に変える際にはボタンのclickイベントハンドリング用にidを加えておく（とやりやすい）
• 不要属性（data-attributeでmodalを制御する用）のhrefとdata-toggleは消す
• ボタンのクリックイベントでmodal('show'); をモーダルのdivに対して呼び出す

で、モーダルの中身を記述する際のポイントは下記

• モーダルの中身はヘッダー/ボディ/フッターというおなじみの３パーツで構成されている
• class属性にmodal-headerとか指定することでモーダルのheaderとして表示される（bootstrapのJavaScriptとCSSに『これはmodalのヘッダーだよ』と伝えることができる）
• モーダルを閉じるコントローラにはdata-dismiss="modal"を指定することでモーダルを閉じる機能を追加できる（と思われる）

モーダルが3部構成することだけわかっていれば、あとはその各パーツに好きなHTML書けば好きなように表示できるはずだ。

というわけで今回は一旦以上。
次回はajaxのmodalだ。

Twitterのbootstrapを使ってみるその１ ～マニュアル読み～

witter bootstrapのモーダルを使おうというはなし。

英語のマニュアルを難なく読める人なら困らんでしょうが、ワタクシの用に困る人もいるかも知れないので、導入メモを書いておきます。

全三回くらいで以下の流れで掲載します（予定です）。

1. マニュアルをよむ
2. とりあえずつかってみる
3. カスタマイズしてみる

というわけで今回はマニュアルを読むはなし。

まず、オフィシャルのマニュアル。

http://twitter.github.com/bootstrap/javascript.html#modals

ココにサンプルも使い方もあるので、正直このとおりにやればまず大丈夫なはずなので、『なんだ これがあれば大丈夫だ』と言う人はココで読むのをやめて美味しいビールでも飲みに行くのが良いと考えます。

続けます。

で、マニュアルこの部分の構成は。

Modals bootstrap-modal.js

Excample

     static example

     live demo

Usage

     Via data attribute

     Via JavaScript

     Options 

Methods

Events

となっているので（エキサイト）邦訳すると以下

『モーダル ～bootstrap-modal.jsで実現するエレガントなモーダル～』

サンプル

     静的なサンプル（ソースと静的な画面表示を見せるよ）

     ライブデモ（動きのあるデモを見せるよ しかもソース付きだ）

使い方

     （HTMLの各フォームの）属性で実現する場合

     JavaScriptで実現する場合

     オプション

（このモーダルを利用する際のJavaScriptの）メソッド

（このモーダルで発生する）イベント

の感じになる。

さしあたり動かして気分良くなりたいので、以下のソース

Launch demo modal





    


Modal header


One fine body…


    
  

を貼りつけてみる。

で表示してみると以下のような感じ。（青字の説明はコッチで入れた） 

＃ムロンbootstrap.js（全部入り）とかbootstrap.cssはインクルード済の実験画面

うむ、コレだけでもだいぶいいな、と思いつつ以下の修正をしたい。

1. 挙動制御はデータの属性ではなくJavaScript制御にしたい
2. モーダル起動のフォームがリンクになっているのでボタンにしたい。
3. モーダルの中身を修正したい
4. ボタンのテキストを変えたい
5. ajax通信でフォームを投稿したい

というわけでやっていくことにする。

＃5以外はだいたいだいじょうぶなはず。

1. 挙動制御をデータの属性ではなくJavaScript制御にする。

まあ気分的な問題もあるのですが、属性でやられると『なんでこうなるんだっけ？』になったり、『間に処理挟みたいんだけど…』とかになったりするので、やっておきます。

そのためには以下を確認しておきましょう。

• JavaScriptでモーダルを実現する方法（やりたいことなので）
• データ属性でモーダルを実現する方法（現在の状態から何を消せばいいかを明らかにするため）

【JavaScriptでモーダルを実現する方法】

マニュアルに

とありますので、訳すまでも無いけど以下の感じ。

『1行のJavaScriptでモーダルメソッドをid="myModal"に対して呼び出しましょう。』

うむ、これはあれだ、下手に翻訳するよりコードを見せた方が早いというやつだ。

要は、『モーダルとして使用するdivのidを指定してjQueryオブジェクトを取得して、モーダルメソッドを呼びなさい』、だね。

＃多分特定（セレクタで一意に抽出）出来るなら id じゃなくclassとかでもいいんだと思うけど、まあidセレクタが無難でしょう。

あとこれdivじゃなくてspanとかformとかで出来るのか気になるけど、それはまた機会があったら実験して見ることにしよう。

＃全体を囲ってCSSのdisplay:noneを適用できるのが、多分divだけなのでdivなんだと思うけど。

データ属性でモーダルを実現する方法

マニュアルに

とあるので、さっきのよりは訳しがいがあるので訳してみると以下の感じ。

JavaScriptを使わずにモーダルを有効にする場合、コントローラ要素（ボタンとか）に data-toggle="modal" という属性を追加します。

さらにターゲットのモーダルを指定するのには以下のどちらかの属性を追加します。

• data-target="#foo"
• href="#foo"

なのでコントローラ（モーダルを立ち上げるボタンとか）側にdata-toggle と [data-target="{モーダルのdivのid}" or href="{モーダルのdivのid}"]

を指定すればいいらしい。なーる。

あとはモーダルに対するオプションについて

という感じなのでついでに邦訳してみると以下の感じ。

オプション

オプションはデータ属性またはJavaScriptで指定することができます。

データ属性で指定する場合は data-{属性名} のようにして指定します。

レとしてbackdropオプションを指定するのであれば data-backdrop="" という形式でコントローラ要素に追加します。

backdropオプション

⇒ よくわからんが、多分『trueを指定するとモーダルの背景クリック時にモーダルを閉じる、さもなくば閉じない（なにも起きない）、そしてdefaultはtrue』ということだと思う。

あれ？ 

さっきのお試し画像の青字で『周囲はグレーアウトされてて操作できない』って書いてなかったっけ？

うん、試してみたらできた、ゴメン。大人はウソツキではないのです、間違いを犯すだけなのです。

keybordオプション

⇒escキーでモーダルを閉じる、defaultはtrue。

showオプション

⇒初期化時にモーダルを開くか、defaultはtrue。これはよくわからん。初期化=画面描画ならいきなり立ち上がるってこと？ でもその挙動はしていないので、『modalメソッドの呼出=初期化』でありそのmodalメソッドの呼出時に起動するかどうか、ということだろうか。

うーん。

remote

⇒リモートurlを指定すると、jQueryでajax通信をして取得できた中身を.modal-bodyに展開する。ベンリ。そしてなぜこれをtabAPIでやってくれない。

というあたりで今回はコレぐらいにします。

マニュアルの残りは

• Method
• Event

なのでやりながら見ていくとして、次回は実際に動かしたり、自分用のモーダルを作ったりしてみます。

deviseの標準画面をカスタマイズする ～標準画面をカスタマイズする その２～

今回は前回作ったこれ


をこう


しようという話です。
＃チョットきれいになります。

なんかはじめにやりたかったことは以下のあたりです。

• 見出し（ログインという文字）のフォントをメイリオ（最近気に入ってます）にしよう
• 見出しは中央寄せがいいなぁ
• 見出しとフォームの間に仕切り線が欲しいなあ
• ログインのフォームはは中央寄せがいいなあ
• ボタンはカッコいいのがいいなぁ

で、結果的に↑のようになりましたので、その流れを見ていきます。

まず見出しものについてですが、これはまあそんなに難しくはなく以下のカンジだろうと思ってました。

1. とりあえず見出し部分はdivで囲もう
2. divの中身をtext-align:center;とかすればいいだろう
3. h2のフォントでも指定すればいいだろう
4. 見出しの下にhrでもつければいいだろう

というわけでソース（html.erb）を以下のように修正。
＃といってもdivで囲ってその下にhrつけただけ。

ログイン

これに対して以下のCSS（railsなのでscss記法です）を当てると見出し部分ができます。

  // 画面全体の背景色
  background-color: #f5f5dc;

  // タイトル部分のスタイル指定
  .page-title {
    text-align: center;
    h2 {
      font-family: 'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
    }
  }

次にログインフォームの部分。
これも以下のカンジで１つ１つ解決しました。

1. 角丸・白抜きにするためにフォーム全体をdivで囲ってwidthを指定しよう（widthを指定しないと角丸が画面全体になってしまう）
2. 角丸はborder（仕切り線）とborder-radiusでやればいいや
3. ラベルとテキストボックスとボタンはpadding-leftでいい感じの位置になるようにしよう
4. bootstrapにはかっこいいボタンのクラスが用意されていたからそれを当てよう

というのは虚偽報告で、実際はchromeのdeveloper tool^*1使いながらガチャガチャCSS当てて行ってなんとか今の形にしました。
＃レイアウティングやCSS当てが得意な人ならいきなり最終型にいけるんだろうが、ワタクシにはそのような力はありません。

というわけでソースを以下のように修正。

<%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>
      
      


<%= f.label 'メールアドレス' %>
      <%= f.email_field :email, :autofocus => true %>

      


<%= f.label 'パスワード' %>
      <%= f.password_field :password %>

      
        
      

      
      


<%= f.submit "ログイン", {class: 'btn btn-primary'} %>
<% end %>

    
    
  

ボタンをかっこ良くするにはsubmitボタンのclassに 'btn btn-primary' を指定することで実現しています。
＃bootstrapにはボタンをかっこ良くするためのCSSクラス定義が既に準備されている。

これに対して以下のCSSを当てるとログインフォーム部分ができます。

  // ページコンテンツ（ここではログインフォームのみ）のスタイル指定
  .page-contents {
    // ログインフォームのスタイル指定
    #div-login-form {
      // サイズ系指定
      width:280px;
      margin:10px auto;
      padding-top: 10px;

      // フォーム全体の背景色（白抜き部分）
      background-color: window;

      // －－－－－－フォームを囲っている角丸の部分ここから－－－－－－
      // 角丸の線スタイル（太/色/線種）指定
      border: 5px solid #002a80;

      // 角丸表現（クロスブラウザ対応のため一応3パターン指定）
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      // －－－－－－フォームを囲っている角丸の部分ここまで－－－－－－

      // フォーム内のコミットボタン以外は左端から30pxとする
      div {
        padding-left: 30px;
      }

      // フォーム内のコミットボタンだけは左端から100pxとする
      // ＃class指定がform種別指定より優先度が高いので有効になる
      .div-commit-button {
        padding-left: 100px;
      }
    }

そこそこきれいな画面ができたので今回のdeviseの標準画面をきれいにするシリーズは一旦以上とします。
＃そこそこ綺麗な画面ができたので次回は別の話をしようかと。

1：現在のドキュメントの構造を確認したりCSSの適用状態を確認したりJavaScriptのデバッグを確認したりできる、とんでもなくすばらしいツール。

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

というわけで今回はdeviseの画面をカスタマイズします。
カスタマイズ手順にありがちな以下の感じでやっていきます。

1. 現在の画面の仕様を理解する（知らずににいじると不完全な機能をもった画面になるので）
2. 現在の画面をバックアップする（この辺はgitでも使ってりゃいらないんだろうけど、とりあえず今回はやっておきます）
3. どういうカスタマイズをするか決める
4. カスタマイズする

1. 現在の画面の仕様を理解する。
ざっくり理解（というかそんなに難しくない）します。
前にやってきた標準画面の整理の話とソースをみると以下の点がわかる。
画面遷移については以下

• ログインフィルターでNGが出るとこの画面に飛んでくる
• ここからログイン処理を呼び出してOKだと標準画面（root_to で指定する所）に飛ぶ
• この画面からユーザ登録画面（SignUp）に飛べる
• この画面からパスワードリセットメール発行画面に飛べる

画面の項目については以下
ログイン用フォーム

• email入力フォーム
• password入力フォーム
• remember_meチェックボックス

リンク

• ユーザ新規登録へ
• パスワードリセットメール発行へ

ポイントとしては以下２点だと考えます。

• フォームの飛び先（ひじょうにきほんてきですが）
• リンクを出力しているコード

フォームの飛び先と何をPOSTするかを理解していれば自動生成されたViewを使わずとも、自分でログイン用フォームを作れるでしょう。

あと、リンクを出力する部分はerb中で

<%= render "devise/shared/links" %>

のように部分テンプレートで描画している。
⇒ つまり片方のリンクだけ消すとかいうのは（さしあたり）ムリなように見える。

ちなみに該当の部分テンプレートの中身は以下のカンジ。
＃毎度のごとく日本語コメントはコチラで追加。

<%- if controller_name != 'sessions' %>
  
  <%= link_to "Sign in", new_session_path(resource_name) %>

<% end -%>



<%- if devise_mapping.registerable? && controller_name != 'registrations' %>
  
  <%= link_to "Sign up", new_registration_path(resource_name) %>

<% end -%>



<%- if devise_mapping.recoverable? && controller_name != 'passwords' %>
  
  <%= link_to "Forgot your password?", new_password_path(resource_name) %>

<% end -%>


<%- if devise_mapping.confirmable? && controller_name != 'confirmations' %>
  <%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name) %>

<% end -%>




<%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks' %>
  
  <%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name) %>

<% end -%>



<%- if devise_mapping.omniauthable? %>
  
  <%- resource_class.omniauth_providers.each do |provider| %>
    <%= link_to "Sign in with #{provider.to_s.titleize}", omniauth_authorize_path(resource_name, provider) %>

  <% end -%>
<% end -%>

のように『現在のユーザの状態を判断して必要そうなリンクを出力する』のようになっているので、標準以外で行くならココの部分の必要なリンクだけ抜き出すのがいいでしょう。

というわけでざっくり以下の理解と課題抽出ができました。

• ログインフォーム（formの部分ね）のPOST先と中身
• リンクを出力する機構
• confirmable,lockable,omniauthableが示す機構については調べないと

2. 現在の画面をバックアップする
ホントgitを使えばこんなのいらなくて、こんなことをやっているのがバレたら、
『アムロ！ バージョン管理ツールを使わずにファイルの手動バックアップを繰り返す人類など、システム開発のノミだということがなぜ分からん！』、
とか罵られて
アクシズを落とされても文句が言えないレベル
だと思うのですが、さしあたりできてないのでカッコ悪いバックアップします。
ログイン画面を表示しているのは
{railsアプリルート}/views/devise/sessions/new.html.erb
なので、同じ場所に new.html.erb.bcup という名前でバックアップしておきます。
＃ださい。。。

3. どういうカスタマイズをするか決める
難しいカスタマイズは後回しにしてまずは簡単なところから行きましょう。
というわけで以下のカンジ。

• 表示内容を日本語化する
• rememberチェックボックスはよくわからないから一旦外す
• ユーザ登録とパスワードリセットのリンクも一旦外す（遷移を封印して管理対象を少なくするのがねらい）

4. カスタマイズする
↑のカスタマイズをしていきます。
まずは簡単なリンクの封印から。
これは↑で調べておいた通りリンクを描画する部分テンプレートを封印すればいい。

次に表示内容の日本語化。
これはページタイトルと入力フォームの部分を日本語化すればいい。

最後にrememberチェックボックスを外すのは、何も考えずに一旦コメントアウトするという作戦で行く。
＃パラメータが投稿されてないからエラーになるとかいう可能性があるけど、一旦やってみる。
で、できたのがコレ。


ちなみにソースはこう。

ログイン
<%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>
  
  

<%= f.label 'メールアドレス' %>

<%= f.email_field :email, :autofocus => true %>

  

<%= f.label 'パスワード' %>

<%= f.password_field :password %>

  
    
  

  
  

<%= f.submit "ログイン" %>
<% end %>



という感じで当初の目的は達成したので、今回は一旦以上。
次回は余裕があればもうチョットいじってみようかと思います。

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をチョット試してみる

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