ちょっと話はそれて Javascript へ。

たまにはお仕事での話もしてみます。

お仕事の方でプログラムを書く機会はさほど多く無いのですが、HTA という仕組みを使って Windows Server (ActiveDirectory) を操作するツールを VBscript で作っていたりします。
ツールをコンパイルが必要な言語で作成すると、「ソースコードが紛失して手直しが出来ない」「開発環境が必要になる・用意するのが面倒」などの困難がつきまとうので、（主に自分以外がメンテナンスするにあたって）ツール自体がソースコードファイルになり、メモ帳で修正可能なスクリプト言語を採用しています。

HTA は基本的にタダのHTML（バックエンドとしてInternetExplorerが動いているだけ？）なので、「View の上で全ての処理をするお粗末なWebアプリケーション」を書く感覚に近く、自分のスキルでも何とかなってしまいます。
…そろそろ、綺麗な形で書き直したくなってきたなぁ。

で、愚痴はともかく、ActiveDirectory から複数件のユーザアカウントデータを検索して表示するツールを作ったんですが
「ソートしたい…」
と素朴な気持ちが出てきました。

HTMLで表データをソート、となったら「Javascript で何とかなるんじゃない？jQueryとかすごい便利だし。」と思い、 …ハマりながらもうまくいきました。
# ちなみに HTA では Jscript (≒ javascript)もサポートしているので、
# jQuery が使えます。ラッキー。

Tablesorter

ということで、検索結果をソートするために Tablesorter を使いました。
Tablesorter は jQuery のプラグインです。一番基本的な使い方は "Getting Started" で示されているように

• jQuery と Tablesorter の .js ファイルを読み込む
• Tablesorter のサイトから両方ダウンロードできます。jQuery のバージョンにこだわりが無ければ揃えて入手できていいかも？
• Table 要素に対して tablesorter() を実行するような Javascript を記述する
• 特定の Table 要素をソートしたい場合は Table タグに id 属性をつけておくと良さそう
• Table タグに class="tablesorter" を指定する（必要？）
• Table タグの子要素として、ヘッダ行を thead タグで囲む
• Table タグの子要素として、データ行部分を tboday タグで囲む

とします。

ただ、今回、ソートをしたいデータは VBscript で作成する（= 元のHTMLにはないデータ）なので、AJAXの際のプログラミングを参考にします。
http://tablesorter.com/docs/example-ajax.html
＃ Advanced example らしい…。
しかし、この例でも「空のテーブルが存在する状態」から始まっているので、table 要素全体を VBscript で生成しようとしている自分のケースにはそのままは使えません。
そこで、上記の例で出ている「あるIDの要素がクリックされたときに～」という記述を参考にして、「あるIDの Button 要素（「検索する」ボタン）がクリックされたときにtablesorter を実行する」というプログラムにしました。

VBscript で生成される前のHTML要素を javascript で扱えない（当たり前なんですが…）ことに途中で気づき、「どのタイミングでどのデータが存在しているのか？」を考えていたのが山場でした…。
jQuery で動的に要素を追加してると結構ハマるポイントのような気がします。

また、tablesorter は1行目の値を見て、「その列にどんな値が入っているのか？（文字列？数値？日時？）」を推測してくれるのですが、間違って推測することがあるので、自分で指定することにしました。
参考URL: http://mottie.github.com/tablesorter/docs/example-option-date-format.html

以下の javascript の "sorter" の部分が各列の型を指定している部分です（その前の 0: や 1: が「何列目」を示す 0-origin インデックス）。

$(function() {

  // call the tablesorter plugin 
  $("table").tablesorter({ 
 
    dateFormat : "mmddyyyy", // set the default date format 
 
    // or to change the format for specific columns, add the dateFormat to the headers option: 
    headers: { 
      0: { sorter: "shortDate" }, // dateFormat will parsed as the default above 
      1: { sorter: "shortDate", dateFormat: "ddmmyyyy" }, // set day first format 
      2: { sorter: "shortDate", dateFormat: "yyyymmdd" }  // set year first format 
    } 
 
  }); 
});

…ということで、VBscript で生成した表をソートするのに javascript が使えました、という報告です。