(cache)JavaScriptと活用しよう

JavaScriptと活用しよう

JavaScriptの有効利用法，CGIプログラミングの支援ツールとして考える

戻る

JavaScriptは，Webブラウザのバージョンによって，動作が異なる場合があり，いろいろなWebブラウザを利用してアクセスする可能性があるシステムで不用意に利用すると，トラブルの元になります．しかし，どのWebブラウザでも利用できる最小限の機能や，イントラネットで利用し， Webブラウザを特定できる場合は，CGIに対して最小限のリクエストで最大限の効果を得られるシステムを構築する手助けになるでしょう．
JavaScriptは、HTMLと共にクライアントに送信されるため，内部処理を利用者に知られたくない場合は，利用しないほうがよいでしょう．

8.1 文字列の長さのチェックを行う

HTMLでは，文字列の長さを「バイト数」でなく「文字数」で扱う傾向があります．
しかし，ほとんどの場合CGIで処理できるサイズには，制限が必要になります．そこで，<INPUT>タグにsize や maxlength を指定して入力できるサイズをCGIに引き渡す前に制限してしまうことによりデータ長制限を越えて入力され，処理が正しく行えないことが明らかなリクエストを制限することが可能になります．
しかし，<INPUT>タグの制限は，Webブラウザによって制限するデータ長が，文字数のものやバイト数のものがあり，HTMLの記述だけでは明確なチェックができません．
JavaScript の文字列を格納するstringオブジェクトには，length 変数がありますが，この変数はバイト長でなく文字数を返却します．
そこで，必ずバイト長でチェックできる関数を作成して，送信する前にチェックを行い，制限を越えている場合は送信を行えないようにします．
文字列に設定されている文字コードはcharCodeAtメソッドで取得することができます．このメソッドは，JavaScript1.2から追加されていますので，古いバージョンの Webブラウザでは動作しない場合があります．このメソッドで取得した値が，0～255 であれば，１バイトと判断できますが，１つ注意があります．
0xa1 ～ 0xdfはシフトJISでは半角カナですが，このコードをEUCやJISコードに変換する場合，7ビットASCIIコードではありませんので単純に1バイトコードと判断できない場合があります．ということで，文字コードが0～127を1バイトコードと判断するほうがよいでしょう．この関数を応用して，文字列内に半角カナが含まれているかをチェックして，半角カナを入力できないようにするのもよいでしょう．


function StrLen(str)
{
    var ct;
    var size = 0;

    for(ct = 0; ct < str.length; ct++) {
        var c = str.charCodeAt(ct);
        if(c >= 128){
            size++;
        }
        size++;
    }
    return size;
}

リスト1：文字列の長さを返す

8.2 文字列を比較する

ありそうで存在しないのが，文字列比較メソッドです．
少し強引ですが，文字列を配列に設定して，sortメソッドでソートを行い，配列のソート順をチェックすることで代用することも可能です．しかし，単純に文字列変数内の値と固定文字列を比較したいときは，もっと簡単でシンプルな方法で文字列の比較を行いたくなります．
ということで，strcmp関数のJavaScript版を作成してみました．ちょっとC言語病でしょうか？！


function StrCmp(str1, str2)
{
    var ct;
    var cmp;

    if((cmp = str1.length - str2.length) != 0){
        return cmp;
    }

    for(ct = 0; ct < str1.length; ct++) {
        var c1 = str1.charCodeAt(ct);
        var c2 = str2.charCodeAt(ct);
        if((cmp = (c1 - c2)) != 0){
            break;
        }
    }
    return cmp;
}

リスト1：文字列の比較

8.3 選択した項目のURLを開く

アンカーやボタンをクリックしてCGIを実行するだけでは，芸がありませんので，ドロップダウンリストから選択した項目を実行するのもよいでしょう(リスト3)．
Netscape Communicator は，<SELECT>タグの onChange イベントは動作しないバージョンがありますのでボタンで実行できるようにしておく必要があります． [表示する]


<script language="JavaScript">
<!--

function JumpUrl(form)
{
    if(form.engine.value != ''){
        window.open(form.engine.value, "_blank",
            "toolbar=yes,location=yes,directories=yes,status=yes,"
            +"menubar=yes,scrollbars=yes,resizable=yes");
    }
    form.engine.selectedIndex = 0;    // 初期状態に戻す

    return false;
}

//-->
</script>
</head>

<body bgcolor="white">
<center>

検索エンジンのHPを開く
<form method="GET" onSubmit="return JumpUrl(this);">
<td><select name="engine" onChange="JumpUrl(this.form)">
<option value="" selected>検索エンジンを選択してください
<option value="http://www.yahoo.com/">
├ Ｙａｈｏｏ！（ＵＳ）
<option value="http://www.yahoo.co.jp/">
├ Ｙａｈｏｏ！（日本）
<option value="http://search.biglobe.ne.jp/index-netplaza.html">
├ ＢＩＧＬＯＢＥサーチ
<option value="http://www.goo.ne.jp/">
├ ｇｏｏ
<option value="http://www.google.ne.jp/">
├ ｇｏｏｇｌｅ
<option value="http://www.infoseek.co.jp/">
├ ＩｎｆｏＳｅｅｋ
<option value="http://www.excite.co.jp/">
├ Ｅｘｃｉｔｅ Japan
<option value="http://www.lycos.co.jp/">
├ Ｌｙｃｏｓ Japan
<option value="http://www.fresheye.com/">
├ フレッシュアイ
<option value="http://infonavi.infoweb.ne.jp/">
├ ＩｎｆｏＮａｖｉｇａｔｏｒ
<option value="http://whois.nic.ad.jp/cgi-bin/whois_gw">
└ JPNIC Whois Gateway
</select></td>
<td>を <input type="submit" value="開く"></td>
</form>

リスト3：選択した項目のURLを開く

8.4 クエリ文字列を取得する

JavaScriptでは，自分のURLに関する情報をlocationオブジェクトから取得することができます(表1)．
これらの情報を利用することで，ユーザが画面から入力した値を利用して，動的に画面を変更するなどの処理を行うことが可能です．
この中で，外部からの値を受け取る方法としてクエリ文字列を利用することができます．クエリ文字列は，CGIなどの動的にHTMLを生成することができるオブジェクトだけでなく，HTMLでもスクリプト言語を利用することで，取得することができます(リスト4)． [表示する]

hash	アンカー名
host	URLのホスト名とポート名
hostnam	URLのホスト名部分
href	URL
pathname	URLのパス名部分
port	URLのポート名
protcol	URLのプロトコル部分
search	URLのクエリ(問い合わせ)文字列
target	URLのトランジット属性

表1：locationオブジェクトで取得できる値


//---------------------------------------------------------------------------
// 変数
//---------------------------------------------------------------------------

    var Name = new Array();
    var Value = new Array();
    var Keys = 0;

//---------------------------------------------------------------------------
// 変数を追加する(内部用)
//---------------------------------------------------------------------------
function AddString(name, value)
{
    Name[Keys]  = name;
    Value[Keys] = value;
    Keys++;
}

//---------------------------------------------------------------------------
// 指定された変数の登録番号を返す(内部用)
//---------------------------------------------------------------------------
function SearchString(name)
{
    var num = -1;

    for(ct = 0; ct <= Keys; ct++){
        if(name == Name[ct]){
            num = ct;
            break;
        }
    }
    return num;
}

//---------------------------------------------------------------------------
// 指定された変数の値を返す
//---------------------------------------------------------------------------
function GetString(name)
{
    var value = '';

    if((num = SearchString(name)) >= 0){
        value = Value[num];
    }
    return value;
}

//---------------------------------------------------------------------------
// 変数を追加・修正する
//---------------------------------------------------------------------------
function SetString(name, value)
{
    if(name.length == 0){
        return 0;
    }

    if((num = SearchString(name)) >= 0){
        Value[num] = value;
    }
    else{
        AddString(name, value);
    }
    return 0;
}

//---------------------------------------------------------------------------
// 変数を削除する
//---------------------------------------------------------------------------
function DeleteString(name)
{
    if((num = SearchString(name)) >= 0){
        Name[num]  = '';
        Value[num] = '';
    }
    return 0;
}

//---------------------------------------------------------------------------
// クエリ文字列を解析する
//---------------------------------------------------------------------------
function CreateQuetyStringList()
{
    var name  = '';
    var value = '';
    var flag  = false;

    for(ct = 1; ct <= location.search.length - 1; ct++){
        ch = location.search.charAt(ct);
        if(ch == '?'){
            flag = false;
            continue;
        }
        if(ch == '='){
            flag = true;
            if(value.length > 0){
                name = value;
            }
            value = '';
            continue;
        }
        if((ch == '&') || (ch == '#')){
            flag = false;
            if((name.length > 0) && (value.length > 0)){
                AddString(name, value);
            }
            name  = '';
            value = '';
            continue;
        }
        value += ch;
    }
    if(value.length > 0){
        if(flag == true){
            AddString(name, value);
        }
    }
    return 0;
}

リスト4：クエリ文字列の値をを名前指定で取得するための関数
8.5 Internet Explorer の「お気に入り」に独自のアイコンを設定するには

ホームページのURLを「お気に入り」に追加すると，そのページ固有のアイコンを表示することがあります．
このアイコンは，IEが識別できるファイル名でWebサーバ上に置くことで，「お気に入り」への追加を行ったときに，Internet Explorer が自動的にダウンロードを行います．

●サーバ全体に１つのアイコンを設定する場合

ユーザーが「お気に入り(favorites)」を登録したときに，ユーザーが使っている Webブラウザの，インターネットショートカットの横にオリジナルのロゴを表示させたい場合，オリジナルのアイコンファイルを "favicon.ico" という名前でドメインの root ディレクトリに配置しておきます． http://www.domain.ne.jp/favicon.ico

このような配置を行った場合 "domain.ne.jp" 内のページがお気に入りに追加されると，原則としてすべてこのアイコンファイルが使用されます．
http://www.hogehoge.ne.jp/~foo/favicon.ico
このような配置を行った場合，ユーザー "foo" 配下にあるすべてのページについて，お気に入りに追加された際には原則としてこのアイコンファイルが使用されます．
http://www.hogehoge.edu/introduce/favicon.ico
このような配置を行った場合，URI "introduce/" 配下のページについて，お気に入りに追加された際には原則としてこのアイコンファイルが使用されます．
同一ディレクトリ内でページごとに異なるアイコンを使用したい場合には，例えば次のようなタグをページの中に加えることで，他の場所に置くことが可能です．
<LINK REL="SHORTCUT ICON" href="/iconfile/hogehoge.ico">
このタグが記述されたページがお気に入りに追加された場合には，同一ディレクトリ，または上位ディレクトリ内に "favicon.ico" が存在するかどうかにかかわらず "/iconfile/hogehoge.ico" がこのページのお気に入りのアイコンとして使用されます．

8.6 Webページから「お気に入り」への追加を行うには

JavaScriptを利用することにより，追加を支援することができます．ただし，IE4.0以上でなければ動作しません．以下のボタンを押すと，お気に入りへの追加ができます． [表示する]


<script language="JavaScript">
<!--
function AddFavorite(url, title)
{
    if((navigator.appVersion.indexOf("MSIE") > 0)
     &&(parseInt(navigator.appVersion) >= 4)){
        window.external.AddFavorite(url, title);
    }
    else{
        alert("IE4.0以上でサポートしています．");
    }
}
//-->
</script>


<a href="favorite.htm"
 onClick='AddFavorite(location.href, document.title); return true;'>
お気に入りに追加！
</a>

リスト5：お気に入りに追加する

8.7 必須入力項目に値が入力されているかを調べる

入力項目に値を設定して実行しなければCGIが正しく動作しない場合，スクリプトでチェックし値が設定されていない場合はリクエストを行わないようにすることで，実行しても正しい結果が得られないことが明らかな無駄なリクエストを行わないようにすることができます．
また，この時点で数値文字列の入力項目に，それ以外の文字の入力するのをを禁止したり，半角カナなどの入力すると問題になりそうな文字列を排除したり警告を発するのもよいでしょう．
なにかと便利に利用できるJavaScriptですが，スクリプトの動作はWebブラウザによって動作やサポートする機能に違いがあり，CGIにチェックを行った正しいリクエストが送信できることを保証することはできません．仮に利用するWebブラウザを制限しでも，通信の障害で正しい情報が受信できない場合も考えられます．
したがって，JavaScriptでの入力文字列のチェックは，あくまでも補助的な機能と考え，送信しても必ず失敗すると思われる無意味なリクエスト行わないようにすることを目的としたほうがよいでしょう．
スクリプトで正しい値が入力されるように制御したとしても，CGI側では値をチェックし，不正な値があっても適切なエラー処理を行うように設計しなければなりません．[表示する]


<script language="JavaScript">
<!--
function CheckItems(form)
{
    if(form.text.value == ''){
        alert('値を入力してください．');
        return false;
    }
    return true;
}
//-->
</script>

<form method="GET" onSubmit="return CheckItems(this);">
入力<input type="text" name="text" value="">
<input type="submit" value="送信"></center>
</form>

リスト6：入力項目に値が設定されているかをチェックする

8.8 入力域をdisableにする

項目の値を動的に変更を許可したり禁止させる場合に利用できます． [表示する]

●Webブラウザ固有の方法

入力域を無効(disable)にするには，Internet Explorer 4.01以降の場合， HTMLの記述で実現できます(リスト7)．
固定の場合は，リスト8のような記述もできます．


<INPUT type="radio" name="sw" onClick="text1.readOnly=true; text1.focus();">ReadOnly
<INPUT type="radio" name="sw" onClick="text1.readOnly=false; text1.focus();" checked>Edit
<INPUT type="text" name="text1">

リスト7：入力域の無効(Internet Explorer 4.01以降)


<INPUT TYPE=SUBMIT VALUE="Submit Data" DISABLED ID=btnSubmit>
<INPUT TYPE=TEXT VALUE="This is read only" READONLY>

リスト8：値が固定の場合の入力域の無効(Internet Explorer 4.01以降)

●Webブラウザに依存しない方法

Webブラウザに依存しないHTMLにより，入力域を無効にする方法は存在しません．しかし，JavaScriptを利用することにより，「無効になっているように見せかける」ことができるようになります．
Netscape Comunicator 4.xx, Netscaoe6.1, InternetExplorer4.xx, 5.xxでは動作しますが，Netscape6だけは，正しく動作しません．


<script language="JavaScript">
<!--
function RadioDisable(form)
{
    // 強制的にボタン１を選択させる
    form.rd[0].checked = true;
    form.rd[0].focus();
}
//-->
</script>

<form name="TestForm">
<input type="radio" name="rd" value="1" checked>ボタン１
<input type="radio" name="rd" value="2" onClick="RadioDisable(TestForm);">
ボタン２
</form>

リスト9：強制的に値を入れ替える

8.9 ボタンの連打を防ぐ

利用者が，Webブラウザに表示したボタンを連打すると，押された回数分のリクエストが発生し，Webサーバへの負荷が増加することになります．
また，ネットワークの遅延などでレスポンスが遅れた場合には，本当に動作しているのかが不安になって，ついボタンを何度も押してみたくなりますし，レスポンスが誤って連打してしまった利用者は，リクエストが終了するまで次の操作を待たされることになります．利用者のボタンの連打は，簡単なスクリプトを利用することで防止することが可能です．
そこで，スクリプトを使って，一回押したボタンを２回目以降に押した場合は無効にしてしまいます．
ボタンオブジェクトのdisabledメンバー変数は，IE4.01以降，Netscape6以降で利用可能ですが，対応していないバージョンでも連打を防ぐため，実行フラグを用いて処理が何回も実行されないようにしておく必要があります． [表示する]


<script language="JavaScript">
<!--
var fExec = false;

function OneTimeAction(form)
{
    if(fExec == true){
        return false;    // ２回目以降は処理を行わない
    }

    fExec = true;
    alert("処理を行う．")

    form.test.value = "もうだめよ";
    form.test.disabled = true;    // IE4.01以降，Netscape6以降で有効

    return false;
}

//-->
</script>

<body bgcolor="white">

<form method="GET" onSubmit="return OneTimeAction(this);">
１回しか反応しないボタン→<input type="submit" name="test" value="１回だけよ">
</form>

</body>
</html>

リスト10：１回しか反応しないボタン

8.10 JavaScriptとHTMLを混在させるときの注意点

●スクリプトの記述方法による問題

JavaScriptをHTML文書内に埋め込んだときに，HTML記述が正しく表示されない場合があります．このような現象が起こった場合，<BODY>タグで囲まれた記述部分に記述しているある<SCRIPT>タグをチェックする必要があります．
Webブラウザは，以下のような手順でHTMLファイルを解析します．

１）<HEAD>タグはすべての読み込みを行ってから解析を開始する．
２）<BODY>タグはデータを受信しながら解析が可能なだけのデータを受け取ると解析を開始し，<BODY>タグの解析はデータの受信と並列に行われている．

このため，HTMLが不十分な状態で解析される場合が発生し，最終的に出力される HTMLが正しくない状態になる場合があります．
この場合，スクリプト部分は完全に読み込まれてから解析させるように記述すれば解決する可能性があります．

１）HTMLで記述できる部分は極力HTMLのみで記述する．
２）<BODY>タグ内にスクリプトを記述する場合は，最小限の記述に留める．
３）関数を記述する場合は，<HEAD>タグ内に記述する．(JSファイルを読み込む場合も同様)
４）スクリプトを多く使う必要がある場合はHTML記述を行わず，すべてスクリプトでHTMLを出力させる．このとき，HTMLの出力には，document.writeln() でなく，document.write() を使いましょう．Webブラウザのバージョンによっては，以下のような問題が発生する場合があります．

256バイトの文字列を設定すると，スクリプトエラーが発生する場合がある．

予期しない場所に改行コードが設定される場合がある．


<html>
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">

<head>
<title>タイトル</title>
<link rel='stylesheet' type='text/css' href='main.css'>
<script language="JavaScript" src='main.js'></script>
</head>

<body background="main.jpg" bgproperties="fixed" >
<script language = "JavaScript">
<!--
    displayHtml();
//-->
</script>
</body>
</html>

リスト11：スクリプトだけで表示するHTML


function displayHtml()
{
    document.write('XXXX<br>')
    document.write('XXXX<br>')
        ：
        ：
        ：
}

リスト12：HTMLを出力するスクリプト

8.11 Webブラウザが完全に日本語対応していない（またはバグがある）

Internet Explorer 3.x のJavaScriptは，日本語が使えないことで有名でしたが，いまでも日本語が正しく処理できないものが存在しますし，海外で開発されたものはバージョンにかかわらず，このような問題を持っている可能性があります．

●考えられる原因

JavaScriptで日本語を扱う場合，日本語対応が完全でないWebブラウザで表示したときは，Webブラウザ自体にバグがあるときには正しく動作しない場合があります．
そのようなWebブラウザでアクセスが行われることを想定したシステムを構築するときには，以下のような対策が考えられます．

JavaScriptに対応していないWebブラウザ用のページを用意する．

document.write で日本語を利用する場合は，JavaScriptを記述したファイルをHTMLファイル内に直接記述する．(HTMLとJavaScriptを別ファイルに記述すると，文字コードの識別が正しく行われず，UTF-8 で文字列を出力してしまうバージョンが存在する)

消極的な方法ですが，問題のあるWebブラウザは対応外とするか，スクリプトでの日本語文字列の使用を避ける．