using jQuery in Rails

公開日時 okkez Sat, 20 Feb 2010 02:00:00 GMT

最近 Rails で作っているウェブアプリケーションでは jQuery を使うようにしている。 なんとなくこうすれば良さそう、というのがわかってきたので書いておく。

google の jsapi を使う。 どこかのブログで見つけたコード片をちょっと変更したやつ。

module ApplicationHelper

  def google_jsapi_tag
    '<script type="text/javascript" src="http://www.google.com/jsapi"></script>'
  end

  def google_load_tag(name, version)
    %Q|<script type="text/javascript">google.load("#{name}", "#{version}");</script>|
  end

end

layout では以下のようにする。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <%= google_jsapi_tag %>
    <%= google_load_tag 'jquery', '1.3' %>
    <%= google_load_tag 'jqueryui', '1.7' %>
    <%= javascript_include_tag 'application' %>
    <%= yield :head %>
    <%- javascript_tag do -%>
      jQuery(function($){
        if (navigator.cookieEnabled) {
          $("#cookie_check").hide();
        } else {
          $("#cookie_check").show();
        }
        <%= yield :script %>
      });
    <%- end -%>
    <%= stylesheet_link_tag 'application' %>
    <%= stylesheet_link_tag 'jquery-ui-1.7.2.custom' %>
    <title><%= @title %></title>
  </head>
  <body>
    <!-- 略 -->
  </body>
</html>

こうしておくと view では以下のように書くことができる。

<%- content_for :script do -%>
$("a#hoge").click(function(event){ /* なんか処理 */});
<%- end -%>

global な名前空間を汚さないし、割と短く書けるし気に入っている。

Continue reading...

Posted in ,  | タグ , , ,  | コメントはありません | トラックバックはありません

Kanasan.JS prototype.js CodeReading#6

公開日時 okkez Mon, 13 Oct 2008 14:05:00 GMT

行ってきました。

午前中は、通院のため行けなかったので午後から参加。

前回と違ってサイ本を読破していたのでそこそこちゃんと読めた。 以前の部分も復習しておかないとぁ。

1.6.0.2 が終わってからは差分を見ながら変更点の確認。

CHANGELOG を見ながら追っかけてました。 そのときやってた方法は以下のような感じ。

  • 読んでる部分の特定のキーワードで CHANGELOG で検索。

その後途中から Yuya さんのアドバイスで読み方変更。

prototype.js は git 上では複数のファイルに分かれているので読んでいる部分に対応するファイルを 見つけてそのファイルのログを見る必要があります。 配布ファイルの差分が追加/変更の場合は git blame で追加/変更部分が blame でも表示されるので 該当するチェンジセットのコミット内容を git show します。

ほぼすべてこれで変更内容を把握することができました。 ただし、 blame は削除部分に関しては何も教えてくれないのでそこは工夫しないといけない。

Continue reading...

Posted in  | タグ  | コメントはありません | トラックバックはありません

jQuery UI Tabs でハマった件

公開日時 okkez Thu, 18 Sep 2008 09:25:00 GMT

動的にタブのセットを入れ子にしていくときにハマったので書いておく。

HTML の仕様的に考えれば当然なんだけど、入れ子になっている部分の要素の id が一切重複してはいけないようだ。 重複していると予想外の動作をする上に、証拠を残さずに DOM を変更してくれるので調査しづらい。

id が重複した瞬間に通知してくれるようなツールがあるといいのだけどそんな都合のいいものはないですよね。

Continue reading...

Posted in  | タグ ,  | コメントはありません | トラックバックはありません

prototype.js code reading #5

公開日時 okkez Sun, 15 Jun 2008 13:00:00 GMT

行ってきた。

javascript のメタプログラミングが段々分かってきた気がする。

だけど、自分でまったくコードを書いてないので、気がするだけなんだろうな。

ぼちぼち、自分のペースで勉強していきたい。

Continue reading...

Posted in  | タグ  | コメントはありません | トラックバックはありません

HaskellWorkshop #8 and Kanasan.js(code reading) #3

公開日時 okkez Sun, 03 Feb 2008 09:38:00 GMT

ふつける読書会の#8 と prototype.js のコードリーディングに参加してきた。

ふつける読書会

ふつけるの読書会。

LazyLines という wiki clone の実装の説明の前半部分を読んだ。

Haskell は結構忘れてたけど意外とさっくり読めた。

Haskell で何か作りたい。

次回は 2/22 (Fri) 夜の予定。

Kanasan.js

初参加なの上に javascript はさっぱりなので大人しくしているつもりだったのに内容がないことを結構発言してたような気がする。邪魔してたのでなければ良いのだけど。

コードリーディングは1300行目辺りから。Ajax系のクラスの辺り。 と Element を操作する系のところ。insert の途中まで。

内容については誰かが詳しくレポートしてくれるだろうから、コード読むときに準備しとくとよいものを書いておく。

  • vim (viewで起動させてreadonlyで読むといい)
    • emacs だと色分けがあまり上手くいかない。
  • prototype.js のリファレンスマニュアル
    • windows は chm が配布されてるのでそれを。
    • *nix 系な人は pdf か web で。
  • 実験用の html ファイル (後述)と firebug

気になったこと、というか誰か作ってほしいもの。

  • javascript 用の [ec]tags コマンド
  • コードからリファレンスを引ける prototype.js 用の emacs マイナーモード

次回も可能であれば参加する予定。

Continue reading...

続きを読む...

Posted in  | タグ , ,