90 要があり、保守性が悪くなるからである。 ● PopCreate の呼び出し 　ソース4 ではonClick を用いて、ソー ス1 に記述された関数PopCreate を呼 び出している。PopCreate には引数と して、以下の3 つが用意されている。 【ソース4】 ・iLeft（タグのX 座標） ・iTop（タグのY 座標） ・sImgname（サムネイル画像の名称） 　iLeft とiTop は、ポップアップの表 示位置を指定する。ここで設定した値が、 ソース1 内のスタイルシートの設定に反 映される。なお、表示位置は固定値で入 れても問題はないが、明細の各行にボタ ンを設定する場合、固定値では常に同じ 場所にポップアップが表示されることと なる。 　今回は位置の決め方の例として、ソー ス5 を用意した。この処理では、引数と して、対象のタグ要素を渡し（this は、 イベントが発生したタグ要素をオブジェ クトとして指定している）、タグ要素の 座標位置と画面のスクロール幅を取得す ることで、タグの座標位置を計算してい る。【ソース5】 　sImgname は、表示するサムネイル 画像のパスを指定する。sImgname も また、固定値として記入してもよいが、 そうすると、明細で表示した場合に、各 データに対応する画像を表示することが できなくなる。 　対処方法として、隠しフィールドを用 意し、そこへ画面読み込み時にRPG で 画像名をセットすることで、各データに 対応した画像表示が実現可能になる。 　以上が、JavaScript でポップアップ を表示する方法となる。 4.JavaScriptでの 活用例 　JavaScript で作成するポップアップ は、DB 情報を取得しないため、画面の 再読み込みが発生せずシームレスに表示 できることが特徴である。したがって、 ポップアップをHTML 上の入力補助機 能として活用することで、システムの運 用効率を上げることも可能である。 　その1 例として、日付入力の補助とし て、カレンダーをポップアップ表示する 方法を解説する。【図5】 ●カレンダーのポップアップ 　ソース6 では、ボタンのonClick で、 Calendar という関数を呼び出している。 【ソース6】 　この関数が、カレンダーのポップアッ プを呼び出す処理を行っている。 Calendar の引数は、「タグのX 座標, タ グのY座標,日付を返すタグ要素」となっ ている。最初の2 つの引数は、ポップアッ プを表示する位置を指定しており、ソー ス4 と同じである。 　3 つ目の引数が、ポップアップしたカ レンダーで選んだ日付を表示するタグ要 素を指定している。document. getElementById とは、HTML から指 定したID を持つタグ要素を探し、それ をオブジェクト型として取得することが できるメソッドである。 　「Calendar」関数の中では、カレンダー の表示を行っている。ソース1 で変更が 必要な記述は�AのChildTag だけであ り、ここにカレンダーを表示する HTML を記述すればよい。 　なお、カレンダーを表示するHTML の作成については、月の移動など複雑な コーディングが必要なこともあり、ここ では説明を割愛させていただく。カレン ダー作成のノウハウは、インターネット や書籍に豊富に存在しており、それらを 参考にするのもよいと思われる。 　JavaScript によるポップアップ表示 の手法は、さまざまな場面で活用できる。 例として挙げたカレンダー以外にも、シ ステム開発で役立ててほしい。 補足： Ajaxを活用して HTMLを取得する 　ソース1 では、追加するタグ要素を JavaScript ソース内にそのまま記述し た。今回は簡易な画面だったが、ポップ アップ表示するHTML ソースの量が多 い場合、ソースの量が膨大になり、保守 性が悪くなる。 　そこで、この補足の項ではAjax を活 用し、外部記述されたHTML をポップ アップ表示する方法を解説する。 　Ajaxとは「Asynchronous JavaScript + XML」の略であり、一般的に、サー バとXML 形式のデータのやり取りを行 うものである。ただし、必ずしもデータ がXML 形式である必要はなく、TXT、 CSV、HTML 形式等のデータも取得 可能となっている。また、Ajax も JavaScript なので、新たに別の言語を 使う必要がなく扱いやすい。 　今回は、このAjax の機能を用いて、 外部記述されたHTML ファイルを取得 する方法を解説する。 補足1. Ajaxオブジェクトの作成 　Ajax でサーバと通信を行うためには、 まず専用のオブジェクトを作成する必要 がある。【ソース7】 　ソース7 の�@では、専用のオブジェク トであるActiveXObject を作成してい る。サーバとの通信は、このオブジェク トを介して行う。ただし、このオブジェ クトは、Microsoft が提供しているブラ ウザInternet Explorer でのみサポート されているオブジェクトである。 　それ以外のブラウザで使用する場合に は、XMLHttpRequest というオブジェ クトが用意されている。ソース7 の�Aで は、IE 以外のブラウザの場合に、その オブジェクトを使用して作成するように なっている。 補足2. サーバとの通信 　オブジェクトの作成が完了したら、次 は実際にサーバと通信を行う。 　ソース8 の�@では、データの取得に open メソッドを使用している。この引 数に、「メソッド,URL, 同期方式, ユー ザー名, パスワード」を指定し（ユーザー 名・パスワードは必要な場合のみ）、次 の行でsend メソッドを実行することで サーバに対してリクエストが実行され る。【ソース8】 ●同期・非同期 　上記の引数の中に、「同期方式」とい うものが表示されている。これはAjax の特徴ともいえるものであり、以下に説 明する。 　Ajax の通信方式には、「同期」「非同期」 の2 種類が用意されている。同期型の通 信の場合、次の処理はサーバからの応答