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化してみましょう。カテゴリ名をクリックした際に、次の処理が行われるようにします。

  1. XMLHttpRequestでサーバを呼び出す
  2. サーバはRJSでカテゴリ名、カテゴリ説明の値を更新をさせるJavaScriptコードを生成する
  3. 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>

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

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。