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

スポンサーリンク

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

【お知らせ】 英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください!
画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました
スポンサーリンク

masonry-rails のインストール

github: kristianmandrup/masonry-rails

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

application.css で require。

app/assets/stylesheets/application.css

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

jquery.mansory を application.js で require。

app/assets/javascripts/application.js

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

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

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

app/assets/javascripts/masonry.js.coffee

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

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

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

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

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

Rails のビューファイル作成

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

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

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

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

Leave Your Message!