Client J Framework IBRIDO ご紹介 - Fujitsu...住所：NNNNNNN 更新部品照会終了氏名：NNNNN 住所 1／2 ： NNNNNNNNN I D ： 999999 GUIツールによる画面設計

Java リッチ

インターネット

アプリケーション開発革新 Client J Framework IBRIDO (CJF)

ご紹介

2010年4月

富士通株式会社

Copyright 2010 FUJITSU LIMITED1

目次

１. クライアントシステム構築における課題２.

CJFの特長

３. CJFの機能４. 開発イメージ

５. 適用実績６. まとめ

１. クライアントシステム構築における課題２.

CJFの特長

３. CJFの機能４. 開発イメージ

５. 適用実績６. まとめ


1. クライアントシステム構築における課題


クライアントシステム構築における課題

現在クライアントシステムで、次のような課題に困っていませんか？

操作性・性能操作性・性能

表現力表現力

順応性順応性

保守性・開発効率保守性・開発効率

採用技術採用技術開発開発

運用運用

信頼性信頼性

使用した技術が陳腐化した。使用した技術が陳腐化した。

追加・修正の影響が把握しづらい。追加・修正の影響が把握しづらい。

トラブルが収束しない。トラブルが収束しない。

利用環境（周辺機器連携、オフライン運用

など）に合わない。



見栄えが悪い。見栄えが悪い。

操作性が悪い。操作性が悪い。


現状のクライアントシステムの課題を解決するには、RIAと基幹業務システムの要件を兼ね備えたアプリケーションが必要です。

業務アプリケーション業務アプリケーション業務アプリケーション

RIAフレームワークとは？

C J FC J F

これらの要件を網羅したアプリケーションフレームワークが必要。

RIAの要件RIAの要件RIAの要件

高性能

高い操作性

高い表現力

基幹業務システムの要件

高い保守性・開発効率化

オープン技術の採用

高い順応性

これを個々のアプリケーションで作成しますか？アプリケーション・フレームワーク

RIAフレームワーク



RIA（Rich Internet Application)

≒リッチクライアント

クライアント技術の変遷

※ 『RIA:RichiInternetApplication ～次世代Webの流れ～』（RIAコンソーシアム運営委員長三井氏）より引用

操作性と運用性に対する高い要求から「RIA≒リッチクライアント」が生まれ、多くの技術が登場しています。

操作性

低

高

Web

VB,C++

ＪＳＰ/Ｓｅｒｖｌｅｔ

Ａｐｐｌｅｔ、Ａｊａｘ[*]

運用性の追及端末の軽量化（操作性を犠牲）

運用性を追及しつつ、操作性を向上

操作性の追及端末の高機能化（ＴＣＯの増加）

運用性

クライアント/サーバ

低高[*]Ajax：

Asynchronous JavaScript and XML


RIA技術の選定RIA技術の選定

C/Sアプリ Servlet / JSP

操作性

長所

・直感的操作

・レスポンスが良い

・オフライン動作

運用性

短所

・インストールが必要

・メンテナンス工数大

短所

・操作性に制約

・レスポンスが悪い

・オフラインでは動作

しない

長所

・配布が不要

・サーバ側１箇所で

メンテナンス

C/S相当の優れた

操作性が最重要

C/S相当の優れた

操作性が最重要高い操作性と運

用容易性の両立

高い操作性と運

用容易性の両立単純なJavaアプリ

の開発

単純なJavaアプリ

の開発

Applet Ajax

RIA技術にもそれぞれの技術に得意分野があります。

運用性や操作性など特徴を踏まえて適用します。


CJFの位置付け富士通のRIAフレームワーク体系とCJFの位置付け

クライアント技術開発環境クライアント側サーバ

画面操作サーバアクセス実行制御Javaアプリ

Applet

Ajax

InterstageStudio

InterstageStudio

InterstageApplication

Server


Server

Interstage

Interaction ManagerInterstage

Interaction Manager

CJF(Java版)CJF(Java版)

データベース


Server

InterstageBusiness

ApplicationServer

InterstageInteraction Manager

DBサーバAPサーバWebサーバクライアント

CJF

Javaオンラインアプリ

(EJB)

COBOLオンラインアプリ

Ajaxアプリ

CJF

Ajaxアプリ

データベース


Server

InterstageBusiness

ApplicationServer

InterstageStudio

DBサーバAPサーバWebサーバクライアント

CJF

Javaアプリ(Swing/JBK)

Javaアプリ

Javaオンラインアプリ

(EJB)

COBOLオンラインアプリ

富士通のRIAフレームワーク構成例Java版 Ajax版

CJF(Ajax版)


2. CJFの特長


特長1:高性能、高い操作性・運用性・表現力

Webサーバ

制御キーの定義

CJFはRIAとして必要な機能が網羅されています。

初期一括読込み

逐次読込み

軽量パネル

画面、ロジック

(Applet)、定義、

CJF本体

グラフ

動画

ｷｰによる

フォーカス遷移

軽量部品

処理中…

高性能高性能

高い操作性高い操作性

軽量部品の採用、読込み制御軽量部品の採用、読込み制御

フォーカス制御、IME制御、制御キー機能の充実フォーカス制御、IME制御、制御キー機能の充実

画面、ロジック、各種定義をWebサーバで管理画面、ロジック、各種定義をWebサーバで管理

グラフや動画を用いたビジュアルな画面グラフや動画を用いたビジュアルな画面

高い運用性高い運用性

高い表現力高い表現力


スムーズなグラフ描画を実現(Java版)

スムーズなグラフ描画を実現(Java版)

クライアント内にて高速な入力操作と連動したグラフ描画もスムーズに実現できる。

また、多種多様なグラフの表示が可能。棒折れ線グラフ

円グラフ

積上棒グラフ

・多角形・散布図・折れ線グラフ

など

リアルタイムに反映


従来

…

業務ロジック２

制御ロジック２

画面２

業務ロジック１

制御ロジック１

画面１

業務ロジックｎ

制御ロジックｎ

画面ｎ

CJFは基幹業務システム要件として開発効率化・保守性向上・高信頼性の施策を実施しています。

特長2:開発効率化・保守性・高信頼化

CJF適用

開発効率化開発効率化

保守性保守性

信頼性信頼性

画面（V)・業務ロジック（M)の分離と共通化画面（V)・業務ロジック（M)の分離と共通化

定義情報（ロジックレス）による制御（C)定義情報（ロジックレス）による制御（C)

煩雑な制御はCJFで提供煩雑な制御はCJFで提供

画面とロジックの混在画面とロジックの混在

制御ロジックは

スキルに依存

制御ロジックは

スキルに依存

CJF制御ロジック制御ロジック

定義情報

(XML)

定義情報

(XML)

View

Controller

Model

画面１画面２…

画面ｎ

業務ロジックＢ

業務ロジックｎ’…

同じロジックを何度も作ってしまう同じロジックを何度も作ってしまう

業務ロジックＡ


特長3:オープン技術の採用

マッチマッチ

Speed&CostSpeed&Cost

拡張性・可搬性

開発負荷の軽減

管理工数低減

標準化・部品化

ｲﾝﾀｰﾈｯﾄ時代のｼｽﾃﾑ要件

Javaの特長は次の2つです。

オープン技術

• 末永く使える技術である点で優位

• 仕様の非互換が発生しにくい状況

• 高い流通性、拡張性

• 情報量と流通部品/ツールの豊富さ

オブジェクト指向

• 部品化、再利用の基盤技術としての優位

長寿命化長寿命化

要員確保が容易要員確保が容易

オープン技術であるJavaを採用オープン技術であるJavaを採用

アプリケーション開発者のJavaスキルの流用アプリケーション開発者のJavaスキルの流用

CJFはJavaで開発します。


特長4:高い順応性(Java版)

CJFは周辺機器との接続、オフライン運用といった業務の環境ニーズへ柔軟に対応することができます。

Webサーバ

バーコードリーダ

ICカードリーダ

オフライン運用

高い順応性高い順応性高い順応性周辺機器との接続周辺機器との接続

モバイルPCなどでのオフライン運用モバイルPCなどでのオフライン運用


異なるクライアント技術の共存活用

Ajax技術への対応により、クライアントにプラグイン等のインストールを必要としない運用性の高いリッチクライアントが実現できます。

CJFの提供する連携機能により、異なるクライアント技術（AppletとAjax）を画面特性に合せて適材適所で使えます。

画面遷移高速な操作が必要な

基幹エントリ業務は

「Applet画面」

異なるクライアント技術で

共有する領域は

ブラウザだけで稼動する

「Ajax画面」

様々な部署から参照する参照中心の業務は

「Ajax画面」

入力値を反映


CJF適用時の設計・開発の特長

設計設計GUIベースの開発ツール(Interstage Studio)による画面設計

画面のレイアウトや動きを設計の初期段階で確認可能

CJF適用時の設計CJF適用時の設計

受注登録画面登録

更新

照会

終了

氏名

：

ＮＮＮＮＮ

住所

：

ＮＮＮＮＮＮNNN

Ｉ

Ｄ

：

999999

Interstage StudioInterstage Studio


更新

照会

終了

氏名

：

ＮＮＮＮＮ

住所

：

ＮＮＮＮＮＮNNN

Ｉ

Ｄ

：

999999

GUIツールによる画面設計

GUIツールによる画面設計

設計初期での実行確認

設計初期での実行確認

すぐに実動作

を確認！

すぐに実動作

を確認！

部品貼り付け！

部品貼り付け！

簡単な定義！簡単な定義！

◆◆◆

| ◆◇◇

|○○■■▲△

| ◆◇◆


更新

照会

終了

氏名：ＮＮＮＮＮ

住所：ＮＮＮＮＮＮＮ

ＩＤ

：999999

氏名：日本語

８文字

住所：日本語

30文字

ＩＤ

：英数字

6文字

先頭英字

低4文字

背景：薄緑

Ｆ１：Help画面

Enter:受注詳細

画面

１／２

従来の設計従来の設計

受注登録画面

登録

更新

照会

終了

氏

名

：

ＮＮＮＮＮ

住

所

：

ＮＮＮＮＮＮ

ＮＮＮ

Ｉ

Ｄ

：

999999

手作業による設計書作成

手作業による設計書作成実際に出来た画面実際に出来た画面

手戻り

設計書と実画面の

イメージが違う！


CJF適用時の設計・開発の特長

開発開発

CJF適用により標準化＝開発品質の向上ロジックの大半は、簡単な定義に置換え開発者はフレームワークに準じて業務ロジックを記述するのみ部品化と再利用が容易

従来の開発従来の開発開発

業務ロジック

初期画面

起動

メッセージ

Tab

送信

次画面

タブキー（項目脱出）処理

送信ボタン処理

画面表示処理

初期起動処理

入力前処理

（IDｶｰﾄﾞ読込み）

CJF適用時の開発CJF適用時の開発

開発

定義

業務固有処理

・メッセージ表示依頼・周辺機器読込み依頼・メッセージ消去依頼

CJFCJF制御ロジック

画面構成定義

動作環境

業務固有処理

・入力値の業務チェック・サーバ送受信依頼

画面

ｲﾍﾞﾝﾄ振分け定義

ｲﾍﾞﾝﾄ振分け定義

画面遷移情報

ＧＵＩ部品の項目プロパティ

システム制御

イベント制御サーバ送受信

画面遷移

画面表示

データ入出力

イベント制御メッセージ制御周辺機器制御

業務ロジックはイベント

に応じた処理のみ記述

ロジックの大半は、簡単な

定義に置換え

業務ロジックは部品化

して再利用が容易

例．起動～初期画面表示～IDカード入力、タブ、送信～次画面遷移を処理


部品化と再利用が容易部品化と再利用が容易

パネル１

パネルとロジックをセット

にした再利用が可能。

パネル２ロジック１（登録画面表示）

ロジック１（登録画面表示）

パネル３

パネル５

パネル2

パネル１

パネル６パネル2

ロジック３（ログアウト）

ロジック３（ログアウト）

パネル５

パネル４

パネル５

パネル４

画面（パネル）、ロジックを部品化して再利用することが容易です。

パネルの単位で再利用できる。

ロジックだけを再利用

することも出来る。

ロジック２（明細追加）

ロジック２（明細追加）

パネル６

パネル３


異なるクライアント技術でも同じように開発できる

画面、ロジック、定義を開発

・画面は部品貼り付けとプロパティ設定。・ロジックはプログラミング。メソッド名以外のインタフェースを統一。・定義はXMLファイルの作成。

開発対象が同じ

開発手順が同じ

ロジック

画面

定義

ロジック

画面

定義

CJF CJF

開発対象の考え方

が同じ

グラフィカルエディタ

グラフィカルエディタエディタ＋コンパイラ

エディタ＋コンパイラ

開発手順の考え方

が同じ開発手順の考え方

が同じ

Java（Applet) Ajax

同等の

インタフェースを提供

CJFでは異なるクライアント技術でも開発対象と開発手順の考え方が同じであるため、クライアント技術毎に習得するノウハウが少ない。


3. CJFの機能


CJFの機能構成CJFの機能構成

各種定義情報（XML）[＊]

（画面と業務ロジックの関連付け、画面レイアウト、画面遷移・・・）

ユーティリティ

画面[＊]

画面遷移

画面制御

業務ロジック[＊]

入出力

データ

制御

画面入出力制御

デバイス制御

システム制御

業務部品

実行制御

CJF

ＧＵＩ部品制御

基底ＧＵＩ部品Interstage製品

イベント制御

アダプタ[

＊]

外部アクセス外部

アクセス

RIAシステムに必要な制御機能を標準装備

アプリケーション資産(画面、業務ロジック、定義情報、アダプタ)の間を取り持つ

エンジンの役割

[＊]

：アプリケーション資産


開発支援ツール(ログビューワ）(Java版)

１．異常終了した時刻近辺の箇

所のログを探し出す。

１．異常終了した時刻近辺の箇

所のログを探し出す。２．「書き込み種別」が“例外”、

「アクション種別」に“例外ス

ロー”という行をダブルクリック

２．「書き込み種別」が“例外”、

「アクション種別」に“例外ス

ロー”という行をダブルクリック

３．CJFログ詳細情報より例外メッセージ「不

正なパネルIDが指定されました。」→画面遷

移すべきパネルが「不正なパネルID」という

ことは画面遷移定義のパネルID指定に誤り

があると推測される。

３．CJFログ詳細情報より例外メッセージ「不

正なパネルIDが指定されました。」→画面遷

移すべきパネルが「不正なパネルID」という

ことは画面遷移定義のパネルID指定に誤り

があると推測される。

４．画面遷移定義とパネル定義のパネルIDを確

認し、誤りが無いか確認する。

４．画面遷移定義とパネル定義のパネルIDを確

認し、誤りが無いか確認する。

CJFログビューワを起動しログ情報の例外情報の内容より異常終了する原因の推測を行う


4. 開発イメージ


開発全体イメージ開発全体イメージ

ｱｸｼｮﾝに対応したﾛｼﾞｯｸの作成

要件定義ユーザインタフェース設計システム

構造設計

プログラム

構造設計

プログラミングプログラム

テスト

結合

テスト

デバッグ

画面の洗出し

画面の概略設計

CJFを適用した開発全体のイメージ

画面遷移の定義情報作成

部品配置部品配置

画面の作成

詳細設定詳細設定

画面レイアウトの決定


１．ボタンやテキストフィールド

などの部品をドラッグ＆ドロッ

プで配置する。

１．ボタンやテキストフィールド

などの部品をドラッグ＆ドロッ

プで配置する。

画面の作成

業務画面（パネル）をグラフィカルエディタで作成します｡

２．ボタン等の場合、アクショ

ンIDを記述する。

その他の詳細設定を行う。

２．ボタン等の場合、アクショ

ンIDを記述する。その他の詳細設定を行う。


画面遷移画面遷移

画面遷移の定義情報作成

１．遷移元情報として、どの画面の何の

アクションをトリガとするかを記述する。

１．遷移元情報として、どの画面の何の

アクションをトリガとするかを記述する。２．遷移先のパネルを遷移先

定義に記述する。

２．遷移先のパネルを遷移先

定義に記述する。

パネルIDS03B002パネルIDS03B002

アクションIDと画面遷移の関連付けをXMLまたはExcelで作成します。

定義

情報

（XML）３．CJFで提供されているExcelマクロで定義ファイル(XML)を生成する。３．CJFで提供されているExcelマクロで定義ファイル(XML)を生成する。

アクションID REGISTCHANGE アクションID REGISTCHANGE

～～～～～～～

<Excelの場合>


１．アクションIDと業務ロジックの

関連付けもXML/Excelで定義する。

１．アクションIDと業務ロジックの

関連付けもXML/Excelで定義する。

業務ロジックをInterstage StudioまたはEclipseで作成します。

アクションに対応したロジックの作成アクションに対応したロジックの作成

２．業務ロジックは、Ｊａｖａで記述する(*)２．業務ロジックは、Ｊａｖａで記述する(*)

(*)Ajax版ではJavaScriptでの実装も可

業務ロジックへの通知インタフェースを統一⇒全てのイベントを同様に実装可能⇒ロジックの共通化が容易

業務ロジッククラスはFW依存の少ないPOJO(*)で開発

⇒テスト・再利用

が容易

(*)Plain Old Java Object

(*)Plain Old Java Object


6. 適用実績


適用実績

金融

2004年リリース後、37PJで適用中。約3.8万クライアントで稼動済み。

品質・機能への評価も高い。

・銀行系

：為替システム

：ローンシステム

・保険系

：事務系システム

・リース系

:店舗システム

公共

・情報系システム

・科学系監視システム

・公共図書館パッケージ

産業流通

・製造系：受発注システム

：生産管理システム

：販売システム

・流通系：店舗システム

その他

・工場装置監視システム

・トランスマイグレーション

・イメージ認識＆電子帳票

システム

・レスポンスが改善されたことが非常に大きい。

・前のクラサバシステム（ＶＢ）でやっていたきめ細かな操作が実現できており、

新システムに移る際も大きな混乱がなかった。

品質も安定し、稼動後の障害もなく順調に稼動している。

フレームワークとしての事例も豊富にあり、サポートも充実しており、ＱＡ対応も早

くて助かった。

PKG

開発元

お客様

・現行ＰＫＧ（ＶＢ）の操作性（マウスレス操作、マルチウィンドウ）を維持。

・ＰＫＧとしてメンテ、レベルアップしていくための保守が容易。

ＳＥ

近稼動した利用者の声


7. 製品体系、動作環境など


製品体系

開発機能

運用機能

開発時に使用。クライアント技術によらず同一製品を使用。

運用時に使用。クライアント技術に応じた製品を使用。

製品名内容クライアント技術ライセンス体系

Client J Framework IBRIDO

V2 開発機能マニュアル

ツール

ランタイム

Ajax

Java(JBK,Swing)クライアント

（開発PC）

製品名内容クライアント技術ライセンス体系

Client J Framework IBRIDO-J

EnterpriseEdition

V2 運用機能

ランタイム Java(JBK,Swing) クライアント

（運用PC）

または

サーバプロセッサClient J Framework IBRIDO-J

Standard Edition V2 運用機能

Java(Swing)

Client J Framework IBRIDO-A V2 運用機能

Ajax サーバプロセッサ

CJFの製品体系は、開発機能と運用機能の２種類です。

[*]JBK（JavaBusinessKit:Interstage）:JavaSEに基幹業務システムに必要な機能を追加したGUIライブラリ。

[*]Swing:JavaSEに標準搭載されている新のGUIライブラリ。


よりオープンなGUIライブラリを選択可能

ＯＳＯＳＯＳ

富士通ＶＭ富士通ＶＭ富士通ＶＭ

JBKプラグインJBKJBKプラグインプラグイン

ＪａｖａＶＭＪａｖａＶＭＪａｖａＶＭ

CJFCJF部品部品for JBKfor JBK

JavaプラグインJavaJavaプラグインプラグイン

ＪＢＫＪＢＫＪＢＫ

CJFCJF部品部品for Swingfor Swing

ＳｗｉｎｇＳｗｉｎｇＳｗｉｎｇ

ＣＪＦ本体

Ｓｗｉｎｇ部品と富士通VM

はＩｎｔｅｒｓｔａｇｅ

ApplicationServerに同梱ＪＢＫはクライアント

ライセンスが必要

JavaSEに標準搭載されているGUIライブラリ（Swing）を利用することで、市場に流通している豊富な部品やツールが利用可能です。

また、JBKと比較してソフトの初期投資を軽減することができます。

スプレッド部品や入力編集（例：カンマ編集）など基幹業務システムに必要な機能

はJBKが豊富。


動作環境CJFの動作環境は下表の通りです。

ＯＳMicrosoft Windows XP Professional

SP3

Microsoft Windows Vista Business/Ultimate/Enterprise SP1Microsoft Windows 7Professional/Ultimate

ブラウザ Microsoft Internet Explorer 6/7/8 Microsoft Internet Explorer 7/8

ＪａｖａＶＭ JDK/JRE 5.0 JDK/JRE 5.0

ＣＰＵ PentiumⅢ

700MHz以上１ＧＨｚ以上

メモリ（開発環

境）

小：384MB以上

推奨：512MB以上

小：768MB以上

推奨：1GB以上

メモリ（運用環

境）

小：256MB以上

推奨：384MB以上

小：512MB以上

推奨：1GB以上

クライアントMicrosoft Windows XP Professional

SP3Microsoft Windows Vista Business/Ultimate/Enterprise SP1

サーバMicrosoft®

Windows®

Server 2003Microsoft®

Windows®

Server 2008Redhat

Enterprise Linux 5

ブラウザ Microsoft Internet Explorer 7

ＪａｖａＶＭ JDK/JRE 5.0

Java版

Ajax版


必須ソフト

CJFの必須ソフトは下表の通りです。

開発環境Interstage

Interaction Manager V9.1Microsoft Internet Explorer 7Interstage

Studio V9.1/V9.2 またはEclipse 3.4.1/3.4.2

運用環境Interstage

Interaction Manager V9.1Microsoft Internet Explorer 7

開発環境・Interstage

Studio V9.1/V9.2・Microsoft Internet Explorer6/7/8[*1]

運用環境

JB

K

版

・Microsoft Internet Explorer6/7/8[*1]

以下のいずれか一つ・Interstage

Studio クライアント運用パッケージ

V9.1/V9.2

・Interstage

Jクライアント運用パッケージ

V9.1/V9.2SW

ING

版

・Microsoft Internet Explorer6/7/8[*1]

以下のいずれか一つ・Interstage

Studio クライアント運用パッケージ

V9.1/V9.2

・Interstage

Jクライアント運用パッケージ

V9.1/V9.2・Interstage

Application ServerV9.1/V9.2

Java版

Ajax版

[*1}Microsoft Internet Explorer 6 はMicrosoft®

Windows®

XP環境の場合のみ利用可能です。


8. まとめ


まとめクライアントシステム構築における課題を簡単に解決できる

RIAフレームワーク：CJFの適用をご検討ください。

操作性・性能操作性・性能

表現力表現力

順応性順応性

保守性・開発効率保守性・開発効率

採用技術採用技術開発開発

運用運用

信頼性信頼性

使用した技術が陳腐化した。使用した技術が陳腐化した。

追加・修正の影響が把握しづらい。追加・修正の影響が把握しづらい。

トラブルが収束しない。トラブルが収束しない。





見栄えが悪い。見栄えが悪い。

操作性が悪い。操作性が悪い。


C J F (シー･ジェイ･エフ)

Copyright 2010 FUJITSU LIMITED36 Copyright 2010 FUJITSU LIMITED36

Documents

Client J Framework IBRIDO ご紹介 - Fujitsu...住所：NNNNNNN 更新 部品 照会 終了 氏名：NNNNN 住所 1／2 ： NNNNNNNNN I D ： 999999 GUIツールによる 画面設計

Client J Framework IBRIDO ご紹介 - Fujitsu...住所：NNNNNNN 更新部品照会終了氏名：NNNNN 住所 1／2 ： NNNNNNNNN I D ： 999999 GUIツールによる画面設計