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 つを行う必要があります。
- JavaScript を使うように Rails を構成する。
- 単純に HTML リンクを描画するのではなく JavaScript の Ajax リクエストを送信するように、time リンクを変更する。
- 更新すべき HTML フラグメントを指定する。
- 更新された HTML のコンテンツのための場所を用意する
- コントローラー・メソッドと、場合によっては Ajax レスポンスを描画するビューを作成する。
もちろん、上記記事は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は表示で更新をかける場所ですね。