Ruby on Rails - jQuery で Ajax 処理（遅延読み込み）！
Updated:
Ruby on Rails アプリを作成していてあれこれと機能が追加されていくと、当然ながらだんだんと動作が重くなっていきます。 そこで、ページ表示時に処理に若干時間のかかる部分を遅らせて表示する方法を取り入れました。
ちなみに、当方の Ruby on Rails 製の Webサイトでは、既に以下については jQuery による処理を導入しています。
- ヘッダ部のサイトタイトル部分のボカシ処理 （CSS でも可能だが、W3C でエラーとなるため）
- ページ下部へスクロールした場合に表示するページの上部へ移動するボタン
また、別のアプリでは１つ目のセレクトボックの値を変更したら、２つ目のセレクトボックを連動させるようにしたりして使用しています。
jQuery による遅延読み込み処理
0. 前提条件
Ruby 1.9.3-p194, Rails 3.2.3 での作業を前提としています。 （最近の Rails では jQuery はデフォルトで使用可能となっています） 今回紹介するのは、ページロード時にページの特定の位置に本来の Rails 側の処理とは別に処理した結果を表示させる方法についてです。 具体的には、以下の通り。
- ページ読み込み時にビュー側からコントローラ内のメソッドをコール
- コントーラのメソッドで処理を行い、その結果を JSON データで返す
- ビュー側で JSON データを受け取り、指定の位置に表示させる
1. ビューを編集
遅延読み込みしたデータを表示させる場所を指定しやすいように、html タグに id をつけたりします。 今回はの表示させたい位置に以下のように記述しました。
<div id="hoge"><div>
CSS の項目の指定方法と同じ方法で指定する事になっています。 そういう指定方法だということが理解できていれば、どうにも指定可能です。
2. ビュー内に jQuery 部分を追加
Ajax 処理を行いたいビューに jQuery スクリプトを追加します。 今回は「ページロード時にコントローラの “call_ajax” というメソッドを引数無しで呼び出し、変数 “d” に返ってきた値を id=”hoge” 部分に単純に表示する」場合です。
<script type='text/javascript'>
$(function(){
// ページロード時
$( document ).ready( function(){
// "call_ajax" というメソッドを呼び出し
// ( 本質は URL の指定です。場合によってはパスが必要です。 )
$.get( "call_ajax" ,
function( d ){
// 値を指定の位置に設定
$( '#hoge' ).text( d.hoge );
});
});
});
</script>
3. コントローラにメソッド追加
ビュー側から呼び出される処理を行う部分をコントローラに追加します。
def call_ajax
#
# 何か処理を行い、変数 "hoge" に値を格納。
# JSON データをリターン
render :json => { :hoge => hoge }
end
4. 動作確認
以上の準備ができたら、ブラウザで動作確認します。 ページ表示時に、Rails 本来の表示処理とは別に Ajax による遅延表示がされているのがわかると思います。 Ajax 処理が重ければ違いがよくわかるはずです。 （ページの表示が完了しているはずなのに、Ajax 部分のみが送れて表示されるから）
今回の事を応用して、当方の Webサイトではヘッダ部分に表示させている各種情報の取得に jQuery による Ajax 処理（遅延読み込み）を使用しています。 速度検証はしていませんが、数倍も早く感じます。 興味があればリンクを訪問してみてください。（→ mk-mode SITE ）
参考サイト
jQuery に関して参考になるサイトです。
以上です。
Comments