Ruby on RailsのRJSでかんたんAjax開発（後編）
〜パターンとライブラリで作るAjaxおいしいレシピ（出前編）〜

RJSなら数行のRubyコードで
Ajaxアプリを作成できる

志田裕樹
株式会社アークウェブ

2008/10/22

■ カテゴリ詳細画面内に商品一覧を埋め込み

- PR -

　それでは、カテゴリ詳細画面に、そのカテゴリに所属する商品の一覧を埋め込みます。表示される商品一覧は、Categoryモデルクラスにhas_manyアソシエーションを設定することで追加された、「@category.products」を利用することで簡単に取得できます。

　カテゴリ詳細画面のビューの中で、パーシャルを使って商品一覧を描画させてみましょう。

<div id='products'>
  <%= render:partial => "product",:collection => @category.products %>
</div>

　パーシャルは次のようにしました。

<div class='product'>
  <div id='product_image'><%= image_tag(product.image_url) %></div>
  <span id='product_name'><%= product.name %></span>
  <span id='product_price'><%= product.price %>円</span>
</div>
<% if product_counter % 3 == 0 %>
<br class="clear" />
<% end %>

　image_tagは、<img>タグを生成するヘルパメソッドです（参考：image_tagのリファレンス）。product_counterは、繰り返し描画のうち、現在の何回目の描画かを返すメソッドです。3回目ごとに、「<br class="clear" />」を入れて、改行させています。

　ここまでで、カテゴリ内商品が表示されました。

■ カテゴリ内商品もRJSでも変えられるようにする

　表示するカテゴリを変更した際、カテゴリ名や説明文と同様に商品一覧もRJSで書き換わるようにします。これもshow.js.rjsに、次の記述を追加するだけで実現できます。

page[:products].
    replace_html(:partial => "product",
    :collection => @category.products)

　このようにreplace_htmlメソッドでは、前回記事でも説明した「renderメソッド」と同じ引数を受け取り、パーシャルなどで描画させた結果で、DOM要素の置き換えをすることも可能です。

リンク ここまでのサンプルを確認する
リンク ここまでのソースコードを確認する

　Transition付きでBlindDownエフェクトを掛ける

　次に、RJSを使って商品の切り替え時にBlindDownエフェクトを掛けてみます。show.js.rjsに次の行を追加します。

page[:products].visual_effect(:blind_down,
    {:duration => 1.2,
    :fps => 30})

　visual_effectの第2引数には、エフェクトの掛かり具合を調整するパラメータを指定できます。このパラメータはそのままscript.aculo.usのEffectクラスに渡ります（参考：visual_effectのリファレンス）。

　ここでさらに、BlindDownエフェクトに連載「パターンとライブラリで作るAjaxおいしいレシピ」の第4回「Ajaxの弱点を補うscript.aculo.usの楽しいエフェクト」で紹介した独自のTransition（パラメータの変化スピードを変える）である「easeOutBounce」を設定してみましょう。

　独自のTransitionは、script.aculo.usのEfect.TransitionsにJavaScript関数を追加する必要があります。ですが、このようなJavaScript関数の定義をRJSで行うのは困難なので、JavaScript関数は通常の.jsファイル内に記述し、RJSは、この定義済み関数を利用するようにします。独自のJavaScript関数などは、「public/javascripts/application.js」に記述します。

Effect.Transitions.easeOutBounce = function(pos) {
    if(pos < (1 / 2.75)) {
        return (7.5625 * pos * pos);
    } else if(pos < (2 / 2.75)) {
        return (7.5625 * (pos -= (1.5 / 2.75)) * pos + .75);
    } else if (pos < (2.5 / 2.75)) {
        return (7.5625 * (pos -= (2.25 / 2.75)) * pos + .9375);
    } else {
        return (7.5625 * (pos -= (2.625 / 2.75)) * pos + .984375);
    }
}

　作成したtransitionでvisual_effectを呼び出すには、次のようにします。

page[:products].visual_effect(:blind_down,
    {:duration => 1.2,
    :fps => 30,
    :transition => page.literal("Effect.Transitions.easeOutBounce")
    })

　このように、関数名などはliteralを通じて渡す必要があります（参考：literalのリファレンス）。

リンク ここまでのサンプルを確認する
リンク ここまでのソースコードを確認する

　JavaScriptオフ対策


■ JavaScriptオフ用にhref属性を付ける

　次に、JavaScriptが利用できないクローラなどにも対応できるように、link_to_remoteが生成する<a>タグのhref属性に、カテゴリ詳細画面へのリンクを設定してみます。href属性などのHTML属性値の指定は、link_to_remoteの第3引数にて行います。

<li><%= link_to_remote(category.name,
    {:url => category_path(category) + ".js",
    :method => :get},
    {:href => category_url(category)}) %></li>

　これだけで、JavaScriptオフ時の画面表示も確保できました。

■ ディープリンクに対応させる

　最後に、連載「パターンとライブラリで作るAjaxおいしいレシピ」の第6回「Aptana Jaxerで解決するAjaxのSEO対策とは？」でも紹介したSWFAddressを使用し、ここまでのサンプルをディープリンクに対応させてみます。ディープリンクに対応させるには、次の手順で処理します。

  1. ページがロードされたらURLの「#」以下の値が設定されていればその値に従ってRJSを呼び出す
  2. タブをクリックされたらURLの「#」以下を設定する

　ページのロード完了後のJavaScriptの処理はRJSでは制御が困難です（「インラインRJS」という手法がありますが、今回は取り上げません）。RJSで実現が難しいものに関しては、無理にRJSで実装することにこだわらず、application.jsに記述します。

　まず、public/javascripts配下に、swfaddress.jsを配置し、/app/views/layouts/categories.html.erb内に下記を追加し、SWFAddressを読み込みます。

<%= javascript_include_tag "swfaddress" %>

　次に、上記手順1に当たる処理を行うために、application.jsに次を追加します。

document.observe("dom:loaded", function() {
    var path = SWFAddress.getPath();
    if (path != "/") {
        path = path.replace(/^\/(.*?)\/$/, "$1");
        new Ajax.Request(path + '.js', {method: "get"});
    }
});

　SWFAddress.getPath()は、現在の「#」以降の値からパスの値を返すメソッドです（参考：getPathのリファレンス）。

　上記手順2の処理を行うために、show.js.rjsに次の行を追加します（参考：setValueのリファレンス）。

page.SWFAddress.setValue(@category.id.to_s)

　これにより、次のJavaScriptが生成されます。

SWFAddress.setValue("カテゴリID");

　「page.SWFAddress.setValue」の記述は、RJSの「クラスプロキシ」という機能を利用したものです。これは、pageに渡されたメソッドが、定義済みのメソッドにマッチしない場合、JavaScriptのクラス名にするというものです（参考：クラスプロキシの解説（上部の解説文の最下部にクラスプロキシの説明があります））。

　これでサンプルが完成しました。

リンク ここまでのサンプルを確認する
リンク ここまでのソースコードを確認する

　RJSの“3”つの利点とは？

　今回の記事ではRJSの解説をメインに行いました。RJSは、サーバサイドで実行させる内容をすべて生成するため、次のような利点があります。

  1. 一度の通信でさまざまな処理を実現できる
  2. Rubyの宣言的記述でシンプルに記述できる
  3. Railsのモデルやパーシャルを活用できる

　ただし、複雑なJavaScriptクラスや関数の定義や、クライアントサイドの情報を使ったロジック処理には向いていないケースもあります。このような場合は外部JavaScriptファイルを併用します。

　RJSにはここでは解説し切れなかった魅力がまだまだあるので、試してみてはいかがでしょうか。今回のサンプルはこちらからダウンロードできます。ライセンスはGPL 2となります。

4/4
  

Index
RJSなら数行のRubyコードでAjaxアプリを作成できる
  Page1
ほんの数行のRubyコードで、Ajaxアプリケーションを
RJSを使ってカテゴリ切り替えをAjax化
コラム　「Railsはprototype.jsとscript.aculo.usを使う」
  Page2
コラム　「RJSで利用可能なメソッド」
デザインを適用したデモを確認してみる
RJSで、楽しいエフェクトを掛けよう
  Page3
タブがアクティブかどうかのデザインを変更
データベースの商品情報をscaffoldで作成し、表示させる
Page4
Transition付きでBlindDownエフェクトを掛ける
JavaScriptオフ対策
RJSの“3”つの利点とは？

Ruby on RailsのRJSでかんたんAjax開発
　Ruby／Rails関連記事
プログラミングは人生だ
まつもと ゆきひろのコーディング天国　ときにプログラミングはスポーツであり、ときにプログラミングは創造である。楽しいプログラミングは人生をより実りあるものにしてくれる
生産性を向上させるRuby向け統合開発環境カタログ
Ruby on Rails 2.0も強力サポート　生産性が高いと評判のプログラミング言語「Ruby」。統合開発環境を整えることで、さらに効率的なプログラミングが可能になる
かんたんAjax開発をするためのRailsの基礎知識
Ruby on RailsのRJSでかんたんAjax開発（前編）　実はAjaxアプリケーション開発はあなたが思うよりも簡単です。まずはRuby on Railsの基礎知識から学びましょう
Praggerとnetpbmで作る画像→AA変換ツール
Rubyを使って何か面白いものを作ってみよう！　一般的な画像をアスキーアートに変換するツールを作ってみる。さらに出力にバリエーションを持たせてみよう
コードリーディングを始めよう
Railsコードリーディング〜scaffoldのその先へ〜（1）　優れたプログラマはコードを書くのと同じくらい、読みこなす。優れたコードを読むことで自身のスキルも上達するのだ
　　Coding Edgeフォーラムフィード　 2.0／1.0／0.91

TechTargetジャパン

Coding Edge フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH