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

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

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

2008/10/22

　ほんの数行のRubyコードで、Ajaxアプリケーションを

- PR -

　今回は、前回の「かんたんAjax開発をするためのRuby on Railsの基礎知識」に引き続き、Ruby on Rails（以降、Rails）が提供するRJSを使用したAjaxの開発の仕方について解説しています。

　まだRailsを使ったことがない方でも大枠の理解ができるように、前回はRuby言語やRailsの基本部分を解説しました。後編である今回はいよいよ本題のRJSの解説をメインに進めていきます。RJSを利用すれば、ほんの数行のRubyコードを書くだけで、非常に簡単にアプリケーションをAjax対応できることを解説していきます。

■ もう一度、サンプルをおさらい


今回のサンプルプログラム（拡大表示はこちら、Webブラウザの仕様の変更などによりアプリケーションが動作しなくなる場合もありますが、あらかじめご了承ください。また、サンプルのライセンスはGPL 2となります）

　ECサイトによく見られるカテゴリ情報詳細ページをサンプルにしています。このサンプルには以下のものがあります。

  • カテゴリ切り替えタブ
  • 現在のカテゴリの名前
  • 現在のカテゴリの説明文
  • 現在のカテゴリ内の商品

　タブ切り替えをAjaxで実現していて、次のエフェクトを掛けています。

  • カテゴリ名と説明文：Appearエフェクト
  • カテゴリ内商品：BlindDownエフェクト

　JavaScript無効時も、画面遷移によってカテゴリの情報が切り替わるようにしています。拡大表示の方は、SWFAddress（連載「パターンとライブラリで作るAjaxおいしいレシピ」の第6回「Aptana Jaxerで解決するAjaxのSEO対策とは？」で解説）を使用してディープリンクに対応しています。

　今回のサンプルは新バージョンのRails 2.1.0を使用しています。

■ 前回までの開発内容をおさらい

　前回は、まず、scaffoldでカテゴリを作成し、fixtureでサンプルデータを登録しました。また、カテゴリ詳細画面でカテゴリ切り替え用の「タブ」を表示するために、categories_controller.rbの、show()アクションメソッド内に、以下のコードを追加しました。

@categories = Category.find(:all)

　また、ビューの、show.html.erb内に、以下のような「パーシャル呼び出し」を追加しました。

<ul id='categories'>
  <%= render({:partial => "category",:collection => @categories}) %>
</ul>

　パーシャルの内容は、以下にしました。

<li><%= link_to(category.name, category_path(category)) %></li>

　これにより、カテゴリ名のリンクをクリックすると、そのカテゴリ詳細画面に遷移できます。

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

　RJSを使ってカテゴリ切り替えをAjax化

　前置きが長くなりましたが、画面遷移によって実現されたカテゴリの切り替えを、RJSを使用してAjax化してみましょう。カテゴリ名をクリックした際に、次の処理が行われるようにします。

  1. XMLHttpRequestでサーバを呼び出す
  2. サーバはRJSでカテゴリ名、カテゴリ説明の値を更新をさせるJavaScriptコードを生成する
  3. WebブラウザはXMLHttpRequestの戻り値として返されるJavaScriptコードを実行する

■ link_to_remoteを使ったAjax呼び出し

　カテゴリ名一覧部分のlink_toを次のように書き換えてみましょう。

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

　link_to_remoteは、onclickでXMLHttpRequest呼び出しを行う<a>タグを生成するヘルパメソッドです（参考:link_to_remoteのリファレンス）。

　これにより生成されるタグは、以下です。

<a href="#" onclick="
  new Ajax.Request('/categories/523709510.js',
    {asynchronous: true,
    evalScripts: true,
    method: 'get',
    parameters: 'authenticity_token=' +
    encodeURIComponent('d96a6fc19ae60e86ffdd2b89001faa51d1f09f6a')
  }); return false;">動物Tシャツ</a>

　「new Ajax.Request」はprototype.jsのAjax.Requestクラスを生成する命令です（参考：Ajax.Requestのリファレンス）。authenticity_tokenは、RailsのCSRF（Cross-Site Request Forgeries）対策で、自動で付与されるパラメータです。

コラム　「Railsはprototype.jsとscript.aculo.usを使う」
Railsは「rails」コマンドで最初に開発環境を作成した時点で、次のJavaScriptファイルをpublic/javascriptsディレクトリの中に配置しています。
  • prototype.js − prototype.js本体
  • effects.js − script.aculo.usのeffects.js
  • controls.js − script.aculo.usのcontrols.js
  • dragdrop.js − script.aculo.usのdragdrop.js
  • application.js − 自作JavaScript関数などを記述するファイル
Rails 2.1.0にバンドルされているprototype.jsのバージョンは「1.6.0.1」です。そしてRJSや、link_to_remote()のようなヘルパメソッドは、prototype.jsやscript.aculo.usを使用するJavaScriptコードを生成する仕組みとなっています。

■ prototype.jsなどを読み込ませる

　scaffoldで生成されたアプリケーションは初期状態では、<script>タグでprototype.jsなどが読み込まれません。Railsが生成する画面のうち<head>タグ部分など、アプリケーション内で共通化される部分は、app/views/layouts配下に配置される、「レイアウト用テンプレート」を使用して生成されます（Railsの思想「同じことを繰り返さない」の一例）。

　Railsはビューで表示を行う際、現在利用されているコントローラ名と同名のレイアウト用テンプレートが存在すれば自動的にそれを使用します（「設定よりも規約」の一例。参考：Automatic layout assignmentの章）。

　今回はscaffoldが生成した「app/views/layouts/categories.html.erb」ファイルが使用されています。<head>タグ部分に、次の記述を追加しておきます。

<head>
  <meta http-equiv="content-type"
    content="text/html;charset=UTF-8" />
  <title>Categories: <%= controller.action_name %></title>
  <%= javascript_include_tag(:defaults) %> <!-- この行を追加 -->
  <%= stylesheet_link_tag 'scaffold' %>
</head>

　javascript_include_tag()は、<script>タグを生成するヘルパメソッドです（参考：javascript_include_tagのリファレンス）。「:defaults」を引数に渡すと、次のようなHTMLが生成されます。

<script src="/javascripts/prototype.js" type="text/javascript">
</script>
<script src="/javascripts/effects.js" type="text/javascript">
</script>
<script src="/javascripts/dragdrop.js" type="text/javascript">
</script>
<script src="/javascripts/controls.js" type="text/javascript">
</script>
<script src="/javascripts/application.js" type="text/javascript">
</script>

 
1/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