DTPicker と WEBアプリケーション

IE 限定のイントラネットで威力を発揮

カレンダー型のコンボボックスを JavaScript で実装するには、Yahoo UI を利用してもかなり面倒ですし、
JavaScript ですと、別フレームの上にリストが表示されるという荒業も不可能です。

そもそも、業務アプリケーションにとって日付入力は結構頻繁に必要になるのに比べて、
一般の WEB アプリケーションでは頻出では無く、それを理由にもっと適当な入力であっても、
エンドユーザが不便を感じる事は無いわけで。

そのような使い分けが、設計者にとっては実は最も重要なわけです。
( そもそも、ライセンスの問題あるので一般WEBは無理ですが )

ところが話はそんなに簡単では無かったり

そんなに「いいもの」だったら、何故世の中で普通に利用されなかったか。
要するにいろいろな複雑な理由があります。

1) PC のログインユーザーにActiveX のインストール権限が無いと動かなかったり。
2) Microsoft の都合で動かなかったり。

きちんと面倒見れる人がいないと使えるしろものでは無い上に、世の中的にいろいろな意味
で過渡期で、便利さを犠牲にしたほうが良く解らないものを使うよりコストがかからないですから。

例えば以下のような例
codebase 属性でダウンロードしたコントロールが表示されない時

さらに、ActiveX を取得する為に以下のようなページへ行くとします。
MSCOMCT2.OCX のダウンロード( Microsoft サポートオンライン )
そこにあるリンクをクリックするとリンク切れで、ページに表示されている文字列をアドレスに入力すると、
やっとこさダウンロードできたり。

さらには、Microsoft の訴訟問題で最近まで ActiveX が 1 クリック後にしか動かなかったり。
( ちなみに以下は、XP 用のその機能専用の更新ファイルの取得ページです )
"クリックしてアクティブ化する" 動作を無効にするための.... (Microsoft サポートオンライン )

後、これが一番痛いですが、IE 上で使う為のマニュアルが無かったり。
※ 以下は使う為のパラメータのサンプルです( 詳細は必要なもののみなんとか調べました )

<OBJECT
	classid=clsid:20DD1B9E-87C4-11D1-8BE3-0000F8754DA1
	id=DTPicker1
	height=25
>
	<PARAM NAME="_ExtentX" VALUE="2646">
	<PARAM NAME="_ExtentY" VALUE="1323">
	<PARAM NAME="_Version" VALUE="393216">
	<PARAM NAME="MousePointer" VALUE="0">
	<PARAM NAME="Enabled" VALUE="1">
	<PARAM NAME="OLEDropMode" VALUE="0">
	<PARAM NAME="CalendarBackColor" VALUE="-2147483643">
	<PARAM NAME="CalendarForeColor" VALUE="-2147483630">
	<PARAM NAME="CalendarTitleBackColor" VALUE="-2147483633">
	<PARAM NAME="CalendarTitleForeColor" VALUE="-2147483630">
	<PARAM NAME="CalendarTrailingForeColor" VALUE="-2147483631">
	<PARAM NAME="CheckBox" VALUE="0">
	<PARAM NAME="CustomFormat" VALUE="">
	<PARAM NAME="DateIsNull" VALUE="0">
	<PARAM NAME="Format" VALUE="662831105">
	<PARAM NAME="UpDown" VALUE="0">
	<PARAM NAME="CurrentDate" VALUE="37626">
	<PARAM NAME="MaxDate" VALUE="2958465">
	<PARAM NAME="MinDate" VALUE="-109205">
</OBJECT>

PHP での使用例

本当は ASP で使ったほうが簡単は簡単ですが、なにせ ASP の位置付けも全世界的にはビミョーですし、
使うのならば PHP のほうが今ではできる事の範囲が広いし、小回りも比べ物にならないほど利きます。

<? if ( $DT_PICKER ) {

	if ( $BODY != "" ) {
		$DTP_DISABLE = 0;
	}
	else {
		$DTP_DISABLE = 1;
	}
	
	$Base = gregoriantojd(12,30,1899);
	if ( $_POST['In28'] == "" ) {
		$Target = gregoriantojd( date('m'), date('d'), date('Y') );
	}
	else {
		$DatePart = explode( "/", $_POST['In28'] );
		if ( strlen( $DatePart[0] ) == 4 ) {
			$Target = gregoriantojd($DatePart[1],$DatePart[2],$DatePart[0]);
		}
		else {
			$Target = gregoriantojd($DatePart[0],$DatePart[1],$DatePart[2]);
		}
	}
	$Value = $Target - $Base;
?>
	<OBJECT
		<?= $BODY ?>
		NAME=In28
		CLASSID='CLSID:20DD1B9E-87C4-11D1-8BE3-0000F8754DA1'
		style='width:190px;height:22px;'
		codebase="http://activex.microsoft.com/controls/vb6/MSCOMCT2.CAB"
	>
	<PARAM NAME="CurrentDate" VALUE="<?= $Value ?>">
	<PARAM NAME="Format" VALUE="3">
	<PARAM NAME="CustomFormat" VALUE="yyyy年MM月dd日">
	<PARAM NAME="Enabled" VALUE="<?= $DTP_DISABLE ?>">
	</OBJECT>
<? } else { ?>
	<INPUT
		<?= $READONLY ?>
		type=text
		name=In28
		value="<?= $_POST['In28'] ?>"
		maxlength="10"
		onKeydown='nextField("sname");'
	> <SPAN style='color:silver'>(In28)</SPAN>
<? } ?>

まず、$DT_PICKER という変数の内容によって DTPicker を使用するか、通常のテキストフィールドにするか
切り替えるようにしています。

$DTP_DISABLE という変数は、PARAM で使用されていますが、他のコントロールのように
disabled を使いません。

値に日付型という概念を使え無いので、1899/12/30 日からの日数で指定する事になるので、PHP の
gregoriantojd という関数を使用しています
※ VBSCript で CLng(CDate("1899/12/30")) を表示すると 0 となります

但し、サーバーにデータが送られると、文字列で月/日/年のフォーマットになるので注意が必要です。
また、このアプリケーションでは、DB から取得したフォーマットが $_POST に格納されているので、
DTPicker 用のフォーマットに変換しています。

Format の 3 は、カスタムフォーマットを使用する事を意味します。
これらの定数は、MSCOMCT2.OCX 内に定義されているので、Visual Studio 2005 を使って以下のようにして
確認する事ができます。
( ※ 注意すべきは、Framework にも同じコントロールがありますが、定義されている定数が違う事です )

CustomFormat は、その名の通りフォーマットですが、yyyy/MM/dd か、サンプルと同じで十分だと思います。
それ以外を指定したい場合は、Framework 側のドキュメントで調べる事になるでしょう

その他のに使えるパラメータとして、 CheckBox がありますが、ブラウザ上であつかうのは少し面倒くさい気がします。
( どうしても、入力時に未入力を許容したい場合に使うのですが、HTML でコントロールしたほうが見栄えが良い )

1) checboxが追加され、それによって DisableとEnable をコントロールし、Disable でも null が送られる
2) checkbox のチェックのコントロールは DateIsNull で行う

ASP での簡単なサンプル

<FORM>
<OBJECT
	NAME=Date
	CLASSID='CLSID:20DD1B9E-87C4-11D1-8BE3-0000F8754DA1'
	style='width:120;height:26'
>
	<PARAM name="CurrentDate" value="<% = CLng(DateValue(strDate)) %>">
</OBJECT>
<br>
<INPUT type=submit value="送信">
</FORM>