RJSによる Ajax アプリの作成

ruby

rails の RJS を使うと簡単に Ajax アプリが作れる。自分も RJS を知るまでは Ajax なんて何処から勉強していいのか全く分からなかったけど、それでも簡単に作れた。改めて Rais のすごさを認識。

rails で Ajax を使うには主に以下の点がポイントとなる。

  • view で Ajax 用のメソッドを使う
  • 表示中 html の内容を書き換えるための RJS Template ファイルを作成する

Ajax 用のメソッドとは、「link_to_remote」や「form_remote_tag」である。これらを使用すると prototype.js の Ajax クラスを使用した javascript が自動生成される。

RJS Template ファイルでは、insert_html や replace といったメソッドを使って表示中の html を書き換える。


超簡単にRJSについて説明したが、サンプルを見た方が分かりやすいと思うので、これから簡単な RJS のサンプルを作ってみる。

テーブル作成

せっかく Ajax を使うので、どうせなら DB にデータを入れたり削除したりという事をした方が楽しいので、まずデータを格納するテーブルを作成する。
ここで気をつけるのは、Ajax を使う場合は文字コードには UTF-8 を使うという事。

  create table animals (
    id int auto_increment primary key,
    name varchar(255)
  ) default character set utf8;

コントローラ、モデルの作成

次にコントローラとモデルを作成する。

  $ ruby script/generate controller AjaxTest
  $ ruby script/generate model Animal

作成したコントローラを開き、まず始めにアクセスするためのアクションを作成する。

app/controll/ajax_test_controller.rb
def index
  @animals = Animals.find :all
end

次に、index に対応する view を作成する。

app/view/ajax_test/index.rhtml
<ul id='list'>
<%= render :partial => "li", :collections => @animals %>
</ul>
<%= form_tag :action => :add %>
<%= text_field :animal, :name %>
<%= submit_tag "追加" %>
<%= end_form_tag %>
app/view/ajax_test/_li.rhtml
<li><%= li.name %></li>

Ajax化

ここまでは、普通の Rails アプリと同じ。ではいよいよこれから、Ajax していく。まず Ajax を使うための javascript ファイルを含めるため、layout を作成し、javascript_include_tag を呼び出す。

app/view/layout/ajax_test.rhtml
<html>
  <head>
    <%= javascript_include_tag :defaults %>
  </head>
  <body>
    <%= @content_for_layout %>
  </body>
</html>

次に、先ほど作成した index.rhtml 内の from_tag を form_remote_tag に変更する。これにより、「追加」ボタンを押したときに画面遷移せずに Ajax クラスを呼び出して 画面を書き換える処理の実行ができるようになる。

 <%= form_remote_tag :url => { :action => :add } %>

バックグラウンド処理となる add をコントローラに追加する。

app/controller/ajax_test_controller.rb
def add
  @animal = Animal.new(params[:animal])
  @animal.save
end

最後に、RJS Template ファイルを作成する。ファイル名は「(アクション名).rjs」とする。

app/view/ajax_test/add.rjs
page.insert_html :bottom, 'list', render(:partial => "li", :locals => { :li => @animal })
page.visual_effect :highlight, 'list', :duration => 1

page.insert_html でオブジェクト 'list' の下端(:bottom)にコンテンツ(

  • @animal.name
    • ) が
    追加される。visual_effect は 見た目の効果で、今回は追加した後でハイライト処理をしている。


    これで完成。http://localhost:3000/ajax_test/ にアクセスし、テキストフィールドに適当に文字を入力して「追加」を押すと、リストに追加した文字列が表示される。