Rails(以降、Rails)が提供するRJSを使用したAjaxの開発の仕方について解説しています。Railsを使ったことがない方でも大枠の理解ができるように、前回はRuby言語やRailsの基本部分を解説しました。後編である今回はいよいよ本題のRJSの解説をメインに進めていきます。RJSを利用すれば、ほんの数行のRubyコードを書くだけで、非常に簡単にアプリケーションをAjax対応できることを解説していきます。一度、サンプルをおさらい今回のサンプルプログラム(拡大表示はこちら、Webブラウザの仕様の変更などによりアプリケーションが動作しなくなる場合もありますが、あらかじめご了承ください。2となります)ECサイトによく見られるカテゴリ情報詳細ページをサンプルにしています。このサンプルには以下のものがあります。現在のカテゴリ内の商品タブ切り替えをAjaxで実現していて、次のエフェクトを掛けています。カテゴリ名と説明文:Appearエフェクトカテゴリ内商品:BlindDownエフェクトJavaScript無効時も、画面遷移によってカテゴリの情報が切り替わるようにしています。Jaxerで解決するAjaxのSEO対策とは?」で解説)を使用してディープリンクに対応しています。2.1.0を使用しています。前回までの開発内容をおさらい前回は、まず、scaffoldでカテゴリを作成し、fixtureでサンプルデータを登録しました。カテゴリ詳細画面でカテゴリ切り替え用の「タブ」を表示するために、categories_controller.rbの、show()アクションメソッド内に、以下のコードを追加しました。Category.find(:all)また、ビューの、show.html.erb内に、以下のような「パーシャル呼び出し」を追加しました。%></ul>パーシャルの内容は、以下にしました。%></li>これにより、カテゴリ名のリンクをクリックすると、そのカテゴリ詳細画面に遷移できます。前置きが長くなりましたが、画面遷移によって実現されたカテゴリの切り替えを、RJSを使用してAjax化してみましょう。カテゴリ名をクリックした際に、次の処理が行われるようにします。XMLHttpRequestでサーバを呼び出すサーバはRJSでカテゴリ名、カテゴリ説明の値を更新をさせるJavaScriptコードを生成するWebブラウザはXMLHttpRequestの戻り値として返されるJavaScriptコードを実行するlink_to_remoteを使ったAjax呼び出しlink_to_remoteを使ったAjax呼び出しカテゴリ名一覧部分のlink_toを次のように書き換えてみましょう。%></li>link_to_remoteは、onclickでXMLHttpRequest呼び出しを行うタグを生成するヘルパメソッドです(参考:link_to_remoteのリファレンス)。これにより生成されるタグは、以下です。「Railsはprototype.jsとscript.aculo.usを使う」Railsは「rails」コマンドで最初に開発環境を作成した時点で、次のJavaScriptファイルをpublic/javascriptsディレクトリの中に配置しています。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はビューで表示を行う際、現在利用されているコントローラ名と同名のレイアウト用テンプレートが存在すれば自動的にそれを使用します(「設定よりも規約」の一例。assignmentの章)。今回はscaffoldが生成した「app/views/layouts/categories.html.erb」ファイルが使用されています。タグ部分に、次の記述を追加しておきます。%></head>javascript_include_tag()は、<script>タグを生成するヘルパメソッドです(参考:javascript_include_tagのリファレンス)。「:defaults」を引数に渡すと、次のようなHTMLが生成されます。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。