【DO!BOOK・ページリンク】
2009_migaro_techreport_001   36 / 80

BOOKをみる

10秒後にBOOKのページに移動します


34 JavaScriptの活用 JavaScriptとは  まず取り上げたいのが「JavaScript」 である。JavaScript は、ブラウザ上で 動く簡易言語と考えていただければよ い。インターネットが誕生してまもなく 登場し、以前から個人のWeb サイトで も多く使用されているほど、敷居の低い 言語として知られている。  なぜ、JavaScript を最初に取り上げ るのかというと、それだけWeb の世界 になくてはならない存在だからである。 役目としては、画面定義するHTML と データベースに書き込むメインプログラ ム(RPG/COBOL)の仲介役と言える だろう。今では「Ajax(エイジャックス)」 という技術が話題になっているが、 JavaScript はその柱になっている。  さらに心強いことに、JACi400 では 入力文字数の制限・カンマ編集といった Web で必要とされている基本的な JavaScript の機能が自動的に提供され る。そのため、開発者が付け加えるのは、 プラスアルファで組み込みたい機能のみ となる。  今回は、実際のWeb アプリケーショ ンで使えそうな、JavaScript の活用例 をいくつか紹介する。一般的なWeb サ イトに接続していることを想像しながら ご確認いただきたい。 JACi400環境でのJavaScriptの使用  さて、例をご紹介する前に、JACi400 上でJavaScript を使用するにあたり、 いくつかあるコツをお伝えしておきた い。  通常のWeb 開発であれば、“HEAD タグ”内にJavaScript を記述するのが 普通である。JACi400 では、HEAD 部 分は、JACi400 アプリケーションが起 動する際に、自動的にJACi400 の動作 上必要なソースで上書きされる。そのた め、JavaScript を“BODY タグ”内に 記述することにより、上書きを回避する 必要がある。逆に考えれば、そこだけ気 をつけていれば、JACi400 アプリケーショ ンでは、通常のWebと同様にJavaScript を使用することができる。【ソース1】  また、よく使うテクニックとして、 JACi400 で使用するフィールドを「隠 しフィールド」にしてしまう手法がある。 テキストフィールドのstyle 属性に "display:none;" を指定することで、その フィールドを見えなくしてしまう。こう すると、画面からは見えなくても、内部 的には値を持っていることになり、 JavaScript から自由に入出力が可能に なる。【ソース2】 わかりやすいメッセージ出力  簡単な例として、JavaScript を使用 して、“わかりやすいメッセージ出力” というものについて考え、表現してみた い。  例えば、入力画面で入力不備があり、 入力不備のエラーを発生させたいケース では、通常は、あらかじめ設計者が決め たメッセージ出力用の場所にメッセージ が出力される。その際、どんなメッセー ジを出力しても、常に同じ位置に表示さ れる。この方法だと、ユーザーとしては、 どの項目が原因でエラーとなっているの か把握しにくい。  そこで、JavaScript を使用し、エラー の原因となっているフィールドの真上に メッセージが出てくるようにする。この 場合は、隠しフィールドとしてメッセー ジ内容とメッセージ位置を用意し、エ ラー時にIBM i からセットするように する。【図1】【ソース3】 【ソース解説】  JavaScript により、JACi400 から取 得した値を、表示先HTML 部のSPAN タグにセットさせる。ここでは、メッセー ジ位置がNAMEM の場合は氏名の SPAN タグ、TELM の場合は電話番号 のSPAN タグにメッセージがセットさ れる。  なお、SPANタグにはあらかじめ赤色・ 太字のフォントが指定してあるので、通 常よりも目立ってわかりやすいと思う。 suggest.jsによる自動補完     (オートコンプリート)  最近、検索サイトなどでよく見かける、 文字列の自動補完の機能を導入しよう。 自作しようとすると高度な知識が必要に なるが、「ライブラリ」と呼ばれる関数 群をうまく使用することにより、シンプ ルなJavaScript で機能の実現が可能に なる。  多くのライブラリはオープンソースに なっており、ライセンス規約を守れば無 償での利用が可能である。suggest.js は MIT ライセンスであり、再配布をする 際にはライセンスの表記が必要になる。 (※)【図2】【ソース4】 【ソース解説】  掲載したのは、ライブラリ部分から変 更したところのみにした。今回はミガ ロ.の製品を選択する形である。  なお、このぐらいの項目であれば、コ ンボボックスのほうが使いやすいかもし れない。  このライブラリは、外部ファイルの読 み込みも可能であるため、自動補完を有 意義に使用できる場面で利用していただ きたい。 ※ライブラリ提供元:Enjoy*Study http://www.enjoyxstudy.com/java script/suggest/ Flashとの連携  「Flash」を用いると柔軟な表現が可 能になるため、Web カタログなどで演 出に最適である。  では、Flash で選択したデータを JACi400 に送りたい場合、どのように すればよいのだろうか。これも、 JavaScript によって可能になる。Flash の場合は、Flash 内に「ActionScript」 と呼ばれる(JavaScript によく似てい る)コードを記述することで、Flash と JavaScript を連携させる必要がある。 【図3】【ソース5】 【ソース解説】  ActionScript は、Flash.external パッ ケージのクラスを利用することで、 JavaScript の呼び出しを可能にしてい る。Flash で入力された文字列は、 ActionScript 内でtext と定義された変 数として取得できる。これをパラメータ として、JavaScript を呼び出すのであ る。JavaScript に渡されたパラメータ は、alert 関数によりメッセージを出力 している。  ちなみに、ここでは掲載しないが、 JavaScript からActionScript を操作す ることもできる。そのため、IBM i か ら取得した初期値を、Flash に渡すとい