Railsで不定数要素をBootstrapレスポンシブ対応する方法

今日はRailsエンジニアのデザイン向けTipsをお届けまします。どうも、井上です。

先日友人がTwitterBootstrapの仕様で「要素の数はわからないけれど、１行に３つずつ順番に表示したい」というときに表現方法に困っていました。

確かに行毎にrowクラスを指定したdivタグで囲むという表現など、若干ややこしいかと思います。

ただ、これはひとつだけ新しいメソッドを知っておけば簡単に出来るので、今回はその小技をご紹介します。

f:id:inodev:20170111002253p:plain

前提：Bootstrapでレスポンシブにするには？
不特定要素をRailsでレスポンシブデザイン対応させる
解説（each_sliceメソッド）

前提：Bootstrapでレスポンシブにするには？

rowクラスを指定したdivで１行分を囲む
col-sm-12などカラムが各デバイスで合計12になるようにする

という条件がありました。

仮に合計４つの表示したい要素があって、１行に３つまで要素を置きたい場合は、

<div class="row">
  <div class="col-sm-4">
    要素１
  </div>
  <div class="col-sm-4">
    要素２
  </div>
  <div class="col-sm-4">
    要素３
  </div>
</div>
<div class="row">
  <div class="col-sm-4">
    要素４
  </div>
</div>

という風に書くかと思います。

これでPCから見たときには↓みたいに並び、

■　■　■  
■

スマホから見たときには↓みたいに並ぶわけですね。

■  
■  
■  
■

これが３個とか４個とか５個とか、WEBアプリで配置する要素の数が動的に変わっても堪えられる書き方を紹介したいと思います。

不特定要素をRailsでレスポンシブデザイン対応させる

UsersController#indexがデフォルトのままallメソッドを使っていたとして、

app/controllers/users_controller.rb

class UsersController < ApplicationController
  def index
    @users = User.all
  end

  # ...
end

対応するViewは次のように書くと3つずつ綺麗にrowで行を区切って配置出来ます。

app/views/users/index.html.erb

<% if @users.present? %>
  <% @users.each_slice(3) do |users| %>   <!-- # ①  -->
    <div class="row">                     <!-- # ②  -->
      <% users.reverse_each do |user| %>
        <div class="col-sm-4.text-center">
          <%= user.email %> 
        </div>
      <% end %>
    </div>
  <% end %>
<% end %>

個人的にBootstrap使う時にERBをそのまま使うとすごく気分が悪くなるのでSLIMの内容も載せておきます。

app/views/users/index.html.slim

- if @users.present?
  - @users.each_slice(3) do |users|   # ①
    .row -                            # ②
      - users.reverse_each do |user|
        .col-sm-4.text-center
          = user.email