bootstrapにはもう飽きた方、もっとシンプルなデザインのCSSフレームワーク無いの？という方、一度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から。以下の４行をGemfileに追記してください。’foundation-icons-sass-rails’というのは、Foundationのアイコンを使用するために必要なgemです。
1 2 3 4 5 | ... gem 'foundation-rails' gem 'foundation-icons-sass-rails' gem 'simple_form' ... |
bundle installが完了したら、foundationをインストールします。
1 | $ rails generate layout:install foundation5 |
続いて、simple_formのインストールです。foundationオプションをお忘れなく。
1 | rails generate simple_form:install --foundation |
セットアップはこれにて終了。
レイアウト
何か画面が必要ですね。お約束のPostモデルを作ってみましょう。
1 2 | $ rails g scaffold Posts title:string body:text published_on:date $ rake db:migrate |
ここらでrailsサーバを起動して、画面を見ておきましょう。http://localhost:3000/postsにアクセスします。
スタイルが効いてます。しかしあまりに味気ない画面なので、公式ページのようなトップバーを配置してみようと思います。レイアウトapplication.html.erbを編集します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title><%= content_for?(:title) ? yield(:title) : "foundation-rails" %></title> <%= stylesheet_link_tag "application" %> <%= javascript_include_tag "vendor/modernizr" %> <%= javascript_include_tag "application" %> <%= csrf_meta_tags %> </head> <body> <%= render 'shared/header' %> <%= yield %> </body> </html> |
16行目でヘッダーをレンダリングしています。それとは別に、元々bodyの最下部にあった <%= javascript_include_tag "application" %>を11行目に移動しています。これはturbolink対策です（詳細を知りたい方はググってみてください）。
次に、app/views/shared/_header.html.erbを作成しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <div class="contain-to-grid"> <nav class="top-bar" data-topbar> <ul class="title-area"> <li class="name"> <h1><a href="#">My Site</a></h1> </li> <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --> <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> </ul> <section class="top-bar-section"> <!-- Right Nav Section --> <ul class="right"> <li class="active"><a href="#">Right Button Active</a></li> <li class="has-dropdown"> <a href="#">Right Button Dropdown</a> <ul class="dropdown"> <li><a href="#">First link in dropdown</a></li> </ul> </li> </ul> <!-- Left Nav Section --> <ul class="left"> <li><a href="#">Left Nav Button</a></li> </ul> </section> </nav> </div> |
公式ページのをパクってるだけですが。さて、華麗なトップバーが表示されるかブラウザで確認してみます。
どこかで見たようなトップバーが見事完成しました。バーの内容は適宜変更してみてください。
お次はサイドバー的な物をあしらえてみましょう。再びレイアウトapplication.html.erbを編集します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | ... <body> <%= render 'shared/header' %> <div class="row"> <div class="large-9 columns"> <%= yield %> </div> <div class="large-3 columns"> <h2>About Us</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </body> ... |
メインのコンテンツである <%= yield %>をdivでラップしています。 <div class="row">が１行にあたり、それを12分割してレイアウトするのがFoundationのグリッドシステムの基本です。 large-9 large-3 というのがグリッドでbootstrapでいうところの spanXクラスにあたります。largeというのは高解像度向けを表しており、他にもmediumやsmallが用意されているので、各種デバイスに細やかに適応させたレスポンシブWebが構築できるようになっています。
ブラウザをリロードして確認しましょう。
ちょっとずつ、それっぽくなってきました。
フォーム
Postの入力画面を確かめる前に、Postにバリデーションを追加しておきます。
1 2 3 | class Post < ActiveRecord::Base validates :title, presence: true end |
Postの登録画面を訪れ、何も入力せずにCreateボタンをクリックします。バリデーションエラーが見てみたいので・・
ほお。なかなかどうして、いい感じじゃないか・・・。しかし、１点だけ惜しい箇所がある！ Titleの下に表示されている『can’t be blank』の文字。小さい上に黒字で、全然目立たないじゃない・・・。
実は１箇所simple_formの設定ファイルを変更しなければならない箇所があります（おそらくまだfoundation5に対応できていないと思われる）。 config/initializers/simple_form_foundation.rbというファイルを開き、以下の１行を変更します。
1 2 3 4 5 6 7 8 9 10 11 | SimpleForm.setup do |config| config.wrappers :foundation, class: :input, hint_class: :field_with_hint, error_class: :error do |b| b.use :html5 b.use :placeholder b.optional :maxlength b.optional :pattern b.optional :min_max b.optional :readonly b.use :label_input b.use :error, wrap_with: { tag: :small, class: "error" } ... |
class: “error”を追加しました。railsサーバを再起動して、もいちどバリデーションエラーを発生させます。
むむう！ すさまじいばかりの自己主張だが・・・草食系男子がはびこるこんな世の中じゃ、これぐらいガツガツ行ったほうがいいのかもしれない。ユーザーも二度とエラーを起こしたくなくなるだろう。
カスタムインプット
よく見ると、もう一つ気に喰わない箇所を見つけてしまいました。この日付入力は非常にイケてない。
最近のモダンブラウザは input type="date"に対応できているので、そちらを利用することにします。また、日付を入力するコントロールはアプリケーションの各所で必要になってくると思うので、どこからでも呼び出せるようなカスタムインプットとして実装することにします。
app/inputsディレクトリを作成し、その中に datepicker_input.rbというファイルを作成します。
1 2 3 4 5 6 7 8 9 10 11 | class DatepickerInput < SimpleForm::Inputs::StringInput def initialize(builder, attribute_name, column, input_type, options = {}) super(builder, attribute_name, column, :date, options) end def input options.deep_merge!(wrapper_html: { class: "large-3" }) super end end |
SimpleForm::Inputs::StringInputを継承していますが、type=”date”としたいため、コンストラクタで input_type（中身は:string）の代わりに :dateというシンボルを使っています。inputメソッド内で wrapper_htmlを指定しているのは、コントロールの幅を調整するためです。
続いて、 app/views/posts/_form.html.erbを編集しましょう。
1 2 3 4 5 6 7 | ... <div class="form-inputs"> <%= f.input :title %> <%= f.input :body %> <%= f.input :published_on, as: :datepicker %> </div> ... |
as: :datepickerを指定すれば、先程作成たカスタムインプットが使用されます。
再びrailsサーバを再起動して、最終確認といきませう。
カレンダー付きの日付コントロールが完成しました！ カスタムインプット便利だなあ。
簡素ではありますが、アプリケーションの基本が完成しました。この他にも色々と色々にイケてるFoundation。公式ページのドキュメントも充実しているので、CSSフレームワークに悩んでいる貴男、選択肢の一つに加えてみてはいかがでしょうか。では。
関連する記事
- Ruby on Rails + Bootstrap3 + simple_form チュートリアル
- simple_formとTwitter bootstrapで作る俺流鉄板Railsアプリ（その１）
- simple_formとTwitter bootstrapで作る俺流鉄板Railsアプリ（その２）
- simple_formとTwitter bootstrapで作る俺流鉄板Railsアプリ（その３）
- 【実践】RailsでExcelレポート出力（その１）