エンジニアであれば、みな自分流の開発流儀をお持ちだと思います。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を見てみましょう。

📄Gemfile

source 'https://rubygems.org'

gem 'rails', '4.0.1'
gem 'sqlite3'

gem 'simple_form'
gem 'therubyracer'
gem 'less-rails'
gem 'twitter-bootstrap-rails'

gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 1.2'

group :doc do
  gem 'sdoc', require: false
end

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

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

📄_form.html.erb

$ rails generate bootstrap:install less

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

$ rails g bootstrap:layout application fluid

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

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

$ rails generate simple_form:install --bootstrap

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

scaffold

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

$ rails g scaffold Book title:string author:string review:integer description:text
$ rake db:migrate

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

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

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

$ rails g bootstrap:themed Books

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

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

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

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

form

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

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

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

<%= simple_form_for @book, :html => { :class => 'form-horizontal' } do |f| %>
  <%= f.input :title %>
  <%= f.input :author %>
  <%= f.input :review %>
  <%= f.input :description %>
  <div class="form-actions">
    <%= f.button :submit, :class => 'btn-primary' %>
    <%= link_to t('.cancel', :default => t("helpers.links.cancel")),
                books_path, :class => 'btn' %>
  </div>
<% end %>

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

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

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

📄吐き出すhtml

<div class="control-group string optional book_title">
    <label class="string optional control-label" for="book_title">Title</label>
    <div class="controls">
        <input class="string optional" id="book_title" name="book[title]" type="text" />
    </div>
</div>

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

バリデーション

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

📄book.rb

class Book < ActiveRecord::Base
  validates :title, presence: true
end

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

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

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

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

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

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

simple_formとTwitter bootstrapで作る俺流鉄板Railsアプリ（その１）

環境