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です。

📄Gemfile

...
gem 'foundation-rails'
gem 'foundation-icons-sass-rails'
gem 'simple_form'
...

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

📄app/views/layouts/application.html.erb

$ rails generate layout:install foundation5

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

rails generate simple_form:install --foundation

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

レイアウト

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

$ rails g scaffold Posts title:string body:text published_on:date
$ rake db:migrate

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

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

<!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を作成しましょう。

📄app/views/shared/_header.html.erb

<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を編集します。

📄app/views/layouts/application.html.erb

...
  <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にバリデーションを追加しておきます。

📄app/models/post.rb

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というファイルを開き、以下の１行を変更します。

📄config/initializers/simple_form_foundation.rb

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というファイルを作成します。

📄app/inputs/datepicker_input.rb

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を編集しましょう。

📄app/views/posts/_form.html.erb

...
  <div class="form-inputs">
    <%= f.input :title %>
    <%= f.input :body %>
    <%= f.input :published_on, as: :datepicker %>
  </div>
...

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

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

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

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

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

環境

セットアップ

📄Gemfile

📄app/views/layouts/application.html.erb

レイアウト

📄app/views/shared/_header.html.erb

📄app/views/layouts/application.html.erb

フォーム

📄app/models/post.rb

📄config/initializers/simple_form_foundation.rb

カスタムインプット

📄app/inputs/datepicker_input.rb

📄app/views/posts/_form.html.erb

関連する記事