JavaScript
JavaScriptはIEでもネットスケープでも動作するクライアントサイドのスクリプトです。HTML、CSSとならんでWEB開発者には必須となる基本的な言語でもあります。ここでは私が仕事で開発してきたJavaScriptのインターフェースなどを紹介します。
入力可能なコンボボックス
基本的には、<SELECT><OPTION>のコンボボックスで選択させるが、入力もできるようにしたい・・・という場合、単純に入力用のテキストボックスを作成するだけだと、CGI側で利用する時に、選択コンボボックスとテキストボックスの２つのパラメータを調べる必要があります。
それでは面倒なので、選択コンボボックスが変更された時ににテキストボックス側に値を代入してあげます。CGI側ではテキストボックスの値だけ調べるようにします。
<HTML> <HEAD> <TITLE>入力可能なコンボボックス</TITLE> </HEAD> <BODY> <FORM action="hoge.cgi"> <INPUT type="text" name="color" value="#000000" size="10" maxlength="10"> <SELECT name="selcolor" onChange="color.value=this.value"> <OPTION value="#000000">黒</OPTION> <OPTION value="#0000FF">青</OPTION> <OPTION value="#FF0000">赤</OPTION> <OPTION value="#00FFFF">水色</OPTION> <OPTION value="#00FF00">緑</OPTION> <OPTION value="#FF00FF">紫</OPTION> <OPTION value="#FFFF00">黄色</OPTION> <OPTION value="#FFFFFF">白</OPTION> </SELECT> <INPUT type="button" value="送信"> </FORM> </BODY> </HTML>
速攻ブロック注釈
多分あまり知られてないと思いますが、この技は、スタイルシート、JavaScript、C言語・・・などで共通に使えます（笑）はぁ？と思った方もいると思いますが、ブロック単位の注釈 /* */ のお話です。私がこの技を使い始めたのは、カレコレ10年くらい前のC言語マンセー期です。
/* コメント コメント コメント */
通常はこのようにコメントアウトしますが、これだとブロックの先頭と最後に、/* と */ をいちいち書かなければならないので面倒なのです。そこで、
/* コメント コメント コメント /* */
のように書きます。こうすると、先頭の /* だけを、書いたり消したりするだけで、ブロックを有効にしたり、無効にしたりできるので非常に楽です。
最近では、// などライン注釈があるので、いいですが、昔のC言語はこれしか注釈がなくデバグするのに、１行１行このように書いたりしてました。(^-^;
func1(); /* */ func2(); /* */
尚、この技は、/* */ のネストをサポートしている言語（TransactSQLなど）では使えないので注意。
ラジオボタンのチェック解除
これはあまり使わないかもしれません。ダブルクリックでラジオボタンの選択を解除するものですが、「該当なし」という項目を作った方が判りやすいからです。
レイアウトの都合上とか、なにかしらの理由がある場合にどうぞ。
<HTML> <HEAD> <TITLE>ラジオボタンのチェック解除</TITLE> </HEAD> <BODY> <FORM name="quest" action="hoge.cgi"> <p>好きな果物があったらチェックしてください。</p> <INPUT type="radio" name="fruit" value="みかん" onDblClick="this.checked=false;">みかん <INPUT type="radio" name="fruit" value="りんご" onDblClick="this.checked=false;">りんご <INPUT type="radio" name="fruit" value="いちご" onDblClick="this.checked=false;">いちご <INPUT type="radio" name="fruit" value="めろん" onDblClick="this.checked=false;">めろん <INPUT type="button" name="submit" value="送信"> </FORM> </BODY> </HTML>
ビヘイビアによるインターフェース
これはビヘイビアの一例です。残念ながらビヘイビアはIE独自の機能です。しかしながらビヘイビアは、既存ページのHTMLタグを弄ることなくUIを追加できるので、普通にイベントを記述するより効率的です。
このサンプルは以前仕事で使ったものからの抜粋です。サンプル全てのフォーム部品にカラーチェンジのインターフェースを提供します。わかりやすいでしょ？
hoge.html
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE>ユーザー認証</TITLE>
<STYLE>
* { color: #009; }
INPUT,SELECT,TEXTAREA {
border: 1px solid #009;
background-color: #EEF;
behavior: url(form.htc);
}
</STYLE>
</HEAD>
<BODY>
<FORM action="hoge.cgi">
<P>ユーザ名とパスワードを入力して「送信」を押してください。</P>
<TABLE><TR><TD>ユーザ名：</TD><TD><INPUT type="text" name="username"></TD></TR>
<TR><TD>パスワード：</TD><TD><INPUT type="password" name="password"></TD></TR>
</TABLE>
<INPUT type="submit" name="submit" value="送信" style="cursor:hand;">
</FORM>
</BODY>
</HTML>
form.htc
<!---------------------------------------------
form.htc - HTMLフォーム用インターフェイス
------------------------------------------------>
<SCRIPT LANGUAGE="JavaScript">
attachEvent("onblur", NormalColor);
attachEvent("onfocus", LightColor);
attachEvent("onmouseout", NormalColor);
attachEvent("onmouseover", DarkColor);
function LightColor() {
this.style.background="#FFF";
}
function NormalColor() {
this.style.background="#EEF";
}
function DarkColor() {
this.style.background="#CCF";
}
</SCRIPT>
二重投稿の簡易防止
二重投稿の防止ですが、CGIでチェックしようとするとサーバではCGIが２プロセス起動することとなりサーバ負荷の原因になります。出来ればクライアント側で処理したいものです。非常に安易ですが、以下のように確認ダイアログを出すだけで二重投稿が防止できます。
<HTML>
<HEAD>
<TITLE>二重投稿の簡易防止</TITLE>
</HEAD>
<BODY>
<FORM name="quest" action="hoge.cgi"
onSubmit="return confirm('送信します。本当に宜しいですか？');">
名前：<INPUT type="text" name="name"><BR>
題名：<INPUT type="text" name="title"><BR>
内容：<br><TEXTAREA name="text" rows=5 cols=40></TEXTAREA><BR>
<INPUT type="submit" name="submit" value="送信">
</FORM>
</BODY>
</HTML>
ボタンに個別にダイアログ指定したい場合は、onClickイベントを使います。
<INPUT type="reset" name="reset" value="元に戻す"
onClick="return confirm('元に戻します。宜しいですか？');">
また、確認ダイアログを出したくない場合は、変数をセットしてボタンのクリック回数を監視します。（2回目からは送信しないようにするため）
<HTML> <HEAD> <TITLE>二重投稿の簡易防止</TITLE> </HEAD> <BODY onLoad="cnt=1"> <FORM name="quest" action="hoge.cgi" onSubmit="return cnt?false:true;"> 名前：<INPUT type="text" name="name"><BR> 題名：<INPUT type="text" name="title"><BR> 内容：<br><TEXTAREA name="text" rows=5 cols=40></TEXTAREA><BR> <INPUT type="submit" name="submit" value="送信" onClick="--cnt;"> </FORM> </BODY> </HTML>
簡単に動作を確認するには、onSubmit="return cnt?true:false;" とtrueとfalseを交換するとよいでしょう。1度目のクリックでは何も起こらないで、2度目のクリックでhoge.cgiに送るよう（hoge.cgiは無いのでエラー）になります。
二重投稿防止だけではなく削除確認など色々な場面でよく使うと思います。こういう簡単で効果的な技は、沢山覚えて出来るだけ楽をしましょう:-)
郵便番号のインターフェイス
郵便番号に限らず、例えばソフトのシリアル番号入力などにも使えると思います。特殊なことは何もやっていないので、自作インターフェイスの参考にでもしてください。郵便番号の上3桁と下4桁を別々に入力するときに、いちいちマウスで移動しなくても自動的に3桁から4桁のボックスに移動するようにしています。その際、数値であるかどうかの簡易的なチェックをしています。
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE>郵便番号入力インターフェース</TITLE>
<SCRIPT language="JavaScript">
<!--
function zipcheck(){
zip1 = document.zipform.zip1.value;
zip2 = document.zipform.zip2.value;
if(zip1 == ""){
alert("郵便番号の上３桁が入力されていません");
document.zipform.zip1.focus();
return false;
}
if(zip2 == ""){
alert("郵便番号の下４桁が入力されていません");
document.zipform.zip2.focus();
return false;
}
if(isNaN(zip1)){
alert("郵便番号の上３桁に間違った値が入力されています");
document.zipform.zip1.select();
return false;
}
if(isNaN(zip2)){
alert("郵便番号の下４桁に間違った値が入力されています");
document.zipform.zip2.select();
return false;
}
return true;
}
function zip1chk(n){
if(n.length == 3){
if(isNaN(n)){
alert("半角数値3文字を入力してください");
document.zipform.zip1.select();
}else{
document.zipform.zip2.select();
}
}
}
function zip2chk(n){
if(n.length == 4){
if(isNaN(n)){
alert("半角数値4文字を入力してください");
document.zipform.zip2.select();
}else{
document.zipform.submitzip.focus();
}
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM name="zipform" action="zip.cgi" method="post" onsubmit="return zipcheck();">
<P>郵便番号を入力して「送信」を押してください。</P>
<INPUT type="text" name="zip1" size="3" maxlength="3" onKeyUp="zip1chk(this.value);" id="zip1">
- <INPUT type="text" name="zip2" size="4" maxlength="4" onKeyUp="zip2chk(this.value);" id="zip2">
<INPUT type="submit" name="submitzip" value="送信">
</FORM>
</BODY>
</HTML>
選択したイメージを即表示する
これは便利で効果的なので是非覚えて欲しい技です。画像アップロードを行うCGIなどで使ったりします。ファイルを選択すると選択した画像をプレビューすることができます。CGIで画像をサーバに送ってからプレビューすると、送りなおす時にコストがかかるので止めたほうがいいでしょう。
<HTML> <HEAD> <META HTTP-EQUIV="Content-Type" content="text/html; charset=Shift_JIS"> <TITLE>選択したイメージを即表示する</TITLE> <HEAD> <BODY> イメージを選択してください。<BR> <INPUT type="file" onChange="document.p1.src=this.value;"><BR> <IMG name="p1"> </BODY> </HTML>
実際に使うときには、画像のサイズ取得＆リサイズ表示も必要な場面が多くなります。サイズ取得、設定には、width,height を使います。例えば、幅128ピクセルにリサイズ表示するには以下のようになります。
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE>選択したイメージを即表示する</TITLE>
<SCRIPT language="JavaScript">
<!--
function dispImage(sSrc){
var x, y, mx, my
document.p1.src = sSrc;
x = document.p1.width;
y = document.p1.height;
mx = 128;
my = y / (x / mx);
document.p1.width = mx;
document.p1.height = my;
alert("元画像サイズは" + x + " x " + y + "です");
}
//-->
</SCRIPT>
<HEAD>
<BODY>
イメージを選択してください。<BR>
<INPUT type="file" onChange="dispImage(this.value);"><BR>
<IMG name="p1">
</BODY>
</HTML>
{{edit 更新履歴}}