2012年8月21日火曜日

Ruby on Rails3でtwitter風データロード

twitter風のデータロード画面を作成したのでメモ。

環境はruby-1.9.3-p0, rails3.2.2, postgresです。

難易度★★★☆☆

twitterのように画面をスクロールしてデータをローディングする仕組みを作りました。
結論を言うと、Rails3の場合はjquery.pagelessを使うと簡単に作ることができます。

しかし、ネットで検索するとrails castのEndless PageやEndless Page Scrolling with Rails 3 and jQueryばかりがHITすると思います。
しかし、これらを使うのは避けてください。
まず、rails castのEndless Pageの記事内容はrails3のjqueryには対応していません。rails2.xならこちらで良いでしょう。
Endless Page Scrolling with Rails 3 and jQueryの記事内容はシンプルでなく、おせじにも良いコーディングとは言えません。

jquery.pagelessの使い方

ダウンロードして、サンプルと同じようにファイルを配置するだけでOKです。
注意する点として、will_paginateがないと動作しないのでgemにwill_paginateも必ず設定してください。

loading表示の変更

あっさりとtwitter風のロード画面が作成できると思いますが、ロードの表示方法は変更したいと思うでしょう。
その時は、jquery.pageless.jsの以下の部分を変更します。


  var loaderHtml = function () {
    return settings.loaderHtml || '\
<div id="pageless-loader" style="display:none;text-align:center;width:100%;">\
  <div class="msg" style="color:#000000;font-size:1.1em"></div>\
  <img src="' + settings.loaderImage + '" alt="loading more results" style="margin:10px auto" />\
</div>';
  };

文字のサイズ、色、ローディング画像はここで変更できます。

本当に便利なツールなので、是非使ってみてください。
ページングのほうが使いやすいページは、通常のwill_paginateもを利用すると良いでしょう。

以上です。

参考サイト