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


エンジニアであれば、みな自分流の開発流儀をお持ちだと思います。PHPでWebアプリを開発する際はこのフレームワークを使うだとか、Railsアプリの場合はこのgemを使用するだとか・・・。私がRailsアプリを作成する際の鉄板といえば、simple_form+twiter bootstrapを使用することです。simple_formは、入力フォームを簡単に作成するお手伝いをしてくれるView用のgem、twitter bootstrapは(説明するまでもないかもしれませんが)Twitterが公開しているcssフレームワークです。デザインが苦手なエンジニアにでも、それなりに見栄えの良い画面が簡単に作れるので、非常に重宝しています。

simple_form: https://github.com/plataformatec/simple_form

twitter bootstrap: http://getbootstrap.com/

今回はこれらのgemを使って、簡単なRailsアプリケーションを作成してみたいと思います。

環境

  • Rails 4.0.1
  • simple_form (3.0.0)
  • twitter-bootstrap-rails (2.2.8)
  • Mac OS X Mountain Lion
  • Ruby 2.0

セットアップ

まずは各gemのセットアップから始めます。Gemfileを見てみましょう。

6〜9行目がsimple_formとbootstrap導入に必要な記述です。bootstrapはlessを使用するので、sass-railsは要りません。Gemfileを記述し終えたら、通常通りに $ bundle install を実行しましょう。

上手くgemファイルがインストールできたでしょうか。続いて、Railsアプリにbootstrapをインストールします。

assetsやlocalesにファイルが生成されるはずです。次に、基本となるレイアウトファイルを生成します。固定レイアウトと可変レイアウトが選択できるのですが、最近のスマホ・タブレット事情から考えて、可変レイアウトでレイアウトファイルを生成してみます。いわゆるレスポンシブ・レイアウトというやつですね。

おそらく、上書き確認のメッセージが表示されると思いますが、上書きを選択してください。これでapp/views/layouts/application.html.erbというファイルが更新されるはずです。

続いて、simple_formをインストールしましょう。simple_formにはbootstrap用のオプションが用意されているので、それを使用してインストールします。

これにてセットアップは完了です。それではさっそくアプリ開発に移りましょう。

scaffold

どうでもいい蔵書管理システムを作ってみることにしましょう。さっそくありがちなBookモデルをscaffoldします。

足場ができたら、 $ rails s でWebrickサーバーを起動してアクセスしてみましょう。http://localhost:3000/booksにアクセスするとbootstrapでレイアウトされたBook一覧画面が表示されるはずです。

scaffold

(どこかでよく見かけることを除いては)なかなか格好いいデザインじゃないですか! これだけでもう、今日のノルマは達成した営業マンかのように、誇らしげ気持ちで喫茶店のドアを叩いてしまいそうです。しかしよく見て下さい。『Listing books』の部分、普段のscaffoldと同じデザインでイマイチだと思いませんか? ならばこれをbootstrapチックに変更してみましょう。

ご安心下さい。専用のコマンドがtwitter-bootstrap-railsには用意されています。

"Books"と複数形であるのに注意してください。コマンドを実行すると上書き確認のメッセージが表示されると思いますが、全て上書きして下さい。これで各種Viewファイルがbootstrap用のものに置き換わっているはずです。(個人的には、scaffoldジェネレータを拡張して欲しいんですが・・・)

先程のページをリロードして、試しにデータを登録したりしてみましょう。

bootstrap-scaffold

圧倒的にさっきよりカッコよくなりました! 圧・倒・的!

まだ何もコードを書いてないのにも関わらずこの出来栄え。う〜ん、やはりRailsはスゴイですね・・・。

form

では一体どんなコードが生成されているんでしょうか。例えば入力フォームは以下のような画面表示になっていますよね。

form

なかなかこざっぱりして洒落た画面です。bootstrapサマサマといったところでしょうか。しかし、よく見て下さい。実はsimple_formもいい仕事してるんですよ。『Review』は integer型なので type=number を、『Description』は text型なのでtextareaを自動的に指定してくれています。これはありがたい。

では、一体どんなソースコードが生成されているのでしょうか。app/views/books/_form.html.erbをのぞいてみましょう。

なんと!? どの属性も  f.input :属性名 とだけしか書いてないじゃありませんか。ラベルの出力も記述されていません。

そうです。これが simple_formの力なのです。1行目に注目してみましょう。通常の  form_for の代わりに  simple_form_for というメソッドが使用されています。これが通常のFormBuilderではない、simple_form用の便利なBuilderを生成するブロックメソッドなのです。

またbootstrap用にカスタマイズされているので、inputメソッドは bootstrapでフォームをレイアウトする際に必要なdivタグも一緒に吐き出してくれます。参考に、 f.input :title が出力するHTMLコードを見てみましょう。

自動的にラベルを出力し、必要なdivでラップしてくれているのが分かります。すごくナイスですね。このおかげで erbファイルは非常にスッキリとしていられるのです。

バリデーション

次はちょっと、モデルにバリデーションを付け加えてみましょう。書籍のタイトルが空なんてことあり得ませんので、この属性は必須にします。app/models/book.rbを編集します。

編集が済んだら、新規書籍を入力する画面に行ってみましょう。

New Book

先程と少し変化しているのがお分かりでしょうか? Title属性を必須にしたので、Titleラベルの隣に『*』が表示されるようになりました。simple_formが必須の属性に自動的に付与してくれるのです。憎い演出です。

ところで、本当にTitleは必須になっているんでしょうか。試しに、何も入力せずに『Create Book』ボタンをクリックすると・・・

エラーメッセージ

ウレシイ! ちゃんとエラーメッセージが出ている! しかも通常のscaffoldのようなドギツい赤いボックス表示ではなく、エラーがあった属性の隣にメッセージが表示されています。まるでエラーが「オレはここに居るよ」ってそっと囁いてくれているようだ・・・

simple_form + twitter bootstrap、素敵だとは思いませんか? まだほとんどコードを書いてないのにも関わらず、(よく見かけることを除いては)こんなにもカッコいいアプリができちゃうんです。何か新しくRailsアプリを作ることになったら、この組み合わせを一度検討してみてはいかがでしょうか?

次回は、simple_formでカスタムinputを作成する方法などをご紹介します。

関連する記事