でぃべろっぱーず・さいど

昨日に引き続き2007年後半を振り返ります。

今日は7月から12月まで。

7月

「U.T. を Google ガジェット化」

mash up award 3rd 用に作ったU.T.をガジェットにしたほうが面白いかもと思ってガジェット化してみました。これでiGoogleガジェットコンテストの賞をいただくことができたので嬉しかったですね。

8月

「gihyo.jp で redMine の連載始まりました。」

初めての外部サイトでの連載。連載後も、gihyo.jpのサイトでは「良く読まれている連載」としてランクインしていて、今でもたまにはてブされているので、良かったです。期間も短く、準備が大変でしたが、色々と勉強になりました。

9月

「マッシュアップ・カフェ 第3回「ブログ検索」レポート」

社外イベントで初のプレゼンターをやらせていただきました。アンケートの結果も良く、懇親会では楽しい話を聞くことができて、これまた勉強になりました。

10月

「暇つぶしに JavaScript のライブラリを作ってみることにしました。」

JavaScriptのライブラリ作成に手を出してみることに。最近はjQueryのプラグイン開発とかの方が良いかもと思ってます。

11月

「iGoogle ガジェットコンテスト授賞式レポート」

ガジェットコンテストで特別賞をいただくことに。mash up award 3rd がダメだったので半分あきらめていたんですが、なんとか拾っていただいたようで。講評を聞いてみると、僕が狙っていたところをちゃんと理解していただいたようで、それが嬉しかったですね。

12月

「thinkITでバグ管理についての連載始まりました。」

今年2つめの連載です。こちらは会社経由でお話があったもの。前回の連載とはまた性格がちがうものだったので、割に時間がかかりました（準備期間もちょっと短かったですしね）。

ということで、ざくっと1年振り返ってみました。受賞と連載と、エンジニアとしてレベルアップする機会をいただけたのがありがたかったです。

2008年もがんばりたいと思いますので、よろしくお願いいたします。

年末なので、2007に書いたエントリの中で、各月1つずつエントリを選んで、一年を振り返りたいと思います。

今日は1月から6月まで。

1月

「会社で勉強会を開催するときの色々」

年初は会社で勉強会してました。SSLのこととか会社の先輩から聞けて、すげーためになりましたよ。

2月

「Railsで作られたプロジェクト管理ツール"redMine"」

はじめてはてブのホッテントリに入ったエントリです。オレンジニュースで配信されていたRedmineをちょっと調べて書いてみたら予想外に反応がありました。このおかげで、gihyo.jpのRedmine連載のお話が来たり。ちょうど仕事でTracを使っていたときで、Ruby on Rails も勉強しなきゃなーと思っていたタイミングだったので、色々タイミングが良かったです。

3月

「mash up award 2nd の授賞式に行って来ました。」

3月にはmash up award 2nd で受賞することができました。傾向と対策を練っていたので、ちょっとだけ自信はありましたが、過去そういうときは大抵ダメな場合が多いので、受賞の連絡があったときはほんとびっくりしました。また、この件がきっかけになって僕のmash up 熱が高まったことは言うまでもありません。

4月

「Web3.0の姿」

このときに、次にGoogleが攻めてくるのは翻訳の分野と予測していたことが、現実のことに。派手なニュースやプレスリリースにはなってないですが、Googleの翻訳って結構ちらほらと見かけるようになってます。Bloggerの記事の自動翻訳とかね。12月には、Google talkでリアルタイムチャットを翻訳することを始めたというニュースがあり、すごいなぁと感心しました。

5月

「Google Developer Day 2007 に行ってきました。 」

Google Japan 初のオフラインイベント。終日楽しくお勉強させてもらった上に、美味しいお弁当や懇親会まで無料でいただき、さすがGoogle という感じのイベントでした。このイベントで、Google Gadget コンテストのことを知って、Gadgetの作り方もセッションで聞いて、家に帰ってすぐにガジェットやマップレットを作りました。色んなエネルギーをもらったイベントでした。

6月

「mash up award 3rd 開催！ そして「つくるぶ」公開！」

mash up award 2nd で味をしめて、受賞者インタビューとか受けちゃったりして。でもって、mash up award 3rd へむけて意気込みを語ってますね。結果、受賞ならずでしたが、素材をもとにアプリの仕様を考えているときはほんと楽しかったです。

コンテストで賞をもらったり、はてブでホッテントリ入りしたり、オフラインイベントに参加したりと、これまでのエンジニア人生にはない刺激を受けた上半期でした。

ということで、後半は明日のエントリで。

ブログをMovableType3からMovableType4へアップグレードしました。

以前もチャレンジしたんですが、ファイルのアップロードにとちって断念してました。

今回は、tarファイルをアップロード後、cronを使って tar の解凍を行いました（コンソールのログインが使えないレンタルサーバなのです）。

で、デザインもがつっと変えようと思ったんですが、MT3とMT4ではテンプレートの構造が変わっているらしく、時間がかかりそうだったので年末年始の課題にしようかと。

いっそWordpressに切り替えた方が良かったのかなぁ。

或いは、思い切ってブログエンジン自作するとか（ないない）。

Redmineのユーザグループに投げられた下記の問題。

IE6利用時に、Redmine0.6 の問題リストで右クリックしたときに表示されるコンテキストメニューのサブメニュー表示されない。

・右クリックのコンテキストメニューの階層構造は、CSSで制御されている。

・li:hover という属性で、その下のulタグがdisplay:block;に切り替わる仕組み。

・でも、～IE6では、a タグ以外に :hover 属性が効かない。

・そこで、Redmine では、csshover.htc を読み込んで、a タグ以外にも:hover が効くようにしている。

・でも出ない。

・コンテキストメニューは、右クリック時に、Ajax で動的に取得される。

・csshover.htc の中にはjavascript が書いてあって、documentonready つまり、ドキュメントがすべて表示された段階で、parseStylesheets()という関数が実行されている。

・つまり、li:hover してほしいHTMLElementがページ表示時にページ内にいないので、読み込んでいるcsshover.htcがコンテキストメニューの部分に対して意味をなしていない。

・ということで、コンテキストメニューがサーバから取得され、ページ内に表示された段階で、parseStylesheets()を実行できれば良い。

で、対応方法は以下の通り。

/public/stylesheets/csshover.htc

の27行目（コメント行から下）すべてを

/public/javascripts/context_menu.js

の最終行より下に、コピー。

そして、同じ context_menu.js の 42行目にある

new Ajax.Updater({success:'context-menu'}, '../../issues/
context_menu/' + id, {asynchronous:true, evalScripts:true,
onComplete:function(request){Effect.Appear('context-menu', {duration:0.20});}})

を、

new Ajax.Updater({success:'context-menu'}, '../../issues/context_menu/' + id,
 {asynchronous:true, evalScripts:true,onComplete:function(request){
 Effect.Appear('context-menu', {duration: 0.20});
 parseStylesheets();
}})

に書き換えます。

ただし、この方法だと、コンテキストメニューが表示される毎にparseStylesheets()関数が実行されて、あまりいけてないです。

csshover.htcの中身は、CSSをチェックして、:hover と書いているところを探し、そのクラスが適用されているページ内のHTML Elementにonmouseover とonmouseout のイベントをattach しているだけ。

コンテキストメニューの構造は分かっているので、じゃあ、べた書きでイベントをattach するようにしたのが以下のソース。

new Ajax.Updater({success:'context-menu'}, '../../issues/context_menu/' + id, {asynchronous:true, evalScripts:true, onComplete:function(request){
  Effect.Appear('context-menu', {duration: 0.20});
  if(!navigator.userAgent.match(/MSIE/) || window.XMLHttpRequest) return;
  try{
    var uls = $('context-menu').getElementsByTagName('ul');
    uls[0].id = 'context-menu-base-ul';
    uls[1].id = 'context-menu-sub-ul_0';
    uls[2].id = 'context-menu-sub-ul_1';
    uls[3].id = 'context-menu-sub-ul_2';
    var lis = $('context-menu').getElementsByTagName('li');
    for(var i = 0,j = 0,len = lis.length;i<len;i++){
      if(lis[i].className.indexOf('folder') >= 0){
        lis[i].id = 'context-menu-folder_' + j;
        j++;
      }
    }
    var menuShow = function(event){
      var li = Event.findElement(event, 'li');
      li.style.zIndex='10';
      $('context-menu-sub-ul_'+li.id.split('_')[1]).style.display='block';
    }
    var menuHide = function(event){
      var li = Event.findElement(event, 'li');
      li.style.zIndex='0';
      $('context-menu-sub-ul_'+li.id.split('_')[1]).style.display='none';
    }
    $('context-menu-sub-ul_0','context-menu-sub-ul_1','context-menu-sub-ul_2','context-menu-folder_0','context-menu-folder_1','context-menu-folder_2').each(function(obj) {
      Event.observe(obj, "mouseover", menuShow, false);
    });
    $('context-menu-sub-ul_0','context-menu-sub-ul_1','context-menu-sub-ul_2','context-menu-folder_0','context-menu-folder_1','context-menu-folder_2').each(function(obj) {
      Event.observe(obj, "mouseout", menuHide, false);
    });
  }catch(e){
  }
}
});

べたべーたですが、これでIE6でも右クリックメニューのサブメニューが表示されるようになりました。

gothedistanceさんのブログで「197Xsを作った件 - GoTheDistance」こんなエントリを見かけたので、衝動的に参加しちゃいました。

↓グループのページはこちら。
197Xs | Google グループ

最初のオフ会が2008.2.2に予定されていて、どうやら↓こちらのイベントと合同開催、というかトゥギャザーすることになるようです。

ホントにもうすぐ三十路のひとたち(1978-79)のオフ会 - mokanaの喜録@ついったー部【78-79オフ(2/2),一鶴オフ(1/26)募集中】 - はてなグループ::ついったー部

197Xsは1981sと雰囲気が違ってそう。SIerの人の割合多そうだし、話の内容も家族の話とか、あと中間管理職的な、コード書きたいけど会社的には管理の仕事が、みたいな話が聞けるんじゃないかなぁと勝手に推測してたりします。

1981sではエロトークで盛り上がったみたいですが、個人的にはそっち方面もいける口なので、そういう流れになっても良いかなぁ。

来年が楽しみです。

var messages = {};
message.loading = 'ロード中';
message.error = 'エラーが発生しました。';

var M = {};
M.LOADING = 'ロード中';
M.ERROR = 'エラーが発生しました。';

alert(messages.error);

<script>
  var messages = {};
  message.loading = 'ロード中';
  message.error = 'エラーが発生しました。';
</script>

<script>
  var messages = {};
  message.loading = 'now loading';
  message.error = 'error was occuerd';
</script>

<script type="text/javascript" src="/messages/ja/message.js" />

<script type="text/javascript" src="/messages/ja.js" />

var messages = {};
messages.ja = {};
messages.en = {};

var useMessages = messages['ja'];

if(typeof Language != "undefined" && Language == 'English'){
}else{
}

<script type="text/javascript" src="hoge.js?lang=ja" />

var LANGUAGE = 'en';//デフォルト設定
var s = document.getElementsByTagName('script');
for(var i =0,len = s.length;i<len;i++){
  if(s[i].src.indexOf('hoge.js?') > 0){
    var tmp = s[i].src.splite(?)[1].splite('&');
    for(var j = 0,leng = tmp.length;j<leng;j++){
      var tmp2 = tmp[j].splite('=');
      if(tmp2.length == 2 && tmp2[0] == 'lang') LANGUAGE = tmp2[1];
    }
  }
}
var useMessages = messages[LANGUAGE];

var s = document.createElement('script');
s.type = 'text/javascript';
s.charset = 'UTF-8';
s.src = '/messages/'+LANGUAGE + '.js';

Think IT で連載している「バグ管理のノウハウ」の第4回が公開されました。

第4回：バグ管理で陥りやすいワナ

今回の内容は、バグ管理で陥りやすいシチュエーションについて書いています。

書いていることは、結構あちこちの現場で起きていることだと思うんですが、どうでしょうか。

メール、コメント等でフィードバックいただけると嬉しいです。

【バグ管理の作法】バグ管理のノウハウ
第1回：バグはなくならない？
第2回：紙か？ Wordか？ Excelか？ BTSか？
第3回：バグの優先順位はこう付けろ！
第4回：バグ管理で陥りやすいワナ
※第2回目以降が僕の担当です。

普段、「プロジェクト管理」「テスト管理」という切り口で考えることはありましたが、「バグ管理」という切り口で考えることはなかったので、良い経験になりました。

ちょっと前に、会社にAdobeの人が来て、デモとか技術的な解説とかしてくれました。

で、そのとき知ったこと、思ったことのメモ。

・Flash と Flex の違い
→開発環境の違い。Flash はタイムラインにライブラリから表示するものを乗せていく作り方で、Flexは描画するものをmxmlで記述する（かなりざっくり言うとだけど）。できあがるものは両方とも.swfファイル。ただし、Flexでしか利用できない機能があるらしい。
※この辺を分かりにくくしているのは、Adobe / Macromedia のネーミングセンスが悪いからだと、個人的に思ってます。

・AIRアプリケーションには、AIR（実行環境）のインストールモジュールも含めることができる。
→なので、AIRがインストールされていない人がAIRアプリをインストールするときに、わざわざ別にAIRをインストールする必要がない。

・「ブラウザの制約を受けたくない」「ローカルのファイルにアクセスしたい」ってときだけ、FlashのAIR化を検討すれば良いかも。

・AIRのHTML エンジンはSafariで使われているものと同じ。

・AIR で使われるFlash Player のバージョンは、当面、通常のFlash Player のリリースの後追いになる（けど、いづれは同期をとる予定だとか）。

・AIR の売りの一つは、Web系のシステムを作ってきた人で、VBとかの知識がなくてもデスクトップアプリを作れる点。

Google がGoogle Maps のマイマップのコンテストを開催しています。

Google マイマップ EXPO

街でお気に入りの場所。自分しか知らない場所。街で見つけた面白いもの。地元自慢。自分だけの、日本にひとつしかないオリジナルの地図を作って、みんなに見せよう。 参加作品の中から、ベストマイマップ優秀賞 10 作品と、さらにその中から、最優秀賞を選びます。ベストマイマップの作成者には、記念トロフィーを贈呈します。さあ、マイマップ EXPO に今すぐ参加を！

ゲストマイマップってところに押切もえのマイマップが。どういう層にアピールしたいんでしょうか・・・。

マイマップはGoogle Maps 上で簡単に作れるので、僕も何か作って応募してみようかな。

Redmineのwikiのプレビューが、幸いなことにAjaxを利用してプレビュー部分を書き出していたので、それをうまくHackして、書いていると自動的にプレビューが生成されるようにしてみます。

方法は以下の通り。

1. custom_wiki_preview.js というファイルを /public/javascripts 以下に作成する。

2. custom_wiki_preview.js の中に以下の内容を記述する。

var preveiwTimerId;
var previewFunc = function(){
new Ajax.Updater('preview', '/wiki/1/Docs/preview',
{asynchronous:true, evalScripts:true, method:'post',
onComplete:function(request){
Element.setStyle($('content_text'),{'width':'50%'});
Element.setStyle($('preview'),
{'position':'absolute','width':'48%','top':'146px','right':'10px'});
}, parameters:Form.serialize('wiki_form')});
return false;
}
var previewTimerFunc = function(){
clearTimeout(preveiwTimerId);
preveiwTimerId = setTimeout(previewFunc,1000);

}
Event.observe('content_text', 'keyup', previewTimerFunc, false);

3. /app/views/wiki/edit.rhtml に以下の記述を追記する。

<script type="text/javascript" src="/javascripts/custom_wiki_preview.js"></script>

これでOKです。

wikiの編集画面で、編集エリアに何か入力を加え、1秒待つと↓このように、画面右側にプレビューが表示されるようになります（デフォルトでは画面下に表示される）。

上記JavaScriptの内容は、編集欄のKeyupイベントを監視して、イベント発生毎にpreviewTimerFunc()を実行します。
previewTimerFunc() の中では、previewFuncを1秒後に実行するようにタイマーをセットしています。ここで、前のタイマーIDをクリアしているので、連続してキーが入力されたときは、previewFuncが実行されずサーバに負担をかけにくいようにしています。

3のステップで、rhtmlをいじっちゃってますが、これがやだなーって人は、2で作ったjsファイルをページにappendするbookmarkletを作っても良いですし、FireFox限定でよければGreasemonkeyスクリプトを作るという方法もあります。

昨日のエントリで「はてなハイク × はてブ iGoogle ガジェット」を公開しましたが、同じノリでガジェットを2つ追加しました。

↓はセリ × はてブのガジェットです。

はてなセリフも、はてなハイク同様の性質を持っているので、はセリ好きな人には良い感じのガジェットなんじゃないかと思います。

もう一つは、↓amazon.co.jp × はてブのガジェットです。

amazon.co.jpのページではてブされたページを見ることができます。

新着のタブが結構おもしろいです。

こっちはアフィリエイトID入ってるので、そういうのちょっとって人はスルーしてください。

はてなの新サービス「はてなハイク」が個人的にかなりヒットしていて、「エンジニアがやたら使う言葉 - はてなハイク」とか更新を楽しみにしてたりします。

でも、ログが早くて、なかなかおもしろいところに出会えなかったり。まあ、「Keywords - はてなハイク」のページから見たら良いんですけどね。

で、ふと「おもしろいページははてブされてるんじゃないか」とか思って見てみたら、やっぱりそこそこの人たちがぶくましていて。

じゃあそれを見るガジェットでも作ろうかなと思ったわけです。

↓で、とりあえずこんな感じで作ってみましたよ。

まあ、ちょいちょいいじるんで、ブクマボタンとかできるかもしれませんが、取り急ぎ公開することに。

よろしければ左下の追加ボタンからiGoogle へ追加してやってください。

「日付のセレクトプルダウンを動的に作る jQuery plugin を作った」でリリースした、数値のoptionタグを動的に生成するプラグインですが、Opera でバグがあったので修正しました。

バグの内容は、Optionタグを動的に生成した後、下記コードで選択されている箇所を指定すると、

this.selectedIndex = settings.selectedIndex;

以下の図ような状態になってしまうというもの。

以下のOperaのフォーラムで指摘されているとおり、

ＯｐｅｒａでのＪａｖａｓｃｒｉｐｔで、おかしい所がある - 日本語 - 日本語

Operaの場合だけ、下記のコードで指定するようにしました。

this.options[settings.selectedIndex].defaultSelected = true;

Operaかどうかの判定は、jQueryの下記変数を利用しています。

jQuery.browser.opera

確認は以下のページで。

jQuery plugin --- selectbox-utils Demo page

ダウンロードは以下からどうぞ。

jquery.selectboxutils-0.1.1.js

Think IT で連載している「バグ管理のノウハウ」の第3回が公開されました。

第3回：バグの優先順位はこう付けろ！

今回の内容は、バグの優先順位の付け方について書いています。

バグの優先順位って、下手するとリーダの気分次第ってことになりかねない部分があるので、論理的・合理的な判断の手助けになれば幸いです。

メール、コメント等でフィードバックいただけると嬉しいです。

【バグ管理の作法】バグ管理のノウハウ
第1回：バグはなくならない？
第2回：紙か？ Wordか？ Excelか？ BTSか？
第3回：バグの優先順位はこう付けろ！
※第2回目以降が僕の担当です。

次回第4回で最終回。公開は12/25です。クリスマスか。今年ももう終わりですね。

ITSSに基づいたSEのキャリアアップを疑似体験できる双六だって。

SE出世双六--ITSSに基づいたキャリアアップでSEの仕事を疑似体験:ニュース - CNET Japan

SE出世双六は、学生などがSEという職業に少しでも興味や親近感を持ち、技術者の育成につながることを目的としたもの。新入社員（「ITスペシャリスト」のレベル1）から始まり、「初めてのリリース」「資格取得」などSEが社会人生活の中で体験するさまざまなイベントを体験していく。

SE版人生ゲームみたいなものかな。

ゲームが進む中で、「ITアーキテクト」「プロジェクトマネジメント」など職種を選択しながら、ITSSのレベルを上げてゴールを目指す。マスのイベントには、日立システム社員から募集したイベントも掲載されている。また、ITSSについて説明した解説書も同梱される。

発想はおもしろいなぁ。買ってみようかなぁ。やる人だれかいますか？

個人的には、人生ゲームで言うところの「サラリーマン」か「自営（独立とかプロスポーツ選手とか、芸術家とか」か的な選択のところで、大手企業か、ベンチャーか、独立か、とか選択肢を入れて欲しいな。

あとは、こんなマスあったら嬉しいな、ってので。

「ブログに会社の悪口書いたら上司に見つかり、厳重注意（２マス戻る）」

「社外の勉強会に参加してステップアップ（３マス進む）」

「ブログのエントリーがはてブのホッテントリに入る（２マス進む）」

「winny で情報流出（５マス戻る）」

・・・あ、ITSSと全然関係なくなってるわ。

↓興味がある方は、こちらから購入できるそうです。

SE出世双六 2個セット：SEshop.com／商品詳細

今度は住商情報システムさんですか。

【IT Service Forum 2007】「摺り合わせ文化など日本には日本の良さがある」，国内SIベンダーの強みを力説：ITpro
Matzにっき(2007-12-10)

講演後半の日経BP社田中克己主任編集委員との対談では，「システム開発において日本のSIベンダーはインドのSEと戦えるのか」という問いに対して「（顧客企業の業務ノウハウに強いなど）日本独自の世界でなら，日本がインドに負けるわけがない」と断言。「シリコン・バレーと同じことをしていたら，日本は他国に勝てるわけがない。逆に，日本独自の世界でなら，他国に負けるわけがない」とした。

ほんと？　本当にそう思ってます？

「日本独自の世界でなら」って前提が、そもそもおかしくないっすか？逆に言うと、「日本独自の世界じゃなくなったら、日本がインドや他国に負けることもあり得る」って言ってるわけで。昨今の問題はその日本的な世界がなくなるんじゃないの？ってところに焦点があるんじゃないかなぁ。

あと、SIer とかは「オフショア」言うて、他国のSEやプログラマに日本の仕事をやらせようとしてるわけで。なんかそういうことすることで、自ら墓穴を掘っていることに気が付かないのかなぁ。

昨日のエントリ「日付のセレクトプルダウンを動的に作る jQuery plugin を作った」で、select タグに対してoptionタグを削除したり、追加したりしたんですが、その中でちょっとだけはまったことをメモ。

option タグを select タグに append するとき、最初↓こんな風に書いてました。

this.append('<option value="1">1</option>');

this はselect のjQueryオブジェクトです。上記のappendをfor文でぐるぐる回す感じ。

で、

<select id="year"></select>
<select id="month"></select>
<select id="date"></select>

↑こういうoptionがないタグに対して、ページ表示時に、

$(function(){
$('#year').numericOptions({from:2007,to:2011});
$('#month').numericOptions({from:1,to:12,selectedIndex:5,namePadding:2});
$('#date').numericOptions({valuePadding:2});
});

こんな感じで実行してやると、IE のときに、年と日のプルダウンの横幅が正常に表示されないんですね。

というわけで、↓Option オブジェクトを new して、options のオブジェクトに入れる形にしました。

this.options[j] = new Option(padfunc(i,settings.namePadding),padfunc(i,settings.valuePadding));
//padfung は0詰め用の関数

IE6には、select タグに optionタグを innerHTMLで差し込むことが出来なって言う地味なバグがあるので（BUG: Internet Explorer は、オブジェクト選択の innerHTML プロパティを設定するのに失敗します。）、そこはjQueryのオブジェクトに頼らない方が良いのかなと。もしかしたらOptionタグを設定するメソッドを僕がしらないだけかもしれませんが。

ついでに、IEのDOM に関連するバグで、table を動的にcreateElement してappend する場合、TBODY タグがないと表示されないってバグがあるんですが、これはjQueryは上手くクロスブラウズ対応してくれています。

$('body').append('<table><tr><td>a</td></tr></table>');

↑このコードで生成されるHTMLは、ちゃんと

a

になってるんですね。

jQueryのお勉強に、ってことでプラグインを作ってみました。

参考にしたのは↓こちらの記事。

jQuery のプラグインを作成する : ブログの新着記事を表示：Goodpic

(function() { $.fn.myplugin = function(config){ config = jQuery.extend({ value1: "Default value 1", value2: "Default value 2" },config);

var target = this;
target.append("Hello jQuery Plugin !
"
+ config.value1 + "
" + config.value2);
};
})(jQuery);

↑こんな感じで、$.fn のプロパティとして関数を作成してやればOK。簡単。

注意点は、関数名を他のプラグインと被らないようにするってことと、メソッドチェーンしても良い関数のときには、最後に return this するのを忘れないようにするってことかな。

で、作ったのが↓以下の2本。

・jquery.numericoption.js
・jquery.datepulldown.js
(2007.12.16 追記)
結局1本にまとめました。
jquery-selectbox-utils-0.1.0.js
(2007.12.16 追記 ここまで)

numericoption.js の方は、

$('#month').numericOptions({from:1,to:12,selectedIndex:5,namePadding:2});

↑こんな風にして、使って、1から12までのオプションタグをappend するってプラグインです。

config の値として渡せるのは、以下のもの。

remove : 既存のoption タグを削除するかどうか。default は true
from : 開始の値。default は 1
to : 終了の値。default は 31
selectedIndex : 生成後に選択済みにしておくオプションタグの index。default は 0
valuePadding : value 値の左0詰め桁数。default は 0
namePadding : name 値の左0詰め桁数。default は 0

動的にオプションタグの値を変えたいときに地味に便利です。

でもって、それを利用しているのが、datepulldown.jsの方。

$('#date1').datePulldown({year:$('#year1'),month:$('#month1')});

↑こんな感じで使います。

これで、year と month に指定した値が変わったときに、指定したタグの下にその年月に応じた日数のプルダウンを生成します。

デモ見てもらった方が早いと思うので、↓デモページをどうぞ。一番下の奴です。

jQuery plugin --- selectbox-utils Demo page

コードはいつものようにGoogle code でホスティングしてます。

jquery-selectbox-utils - Google Code

IE6 以前のブラウザだと、select プルダウンエリアが常にページのトップレイヤに表示されてしまうというバグ（仕様？）があります。

ページ内にDivタグとかをフロートウィンドウっぽく表示させたり、ドラッグオブジェクトを作ったりすると、結構やっかいなことに。

それを回避する方法として、以下の3つが挙げられます。

1.select のスタイルを display:none にする。

重なっているときは、見えなくすれば良いってことで、こういう対応がまあベタですね。
ただ、フロートウィンドウを select ボックスがあるページ内でドラッグさせたいときは、一々ウィンドウの位置とselect の位置を判定して、表示／非表示を切り替えることを考えねばならず、あまり現実てきじゃないです。

2.iframe を使う

HTMLElement の中で例外的にiframe だけは select ボックスの上に表示することができます。
ということで、ブラウザがIE6以前のときのみ、select の上に表示するオブジェクトの下にiframe を入れて、src は javascript:false style に filter : 'alpha(opacity=0)' を指定してやればOK。
jQuery プラグインの datepicker や YUI のカレンダーなど、ページ内でドラッグさせる可能性があるものについては、そういう対応がしてあります。

3.select を使わずプルダウンを自作する

select じゃなくてそれっぽく見えるモノを作っちゃう系の対応です。
Select Box replacement
jQuery Select box
↑こんな感じかな。
クロスブラウザ対応がめんどくさそうですが、上手く使うと面白いU/Iになったりします。
Google Reader の上方にあるのも、その一例ですね。

↓こんな感じでプルダウンの中に文字を入力できるようになっています。

↓「i」と入力すると、候補がリストに。

form に関連するものを自分で作り込んでいくのは、submit処理やライブラリの利用に影響が出そうですが、インターフェースを考える上で、その部分をちょっと検討するのも悪くないんじゃないかと思います。