Ruby on Rails + Bootstrap3 + simple_form チュートリアル


Twitter Bootstrap 3がリリースされてから結構日が経ちますが、twitter-bootstrap-railsはブランチ版で、simple_formはRC版でそれぞれ対応できているようです。導入するにあたって、ちょっとハマる箇所もあったので、簡単にチュートリアルにまとめておきたいと思います。

環境

  • Mac OS X 10.8
  • Ruby 2.1
  • Ruby on Rails 4.1
  • twitter-bootstrap-rails 3.1.1 (2014/6/21時点ではbranch)
  • simple_form 3.1.0.rc

セットアップ

Gemfileに必要なgemを記述します。ポイントはtwitter-bootstrap-railsとsimple_formです。各々最新安定版ではまだ対応していないので(2014/6/21現在)、以下のようにバージョン指定が必要です。

いつも通りgemをインストールします。

bootstrapをインストールします。

次に、simple_formをインストールします。bootstrapオプションを付けるのをお忘れなく。

scaffold

セットアップが完了したら、簡単な画面を作成してみます。まずはbootstrapでレスポンシブなレイアウトを生成します。上書き確認のメッセージが表示されると思いますが、Yで上書きましょう。

お約束のsacffoldでお約束のPostモデルを作成してみましょう。

出来上がったscaffoldをbootstrapテーマに合わせて変更します。

さて、ここでrailsサーバを起動して、http://localhost:3000/postsにアクセスしてみると・・・

Posts

おお、流行りのフラット・レスポンシブ画面ができあがっているではないか。

ちょっとNewボタンを押して、入力フォームを確認しておきましょう。

New

・・コントロール長っ! 何これ、これが噂のモバイルファーストってやつ? コントロールは  width: 100%になってるそうです。オールドタイプの俺は、断然こんなの受け入れられない。一体全体どうなっているんだ。

app/views/posts/_form.html.erbを開いてみます。

フォームのCSSクラスが form-horizontalになってますが、これだけでは効きません。 f.inputでコントロール周りを囲んでくれるラッパーを指定しないといけません。1行目を以下のように変更します。

wrapper: "horizontal_form"というオプションを追記しました。(何この"horizontal_form"って?と思った方は、 config/initializers/simple_form_bootstrap.rb を見てみて下さい。)

再度画面を確認しましょう。

horizontal

とりあえずhorizontalは適用できました。しかしコントロールの幅は100%のままです。こいつを短くしてやりたい。

wrapperのカスタマイズ

bootstrap 2 にあったような、 input-smallのようなCSSクラスは無くなっています。公式ページに書いてあるように、 col-xs-XといったCSSクラスを指定する必要があるようです。こいつを適用させるためには、simple_formの設定ファイルを弄くる必要があります。

config/initializers/simple_form_bootstrap.rbの次の部分を・・・

次のように変更します。

名前付きのwrapperにて、元々定義されていた col-sm-9クラスを削除しました。こいつがあると幅がバリバリに長くなってしまいますので。

続いて、フォームも変更します。

input_wrapper_htmlというオプションを追記しています。設定ファイルで名前を付けておいたwrapperには、 ラッパー名_htmlとすることで、idタグやclassタグを付加することができるのです。(詳しくはsimple_formの公式ページを見て下さい)

simple_formの設定ファイルを変更しているので、railsサーバを再起動してから再度画面を開いてみましょう。

完成

やっと短くなりました。

えらく長い道のりでした・・・。正式版が出るまでは、bootstrap 2を使っている方が無難かもしれない。。。

関連する記事


Ruby on Rails + Bootstrap3 + simple_form チュートリアル”に関する2件のコメント

  1. ピングバック

  2. ピングバック

コメントは受け付けていません。