基幹業務のAJAXによる効率的なWEB開発手法

FormChorus AJAXの紹介　

Copyright©2010　Metio.co.Ltd.

株式会社メティオ開発コンセプト
株式会社メティオ開発コンセプト
メティオ開発

旧来システム
旧来システムオープン化
オープン化
レガシーシステムなど
など）
（レガシーシステムなど）（WEB化）
WEB化

旧来から使用しているレガシーシステムが汎用機に
旧来から使用しているレガシーシステムが汎用機に　
から使用しているレガシーシステム
　　　　－　オープンによる　－
オープン化
　　　　－　オープン化による　－

Webを活用した情報化が不可欠となった現在、旧来から使用しているレガシーシステムなどに多くの情報
を蓄積してきた企業にとって今ある情報資産をWebを用いてどう活用するかが競争力維持・拡大の鍵になっ
ています。ところがシステムの大幅な見直しを考えたたとき、現実的に大きな壁を乗り越えなければ実用
化できません。そこで弊社はコストとリスクを最小にしながら、一定の効果を上げるためのWeb化の方策
としてAjaxに対応したFormChorus for Ajaを開発しました。

Webエントリー入力画面の分離開発システム
エントリー入力画面の分離開発システム
入力画面
のご紹介
FormChorus　for Ajaxのご紹介
－レガシーシステムのオープン化及びWeb化に最適システム－
レガシーシステムのオープン化及び
化及最適システム－
システム

株式会社メティオ
株式会社メティオ
平成22年7月7日


■レガシーマイグレーションの実現
レガシーマイグレーションの
　　
基幹業務システムの多くが現在でもビジネス駆動のためのエンジンとしてレガシーシステムを使い続け
ている一方で、Webシステムがビジネスのフロントエンドでは不可欠のものになっています。
　この状況の解決方法として、レガシーデータベースに蓄積された有用な情報を、Webシステムで活用
可能にすることを考えた開発手法を取り入れたFormChorus for Ajax を開発しました。
　 FormChorus for Ajaxは、『リアルな対応』『マルチな対応』『自由な動作』『開発環境の自由性』『素早い
展開』を可能にし「レガシーシステムのWeb化」レガシーマイグレーションを実現します。

レガシーシステムのWeb化を合理的に行うために、 FormChorus for Ajax を利用することで,何をどの
ように使用するか、各システムインテグレータ（ＳＩｅｒ)が自由な開発の組合せを実現することができます。


■レガシーシステムとの連携選択ポイント
レガシーシステムとの連携選択ポイント
との連携選択
それぞれ連携の規模や業務の実情に応じて適切に選択された入力画面作成をリアルタイムに連携を
実現しました。Ａｊａｘにより必要な部分だけを書き換えるWebアプリケーションツールとして入力作成フォ
ームを簡単に作成できます。「Web化」を意図するユーザーの多くはWebブラウザから直接レガシーシス
テムのデータを参照、更新するような使い方を考えています。情報資産をより付加価値を高めて活用し
たいと望むユーザーに対して、レガシーシステム側の複数アプリケーションの機能を複合的に利用したり、
Webアプリケーション、パッケージアプリケーションとの統合も簡単にできるツールになっています。　

レガシーシステムの画面をかした連携
レガシーシステムの画面を活かした連携
FormChorus for Ajaxを利用することにより、最も低コストでアプリケーション統合が可能になる手軽
な選択であるとともにレガシーシステム側の変更をほとんど必用とせず、、また実際のビジネスロジックの
処理は信頼性の高いレガシーシステム側ですべて実行されるために運用管理の工数の増加も避けられ
ます。

リアルタイム連携
リアルタイム連携
FormChorus for Ajaxを利用することによりビジネスロジックはWebアプリケーションとして作りこむこと
ができ、情報資産はWebアプリケーションによってレガシーアプリケーションとはかかわりなく活用する
ことができます。レガシーシステム側でアプリケーション開発・変更の必要はなく、従来どおりの業務を
続けるかたわら、新しいビジネスをWebで立ち上げることが可能になります。
ビジネスロジック側の運用管理が、人材の豊富なWeb系のスタッフに担当させることも可能になります。


■基幹業務用Webシステムの開発によくある問題点
システムの開発によくある問題点
によくある

・Webのエントリーフォームは難しい。
・Webのエントリーフォームは難しい。
Webのエントリーフォームはしい。
Webのエントリーフォームはしい。
・開発工数が多すぎる。
・開発工数が多すぎる。
開発工数がすぎる。
開発工数がすぎる。
・緊急時の対応が難しい。
・緊急時の対応が難しい。
緊急時の対応がしい。
緊急時の対応がしい。
・担当者がいないと作業ができない。
・担当者がいないと作業ができない。
担当者がいないと作業ができない。
担当者がいないと作業ができない
がいないと作業ができない。
がいないと作業ができない

※Webエントリー画面開発とプログラム開発連携は効率が悪い。
Webエントリー画面開発とプログラム開発連携は効率が
エントリー画面開発開発連携
※Webエントリー画面開発とプログラム開発の分離化ツールが必要。
Webエントリー画面開発とプログラム開発の分離化ツールが必要。
エントリー画面開発開発ツール


■FormChorus for Ajaxで解決

Webエントリー画面開発とプログラム開発を完全分離できるソフトウェア
「FormChorus for Ajaxで解決。

■FormChorus for Ajax特長

※Webインターフェースと入力データ処理を分離できる。　　　　　　　　　　　　　　　　　　　　
※アクセスごとにサーバが参照してデータデースから該当データを表示する。
※各入力フィールドに機能ボタンを用意してウィザード感覚で作成できる。
※開発工数の削減によりコスト削減とリスク削減が実現できる。
※自由な開発の組合わせ対応ができる。


■開発工数の削減
開発工数の ※ステップ数、半数以上削減など
ステップ数半数以上削減など

大幅な開発工数の削減
大幅な開発工数の
.NET
.NET
ASP
ASP JSP
JSP

Java
Java Ajax TXT
TXT

オープン化
オープン化
PHP
PHP Perl
Perl
CGI
CGI

Web

データｰ

FormChorus for Ajax

レガシーシステム Webシステム
Webシステム
分離

プログラム開発と
プログラム開発と入力画面開発
開発
プログラム開発（メソッド）
プログラム開発（メソッド）
開発入力画面開発の分離

入力画面開発時の
入力画面開発時の
チェック・テスト、変更・追加が
チェック・テスト、変更・追加が可能

入力画面開発
チェック・
チェック・テスト変更・
変更・追加ドキュメント管理
ドキュメント管理ドキュメント管理が
ドキュメント管理が可能
管理


■完全分離開発の実現
完全分離開発の

Ａｊａｘ対応開発スキーム
Ａｊａｘ対応開発スキーム
対応開発構造実装運用

現状開発スクリプト
スクリプトプログラムプログラム

ＨＴＭＬ ASP .NET JSP Ａｊａｘ
ＣＡＤ
ＣＳＳＪｓｏｎ

Java Ajax対応 TXT

PHP CGI Perl 仕様書

新開発
スプリクト分離
分離
分離
分離
分離
分離
分離
分離プログラム

レガシーシステム


－　開発コンセプト　
－　開発コンセプト　ー
開発コンセプト

基幹システムをプラグインレスで実現

第1世代　XML→Ajax未対応
既存の帳票がそのままブラウザ入力画面に、データベース連携も容易に実現

第2世代　XML→Ajax
Webエントリー画面開発とプログラム開発の完全分離も実現

そして・・・・第3世代　Excel→Ajax
Excelを使用した仕様書により実装実現

JS・CSS・各種フレームワークに対応
仕様変更にも柔軟に対応可能


■各開発スキームでの利用方法
各開発スキームでの利用方法
スキームでの

開発生産性品質保証性能管理

既存システム
既存システム分設構システム
単体テスト
単体テスト統合テスト
統合テスト運用
析計築テスト

仕様書作成

変更・追加チェック・
チェック・テストドキュメント管理
ドキュメント管理

.NET JSP 入力画面の
入力画面の開発内容の
開発内容のドキュメント
ASP
開発チェックテスト可能
チェック・
開発チェック・テスト可能仕様書）管理が
（仕様書）管理が可能
Web化
Ajax
Java TXT
対応データ
ベース
PHP CGI Perl

（１）業務の有効性・効率性を実現
業務の有効性・効率性を
ドキュメント管理ツールとして
管理ツールとして利用
（２）ドキュメント管理ツールとして利用
チェックツールとして
として利用
（３）チェックツールとして利用ドキュメント管理
ドキュメント管理


■画面項目共有化

見積入力

売上入力

受注入力

画面項目の
画面項目の共有化


■作業イメージ
作業イメージ

セレクトボックス DBLINK

Zoom
表


■チェックリストの作成
チェックリストの

（１）項目名・エレメントID・実行イベント・ファンクション名・テスト内容がExcelシートへ自動書き込み
項目名・エレメントID・実行イベントファンクション名テスト内容 Excelシート自動書き
イベント・内容がシートへ


■開発の構造概念
開発の

Excelシートの作成
Excelシートの
シート

DB
Ajax用Excelシート
Ajax用 Excelシート

SQL

マスタメンテナンス Ajax対応ツール
Ajax対応ツール
対応 DB用自動マスタ
DB用自動マスタ
用自動
ツールツール

DB登録用
DB登録用
SQL文作成
SQL文作成
HTML Excelシート Excelシート
ファンクション用
Excelシート Excelシート
JS
チェックリスト

開発の効率化の
開発の効率化の実現


■各種作業手順

マスタメンテナンス対応
マスタメンテナンス対応 Ajax対応
Ajax対応 DB対応
DB対応

Ajax用
Ajax用 Ajax用
Ajax用
Excelの作成
Excelの
Excelシート
Excelシート

Ajax対応ツール
Ajax対応ツール
マスタメンテナンス
対応
ツール用自動
ツール

SQL

Ajax用
Ajax用
SQL文作成
SQL文作成 HTML JS DB登録用
DB登録用
Excelシート
Excelシート
チェックリスト

DB DB


何故この開発手法を選択したか・・・・・
何故この開発手法を選択したか・・・・・
この開発手法したか
■画面デザインとプログラム開発の分離により、修正・追加作業が簡素化できる。
■プログラム開発の共通化によりコストダウンを実現できる。

■フロントエンドの開発の簡素化 ■分離開発手法のフロー

.NETを例に記載
MS Excel 開発ツール
開発ツールプログラム言語は、問わない

デザイナ

SE/プログラマ　

HTML
AJAX
HTML 通信 SI
CSS

javascript AJAX
Framework

HTML=ASP.NET

開発構造の
開発構造の概念
デーブル名などのマスター情報
デーブル名などのマスター情報
マスター
③
② HTML

開発ツール
開発ツール MS Excel CSS
DB
JavaScript
AJAX
開発ツール
開発ツール Javascript ファンクション名
Framework ID名/クラス名

■エレメントIDの共通化
①
⑤ ④

HTML HTML
CSS ＋ HTML AJAX
＋通信
初期HTML
ID名/クラス名 SI
CSS 実装


作業イメージ
作業イメージ

Zoom DBLink

運用フロー
運用フロー
■参照ボタンを押下し、Zoomウインドウ(管理された子ウインドウ)が開いて検索
■検索された値は親ウインドウに対してZoomウインドウの値をセットする
■検索結果に合わせて複数箇所に値をセットする


Excelシートのドキュメント利用
シートのドキュメント利用

チェックリスト概要書

Ajaxツールより Ajaxツールより DBツールより
チェックリストの作成各種定義文の作成各種データ使用の作成

■項目名・エレメントID・実行イベント・ファンクション名・テスト内容などがExcelシートへ自動書き込み


販売管理システム開発についての結果報告
販売管理システム開発についての結果報告
システム開発についての

当社開発手法を利用した
当社開発手法を利用した
コーディング比率
コーディング比率
当社では販売管理システムを、テストケースとして今回ご提案を
させていただきました開発手法（Exceｌシートよりコンバート・
各種ツール使用）により作成いたしましたので、開発時のご報告を
完全手組み
完全手組みさせていただきます。

手組み
手組み
開発期間：1ヶ月半（1名により）
コーディング再利用
コーディング再利用開発状況：画面の仕様変更による、3回の修正がありました。

結果

ツール使用での
ツール使用での
使用
①Excelシートよりコンバートをかけ各種ツールを使用してコーディング
コーディング　した部分は約70％でした。
②トランザクション処理など残り、約30％が手組みの処理で行いました。
③手組み処理の30％のうち、80％がコーディング時に作成したものが、
※当社グラフ作成ツールを使用
　　再利用が可能でした。
④エラー発生の要因としては、DBのフィールド名・画面ID名の入力時
　のヒューマンエラーが大半をしめ、プログラムでのエラー発生は
　ありませんでした。


販売管理システム　画面＆帳票フロー
販売管理システム　画面＆帳票フロー
システム
ログイン

売上メニュー売上入力納品書
見積メニュー見積入力見積明細書（見積）（即伝）

※リンク売上入力納品書
メインメニュー（受注）（即伝）
見積照会見積合計書

売上入力納品書
【得意先別】（出荷）（即伝）
見積集計表見積集計表【商品別】
≪3種類≫ 【担当者別】
売上入力納品書
（即伝）

受注入力 ※リンク売上入力
受注メニュー受注票売上照会
（在庫）（照会）
※照会モードの売上入力
　画面へ（見積・受注・出荷・売上）
受注状況照会【得意先別】
売上明細表【商品別】

※リンク受注入力
受注照会【得意先別】
（照会）売上集計表
売上集計表【商品別】
※完納や出荷数の確認 ※照会モードの受注入力【担当者別】
　画面へ（在庫・発注）
【得意先別】
受注残明細表【商品別】

入金メニュー入金入力
【得意先別】
受注集計表受注集計表【商品別】
≪3種類≫ 【担当者別】

※リンク
入金入力
入金照会
（照会）
出荷メニュー出荷入力出荷伝票
（在庫）（即伝）
印刷
【得意先別】
入金明細表【入金日別】
出荷入力出荷伝票
（即伝）

未入金明細票未入金明細表
出荷指示書出荷指示書

【部門別】
回収予定表回収予定表【担当者別】
※リンク出荷入力
出荷照会
（照会）
※照会モードの出荷入力
　画面へ

出荷明細表
領収書入力領収書

入庫メニュー入庫入力入庫伝票
（即伝）

グラフ作成サービス
グラフ作成サービス
作成

プロフェッショナルのあなたへ
プロフェッショナルのあなたへ
JavaScriptであなたが探
JavaScriptであなたが探していた
であなたがＦｌａｓｈに
Ｆｌａｓｈに対抗
ピッタリな
ピッタリな本格派技術
グラフの作成ができた
グラフの作成ができた。ができた。でも単体技術ではなく連携可能
単体技術ではなく
でも単体技術ではなく連携可能
作成は簡単、種類も多種多様
作成は簡単、種類も

拡大・縮小も
拡大・縮小も自在


グラフ開発（Canvas対応）
Web上で
■グラフの変化がリアルタイムに表示。
■縮小・拡大が自由自在に実現。
■多種多様なグラフを簡単に作成。
■パソコンのブラウザ上から利用可能。
　　　　　　（インターネット接続環境が必要です）。

グラフの
グラフの種類

　●縦棒グラフ　　●横棒グラフ　　●エリアグラフ　　　●線グラフ　　●バブルチャート　　
　●円グラフ　　　●ドーナツグラフ　　　●三角グラフ　　　●棒と線の組合せ　　
　●ファイナンシャルチャート　　●レーダーチャート　　●回転計器　など

縦棒グラフエリアグラフ線グラフ


バブルグラフ円グラフドーナツグラフ

横棒グラフ棒と線の組合せレーダーチャート

ファイナンシャルチャート回転機器


リモート印刷対応
リモート印刷対応

■ブラウザ上よりダイレクト印刷が可能

A支店本社
Web サーバー
FormChorus

C支店

PC B支店

PC
プリンター

PC
プリンター

PC
プリンター

≪説明・制約について≫
ローカルプリンタへの出力は、FormChorusから出力データを生成しActiveXを介してクライアント環境へ送信することが可能です。
※クライアント側ブラウザ設定の「ActiveXコントロールとプラグインの実行」を有効にしておく必要があります。（設定が有効でない場
合は都度ブラウザからの指定が発生します）
また、初回接続時だけはOCXファイルのダウンロード作業が発生します。（次回の接続からは不要作業）


ご清聴ありがとうございました。
• 株式会社メティオ
AJAXフレームワーク開発・販売
WEB帳票サーバ　FormChorusシリーズ

お問い合わせ先
• E-mail info@metio.jp


基幹業務のAJAXによる効率的なWEB開発手法

Recommended

Recommended

More Related Content

What's hot

What's hot (9)

Viewers also liked

Viewers also liked (12)

Similar to 基幹業務のAJAXによる効率的なWEB開発手法

Similar to 基幹業務のAJAXによる効率的なWEB開発手法 (20)

Recently uploaded

Recently uploaded (8)

基幹業務のAJAXによる効率的なWEB開発手法