更新日: 2014年3月12日
Rails

RailsでjQuery Masonryを使いPinterest風のタイルレイアウトを作成

Rails のビューでタイル状のレイアウトでビューを表示するために、jQuery Masonry を使いました（Pinterest 風のあれです）。Rails の assets pipeline で利用するため、masonry-rails の gem を利用。

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

masonry-rails のインストール


$ vi Gemfile
gem 'masonry-rails'
$ bundle install

$ vi Gemfile

gem 'masonry-rails'

$ bundle install

github: kristianmandrup/masonry-rails

masonry 関連のファイルを読み込む

application.css で require。

app/assets/stylesheets/application.css

*= require 'masonry/basic'
*= require 'masonry/centered'
*= require 'masonry/fluid'
*= require 'masonry/gutters'
*= require 'masonry/infinitescroll'
*= require 'masonry/right-to-left'
*= require 'masonry/transitions'

*= require 'masonry/basic'

*= require 'masonry/centered'

*= require 'masonry/fluid'

*= require 'masonry/gutters'

*= require 'masonry/infinitescroll'

*= require 'masonry/right-to-left'

*= require 'masonry/transitions'

必要なものを require します。各々の機能詳細は readme 参照。

jquery.mansory を application.js で require。

app/assets/javascripts/application.js

//= require masonry/jquery.masonry

1	//= require masonry/jquery.masonry

他にも Option で require できるのがあるので、これも readme 参照。

masonry.js.coffee スクリプトを作成

通常の jQuery で書いても良いですが、私は勉強がてら CoffeeScript で書きました。

app/assets/javascripts/masonry.js.coffee

$ ->
  $('#masonry-container').masonry
    itemSelector: '.mas-box',
    gutterWidth: 5, 
    isAnimated: true,
    animationOptions: {
      duration: 500,
      easing: 'swing'
    }
$ ->
  $('.mas-box').hide();
  $('.mas-box').each((i) ->
    $(this).delay(i * 100).fadeIn(1000))

$ ->

$('#masonry-container').masonry

itemSelector: '.mas-box',

gutterWidth: 5,

isAnimated: true,

animationOptions: {

duration: 500,

easing: 'swing'

}

$ ->

$('.mas-box').hide();

$('.mas-box').each((i) ->

$(this).delay(i * 100).fadeIn(1000))

上のが、Masonry でのレイアウトを指定する部分。

itemSelector : ‘.mas-box’
=> CSS の id が masonry-container 内の、mas-box クラスを一つの要素（タイル1枚）と指定する。

gutterWidth: 5,
=> タイル要素同士の幅を 5px にする。

isAnimated: true
=> ブラウザサイズの変更時に、指定したオプションでアニメーションさせる。

下のは、画像の表示をフェードインさせる処理。

Rails のビューファイル作成

最後に、Rails のビューファイル。images に写真情報の配列が入っているとします。

<div id="masonry-container">
<% images.each do |image| %>
  <div class="mas-box"><%= image_tag(image.url) %></div>
<% end %>
</div>

<% images.each do |image| %>

<% end %>

</div>

HTML での出力は、以下の通り。

<div id="masonry-container">
  <div class="mas-box"><img alt="..." src="..." /></div>
  <div class="mas-box"><img alt="..." src="..." /></div>
  <div class="mas-box"><img alt="..." src="..." /></div>
  ...
</div>

...

</div>

これだけで、魔法のように Pinterest 風のデザインができあがりました。Masonry 凄い！ちなみに、Masonry は「石造、れんが」などの意味らしいので、レンガ風レイアウトと言ったほうが良いのかな？

– 参考リンク –
Masonry

パーフェクト Ruby on Rails は、最近読んだ Rails 本の中では一番役に立った本です。Chef や Capistrano など Rails と共によく使用される技術にも触れてあります。Ruby on Rails 4 アプリケーションプログラミングは、入門的な内容で Rails の機能全体を網羅されています。

パーフェクト Ruby on Rails

Ruby on Rails 4 アプリケーションプログラミング