Ruby on Rails での Ajax の使用

執筆: Brian Leonard、管理: Natalie Jeremy
2008 年 2 月 [リビジョン番号: V6.0-7]

このチュートリアルでは、NetBeans Ruby on Rails プロジェクトに Ajax サポートを追加します。この例では、ブログに動的にコメントを追加する方法を説明します。

目次

• サンプルデータベースの作成
• 部分テンプレートの作成
• Ajax サポートの追加
• 動的更新用 RJS の追加
• その他の可能な操作: 視覚効果の適用

このチュートリアルを完了するには、次のソフトウェアとリソースが必要です。

ソフトウェアまたはリソース	必須バージョン
Ruby サポートを含む NetBeans IDE	Version 6.0
MySQL データベースサーバー	Version 5.0
Rails フレームワーク	1.2.5*

* このチュートリアルは Rails 1.2.5 向けに記述されており、スキャフォールドに言及しています。スキャフォールドは Rails 2.0 ではサポートされていないので、このチュートリアルで Rails 2.0 を使用することはできません。

サンプルデータベースの作成

このチュートリアルは、「Rails モデル間の関係の構築」というチュートリアルに基づいて作成されています。このチュートリアルをすでに終了している場合、チュートリアルで構築したプロジェクトを使用して開始し、次の節に進むことができます。終了していない場合、RubyWebLogModel.zip ファイルをダウンロードし、サンプルデータベースを作成する手順に従ってください。

注: このチュートリアルでは、MySQL データベースサーバーを使用します。Ruby アプリケーションでの MySQL データベースサーバーの使用については、「Ruby サポートのインストールと設定」を参照してください。この記事では、代わりに Java DB データベースサーバーを使用する方法も説明します。

1. コマンドウィンドウを開きます。
2. MySQL データベースサーバーをまだ起動していない場合、起動します。

3. 次のコマンドを入力して開発用データベースを作成し、Enter キーを押します。

   mysqladmin -u root -p create rubyweblog_development

   注: root ユーザーにパスワードが必要ない場合、引数 -p を省略してください。

4. IDE で rubyweblog プロジェクトを開きます。

   注: IDE で Ruby プロジェクトを最初に開くか、または作成すると、バンドルされた JRuby ソフトウェア以外に Ruby のインストールが存在するかどうかが IDE によって確認されます。存在する場合、使用するソフトウェアを選択するよう求めるダイアログが表示されます。バンドルされた JRuby インタプリタを使用する場合は、「JRuby」を選択します。これ以外のインストールされている Ruby を使用する場合は、その Ruby を選択します。詳細は、「Ruby サポートのインストールと設定」チュートリアルの「独自の Ruby インストールを使用するための IDE の設定」を参照してください。

5. データベースにパスワードが必要な場合は、database.yml ファイルを編集し、開発構成の下にパスワードを指定します。ファイルを保存します。

   database.yml ファイルにすばやくアクセスするには、Alt-Shift-O キー (Mac の場合は Ctrl-Shift-O キー) を押して、「ファイル名」テキストボックスに「database.yml」と入力し、Enter キーを押します。

6. 「rubyweblog」ノードを右クリックし、「データベースマイグレーション」>「現在のバージョンへ」を選択します。

   このアクションによってデータベースが更新され、posts 表と comments 表が取り込まれます。マイグレーションが完了すると、「出力」ウィンドウに示されます。
7. アプリケーションを実行して新しい投稿を作成します。

8. 「Permalink」をクリックし、投稿にコメントを追加します。

   コメントを追加すると、ページ全体が再読み込みされます。

部分テンプレートの作成

現在の rubyweblog プロジェクトで、読者がページにコメントを追加すると、ブログエントリとコメントの両方がページに再読み込みされます。Ruby on Rails フレームワークの一部である Ajax サポートを使用して、動的にコメントを読み込むようにすることが、良い対処方法です。Ajax の使用を準備するためには、コメント表示用のコードを格納する部分テンプレートを作成します。部分テンプレートを使用する利点は、ブログエントリ自体を描画せずに、部分テンプレートを複数回 (ブログのエントリごとに 1 回) 呼び出せることです。

1. 「rubyweblog」ノードを右クリックし、「新規」>「RHTML ファイル」を選択します。ファイル名を _comment にして、app\views\blog フォルダに置きます。

   IDE によって _comment ファイルが作成され、編集領域に表示されます。完全テンプレートと区別するため、部分テンプレートは下線 (_) から始まります。

   現在、コメント表示用のコードは show.rhtml ファイルにあります。次の手順では、show.rhtml からこのコードを削除して、_comment.rhtml 部分テンプレートにペーストします。

2. 「rubyweblog」>「ビュー」>「blog」フォルダに移動して、show.rhtml を開きます。コメント表示用のコード (コード例 1 に示すコード) をカットします。カットしたコードを _comment.rhtml にペーストします。ファイル内の既存の内容すべてを置き換えます。

   <li><%= h comment.comment %><br>
     <div style="color: #999; font-size: 8pt">
      Posted on <%= comment.created_at.strftime("%B %d, %Y at %I:%M %p") %>
     </div>
   </li>
   
   

3. show.rhtml ファイルに戻り、次の 2 行を削除します。

   <% @post_comments.each do |comment| %>
   
   <% end %>
   

4. 次のコード例にボールドで示している <div> 要素を挿入します。このコードは、この前に 2 行を削除した箇所に追加します。

   <hr>
   <h4>Comments</h4>
   
   <ul>
     <div id="comments">
       <% @post_comments.each do |comment| %>
           <%= render :partial=>"comment", :object => comment %>
       <% end %>
     </div>
   </ul>
   

   このコードによって、comments という名前の <div> 要素が作成されます。@post_comments 変数には、_comment 部分テンプレートが表示するコメントが含まれます。

5. 「ファイル」>「すべてを保存」を選択してから、アプリケーションを実行します。

6. 「Permalink」をクリックし、投稿にコメントを追加します。

   この時点では、アプリケーションは以前と完全に同じ動作をします。ただしアプリケーションは、Ajax サポートの使用を開始できるように設計されています。

Ajax サポートの追加

Ajax サポートをプロジェクトに追加する際には、最初に JavaScript ライブラリの Prototype および script.aculo.us をインクルードします。 これらのライブラリは、Ruby on Rails にバンドルされています。Prototype ライブラリが Ruby on Rails での Ajax 実装の土台を提供するのに対し、script.aculo.us ライブラリはアプリケーションに追加可能な視覚効果を提供します。

1. 「ビュー」>「layouts」を展開し、blog.rhtml ファイルを開きます。

2. stylesheet_link_tag を含む行の下に、次のコード行を追加します。

     <%= javascript_include_tag :defaults %>
               

   このコードは、Ruby on Rails にバンドルされている JavaScript ライブラリ、Prototype と script.aculo.us をインクルードします。次の手順では、Ajax アクションをトリガーする form_remote_tag を作成します。

3. show.rhtml ファイルを開きます。HTTP POST を実行する既存の form_tag を削除し、XMLHTTPRequest を実行する次の form_remote_tag に置き換えます。

     <% form_remote_tag :url => {:action => "post_comment"} do %>
               

   このコードによって、blog.controller.rb ファイルにある post_comment アクションの Ajax アクションがトリガーされます。この時点では、読者がコメントを送信すると、以前と同様にページ全体が再読み込みされます。form_remote_ tag が使用され、Javascript ライブラリがインクルードされたら、ページは投稿されなくなります。ここで、実行する Javascript を探しますが、この処理はまだコーディングされていません。ただし、ページを再表示すると、コメントが追加されていることを確認できます。
4. 「コントローラ」ノードを展開し、blog_controller.rb ファイルを開きます。

5. post_comment アクションまでスクロールし、既存の redirect_to メソッド呼び出しを次のコードに置き換えます。

   render :update do |page|
     page.insert_html :bottom, 'comments', :partial => 'comment'
     page[:comment_comment].clear
     flash.keep(:post_id)
   end 

   上記のコードでは、_comment.rhtml 部分テンプレートをコメントの <div> タグの一番下に挿入しています。post_id を flash 内に維持することが重要です。そうしないと、ユーザーが挿入する追加コメントは post_id が nil になり、孤立化します (comments 表に参照整合性が定義されていない)。

6. プロジェクトを実行し、コメントが動的に更新されることを確認します。

その他の可能な操作: 視覚効果の適用

前にプロジェクトに取り込んだ script.aculo.us ライブラリは、アプリケーションのルック＆フィールを向上させるために使用できる視覚効果を提供します。ここで、ブログ内の最新のコメントを強調表示するための効果を適用してみましょう。この効果の適用後、script.aculo.us ライブラリのその他の効果を簡単にスワップインしたり試したりできます。

1. _comment.rhtml ファイルを開き、次にボールドで示す id プロパティーを既存の <li> タグに追加します。

   <li id=<%= "comment_#{comment.id}" %>>
   

   このコード行で、視覚効果を適用するコメントにラベルが付けられます。

2. blog_controller.rb ファイルに切り替え、render :update のブロックの末尾に次のコードを追加します。

    page["comment_#{@comment.id}"].visual_effect :highlight, :duration => 3.5
     

3. 「ファイル」>「すべてを保存」を選択し、ブラウザを再表示します (Rails で視覚効果を処理する Javascript コードを生成し、ブラウザに送信するために必要)。コメントを追加すると、新しいコメントが短い時間強調表示されます。

   

次の手順

• および のメーリングリストに参加すると、サポートを受けたり、NetBeans Ruby 開発機能の最新変更情報を入手したりできます。

• NetBeans Community Docs ページで、自分の NetBeans Ruby チュートリアルを送信できます。

>> その他の NetBeans Ruby ドキュメント