RailsでTwitterBootstrap Railsで使えるGem

Rails3でTwitter Bootstrapのサーチフォームを実装する~form_tag

投稿日:

git & gitolite

最近、gitoliteでソース管理をはじめたので、今までの変更をコミットした後、新しいブランチにチェックアウトする

と言ってもデスクトップとMBAでサンプルアプリのソースを行き来しているだけだが

 

仕組みを考える

参考 #240 Search, Sort, Paginate with AJAX @RailsCasts

特に考えることがないほど、Head First Railsにもあったような簡単なサーチフォーム

モデルに関係ないform_tagからparams[:search]という名前で検索語を投げてindexを呼んで、コントローラかモデルでMySQLのLIKEクエリを投げればよい

図形はGoogleドライブで作成した

フィーチャの作成

今回はテストファーストでフィーチャからフィーチャで使える(認識される)日本語はコマンド cucumber --i18n jaで一覧できる

こんなかんじで

ステップは今までのでいらないはず

最初、マッチしないなあと思っていたら、ページを表示するのを忘れていた

StackOverflowに同じ相談している人がいて気づいた

Viewの作成

Twitter Bootstrapのページから適当に実装する

form_tagなのでsimple_formはつかえない

これでfill_in ‘search’を認識した

Controllerの作成

基本的にはWHERE title LIKE %query% っていうSQLを渡せばいいんだけど、queryが空のときの処理が必要

searchって名前のメソッドを作って処理する

ちなみにLIKE検索は重いしスペース区切りしない日本語に向いてないので、もっと長い日本語やスピードを求めるときは転置インデックスをつけたりする方法を考えなければならない

方法とすると、hyper estraierやsolrのような全文検索を別に用意するか、PostgreSQLのtextsearch_jaとかMySQLのTritonnとかのプラグイン、groongaなどのストレージエンジンを使うなどがある

まあどれもハードルがそこそこ高いので今回はパスした

Modelの作成

elseの処理がscopedなのはページネーションを使ってるから

テストが通らない!

ここまでで完成のはずだけどテストが通らない

なぜなら検索ボタンを押しても、並び替えが機能して逆順に並んでしまうから

ぬぅ

セッションをあきらめて、hidden_formでパラメータを送ってきたときだけ処理することにして、送るパラメータはヘルパーで書くことにした

mergeして終わり

テストが通ったらmastarにmergeして終わり

ホントはテストが通らない時点で、もとのコミットまで戻ってから新しいブランチを作りなおして、並び替え機能をリファクタリングしてから、マージしなきゃいけないんだろうな

とりあえずTwitter Bootstrapが適用されていて、Validationとかもきれいに表示されて、並び替えとページネーションと絞込みができるテーブルがついたひな形がテスト付きで作成できたので満足した

ajax化しておきたいが、テストが軒並み通じなくなるので留保

つぎは関連性を表現するモデルとそのビューをひと通りやってみたい

-RailsでTwitterBootstrap, Railsで使えるGem
-, ,

執筆者:

関連記事

Rails4でつかえるインラインエディタを試してみた〜X-editable-rails

目次1 x-editable2 bootstrapを導入3 x-editable-rails4 サンプルアプリ x-editable 文字をダブルクリックして編集できるやつ x-editable vi …

Rubyで静的ページをジェネレート〜middleman

静的ページのジェネレータとしてはjekyllやこれを使ったoctopressなどがメジャーなようで middlemanもそんな静的なページのメジャーなジェネレータの1つ middlemanの利点は次の …

backbone-relationalをJasmineでテストしてみた

WindowsのRubyでxlsxファイルを生成する~axlsx

By: Roman Boed – CC BY 2.0 目次1 axlsxのインストール2 hello axlsx3 サンプル4 参考 axlsxのインストール コマンドラインからインストー …

no image

Rails3.2でajaxなフォルダツリーを導入する3~dynatree-rails & jQuery UI dialog

  前回 Rails3.2でajaxなフォルダツリーを導入する~dynatree-rails Rails3.2でajaxなフォルダツリーを導入する2~dynatree-rails &nbsp …