株式会社ATLED
城倉和孝

• - INDEX - 
• ■ はじめに
• ■ Ajaxって何？
• ■ Ajaxと従来型Webアプリとの違い
• ■ クライアント/サーバー感覚開発手法
• ■ X-WebFormが生成するJavaソースファイル
• ■ イベントメソッドと
• ■ フィールドイベントにロジックを入れる
• ■ フォーム起動時にロジックを入れる
• ■ さまざまなフィールド制御

はじめに  

2007年2月に「VBユーザーでもシンプルだから簡単にできるWebアプリ開発」と題した、X-WebFormとOracle JDeveloper 10gのセミナーを福岡、名古屋、大阪、東京の４都市で開催しました。ご多忙のなか沢山の方にお集まりいただき、この場をお借りして心から御礼を申し上げます。
クライアント/サーバー型言語の経験者に向けたカリキュラムでしたが、参加者がとくに興味を持たれたのがAjaxとデータベースの連携だったという印象でした。
本章より、プログラム開発についてご紹介します。Webアプリケーション（以下、Webアプリ）開発という意味での順番からいくと、HTMLページ生成時のロジック記述法の説明が通例となりますが、ここではあえてAjax技術を使ってプログラミングを行なう手法を先にご紹介したいと思います。
ページ生成時にフォーカスした従来のWebアプリのプログラミング手法と異なり、イベントベースでロジックを記述するAjaxは、まさにクライアント/サーバー・アプリケーションの開発感覚。Webアプリ開発の経験のない方にも十分理解できる内容となっています。

Ajaxって何？  

Ajax（エイジャックス＝Asynchronous JavaScript + XML）は、Google SuggestやGoogle Mapsなどで利用されたことで一躍脚光を浴びた技術で、Web上でリアルタイム通信を行ない、画面を動的に書き換えるものです。一般的に「古くて新しい技術」などと言われるように、従来から存在するJavaScriptとXMLを組み合わせたHTTP非同期通信アプリケーションの総称です。
例えばGoogle Suggestでは、検索条件欄に1文字入れるごとに、その語句を推測して検索候補がリアルタイムに表示されます。この「文字を入れる」というようなブラウザ上でのイベントをトリガに、サーバー上の処理を実行し、その結果でブラウザを書き換えるというリアルタイムな処理が可能です。
また、従来型のWebアプリ（ここでは、Ajaxを使用していないWebアプリを便宜上このように呼びます）では、画面を書き換える際には、必ずリロード（チラっと画面が切り替わる動作）が発生しますが、Ajaxを使用したWebアプリではリロードは行なわれず特定のフィールドだけが切り替わるため、クライアント/サーバー・アプリケーションのようなユーザビリティが高い画面を作成できます。

Ajaxと従来型Webアプリとの違い  

では、Ajaxと従来型のWebアプリとでは何が違うのでしょうか？

上の図からわかるように、従来型のWebアプリ（上段）はブラウザからのアクションを受けてサーバー側で処理を行ない、結果としてHTMLページを生成してブラウザに送り返してきます。結果を受け取ったブラウザはHTMLページを表示するため、同じページを表示するようなケースでも常に画面遷移が発生しています。
これに対しAjaxでは、ブラウザからのアクションを受け、サーバー側での処理の結果をHTMLではなくXML形式のデータにしてブラウザに送り返します。ブラウザ側ではデータを受け取り、JavaScriptとDHTMLを使用して、すでに表示しているHTMLページを書き換えるという動作を行ないます。したがってリロードのような動きは発生しません。
Ajaxが登場した当初は、AjaxはXMLデータを受け取って画面を書き換える処理をHTMLフォーム側に実装する必要があるため、デザインとロジックの分離が難しいということがいわれていました。最近は通信と画面書き換えのロジックについてはフレームワーク化が進み、プログラマーはビジネスロジックだけを記述すればよいということになりました。X-WebFormでも、通信や画面の書き換えは意識することなくコーディングが可能です。

クライアント/サーバー感覚開発手法  

Visual Basicのような優れたクライアント/サーバー型言語で作成した入力画面は、生産性も保守性も高いものでした。では、Webアプリでは同様のことができないのでしょうか？
Javaはオブジェクト指向言語ですが、オブジェクトを意識してプログラミングできるのは、あくまでもサーバー側でのビジネスロジックだけです。画面はHTMLページを文字列操作で生成する必要があり、何かアクションが起こるたびにページ全体を意識することは、効率的とはいいがたい面があります。
X-WebFormではHTMLページ上のフィールドをオブジェクトに見立て、サーバー側でクライアント/サーバー的なコーディングが行なえます。

上の図はVisual Basic（左側）と、X-WebFormでAjaxを使って記述したロジック（右側）の対比です。文法的な違いはありますが、ほぼ同じような感覚でプログラミングできることがわかります。特に「click」「gotfocus」といったフォーム上のイベントに応じてロジックが記述されていますが、これはフォームのイベントに応じたロジックが、サーバーサイドでJava言語を使用して作成できることを意味しています。

X-WebFormが生成するJavaソースファイル  

次に、X-WebFormが生成するJavaソースファイルについて説明します。

「XWFファイル」は前章までにも登場しましたが、X-WebForm Developerでデザインしたフォーム定義内容の保存ファイルです。
「ウェブフォーム表示用JSP」はウェブフォームを表示するためのプログラムファイルです。
JSP(Java Server Pages)はJavaのサーバーサイド技術の1つで、一言でいうとHTMLの中にJavaのプログラムを埋め込んで実行させる仕組みです。Webアプリ開発ではJSPに直接ロジックを記述するのが一般的ですが、これによりソースコードが見にくくなったり、HTMLデザイン変更時に反映が大変、といった問題があります。
X-WebFormでは「ウェブフォーム表示用JSP」はデザイン変更にともなって常に上書きされるので、ここにはロジックは記述しません。
その代わりに、JSPと同時に生成される「フォームクラス」「フォームイベントクラス」「フィールドイベントクラス」というファイルにロジックを記述することができます。「フォームクラス」はHTML生成時のロジック作成用で、「フォームイベントクラス」と「フィールドイベントクラス」はAjax用です。
クラスとはオブジェクト指向プログラミングにおいて、データとその操作手順（メソッド）をまとめた単位です。というとなんだか急に難しく聞こえるので、ここでは「フォームクラス」「フォームイベントクラス」はフォーム全体のロジックを記述する場所、「フィールドイベントクラス」はフィールドごとのロジックを記述する場所とお考えください。

イベントメソッドと  

X-WebFormのAjaxプログラミングの特長は、イベントごとに処理手続きが記述できる点にあります。前述したとおり、通常のWebアプリはHTMLページを生成するタイミングにすべてのロジックを記述するので、プログラムが複雑になりがちでした。Ajaxでは、イベントごとにロジックを記述することで処理を見通しよく分割し、かつユーザビリティの高い画面を作成することができます。
X-WebFormのAjaxイベントには以下のようなものがあります。

• フォーム全体のイベント（フォームイベントクラスに記述）
  onLoad()、 unLoad()、 Timer()、 keyEvent()
• フィールドごとのイベント（フィールドイベントクラスに記述
  change()、 click()、 doubleclick()、 keydown()、 keyup()、 lostfocus()、 mouseout()、 mouseover()、 validating()、 validated() ※フィールドの種類によっては使用できないものもあります。）

フィールドイベントにロジックを入れる  

では、実際にAjaxを使って、ウェブフォーム上のフィールドのイベントに応じたロジックを記述してみましょう。

1. ウェブフォームの作成
   まず初めにウェブフォームを作成します。ウェブフォームの作成はJDeveloperから行ないます。
   おさらいも含めてまとめると、以下の手順となります。詳しくは前章をご参照ください。
   (1) JDeveloperでアプリケーションを作成する。
   (2) アプリケーションよりX-WebForm Developerを開く。
   (3) X-WebForm Developer上でウェブフォームを作成する。
   この例では、以下のような顧客登録フォームを作成します。
   
   
2. Ajax通信設定
   ウェブフォームが完成したら、Ajax通信の設定を行ないます。設定はX-WebForm Developerでイベント通信を行なうフィールドを選択し　　　て、プロパティ画面の「アクション」タブで「Server::」から始まるイベントで指定します。通信を行なうイベントに「True」を設定すると、当該イベントが発生した際にサーバー側のロジックが呼ばれます。 この例では、「検索ボタン（ID名はbtnFind）」をクリックしたときに発生するイベント（click）に設定します。
   
3. ウェブフォームの保存
   設定が終わったら、X-WebForm Developerの「保存」ボタンをクリックしてウェブフォームを保存します。保存すると以下の確認画面が表示されます。
   
   
   
   この画面で、フォーム名称（ウェブフォームを表示したときメニューバーに表示されるタイトル）とクラス（プログラムの名称）を指定します。
   特にクラス名は、JDeveloperでプログラムを作成する際に重要となりますので、適切な名前をつけてください。
   この例では、フォーム名称に「顧客登録」、クラス名に「customer」と指定します。
   
   指定を行なったら、「OKボタン」をクリックするとファイル保存ダイアログが表示されるので、適切なファイル名をつけます。ファイル名はクラス名と同じ名前をつけたほうがよいでしょう。
   
   
4. JDeveloperに作成されたファイルを確認する
   JDeveloperでプログラムを作成するファイルを見てみましょう。確認はアプリケーションナビゲータで行ないます。[ViewController] - [アプリケーション･ソース]の下に「xwebform.クラス名」というパッケージ（ディレクトリとお考えください）が作成されています。この中に「通信設定を行なったフィールド.java」というファイルが作成されています。これがフィールドイベントクラスです。フィールドイベントクラスは連携設定を行なったフィールドの数分だけ作成されます。
   この例では、「xwebform.customer」の下に「Btnfind.java」が作成されています。
   
   
5. フィールドクラスのソースコードを表示する
   JDeveloperの「アプリケーション ナビゲータ」で連携設定を行なったフィールド名のJavaソースコードをダブルクリックして開きます。
   中にはclick、lostfocusなどのイベントが記述されたメソッドが自動的に生成されています。
   
   
6. フィールドクラスにロジックを記述
   連携設定を行なったイベントのメソッドにロジックを記述します。
   この例では、クリックされたときに顧客コードの入力チェックを行ない、入力されていない場合はブラウザにメッセージダイアログでエラーを表示し、入力がある場合は各項目に値をセットするロジックを記述します。
   /**
   * フィールドをクリックすると呼び出されます
   */
   public void click() {
   
     // cust_cdが入力されているか否かチェック
     If ( Me.cust_cd.getValue().length() == 0 ){
      // 入力がない場合、エラーメッセージを表示
      setMessage("顧客コードが入力されていません");
     } else
      // 入力がある場合、漢字名称、カナ名称、顧客種別に値をセット
      Me.name_kanji.setValue("山田 太郎");
      Me.name_kana.setValue("ヤマダ　タロウ");
      Me.cust_type.setValue("個人");
      // 郵便番号にフォーカスをセット
      Me.zip_cd.setFocus();
     }
   }
   上記のサンプルでお気づきかもしれませんが、フォーム上のフィールドの操作は「Me」というフォームオブジェクトを使用してアクセスできます。
   
       Me.[フィールド名].[メソッド名]
   
   またウェブフォーム上でメッセージダイアログを表示するには、「setMessage()」というメソッドを使用します。
7. コンパイルする
   コーディングが完了したら、コンパイルを行ないます。コンパイルはツールバーの「ビルドボタン」をクリックします。
   
   
8. ウェブフォームの実行
   ロジックを入れたら、目的のJSPを実行してウェブフォームを表示してみましょう（実行方法の詳細は第4章を参照ください）。入れたロジックが動作することが確認できると思います。
   
   入力エラーがあった場合（顧客コードが未入力）
   
   
   
   入力エラーがなかった場合
   
   

フォーム起動時にロジックを入れる  

フォーム起動時にSQLを発行してデータベースから値を取得して画面に設定するような動作は、通常のWebアプリではHTMLフォーム生成時に行ないます（この方法は後の章で説明します）。X-WebFormでは、同様の動作をAjaxを使用して実現することができます。
フォーム全体に対するロジックの記述は、フォームイベントクラスで行ないます。基本的な考え方はフィールドイベントクラスと同様です。

1. フォームの作成とAjax通信設定
   X-WebForm Developerでフォームを作成したら、メニューバーで[ファイル] - [ファイル・アクション設定]をクリックして「フォーム・アクション設定」画面を表示します。
   次の画面の「サーバ・アクション」で「OnLoad」のチェックボックスにチェックを入れます。
   
   
2. 保存とコーディング
   X-WebForm Developerで保存した後に、JDeveloperのアプリケーション ナビゲータを見てみましょう。
   [ViewController] - [アプリケーション･ソース] - 「xwebform.クラス名」というパッケージの下に「Form.java」というファイルが作成されていますが、これがフォームイベントクラスです。フォームイベントクラスはウェブフォームごとに1つ作成されます。
   フィールドイベントと同様に、ソースコードを表示して「onLoad」メソッドの中に値設定などのロジックを記述します。
   
   
   
   この例では固定値を設定していますが、実際はデータベースから取得した情報のセットなどを行ないます。このあたりのテクニックは後の章でもう少し詳しく説明したいと思います。

さまざまなフィールド制御  

参考までに、よく使うと思われるフォームオブジェクトのメソッドを以下に抜粋します。

※フィールドの種類によっては使用できないものもあります。

以上、Ajaxプログラミングの基本的な事項について説明しました。次章からはデータベースアクセスなど、実用的なプログラミングについての説明を交えていく予定です。