RJSなら数行のRubyコードでAjaxアプリを作成できる：Ruby on RailsのRJSでかんたんAjax開発（後編）（1/4 ページ）

» 2008年10月22日 00時00分公開

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

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

　今回は、前回の「かんたん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>

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

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

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

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

link_to_remoteを使ったAjax呼び出し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呼び出しを行うタグを生成するヘルパメソッドです（参考: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>

コラム　「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>

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

拡張子「.js」の場合は、RJSでレスポンスする

　　　　　　 1|2|3|4 次のページへ

SpecialPR