【Interstage Interaction ManagerのAjaxフレームワーク】

Ajaxクライアントフレームワーク/部品

開発生産性と再利用性の向上

Ajaxクライアントフレームワークでは、高い生産性と再利用性でアプリケーション開発を支援するAjax用の多種類の「部品」を用意しています。これらの部品は、これまで富士通が構築した業務システムを精査し、クライアントアプリケーション並みの高いユーザビリティを実現するために必要と考えられる部品です。

部品には、画面に表示される「画面表示部品」と、画面上で利用される機能を提供する「機能部品」があり、これらを組み合わせることで操作性の高い画面を効率的に開発できます。

画面表示部品と機能部品を組み合わせて開発した画面例をいくつかご説明します。まず、Ajaxとファンクションキーの連動によって部分更新される画面の例を示します。検索機能が割り当てられたファンクションキーを押すか、ボタンをマウスでクリックすると、画面が部分更新されます。全画面更新による再表示のための長い待ち時間がないため、作業の流れを中断することはありません。また、これまでエミュレータなどでファンクションキーを使って作業をしていた利用者が、違和感なくシステム移行をすることができます。

【画面の部分更新によるレスポンス向上】

次に、郵便番号から住所を入力補完する画面を示します。郵便番号の最初の3桁を入力すると、該当する住所の候補一覧がプルダウンで表示されます。候補一覧から対象の住所を選択すると、7桁の郵便番号が入力され、同時に選択した住所も入力されます。この間、各入力・選択のタイミングで自動的にサーバと非同期通信を行い情報を表示しているため、画面遷移がない連続した操作を可能としています。これには、「TextInput」、「SelectList」と、機能部品の「AutoCompleter」が利用されています。

【オートコンプリートを活用した郵便番号の入力】

次に、ブラウザ上で入力値のエラーチェックをする画面の例を示します。入力された値引率が規定以上の値であるため、入力箇所の赤色表示とエラーメッセージ表示に加え、「商品追加」ボタンの使用ができないようになっています。これにより、大幅な値引きや誤発注などの入力ミスを、サーバ側で処理する前に、クライアント側でチェック・防止することができます。これには、「Number Input」と機能部品の「ValidationHelper」が利用されています。

【サーバの処理を必要最低限に抑えるクライアント処理】

最後に、フォーカスに応じてHTMLコンテンツが自動的に切り替わる画面の例を示します。フォーカスが指定の部品に移動したタイミングで別の新たなHTMLコンテンツを読み込み、表示しています。そして、新たなHTMLコンテンツ内でも部分更新ができます。従来では、ポップアップを表示するなどして情報量を一時的に増やしていましたが、ウィンドウが増加し、マウスを使って閉じることが利用者にとって煩わしい操作でした。しかし、このHTMLコンテンツの切り替わりにより、利用者の作業の流れの中で、任意のタイミングで、領域が限られた画面内の情報量を一時的に増加させることができます。これには、「FragmentContainer」が利用されています。

【コンテンツの切り替えによる画面情報量アップ】

Ajaxクライアントフレームワーク/フロントMVCモデル開発

保守性の向上

MVCモデルはJ2EEシステム開発でよく取り入れられるアーキテクチャ・パターンですが、富士通ではこれを初めてクライアント側のJavaScript上で可能としました。

データ定義を担当するモデル（Model）、表示や入力を担当するビュー（View）、ViewとModelを制御するコントローラ（Controller）の3つの要素にアプリケーションを分離して開発する方式です。

これらが渾然と一体化するスクラッチベースの作りこみで開発されたソースと比較し、コードがわかりやすく、メンテナンスを容易に行うことができます。そして、他のコンポーネントと独立していることから、変更の際の影響を最小限に抑えることができます。例えば、データを変更するにはModelに、画面表示を変更するにはViewのみを修正します。

【MVCフレームワーク】

Ajaxクライアントフレームワーク/クロスブラウザ対応

幅広いブラウザに対応

ブラウザの種類やバージョンによってJavaScriptの実装方法が異なるため、Ajaxを活用する場合、画面表示に対して細かな対応が必要となります。Ajaxクライアントフレームワークでは、各部品でクロスブラウザ対応を行い、その差異を吸収し、統一された画面表示を実現しています。対象となるのは、Microsoft Internet Explorer 6 / Microsoft Windows Internet Explorer 7 / Mozilla（R） Firefox（R） 2.0です。

Ajax通信フレームワーク

通信部分の開発量を削減

Ajaxを活用したWebアプリケーション開発においては、クライアントとサーバを非同期通信で連携する処理は難易度が高く、加えて煩雑でもあるため、多くの開発者にとって高いハードルとなっていました。そこで、Ajax通信フレームワークでは、Webブラウザ上で動作するJavaScriptから非同期にサーバ側のJavaで記述されたビジネスロジックを呼び出す処理の簡易化を実現するための次の機能を提供しています。

• 非同期通信の簡易化
  XML/XSLT・DOMなどの難しい知識や、ブラウザの非互換対策の複雑なロジックを必要とせず、型決めされた実装方法で非同期通信処理の簡易化を実現しています。

• データ型変換
  クライアントのJavaScriptとサーバのJavaの間の異なるデータ型を双方向変換するコンバーターを多数用意しています。簡単な変換についは、開発者が意識することなく、Ajax通信フレームワークが自動的に変換します。

• イベントログ
  ブラウザから非同期通信でサーバ側にログを出力する機能です。情報を全てサーバ側に置くことで、デバッグが楽になります。

• セキュリティ
  クライアントのJavaScriptから危険な呼び出しがあった際にこれを拒否し、セキュアな通信を可能とします。

---

Ajaxは、JavaScript、XML、CSSといった既存技術の組み合わせであり、これらに精通した多くの技術者を活用できる点もメリットの一つです。

富士通では、これらの技術者が有効に利用できるAjaxフレームワークを搭載したInterstage Interaction Managerを用意しました。Ajaxを活用し、クライアントサーバシステム並みのリッチなクライアントを持つWeb業務システムの効率的な開発に、Interstage Interaction Managerを活用ください。