スキマハコ

わすれがちなスキマな事を詰め込んでいます。ITの他に暮らしについても書いています。

railsサーバアプリ⇔ブラウザの同期


Javaとか.Netとかばっかり触っていたので、Webアプリとかそんなん本当にわからんちんです…。

やりたいこと。

Ajax(javascript)を使って、連携したい。
とりあえず、よくあるポーリング形式を実装したい。

遷移は以下の通り。
[登録ボタンおす]
javascriptは動いていない)

[クライアントが定期的にPOST]
javascriptが動く。画面の情報が格納されるまで繰り返す)

[終了]

環境設定(インストール)

Rails3.1からはjqueryが標準になるらしいけれど、現状入っていない*1ので、プラグインをインストール。
(参考:http://journal.sooey.com/137

Ajaxを試す

参考にしたのはこちら。

Ajax を追加する

Ajax を使うことで、Web ページの一部分のみを更新することができます。ほとんどの作業を、Rails ライブラリーが行ってくれます。このアプリケーションに Ajax を追加するためには、下記の 5 つを行う必要があります。

  1. JavaScript を使うように Rails を構成する。
  2. 単純に HTML リンクを描画するのではなく JavaScriptAjax リクエストを送信するように、time リンクを変更する。
  3. 更新すべき HTML フラグメントを指定する。
  4. 更新された HTML のコンテンツのための場所を用意する
  5. コントローラー・メソッドと、場合によっては Ajax レスポンスを描画するビューを作成する。

境界を越える: Ajax on Rails

もちろん、上記記事はRails3.0ではなく、2での実装なのでその個所についてはRails3.0用に修正を行いました。

リスト 5. show ビューを、Ajax を使うように変更する

<%= javascript_include_tag :defaults %>
<h1>Ajax show</h1>
Click this link to show the current 
<%= link_to_remote "time", 
    :update => 'time_div', 
    :url => {:action => "time"} %>.<br/>
<div id='time_div'>
</div>

↑をrails3.0で実現する場合は、以下の二つを用意することになるらしい。

  • view(今までの)
  • js(新しく)

とりあえず、rails3仕様に変更。

link_to 表示リンク,パス,:remote => true

なので、

<%= javascript_include_tag :defaults %>
<h1>Ajax show</h1>
Click this link to show the current 
<%= link_to "time","time",:remote => true%>.<br/>
<div id='time_div'>
</div>

に置き換え可能。この段階で、結果に遷移する!
js(新しく)はまだ分からず。。。
うーん、updateを指定できなくなったので、jsファイルが必要のようなのですが…。いまいちわかってません…。
これは後から。

リスト 8. リモート・メソッドを周期的にコールする

<%= javascript_include_tag :defaults %>
<h1>Ajax show</h1>
<%= periodically_call_remote :update => 'time_div', 
                             :url => {:action => "time"},
                             :frequency => 1.0 %>
<div id='time_div'>
</div>

periodically_call_remoteが破棄になっており、置き換えが必要です。

Prototype.js

rails.jsの方なのかな?
jqueryでなくても実現できました。

<script type="text/javascript">
  $(document).ready(function() {
    setInterval(function() {
      $('#time_div').load("time");
    }, 2000);
  });
</script>

"time"にはurl、#time_divは表示で更新をかける場所ですね。

TODO
  • jqueryでの自動更新
  • link_toでの部分更新方法
  • リモート・フォームの送信の方法

うがー。

*1:RailsにはAjaxを利用するライブラリ・構成はできているので、jqueryがなくてもプロトタイプ.jsの利用が可能のようです。