Webで伝票入力画面を作成するにあたって、データの入力で４万件のデータから参照するコードがあるので、Ajaxを使ってみようと思っています。以前に多少は資料を見たりWebで公開されているサンプルを動かしたりしていたのですが、プログラムで使うのは初めてになります。『prototype.js v1.5.0 の使い方』というサイトがあり、そこの「Ajax オブジェクト」という部分を参考にしながら、明細の品物コード(JANコード)から参照する部分を作成はじめました。
『prototype.js v1.5.0 の使い方』の「Ajax オブジェクト」
http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html#UsingAjax
最初は、サンプルをそのまま自社(自作)サーバで動かす為に、サンプルを動くようにしたのですが、XMLを返すサーバ側のプログラムは、Perlで単純に文字を標準出力するget_salesを単にget_sales.cgiとして作成し、出力の際には、ヘッダ情報を付加しました。これが動く事を確認してから、実際に伝票で10行程明細のある画面でJANコードから関連する情報を検索するようにコードを追加しました。以下自分で作業していく中でのポイントをメモとして残しておきます。
■Perlに出力するHTMLデータの一部としてJavascriptを書く
JavascriptのコードをPerlのスクリプト中に記述する必要があります。コーテーションの関係などから$やなどを含めて特殊な文字は状況によっては、$や\として記述しないとJavascriptがエラーになります。
■nameからidへ
暫らく前までは、inputそれぞれに個別にアクセスするのに、nameを利用していたのですが、今回からはidに個別の名前を付けるようにしました。prototype.jsなども含め、HTMLのタグや要素にはidがつけられる場合は、idでアクセスするようになっていますね。
■this演算子を活用
明細が10行程度あり、1つの処理で全ての行に対応するには、イベントが発生した時点にカーソルなどがあり処理を行っていたオブジェクト(この場合は、inputタグの名前や値など)を取得する必要があります。数か月Javascriptでこの手の処理をしていなかったので、発生時にどうしたか思いだ出ませんでした。以前に作ったスクリプトを確認。this演算子を使い、<input type="text" onClick="作成関数名(this)" ・・・> という感じでした。このthisは＂演算子”とあったり、書籍によっては＂命令”となっていたり、扱いが微妙に異なるようです。
■結果の文字化けに注意
今回は、コードから品名などを検索するわけですので結果をフォームに返します。1コード1つのデータなのでXMLでなく、タブ文字コードで区切ったデータとして処理する事にしました。responseTextを利用したのですが、ここにもヘッダー情報を適切に書いてあげる必要があります。それをしていなかったので最初文字化けしていました。ネットを検索し以下を参考に対応しました。PerlでEUC-JPでソースを書いて主としてEUC-JPで文字情報を扱うので「charset=EUC-JP」を追加したわけです。
『楽：技林ブログ』の「Ajaxメモ2 - 文字コードについて」
http://tech.bayashi.jp/archives/entry/studyajax/2006/001288.html
以下一部ですが、結果の出力部分
my $sql_r = &exec_sql($sql); # $sqlには問合せのSQLが入っていて実行結果が
# タブ文字で区切ったテキストデータで返る
my @flds = split /t/, $sql_r;
$v1 = $flds[0];
$v2 = $flds[1];
$v3 = $flds[2];
print <<"EO_TEXT";
Content-type: text/html;charset=EUC-JP
Pragma: no-cache
Cache-Control: no-cache
$lineidt$jancdt$v1t$v2t$v3
EO_TEXT
■文字と数値の変換
inputタグに入っている行毎の合計を集計する際に、データを文字として認識してしまいました。
合計する変数に加算しながら代入したら、数字を右側に連結したものが結果となり、処理の際に数字の1を掛けて足すようにしました。
kei_skei += l_kei*1;
■デバッグには、Firefoxのプラグインを活用
FirebugというFirefoxのプラグインをインストールしておきましたので、エラーがあると、画面の下のフレームに情報が表示されます。それを確認しながら作業ができました。便利です。
■その他・感想
世の中には、Web2.0やAjax対応でもっと簡単にコードの参照機能などを実装できる開発ツールもあるようですが、慣れてしまえば、prototype.jsをインクルードして利用するだけでも、相当な効率アップになりそうです。書籍など解説の主な物は、RubyやJavaでの開発の説明が多いようですが、それ程複雑なものでなければ、Perlの情報も上記などのサイトがあり助かりました。あとは、ブラウザの機種による動作の違いもprototype.jsがある程度吸収してくれるそうです。