Rails + simple_form + Foundation 5 チュートリアル


bootstrapにはもう飽きた方、もっとシンプルなデザインのCSSフレームワーク無いの?という方、一度Foundationをお試し下さい。

Foundation

foundation

bootstrapと同様に、レスポンシブなWebサイトの構築を助けてくれるCSSフレームワークです。デザイン的にはかなりシンプルなので、自分色に染めてあげるのも良しだと思います。そんなわけで、Foundation 5とsimple_formを使ったRailsアプリ開発のチュートリアルをやってみたいと思います。

環境

  • Mac OS X 10.8
  • ruby 2.1.0
  • Ruby on Rails 4.1.2
  • foundation-rails 5.3.0.1
  • simple_form 3.0.2

セットアップ

まずはお約束のGemfileから。以下の4行をGemfileに追記してください。'foundation-icons-sass-rails'というのは、Foundationのアイコンを使用するために必要なgemです。

bundle installが完了したら、foundationをインストールします。

続いて、simple_formのインストールです。foundationオプションをお忘れなく。

セットアップはこれにて終了。

レイアウト

何か画面が必要ですね。お約束のPostモデルを作ってみましょう。

ここらでrailsサーバを起動して、画面を見ておきましょう。http://localhost:3000/postsにアクセスします。

Listing posts

スタイルが効いてます。しかしあまりに味気ない画面なので、公式ページのようなトップバーを配置してみようと思います。レイアウトapplication.html.erbを編集します。

16行目でヘッダーをレンダリングしています。それとは別に、元々bodyの最下部にあった <%= javascript_include_tag "application" %>を11行目に移動しています。これはturbolink対策です(詳細を知りたい方はググってみてください)。

次に、app/views/shared/_header.html.erbを作成しましょう。

公式ページのをパクってるだけですが。さて、華麗なトップバーが表示されるかブラウザで確認してみます。

topbar

どこかで見たようなトップバーが見事完成しました。バーの内容は適宜変更してみてください。

お次はサイドバー的な物をあしらえてみましょう。再びレイアウトapplication.html.erbを編集します。

メインのコンテンツである <%= yield %>をdivでラップしています。 <div class="row">が1行にあたり、それを12分割してレイアウトするのがFoundationのグリッドシステムの基本です。 large-9  large-3 というのがグリッドでbootstrapでいうところの spanXクラスにあたります。largeというのは高解像度向けを表しており、他にもmediumやsmallが用意されているので、各種デバイスに細やかに適応させたレスポンシブWebが構築できるようになっています。

ブラウザをリロードして確認しましょう。

sidebar

ちょっとずつ、それっぽくなってきました。

フォーム

Postの入力画面を確かめる前に、Postにバリデーションを追加しておきます。

Postの登録画面を訪れ、何も入力せずにCreateボタンをクリックします。バリデーションエラーが見てみたいので・・

validation

ほお。なかなかどうして、いい感じじゃないか・・・。しかし、1点だけ惜しい箇所がある! Titleの下に表示されている『can't be blank』の文字。小さい上に黒字で、全然目立たないじゃない・・・。

実は1箇所simple_formの設定ファイルを変更しなければならない箇所があります(おそらくまだfoundation5に対応できていないと思われる)。 config/initializers/simple_form_foundation.rbというファイルを開き、以下の1行を変更します。

class: "error"を追加しました。railsサーバを再起動して、もいちどバリデーションエラーを発生させます。

title

むむう! すさまじいばかりの自己主張だが・・・草食系男子がはびこるこんな世の中じゃ、これぐらいガツガツ行ったほうがいいのかもしれない。ユーザーも二度とエラーを起こしたくなくなるだろう。

カスタムインプット

よく見ると、もう一つ気に喰わない箇所を見つけてしまいました。この日付入力は非常にイケてない。

published_on

最近のモダンブラウザは input type="date"に対応できているので、そちらを利用することにします。また、日付を入力するコントロールはアプリケーションの各所で必要になってくると思うので、どこからでも呼び出せるようなカスタムインプットとして実装することにします。

app/inputsディレクトリを作成し、その中に datepicker_input.rbというファイルを作成します。

SimpleForm::Inputs::StringInputを継承していますが、type="date"としたいため、コンストラクタで input_type(中身は:string)の代わりに :dateというシンボルを使っています。inputメソッド内で wrapper_htmlを指定しているのは、コントロールの幅を調整するためです。

続いて、 app/views/posts/_form.html.erbを編集しましょう。

as: :datepickerを指定すれば、先程作成たカスタムインプットが使用されます。

再びrailsサーバを再起動して、最終確認といきませう。

datepicker

カレンダー付きの日付コントロールが完成しました! カスタムインプット便利だなあ。

簡素ではありますが、アプリケーションの基本が完成しました。この他にも色々と色々にイケてるFoundation。公式ページのドキュメントも充実しているので、CSSフレームワークに悩んでいる貴男、選択肢の一つに加えてみてはいかがでしょうか。では。

関連する記事