Ajax

2009年8月 5日 (水)

JavaScriptでソート・ページネーション対応テーブルを作る。

ページネーションをするのに、Railsではよくwill_paginateが使われるが、前回も言ったように、サーバー側でビューのロジックを書かないといけないのは好きになれない。

なので一度、データをすべてJSONで取得し、クライアント側のJavaScriptでソートやページネーションを行う対応をした。その分、初期表示が遅くなるかもしれないが、1000件ぐらいのデータだと、ものの10秒以内に表示できる。それ以上は表示しても、誰も見ないだろうから問題ないとしている。

ソースはgithubに上げました。
   git clone git://github.com/takeshy/sortable_table_with_pagination.git

  使い方
  table.jsを読み込み、下記のフォーマットでnewする。

 var tableObj = new SortableTable({id:'テーブルを表示するノードの親のID',
    data_set: テーブルデータ※後述
    block_num:1画面最大表示件数
    call_back: 画面描画後に呼び出すフック関数
   });
テーブルデータ
   { option: 出力するテーブルタグに付加する属性(style="width:52em;"など),
     header:[
      {name:'列のタイトル',sort:'ソート種別(number or normal)',width:'列幅'}
             :  ←列の数だけ上記エントリを作成
   ],
     data:[
      [行1、列1のデータ, 行1、列2のデータ,…],
                  :    ←行の数だけ上記エントリを作成
    ]
   }

(例) 本aが290円、本Bが330円,本Cが450円で1画面最大表示レコードが2件の場合

 var tableObj = new SortableTable({id:'book_div',
    data_set:{option:'class=”list”',header:
  [{name:'書籍名',sort:'normal',width:'10em'},
     {name:'金額',sort:'number',width:'6em'}],
     data:[['a','290円'],['b','330円'],['c','450円']]},
    block_num: 2,
    call_back:null
   });

イメージ
Table1_3  

| | コメント (0) | トラックバック (0)

2009年8月 4日 (火)

テンプレート・エンジンが好きになれない。

Webアプリ作成でjspやerbのようなテンプレート・エンジン使うのが好きに
なれません。
プレゼンテーションの処理がテンプレート・エンジンとJavaScriptでごっちゃ
になって複雑になりそうに感じます。
データをすべてjson形式で取ってきて、それをJavaScriptを使って画面に表示
するようにして、プレゼンテーション関連の処理はJavaScriptに統一するように
すればいいのに、と常々思っています。

長所

サーバーの負荷が減る

動的に内容が変わるHTMLではキャッシュが難しいですが、固定HTMLだと
HTMLを書き換えた時以外はキャッシュしたものを使えます。
また、プレゼンテーション周りの処理がクライアントに移る分負荷が減ります。

クライアントの自由度が増す
json形式のインターフェースがすでに用意されているので、表示をFlashに変えた
り、マッシュアップしたりする対応が簡単になります。Webサービスに対応する際
も認証を追加するぐらいで対応できます。

短所

携帯電話のようなJavaScript非対応のブラウザでは表示できない

これは、どうすることもできないですね。こういう場合はerbのような
テンプレートをガンガン使えばいいと思います。

テストが大変

ブラウザのコンポーネントを扱うJavaScriptをテストファーストで書くのは
かなり至難の業。
seleniumもありますが、あのテストを動作前に書くのはかなり効率が悪そう。

私が作ったWebアプリのWeb家計簿では、テンプレート・エンジンを使わず
データはすべてAjaxで反映しています。サーバ側の言語環境であるPythonを
習いたてだったにもかかわらず、機能的には実装しようと思ったものはすべて
実装できました。
JavaScriptが得意だったら、完全Ajaxベースにするのも、ありなのでは?

| | コメント (0) | トラックバック (0)

2008年9月27日 (土)

unicodeのエスケープ・アンエスケープ

かなり久しぶりの投稿。
最近仕事で、djangoを使っているが、pythonを今まで敬遠していたため、
いまいち慣れない。
自ずとテンプレートエンジンを使うのではなく、サーバーから持ってきた
JSONデータを使って、javascriptで画面を動的に変更するようにしている。
JSONデータは日本語データが\u3042のようにエスケープされた状態で
渡ってくるので、デバッグ時に何のデータが入っていたのか解かりにくい。
そこで、解析用のHTMLを作成した。変換ボタン押下で、通常の文字列が
入っていた場合はエスケープし、エスケープされた文が入っていた場合は
通常の文字列に変換する。

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
  <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Unicode変換</title>
 <script type="text/javascript">
 function changeUnicode()
 {
 var str = document.getElementById("contents").value;
 var len = str.length;
        eval('var newStr="'+str +'"');
 var escapeStr = "";
 if(newStr.length == len)
 {
 var prefix = '\\u';
 for(var i=0;i<str.length;i++)
 {
 var charCode = str.charCodeAt(i);
 var hexStr = charCode.toString(16);
 if(charCode < 127)
 {
              escapeStr += str[i];
 continue;
 }
 switch(hexStr.length)
 {
 case 2:
                escapeStr += prefix + '00' +hexStr;
 break;
 case 3:
                escapeStr += prefix + '0' +hexStr;
 break;
 default:
                escapeStr += prefix + hexStr;
 }
 }
 document.getElementById("result").innerHTML=escapeStr;
 }
 else
 {
 document.getElementById("result").innerHTML=newStr;
 }
 }
 </script>
 </head>
  <body>
    <form>
      <textarea id="contents" rows=10 cols=50"></textarea>
      <input type=submit value="変換" onclick="changeUnicode();return false;"></input>
    </form>
    <div id="result"></div>
  </body>
</html>

| | コメント (0) | トラックバック (0)