CGI Saloon - JavaScriptの使用

JavaScriptの使用

ＣＧＩでJavaScriptを使用する場合について

JavaScriptとは？
JavaScriptは、ＨＴＭＬデータ内にプログラムを直接記述し、Ｗｅｂブラウザ上で動的な表示変更等の処理を行なう事ができるスクリプト言語です。
※ＷｅｂブラウザがJavaScript未対応であったり、JavaScriptを無効にしてあったりすると、JavaScriptのプログラムは動作しません。

JavaScriptのプログラムはSCRIPTタグ（<SCRIPT>～</SCRIPT>）内に記述します。
また、JavaScriptが動作しないブラウザの為に、NOSCRIPTタグ（<NOSCRIPT>～</NOSCRIPT>）といものが用意されており、JavaScriptが動作しないブラウザだけがNOSCRIPTタグ内に記述された内容（ＨＴＭＬタグや文字列等）を表示します。
ＣＧＩでJavaScriptを使用する場合とは？
どの様な場合にＣＧＩでJavaScriptを使用するのかを以下に示します。
- リアルタイムに画面を変化させたい場合
  ＣＧＩはＷｅｂブラウザからの何らかの要求に応じて動作しＨＴＭＬを出力する為、固定のＨＴＭＬを出力しているだけでは、Ｗｅｂブラウザの画面をリアルタイムに変化させる事ができません。
  JavaScriptを使用すれば、マウスカーソルの位置に応じて画像の表示を変化させたり、画面をフェードイン／フェードアウトさせたりする事ができます。
  また、DynamicHTMLを使えばもっと複雑な表示変更なども可能です。
  ※DynamicHTMLとは、その名の通り動的にHTMLタグを変化させる仕様の事です。
  　DynamicHTMLを使用する場合、プログラム部分はJavaScriptで記述します。
  　注）DynamicHTMLは、Ｗｅｂブラウザの種類によって仕様が異なります。
- 同一パターンの繰り返しをたくさん表示する場合
  細かい表をたくさん表示したり、細かい画像データをたくさん表示したりする場合、そのままのＨＴＭＬタグをＣＧＩから出力すると、ネット上にたくさんの似たようなＨＴＭＬタグが大量に流れ、表示が遅くなる場合があります。
  しかし、JavaScriptで記述しておけば、ネット上に流れるＨＴＭＬの量を減らすことができます。
Ｗｅｂブラウザやプラットフォームの種類による違い
ユーザー側のＷｅｂブラウザの種類／バージョンやプラットフォーム（マシン、ＯＳ）の種類（Windows、MAC、その他）によってはJavaScriptで使える命令が異なる場合があります。
そのためJavaScriptを使用する場合には、まず最初にＣＧＩへアクセスしているユーザー側のＷｅｂブラウザとプラットフォームの種類を判別しておく必要があります。
※Ｗｅｂブラウザやプラットフォームの種類に依存しそうにない JavaScriptの命令を使用する場合であっても実際の動作が異なる場合があり、予めＷｅｂブラウザとプラットフォームの種類を判別しておけば、問題が発生した場合に対処がしやすくなります。

Ｗｅｂブラウザとプラットフォームの判別方法については『Ｗｅｂブラウザとプラットフォームの判別』を参照してください。

Ｗｅｂブラウザとプラットフォームを判別し、JavaScriptを使用して良いかどうか、また、使用したいJavaScriptの命令が使えるか否かを判断します。
JavaScriptの有効／無効
Ｗｅｂブラウザを判別してJavaScriptに対応している事がわかったとしても、Ｗｅｂブラウザの設定で JavaScriptを無効にしてある場合は、JavaScriptが動作しません。
ＣＧＩにアクセスされたときにＷｅｂブラウザのJavaScriptの有効／無効の判断が行なえれば良いのですが、残念ながらＣＧＩにアクセスされただけではJavaScriptの有効／無効を判断する事ができません。

これに対処するためには、以下に示す２つの方法があります。
1. JavaScript有効時の処理と無効時の処理を両方記述する
  ごく一般的な方法です。
  JavaScriptのプログラムをSCRIPTタグ内に記述し、 JavaScriptが無効だった場合のHTMLタグ等をNOSCRIPTタグ内に記述します。
  欠点
  　・前述の「同一パターンの繰り返しをたくさん表示する場合」には使用できません。
  　・ＩＥ等ではJavaScript使用時にダイアログで有効／無効を選択するという設定があり、この設定にするとJavaScript使用時に必ず毎回ダイアログ選択が必要となります。
2. 一度だけSCRIPTタグとNOSCRIPTタグでJavaScriptの有効／無効を判断する
  一度だけSCRIPTタグとNOSCRIPTタグによってJavaScriptの有効／無効を判断し、それ以降はJavaScriptの有効／無効状態を連携する様にします。
  欠点
  　・最低１回はJavaScriptの有効／無効を判断しなければならない為、ＣＧＩが出力する一番最初の画面でJavaScriptを使用したい場合は、 JavaScript有効時の処理と無効時の処理を両方記述する必要があります。
  　・途中でJacvaScriptの有効／無効を変更された場合に対処できません。
Ａの方法に関しては特に技術的な説明は不要と思われるため、Ｂの方法に関してのみ、次で説明を行ないます。

JavaScriptの有効／無効判断と連携
JavaScriptの有効／無効状態が不明な場合は、画面内のフォームにJavaScriptの有効／無効を判断する為のタグを挿入し、 JavaScriptの有効／無効状態がわかっている場合は、画面内のフォームにJavaScriptの有効／無効状態を連携する為のタグを挿入します。

例）

if ( $FORM{'jsmode'} eq '' )
{
	$jscheck = "<script language=\"JavaScript\">\n"
		 . "<!--\n"
		 . "document.write('<input type=\"hidden\" name=\"jsmode\" value=\"1\">');\n"
		 . "// -->\n"
		 . "</script>\n"
		 . "<noscript>\n"
		 . "<input type=\"hidden\" name=\"jsmode\" value=\"0\">\n"
		 . "</noscript>\n" ;
}
else
{
	$jscheck = "<input type=\"hidden\" name=\"jsmode\" value=\"$FORM{'jsmode'}\">\n" ;
}

	・
	・
	・

print "<form method=\"post\" action=\"～.cgi\">\n" ;
print $jscheck ;
	・
	・
	・
print "<input type=\"submit\" value=\"Send\">\n" ;
print "</form>\n" ;

CGI Saloon