可変グリッドレイアウトjQuery - jQuery.vgrid.jsをRailsに組み込んでみた

超有名ブログ「彼女からは、おいちゃんと呼ばれています」の最先端テック記事「Rails3、Twitter Bootstrap、Bootswatch を使ったレスポンシブなエロサイト「babyshark」をリリースしました」に載っていた可変グリッドレイアウト用のjQuery「jquery.vgrid.js」をRailsに導入手順を作ってみました。

デモサイト

🍄 jQuery.vgrid.js/jquery.easingのダウンロード

jquery.vgrid.js の公式サイトからjQuery.vgrid.min.jsをダウンロード。 app/assets/javascripts/に保存。
jQuery Easing Pluginの公式サイトからjQuery.easing.1.3.jsをダウンロード。
同じく、app/assets/javascripts/に保存。

🏈 JavaScriptの読み込み設定

app/assets/javascripts/application.jsに次の記述があることを確認。ない場合は追加。(通常デフォルトで設定済)

// jQueryの読み込みに関する設定
//= require jQuery
//= require jquery_ujs

// javascripts配下にあるjsファイルを読み込む設定
//= require_tree .

Gemfileに次のコードがあることを確認(通常デフォルトで設定済)

gem 'jquery-rails'

😸 JavaScript側のコード追加

JavaScriptの場合は次のコードを追加。

$(function(){
    // #container配下のdivがグリットレイアウトで並びます
    $("#container").vgrid({
        easing: "easeOutQuint",
        time: 500,
        delay: 20,
        fadeIn: {
            time: 300,
            delay: 50
        }
    });
});

Coffeescriptの場合は以下のコードを追加

#container配下のdivがグリットレイアウトで並びます
vg = $("#grid-content").vgrid
  easing: "easeOutQuint"
  useLoadImageEvent: true
  useFontSizeListener: true
  time: 500
  delay: 20
  fadeIn:
    time: 300
    delay: 50

🎳 View側のコード追加

ERBの場合は次のコードを追加。

<div id="grid-content">
    <div id="grid-a">
        <h3>AAAh3>
        <p><img src="http://dummyimage.com/150x120" alt="dummy" />p>
    div>
    <div id="grid-b">
        <h3>BBBh3>
        <p><img src="http://dummyimage.com/150x60" alt="dummy" />p>
    div>
div>

hamlの場合は次のコードを追加。

#grid-content
    #grid-a
      %h3 AAA
      %p
        %img{src: "http://dummyimage.com/150x120"}/
    #grid-b
      ％h3 BBB
      %p
        %img{src: "http://dummyimage.com/150x60"}/

🎂 CSSのコード追加

CSS側のコードを追加します。ここは自由なのでサイトデザインに合わせて調整して下さい。

#grid-content div {
  width: 150px;
  height: auto;
  border: 1px solid #bbb;
  background-color: #eee;
  margin: 5px;
  padding: 3px;
}

😼 動作確認

ブラウザで確認すると以下のようになっていると思います。(divは複数にしています)

fpu_tmp_1354628118.4887_b59e09

もしjQuery.vgrid.jsの詳しい機能を知りたい、カスタマイズしたい場合は、jQueryで美しいグリッドレイアウトを実現できる「jquery.vgrid.js」がわかりやすくてオススメです！

🎉 参考リンク

可変グリッドレイアウトのjQueryプラグイン書いたよ

🖥 VULTRおすすめ

「VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります！

酒と泪とRubyとRailsと