ほんの数行のRubyコードで、Ajaxアプリケーションを
今回は、前回の「かんたんAjax開発をするためのRuby on Railsの基礎知識」に引き続き、Ruby on Rails（以降、Rails）が提供するRJSを使用したAjaxの開発の仕方について解説しています。
まだRailsを使ったことがない方でも大枠の理解ができるように、前回はRuby言語やRailsの基本部分を解説しました。後編である今回はいよいよ本題のRJSの解説をメインに進めていきます。RJSを利用すれば、ほんの数行のRubyコードを書くだけで、非常に簡単にアプリケーションをAjax対応できることを解説していきます。
もう一度、サンプルをおさらい
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
ECサイトによく見られるカテゴリ情報詳細ページをサンプルにしています。このサンプルには以下のものがあります。
- カテゴリ切り替えタブ
- 現在のカテゴリの名前
- 現在のカテゴリの説明文
- 現在のカテゴリ内の商品
タブ切り替えをAjaxで実現していて、次のエフェクトを掛けています。
- カテゴリ名と説明文：Appearエフェクト
- カテゴリ内商品：BlindDownエフェクト
JavaScript無効時も、画面遷移によってカテゴリの情報が切り替わるようにしています。拡大表示の方は、SWFAddress（連載「パターンとライブラリで作るAjaxおいしいレシピ」の第6回「Aptana Jaxerで解決するAjaxのSEO対策とは？」で解説）を使用してディープリンクに対応しています。
今回のサンプルは新バージョンのRails 2.1.0を使用しています。
前回までの開発内容をおさらい
前回は、まず、scaffoldでカテゴリを作成し、fixtureでサンプルデータを登録しました。また、カテゴリ詳細画面でカテゴリ切り替え用の「タブ」を表示するために、categories_controller.rbの、show()アクションメソッド内に、以下のコードを追加しました。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
また、ビューの、show.html.erb内に、以下のような「パーシャル呼び出し」を追加しました。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
パーシャルの内容は、以下にしました。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
これにより、カテゴリ名のリンクをクリックすると、そのカテゴリ詳細画面に遷移できます。
JSを使ってカテゴリ切り替えをAjax化
前置きが長くなりましたが、画面遷移によって実現されたカテゴリの切り替えを、RJSを使用してAjax化してみましょう。カテゴリ名をクリックした際に、次の処理が行われるようにします。
- XMLHttpRequestでサーバを呼び出す
- サーバはRJSでカテゴリ名、カテゴリ説明の値を更新をさせるJavaScriptコードを生成する
- WebブラウザはXMLHttpRequestの戻り値として返されるJavaScriptコードを実行する
link_to_remoteを使ったAjax呼び出しlink_to_remoteを使ったAjax呼び出し
カテゴリ名一覧部分のlink_toを次のように書き換えてみましょう。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
link_to_remoteは、onclickでXMLHttpRequest呼び出しを行うタグを生成するヘルパメソッドです（参考:link_to_remoteのリファレンス）。
これにより生成されるタグは、以下です。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
コラム 「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」ファイルが使用されています。
タグ部分に、次の記述を追加しておきます。*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
javascript_include_tag()は、<script>タグを生成するヘルパメソッドです（参考：javascript_include_tagのリファレンス）。「:defaults」を引数に渡すと、次のようなHTMLが生成されます。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
Copyright © ITmedia, Inc. All Rights Reserved.