[Rails meets jQuery] Rails用jQueryプラグイン「jq4r」
書いた人: noriaki 2007,10月08日(月) 18:00
jq4r is a Rails plugin, which installs the jQuery JavaScript framework and provides useful helper methods, too. I wish this plugin also eases the design of the javascripts and make your RHTML clean.
Use jQuery on Rails: Check jq4r out!
jq4rは，jQueryをRuby on Railsで簡単に利用するためのHelperプラグインです．
jq4rを利用すると，prototype.jsを利用するlink_to_remoteなどのHelperメソッドと同様に，jQueryを利用するjquery_link_to_remoteといったHelperメソッドが利用できるようになります． そのため，jQueryに興味はあるけれど，javascriptを書かずにRubyだけ書いていたいという人も，簡単にjQueryを利用することができます．
このエントリでは，jq4rの導入方法と小さなバグのつぶし方，jQueryの特性を活かしたTipをご紹介します．
追記(2007/11/02 13:00)： プラグインのリポジトリ変更に伴いエントリを修正しました．
jq4rの導入
jq4rはRailsプラグインとして開発されていますので，通常のプラグインインストールと同様の手順で導入することができます．
<del>
$ script/plugin install http://jq4r.googlecode.com/svn/trunk/
$ mv vendor/plugins/trunk vendor/plugins/jq4r
</del><del>
$ rake jq4r:install
</del>$ script/plugin install http://jq4r.googlecode.com/svn/trunk/plugins/jq4rRevision 15 に存在するtypoの修正
現在（2007/10/08），trunkのjq4r.rb(Revision 15)には1箇所typoらしき間違いがあります．
追記(2007/11/02 13:00)：修正されたようですので，以下のpatchによる修正は必要ありません．
これを修正するために，適当なエディタでRAILS_ROOT/vendor/plugins/jq4r/lib/jq4r.rbを開き，jquery_remote_funcメソッドの最後にreturn文を追加します．
具体的には以下のpatchのようにfuncを追加してください．
Index: lib/jq4r.rb
===================================================================
--- lib/jq4r.rb (リビジョン 15)
+++ lib/jq4r.rb (作業コピー)
@@ -215,6 +215,7 @@
func = "#{func}; #{options[:after]}" if options[:after]
func = "if (#{options[:condition]}) { #{func}; }" if options[:condition]
func = "if (confirm('#{escape_javascript(options[:confirm])}')) { #{func}; }" if options[:confirm]
+ func
end
alias_method :jq_remote_func, :jquery_remote_funcなお，trunk以外のものには上記は必要ありません．
使い方
導入とtypo修正が済んだら，あとは使うだけです．
まず，jQueryのjsファイルを読み込むために，layoutファイルなどに以下を記述します．
<%= include_jq4r %>利用できる主なメソッドは以下のとおりです．ほとんどのメソッドはActionView::Helpers::PrototypeHelperに定義されているメソッドの使い方と同じです．
なお，prefixとして付いているjquery_は短縮形のjq_も利用でき，いくつかのDocumentにはjq_と書いてあります．
some people told me that it would be better that use jquery_ as the helpers' prefix. The reason is that the helpers with jquery_ prefix are more readable. I accepted this suggestion and from version 0.2 on, each helper will use jquery_ as its prefix.
Use jQuery on Rails: Prefix jq_ OR jquery_ ?
しかし，上記引用のように，次期バージョンの0.2からはjquery_が中心に使われるようなので，以下では全てprefixをjquery_としています．
jquery_link_to_remote
jQueryを利用したlink_to_remoteです．link_toのようにリンクを生成しますが，onclickでjQueryを利用したEventが設定されます．
利用例は以下のような感じです．
<%= jquery_link_to_remote( 'remote link',
:url => { :action => 'popup' },
:data => "'message=help§ion=1'",
:update => 'popupdiv' %>これは以下のようなHTMLに変換されます．
remote link
他にも以下のようなメソッドが利用できます．
- jquery_load_from_remote
- jquery_form_remote_tag
- jquery_remote_form_for
- jquery_submit_to_remote
- jquery_periodically_call_remote
- jquery_observe_field
- jquery_observe_form
- jquery_visual_effect
これらのメソッドはまた時間のあるときにでも使い方をご紹介します．
jQueryの特性を活かしたTip
jQueryを利用した非同期通信(AJAX)では，リクエストパラメータをJavaScriptのオブジェクトとして指定することができます．
そこで，jq4rプラグインのjquery_link_to_remoteなどのdataオプションには，以下のようにto_jsonメソッドを使ってHashを渡すことができます．
<%= jquery_link_to_remote( 'remote link',
:url => { :action => 'popup' },
:data => { :message => 'help', :section => 1 }.to_json,
:update => 'popupdiv' %>これによって生成されるHTMLは以下のようになります．
remote link
さらに，jQueryの部分だけ抜き出して整形してみると，以下のようになります．
$.ajax({
url: '/jquery/popup',
data: {
message: 'help',
section: 1
},
error: function(request) {},
complete: function(request) {
$('#popupdiv').html(request.responseText);
}
});
return false;
最近注目されているjQueryですが，Railsで利用するのも簡単になってきました． これを機に，Rails使いの皆さんもどんどんjQueryを使ってみてくださいね．
次回は，RSJテンプレートでjQueryを利用する方法とか，上記jq4rのほかのメソッドについて書こうかと思っています．期待せずに待っていてください．
