ドン・デノンコート著

開発中のiSeriesアプリケーションにWebのフロントエンド部分をまだ作っていないのであれば、HTMLの良い点、悪い点、厄介な点について本稿で学んでください。
HTMLの良い点は、ドロップ・ダウン、イメージ・テキスト領域、マウスの制御などGUIの全てを提供していることです。またHTMLは業界標準的なインタフェースとなっているので習得するのにそれほど苦労しません。
HTMLの悪い点は、iSeriesのディスプレイ・ファイルのような動作を行わせようとしたときにカスケード・スタイル・シート(CSS: Cascading Style Sheets)とJavaScriptの両テクノロジを使用する必要があるということです。さらに、HTMLでビジネスGUIを開発するための標準的な戦略というものが存在しないので、その結果として、各企業はそれぞれ独自に戦略を考えているのです。
HTMLの厄介な点は、コードそのものにあります。HTML、CSS、JavaScriptなどで書かれたコードがサーバー側のテクノロジ(JSP、CGI、PHP、ASP、など)と混在しています。
HTMLアプリケーションを開発する際の苦しみを少しでも和らげるために、ディスプレイ・ファイル処理をシミュレートしたJavaScript関数を作りました。しかしこのDDS JavaScript関数をご紹介する前に、ディスプレイ・ファイルでできるがHTMLではできないことは何かについて説明します。

ディスプレイ・ファイルとHTML処理
一般的なディスプレイ・ファイルの画面の背後ではさまざまなことが起こっています。たとえば図1のDDSコードと図2の画面で考えてみましょう。さて、失礼を承知で皆さんが既にご存知のことを説明してみます。

まずRPGコードにより、ディスプレイ・ファイルがオープンされ、レコード・フォーマット・フィールドの初期値を設定して実行フォーマットが実行された後、iSeriesのディスプレイ・ファイル・エンジンにより、その後が引き継がれます。このとき、ディスプレイ・ファイル・エンジンが画面に表示する前に、iSeriesがEDTCDE、DSPATR、DFTなどといったプレゼンテーション・キーワード機能が実行されるか、そうでなければディスプレイがフォーマットされます。ユーザーがデータを入力しようとしても、iSeriesは数字以外のキー・ストロークは認識せず、ユーザーがエンター・キーかファンクション・キーを押すと、DDSに規定されている通り、CHECK、RANGE、COMP、VALUESなどのキーワードを使って値の妥当性チェックを行います。

次に図3のHTMLコードと図4の画面を見てみましょう。このHTMLコードはDDSを比較的素直にHTMLに変換したものです。HTMLページではドロップ・ダウン式の選択ボックスが使えるという利点があり、DDS VALUESキーワードの役割を事実上置き換えることができます。またHTMLページではExit、Return、Submitなどのボタンが使用でき、古臭いファンクション・キーの機能を置き換えています。

しかし、画面処理では、ディスプレイ・ファイルだったら当然行われるはずの動作がHTMLでは実行されません。図4をご覧のように、dateとpriceの初期値はフォーマットされておらず、ageやquantityを入力するフィールドにアルファベット文字の入力ができてしまい、緑色画面では必須のはずの、nameフィールドを空欄のままにした時に表示される警告メッセージが、HTMLでは表示されていません。 サーバー側プログラムで画面入力処理が行われる段になると、事態はさらに厄介になります。HTMLをJavaScriptで補完しない限り、サーバー側プログラムでは値の検証が行われないため、サーバー側プログラムで次のことを実行するコード例を実装する必要があるのです。
１．DDSキーワード機能を置換する。
２．数値フォーマット文字(カンマ、日付表示に使われる斜線記号、ドル記号など)を削除する。
３．数値フィールド中の非数字文字をチェックする。
４．フィールド長を超えていないことを確認する。

複雑なソリューション
iSeriesのディスプレイ・ファイルをシミュレートするには、HTMLをJavaScriptで補強する必要があります。JavaScript言語は元々、ユーザーがWebブラウザで見たときに動的な動きをするようにHTMLを扱う目的で開発された言語です。JavaScriptをHTML中に組み入れるには、SCRIPTタグを使用します。

<SCRIPT language=
　 "JavaScript">
　 function add(x, y) {
　　　return x + y;
}
</scirpt>

または、JavaScriptのコードを外部ファイル(デフォルトの拡張子は.js)に記述しておいて、スクリプト・タグのソース属性で次のように呼び込みます。

<SCRIPT language= "JavaScript" src="DDSKeywords.js">< /SCRIPT>

JavaScript関数を画面のイベントに関連付けることよってその関数を実行させることもできます。ブラウザは何十というイベントを発生させるかもしれませんが、本稿の目的として重要なのは以下の4つのイベントです。
onLoad： ブラウザがHTMLの構文解析を終え、ページをはじめて表示したときに発生するイベント
onSubmit： フォームの[Submit]ボタンが押されてからフォーム・データがサーバーに送信される前に発生するイベント
onChange： ユーザーがタブ・キーやマウスで入力フィールドから外れる操作をし、値の変更が確定されたときに発生するイベント
onKeyDown： ブラウザ・ウィンドウ中でキーが押されるたびに発生するイベント
簡単なHTMLページを使用してJavaScriptとイベントをどのように関連付けるのかを図5に示します。ブラウザがHTMLの構文解析を終了しページをユーザーに対して表示するとき、「load」というメッセージがダイアログ中に表示されます。ユーザーが最初の入力フィールドに値をキー入力してそのフィールドから離れると、「change」というメッセージが表示されます。カーソルが2番目の入力フィールドにあるときにユーザーが何かのキーを押すと、「keydown」メッセージが表示されます。そして最後に、ユーザーが[Submit]ボタンを押すと「submit」メッセージが表示されます。

ちょっとした(実際にはかなり多いのですが)JavaScriptコードをload、submit、change、keydownなどのイベントに関連付けることで、ディスプレイ・ファイルの動作をシミュレートすることができます。loadイベントやchangeイベントが発生した際に入力フィールドの初期値や更新値をフォーマットするような関数を実装することもできます。また、changeイベントやsubmitイベントが発生したときに入力フィールドの値を検証するJavaScriptコードを書くこともできます。

submitイベントに関連付けられた関数がブール値falseを返してきたときは、そのフォームはサーバー側には送られないというのがJavaScriptを書く際のコツです。同様に、入力フィールドに非数値が入力されたときにfalseを返すようなkeydownイベント・ハンドラを実装した場合、入力された文字はその入力フィールドの値には加えられません。

どうです、なかなかでしょう。JavaScriptについて数週間(あるいは数か月間)、各入力ページについて数時間も勉強すれば、ディスプレイ・ファイルのように機能するHTMLパネルを作成できるようになるでしょう。でもJavaScriptを勉強する暇がなかったり勉強する気にならなかったらどうしましょう。そういう時は私が作成したオープン・ソースのJavaScriptルーチンのパッケージを使用してください。

簡単なソリューション
図6のコードをご覧ください。このコードには図3のHTMLと同じコードが含まれていますが、外部JavaScriptルーチンの呼び出しを入力フィールドのonChange属性に割り当てています。

外部ルーチンは図6の3行目のHTMLスクリプト・タグによりDDSKeywords.jsファイルから呼び出されます。このJavaScript関数の名前に見覚えがありませんか。check、comp、edtcde、rangeという名前です。これらの関数何をするためのものなのか、そしてどうやって使うのかも大体ご存知でしょう。

図7はユーザーが入力をする前の段階でページがどのように表示されるのかを示しています。おや？dateとpriceの値がフォーマットされていますよ！どうしてこうなったのでしょうか。これはJavaScriptのちょっとしたマジックによるものです。ブラウザはDDSKeywords.jsファイルをロードする際、ページのロード・イベント中に特別なJavaScriptページ・ロード・ハンドラ・ルーチンを実行させるよう割り当てます。このような特別な関数を呼び出した結果の1つとして、入力フィールドのonChange属性にedtcdeが割り当てられていると、その入力フィールドの初期値はページがロードされるときにフォーマットされます。

ページ・ロード・ハンドラ関数のもう1つの効果は、ユーザーが[Submit]ボタンをクリックしたときに発揮されます。クリックした時点でsubmitイベントが発生し、あらゆる検証関数(check、comp、rangeなど)が実行されます。いずれかの検証に失敗した場合、ユーザーはその旨をメッセージで知らされ、フォームは送信されません。フォームが全ての検証にパスすると、(サーバー側の処理を軽減するため)入力フィールドからフォーマット文字が取り除かれて、フォームがサーバーに送信されます。

しかしこれで終わりではありません。ページ・ロード・ハンドラは特別なJavaScriptルーチンを割り当てて、10進数のフィールド中で非数値の値を禁止し、そのフィールドの最大桁数を超えないようにします。

ディスプレイ・ファイルの動作をブラウザで検証する
図6に示したHTMLの動作をInternet Explorerで検証してみましょう。ページが最初にアクセスされたときに、edtcdeが割り当てられている全ての入力要素には初期値がフォーマットされて入っています。図7でdateとpriceのフォーマットはもうお分かりでしょうが、ageとqtyのフィールドにはedtcdeが「Z」と「1」で割り当てられているため、空の初期値はそれぞれ空白と0として表示されます。

onChangeイベントにedtcdeが割り当てられている入力要素(date、fullName、age、product、qty、price)のいずれかに非数字を入力しようとしても、入力は無視されます。

たとえばdateフィールドに1234567と入力しようとしても最後の1文字(「7」)は無視されます。その理由は、edtcdeのJavaScript関数にはフィールドの桁数や小数の最大長を指定する引数があり、dateフィールドのedtcde関数には「6」桁と指定されていてDDSKeywordsが6文字を超えた入力を許可しないためです。

ageフィールドに18と入力してそのフィールドから離れると、「入力された18という年齢はGE21未満です。」というダイアログ・メッセージが表示され、フォーカスがproductフィールドからageフィールドに戻り、18という数字が強調表示されます。このエラー・ダイアログは、ageフィールドのonChange属性がcomp関数を呼び出す設定になっており、その引数が「GE」と「21」になっているためです。エラーを修正せずにもう一度タブ・キーを使ってこのフィールドを離れることができます。これはフィールドの値が変わらなかったためonChangeイベントが発生せず、edtcde関数が呼び出されないためです。このままフォームを送信すると問題が発生するかもしれません。でも焦らないでください。後で、こうしたエラーをDDSKeywordsがどのように処理するかについては説明しますから。

quantityフィールドに082と入力してタブ・キーでこのフィールドを離れると、edtcdeの引数が「1」となっているので、頭についている0は取り除かれます。また桁数が2に設定されているため、ブラウザは2桁を超える部分を受け取ることはありません。したがってedtcde関数はageフィールドに「8」と設定します。

priceフィールドに98と入力してそのフィールドから離れると、edtcde関数が入力値を$98.00にフォーマットしなおします。これは編集コードが「1 $」となっているからです。しかしその一方、「入力された価格98.00は1001と2098の間の値ではありません。」というダイアログ･メッセージも出力されます。これは、priceフィールドのHTML入力タグに1001から2098という範囲指定されたonChange属性に関連付けられたrange関数があるからです。ageフィールドへの誤入力と同様にpriceフィールドへの誤入力も強調表示されます。

こうした一連のエラー・ダイアログを大胆にも一切無視して[Submit]ボタンをクリックすることもできます。しかしフォームのデータはサーバーには送信されず、「fullNameフィールドへの入力がありません。」というダイアログが表示され、fullNameフィールドが強調表示されます。さらにこのエラーを無視してフォームをもう一度送信しても、fullNameフィールドに値を入力するまでは同じエラー・メッセージが表示されつづけます。

さらにもう一度[Submit]ボタンをクリックすると、「入力された年齢18が21GE未満です。」というダイアログ・メッセージが表示されます。まともな年齢を入力して[Submit]ボタンをクリックしてもまたエラー・メッセージが表示されます。今度は「入力された価格(98.00)が1001と2098の間の値ではありません。」というダイアログです。つまりDDSKeywordsはonSubmitイベント中に値の検証を行うのです。ですからたとえば2000という価格を入力すると、フォームはサーバーに対してほぼ送信可能な状態になります。

フォームが全ての検証にパスすると、edtcde関数でフォーマットされた全ての入力フィールドの値のフォーマット文字が取り除かれます。JavaScriptで非数値文字を取り除くことでサーバー側でのフォームの処理が簡素化されます。ディスプレイ・ファイルから戻されたドル値から手動でカンマを取り除いたことなど、まずないでしょう？

上記のテストはInternet Explorerで行いましたが、Netscape NavigatorやFirefoxでも同様に動作するはずです。唯一の例外は、NetscapeやFirefoxのonKeyDownイベントがうまく動作しないため、DDSKyewordsが非数値の入力を禁止したり桁数が長すぎる値を入力できなくしたりという処理がうまく動作しません。しかし、onChangeイベントが発生した際にDDSKeywordsのedtcde関数が非数値文字を取り除き、そのフィールドの桁数が長すぎる場合にはダイアログ･メッセージを生成します。

ダウンロード、インストール、使用方法
DDSKeywordsはSorceForgeからダウンロードが可能です。このモジュールはLGPL (Lesser General Public License)であり、(1) フリー･ソフトウェアであること、(2)ご支援いただきたいということの2点をご理解ください。DDSKeywordsをダウンロードするにはsourceforge.net/projects/ddskeywordsを開いて[Download DDSKeywords]ボタンをクリックします。ダウンロード・ファイルはzip形式で、数十個のHTMLファイル、DDSKeywords.css、DDSKeywords.jsファイルが含まれています。私の場合、ルートディレクトリのHTMLファイルを使ってDDSKeywordsのJavaScript関数をテストしています。

図8はedtcde.htmlのテスト用ページで、実はIBMのマニュアルOS/400 DDS Reference V4R2の図4-83とまったく同じです。docディレクトリ下のHTMLにはDDSKeywords.jsファイル中の関数についての総合的なドキュメントが含まれています。お使いのシステムのどこかのディレクトリにddskeyword.zipファイルを解凍してください。 DDSKyewordsを使用するには、DDSKeywords.jsファイルとDDSKeewords.cssをWebアプリケーションのプロジェクト・ディレクトリにコピーし、HTMLの最初に以下のコードを入力するだけです。

<link rel="stylesheet"
href="DDSKeywords.css"
type="text/css"/>
　"JavaScript"
src="DDSKeywords.js"
　></SCRIPT>

次に、DDSKeywords関数を入力フィールドのonChange属性に割り当てます。

<input type="text"
　name="age"
　onChange="edtcde(
　　　 'Z', this, event,
　　　 2, 0);"/>

1つの入力フィールドに対して複数のDDSKeywords関数を割り当てたい場合は、セミコロンで区切って指定してください。

DDSKeywords関数は見た目通りの関数ですが、this引数とevent引数だけはちょっと変わっています。図6でお気づきかもしれませんが、edtcde関数、range関数、comp関数、check関数の呼び出しはすべてthisパラメータとeventパラメータを使用しています。thisとeventはJavaScriptでの予約語となっています。

JavaScriptの予約語であるthisの値はコンテキスト依存型です。thisをHTMLの入力タグのJavaScript関数呼び出しで使用するときは、DDSKeywords関数が値を取り出して入力値を修正する対象としている入力フィールドを参照します。

JavaScriptの予約語eventは関数呼び出しの際にアクティブになっているHTMLイベントを参照します。この関数はonChangeイベントに割り当てられているので、イベントは常にonChangeであると思うかもしれませんが、そうではありません。DDSKeywordsがページをロードする際に入力フィールドに割り当てられたedtcde関数呼び出しを実行するとき、フィールドの初期値をフォーマットするためにonLoadイベントが発生します。そしてユーザーが[Submit]ボタンをクリックした後にDDSKeywordsがさまざまな検証用メソッドを呼び出したときに発生するのがonSubmitイベントです。
最後に
DDSKeywordsはHTMLのonCloseイベントには応答しませんが、本稿の締めに当たっていろいろお考えになることがあるでしょう。たとえば、DDSKeywordsをダウンロードしてiSeriesのHTMLのフロントエンドとしてお使いいただくのもその1つです。また本稿でご紹介した考え方を取り入れていただいて独自のJavaScriptを書くのも1つのやり方でしょう。しかしJavaScriptのコーディングに興味をお持ちであれば、SourceForgeのDDSKeywordsプロジェクトに加わっていただいてご協力いただくのも良いかと思います。

ドン・デノンコート氏はCAS Severn社のWebSphereコンサルタントです。同氏は1980年代はRPGやCOBOLをコーディングし、1990年代にはC++でのコーディングに移り、1990年代中盤からはJavaのコーディングに携わっています。