容易になったWebアプリ開発
JSF対応ツールのプレビュー版を試す

［開発ツール］

八木玲子

2004.02.27

図1●JSFの仕組み
現在のJSFでは，アプリケーションの画面をJSPで記述する。このときボタンや入力欄などの部品として，JSFのUIコンポーネントを指定する。実行時には以下のように振る舞う。アプリケーションのユーザーがブラウザでアクセスすると，これらの部品はHTMLで描画される。同時に，サーバーではUIコンポーネントのオブジェクトが作られる。ユーザーがボタンを押すと，サーバーにはHTTPのPOSTメソッドによるリクエストが送信される。これをJSFが提供するServletが受け取り，UIコンポーネントのオブジェクトの状態を更新する。UIコンポーネントは値チェックのメソッドを持つため，それを使って正当性の検証もする。次に，UIコンポーネントに対応付けられたBeanの値を更新する。そして画面の遷移を制御するイベント・ハンドラが呼び出される。

画面●WebShere Studio Application Developer
中央にあるのがJSPの編集ペイン。右側に並んでいるのが，UIコンポーネントである。開発者はこれをドラッグ・アンド・ドロップで中央のJSPファイル編集画面に貼り付ける。またJSFでは，UIコンポーネントの値の保持や処理のために，対応するBeanが必要となる。これをUIコンポーネントと対応付ける作業も，ドラッグ・アンド・ドロップで可能。イベント・ハンドラは，中央下のペインに記述する。

図2●画面の遷移を定義する
ボタンが押されたときのイベント・ハンドラの戻り値を使って，次に遷移する画面を分ける。ここでは，入力欄にユーザー名が入っていたら“success”，入っていなかったら“failure”という文字列を返している。この文字列と，実際に遷移するJSPファイルはツール内のペインでマウスを使って関連付ける。

　大規模なWebアプリケーションと言えば，Javaを使って構築するのが当たり前のようになってきつつある。しかしちょっとした画面の作成にさえ，かなりのJavaの知識が要求される。

　2003年12月，この問題に焦点を当てた二つのツールが姿を現した。一つは米Sun Microsystems社のもの。2003年12月3日にデモンストレーションを披露した「Sun Java Studio Creator」である。もう一つは，2003年12月9日にIBMが出荷を開始した「WebSphere Studio Application Developer V5.1.1」。どちらも，ボタンや入力欄などのユーザー・インタフェース（UI）部品をドラッグ・アンド・ドロップで貼り付けて，Webアプリケーションの画面を開発できる。いずれもここにJavaServer Faces（JSF）というフレームワークを利用している。

UIをコンポーネント化する

　JSFは既存の技術であるJSP（JavaServer Pages）などを拡張したものだ。現在最終仕様が提案されている段階で，まだ正式な仕様は確定していない。このため今回のツールはどちらも，JSFに関してはプレビューとなる。JSFの正式仕様は2004年前半に決定する見込みだ。

　JSFはWebアプリケーションの画面を構成する要素をコンポーネント化し，それを組み合わせて画面を開発するためのものである（図1[拡大表示]）。いわば，Webアプリケーション版のJFC/Swingだ。

　コンポーネント化のメリットは大きく二つ。記述が簡潔になることと，ツールによる開発支援が可能になることだ。

　JSPだけでは，部品を表示させるためのHTMLやプロパティを設定するJSPのタグを記述する必要があった。これに対しJSFで作成したコンポーネントはJSPのカスタムタグとして記述できる。二つの要素が絡まないで済む。また標準的なコンポーネントの規約が固まることで，ツール・ベンダーも安心して対応できる。

　もう一つJSFには「開発作業の分業が容易になる」（サン・マイクロシステムズプロダクト・マーケティング本部の増月孝信ソフトウェア製品事業部長）というメリットもある。画面のデザイナが，複雑なJavaのコードを目にすることなくWebページを作れるからだ。

　元々こうしたメリットは，JSPのものとして語られていた。しかしJSPだけではどうしても同じファイルにHTMLやJavaのコードが混在するため，Webアプリケーションの画面設計には扱いにくかった。ASP .NETにおいて「Codebehind」を指定したようなものだと考えていいだろう。

マウス操作でWebアプリを開発

　WebSphere Studioの体験版を利用して，JSFで簡単なWebアプリケーションを作ってみた。入力欄にユーザー名を入れてボタンを押すとあいさつを返すというものだ。確かに，従来よりも開発作業は格段に容易になっていた。

　ツールのUIは，多くのGUIクライアント・アプリケーションの開発ツールと似ている。ツールの右側にはUIコンポーネントが一覧表示される（画面[拡大表示]）。中央にはJSPファイルを編集するためのペインがある。ここにドラッグ・アンド・ドロップでUIコンポーネントを貼り付け，アプリケーションの見た目を作成する。

　次に，ユーザー名の入力欄と，そこに入力された文字列を保持するためのBeanを対応付ける（ここでは「UserNameBean」）。Beanは，JavaBeansの規約に従って作られたクラスである。プロパティの値を外部から設定/取得するためのメソッドを備えている。Beanはあらかじめ自分で作成したものを利用した。これをツールに読み込ませると，Beanが持つプロパティはツールの左側に表示される。ここからユーザー名を保持するためのプロパティをドラッグし，入力欄の上でドロップすれば対応付けが完了する。

イベント・ドリブン型で記述

　最後に，ボタンが押された場合に実行させる処理を記述する。JSFはイベント・ドリブン型のプログラミング・モデルを採用している。ユーザーの操作をイベント・ハンドラが受け取り，処理を実行するというものだ。まずボタンを選択し，コード編集ペインにJavaのプログラムを入力する（図2[拡大表示]）。JSFではこのイベント・ハンドラの結果によって画面が遷移する。

　この結果と実際の遷移先のページは，ツール左下のペインで対応付ける。これですべての作業が完了した。テスト用のアプリケーション・サーバで無事動作を確認できた。