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

Copyright©2010　Metio.co.Ltd.

FormChorus AJAXの紹介　


Webを活用した情報化が不可欠となった現在、旧来から使用しているレガシーシステムなどに多くの情報

を蓄積してきた企業にとって今ある情報資産をWebを用いてどう活用するかが競争力維持・拡大の鍵になっ

ています。ところがシステムの大幅な見直しを考えたたとき、現実的に大きな壁を乗り越えなければ実用

化できません。そこで弊社はコストとリスクを最小にしながら、一定の効果を上げるためのWeb化の方策

としてAjaxに対応したFormChorus for Ajaを開発しました。

旧来旧来旧来旧来からからからから使用使用使用使用しているしているしているしているレガシーシステムレガシーシステムレガシーシステムレガシーシステムがががが汎用機汎用機汎用機汎用機にににに　　　　旧来旧来旧来旧来からからからから使用使用使用使用しているしているしているしているレガシーシステムレガシーシステムレガシーシステムレガシーシステムがががが汎用機汎用機汎用機汎用機にににに　　　　

　　　　－　　　　　－　　　　　－　　　　　－　オープンオープンオープンオープン化化化化によるによるによるによる　－　－　－　－　　　　－　　　　　－　　　　　－　　　　　－　オープンオープンオープンオープン化化化化によるによるによるによる　－　－　－　－

旧来旧来旧来旧来システムシステムシステムシステム旧来旧来旧来旧来システムシステムシステムシステム

（（（（レガシーシステムレガシーシステムレガシーシステムレガシーシステムなどなどなどなど））））（（（（レガシーシステムレガシーシステムレガシーシステムレガシーシステムなどなどなどなど））））

オープンオープンオープンオープン化化化化オープンオープンオープンオープン化化化化

（（（（（（（（WEBWEB化化化化））））化化化化））））

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


WebWebWebWebWebWebWebWebエントリーエントリーエントリーエントリー入力画面入力画面入力画面入力画面のののの分離開発分離開発分離開発分離開発システムシステムシステムシステムエントリーエントリーエントリーエントリー入力画面入力画面入力画面入力画面のののの分離開発分離開発分離開発分離開発システムシステムシステムシステム

FormChorusFormChorusFormChorusFormChorusFormChorusFormChorusFormChorusFormChorus　　　　　　　　for Ajaxfor Ajaxfor Ajaxfor Ajaxfor Ajaxfor Ajaxfor Ajaxfor Ajaxのごのごのごのご紹介紹介紹介紹介のごのごのごのご紹介紹介紹介紹介

株式会社株式会社株式会社株式会社メティオメティオメティオメティオ株式会社株式会社株式会社株式会社メティオメティオメティオメティオ

平成平成平成平成平成平成平成平成2222222222222222年年年年年年年年77777777月月月月月月月月77777777日日日日日日日日

－－－－レガシーシステムレガシーシステムレガシーシステムレガシーシステムののののオープンオープンオープンオープン化及化及化及化及びびびび－－－－レガシーシステムレガシーシステムレガシーシステムレガシーシステムののののオープンオープンオープンオープン化及化及化及化及びびびびWebWebWebWebWebWebWebWeb化化化化にににに最適最適最適最適システムシステムシステムシステム－－－－化化化化にににに最適最適最適最適システムシステムシステムシステム－－－－


■■■■レガシーマイグレーションレガシーマイグレーションレガシーマイグレーションレガシーマイグレーションのののの実現実現実現実現■■■■レガシーマイグレーションレガシーマイグレーションレガシーマイグレーションレガシーマイグレーションのののの実現実現実現実現

　　　　　　　　

基幹業務システムの多くが現在でもビジネス駆動のためのエンジンとしてレガシーシステムを使い続け

ている一方で、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系のスタッフに担当させることも可能になります。


※※※※※※※※WebWebWebWebWebWebWebWebエントリーエントリーエントリーエントリー画面開発画面開発画面開発画面開発ととととプログラムプログラムプログラムプログラム開発連携開発連携開発連携開発連携はははは効率効率効率効率がががが悪悪悪悪いいいい。。。。エントリーエントリーエントリーエントリー画面開発画面開発画面開発画面開発ととととプログラムプログラムプログラムプログラム開発連携開発連携開発連携開発連携はははは効率効率効率効率がががが悪悪悪悪いいいい。。。。

※※※※※※※※WebWebWebWebWebWebWebWebエントリーエントリーエントリーエントリー画面開発画面開発画面開発画面開発ととととプログラムプログラムプログラムプログラム開発開発開発開発のののの分離化分離化分離化分離化ツールツールツールツールがががが必要必要必要必要。。。。エントリーエントリーエントリーエントリー画面開発画面開発画面開発画面開発ととととプログラムプログラムプログラムプログラム開発開発開発開発のののの分離化分離化分離化分離化ツールツールツールツールがががが必要必要必要必要。。。。

・・・・WebWebWebWebののののエントリーフォームエントリーフォームエントリーフォームエントリーフォームはははは難難難難しいしいしいしい。。。。

・・・・開発工数開発工数開発工数開発工数がががが多多多多すぎるすぎるすぎるすぎる。。。。

・・・・緊急時緊急時緊急時緊急時のののの対応対応対応対応がががが難難難難しいしいしいしい。。。。

・・・・担当者担当者担当者担当者がいないとがいないとがいないとがいないと作業作業作業作業ができないができないができないができない。。。。

・・・・・・・・WebWebWebWebWebWebWebWebののののエントリーフォームエントリーフォームエントリーフォームエントリーフォームはははは難難難難しいしいしいしい。。。。ののののエントリーフォームエントリーフォームエントリーフォームエントリーフォームはははは難難難難しいしいしいしい。。。。

・・・・開発工数開発工数開発工数開発工数がががが多多多多すぎるすぎるすぎるすぎる。。。。・・・・開発工数開発工数開発工数開発工数がががが多多多多すぎるすぎるすぎるすぎる。。。。

・・・・緊急時緊急時緊急時緊急時のののの対応対応対応対応がががが難難難難しいしいしいしい。。。。・・・・緊急時緊急時緊急時緊急時のののの対応対応対応対応がががが難難難難しいしいしいしい。。。。

・・・・担当者担当者担当者担当者がいないとがいないとがいないとがいないと作業作業作業作業ができないができないができないができない。。。。・・・・担当者担当者担当者担当者がいないとがいないとがいないとがいないと作業作業作業作業ができないができないができないができない。。。。

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


■■■■■■■■FormChorusFormChorusFormChorusFormChorusFormChorusFormChorusFormChorusFormChorus for Ajaxfor Ajaxfor Ajaxfor Ajaxfor Ajaxfor Ajaxfor Ajaxfor Ajax特長特長特長特長特長特長特長特長

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

「FormChorus for Ajaxで解決。

※Webインターフェースと入力データ処理を分離できる。　　　　　　　　　　　　　　　　　　　　

※アクセスごとにサーバが参照してデータデースから該当データを表示する。

※各入力フィールドに機能ボタンを用意してウィザード感覚で作成できる。

※開発工数の削減によりコスト削減とリスク削減が実現できる。

※自由な開発の組合わせ対応ができる。

■■■■■■■■FormChorusFormChorusFormChorusFormChorusFormChorusFormChorusFormChorusFormChorus for Ajaxfor Ajaxfor Ajaxfor Ajaxfor Ajaxfor Ajaxfor Ajaxfor Ajaxでででででででで解決解決解決解決解決解決解決解決


■■■■開発工数開発工数開発工数開発工数のののの削減削減削減削減■■■■開発工数開発工数開発工数開発工数のののの削減削減削減削減

レガシーシステムレガシーシステムレガシーシステムレガシーシステムレガシーシステムレガシーシステムレガシーシステムレガシーシステム

WebWebWebWebWebWebWebWeb

WebWebシステムシステムシステムシステムシステムシステムシステムシステム

データｰデータｰデータｰデータｰデータｰデータｰデータｰデータｰ

Ajax

ASP

ASP

.NET

.NET

JSP

JSP

Java

Java

PHP

PHP

CGI

CGI

Perl

Perl

TXT

TXT

オープンオープンオープンオープン化化化化オープンオープンオープンオープン化化化化

大幅大幅大幅大幅なななな開発工数開発工数開発工数開発工数のののの削減削減削減削減大幅大幅大幅大幅なななな開発工数開発工数開発工数開発工数のののの削減削減削減削減

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

分離分離分離分離分離分離分離分離

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

FormChorus FormChorus for Ajaxfor Ajax

プログラムプログラムプログラムプログラム開発開発開発開発とととと入力画面開発入力画面開発入力画面開発入力画面開発プログラムプログラムプログラムプログラム開発開発開発開発とととと入力画面開発入力画面開発入力画面開発入力画面開発

のののの分離分離分離分離のののの分離分離分離分離

入力画面開発時入力画面開発時入力画面開発時入力画面開発時のののの入力画面開発時入力画面開発時入力画面開発時入力画面開発時のののの

チェックチェックチェックチェック・・・・テストテストテストテスト、、、、変更変更変更変更・・・・追加追加追加追加がががが可能可能可能可能チェックチェックチェックチェック・・・・テストテストテストテスト、、、、変更変更変更変更・・・・追加追加追加追加がががが可能可能可能可能

入力画面開発入力画面開発入力画面開発入力画面開発入力画面開発入力画面開発入力画面開発入力画面開発

ドキュメントドキュメントドキュメントドキュメント管理管理管理管理がががが可能可能可能可能ドキュメントドキュメントドキュメントドキュメント管理管理管理管理がががが可能可能可能可能

※※※※※※※※ステップステップステップステップ数数数数、、、、半数以上削減半数以上削減半数以上削減半数以上削減などなどなどなどステップステップステップステップ数数数数、、、、半数以上削減半数以上削減半数以上削減半数以上削減などなどなどなど


ＡｊａｘＡｊａｘＡｊａｘＡｊａｘ対応開発対応開発対応開発対応開発スキームスキームスキームスキームＡｊａｘＡｊａｘＡｊａｘＡｊａｘ対応開発対応開発対応開発対応開発スキームスキームスキームスキーム

ＣＡＤＣＡＤＣＡＤＣＡＤＣＡＤＣＡＤＣＡＤＣＡＤ

スプリクトスプリクトスプリクトスプリクトスプリクトスプリクトスプリクトスプリクトプログラムプログラムプログラムプログラムプログラムプログラムプログラムプログラム

スクリプトスクリプトスクリプトスクリプトスクリプトスクリプトスクリプトスクリプト

プログラムプログラムプログラムプログラムプログラムプログラムプログラムプログラムスクリプトスクリプトスクリプトスクリプトスクリプトスクリプトスクリプトスクリプトプログラムプログラムプログラムプログラムプログラムプログラムプログラムプログラム

ＡｊａｘＡｊａｘＡｊａｘＡｊａｘＡｊａｘＡｊａｘＡｊａｘＡｊａｘ

ＪｓｏｎＪｓｏｎＪｓｏｎＪｓｏｎＪｓｏｎＪｓｏｎＪｓｏｎＪｓｏｎ

現状開発現状開発現状開発現状開発現状開発現状開発現状開発現状開発

仕様書仕様書仕様書仕様書仕様書仕様書仕様書仕様書

分離

分離

分離

分離

分離

分離

分離

分離

レガシーシステムレガシーシステムレガシーシステムレガシーシステムレガシーシステムレガシーシステムレガシーシステムレガシーシステム

構造構造構造構造構造構造構造構造実装実装実装実装実装実装実装実装運用運用運用運用運用運用運用運用

ＨＴＭＬＨＴＭＬＨＴＭＬＨＴＭＬＨＴＭＬＨＴＭＬＨＴＭＬＨＴＭＬ

ＣＳＳＣＳＳＣＳＳＣＳＳＣＳＳＣＳＳＣＳＳＣＳＳ

新開発新開発新開発新開発新開発新開発新開発新開発

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

ASP .NET JSP

Java

PHPCGI

Perl

TXTAjax対応


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

第1世代　XML→Ajax未対応

既存の帳票がそのままブラウザ入力画面に、データベース連携も容易に実現

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

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

仕様変更にも柔軟に対応可能

JS・CSS・各種フレームワークに対応

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


Web化

分分分分分分分分

析析析析析析析析

単体単体単体単体テストテストテストテスト単体単体単体単体テストテストテストテスト統合統合統合統合テストテストテストテスト統合統合統合統合テストテストテストテスト

システムシステムシステムシステムシステムシステムシステムシステム

テストテストテストテストテストテストテストテスト

運用運用運用運用運用運用運用運用

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

入力画面入力画面入力画面入力画面のののの入力画面入力画面入力画面入力画面のののの

開発開発開発開発チェックチェックチェックチェック・・・・テストテストテストテスト可能可能可能可能開発開発開発開発チェックチェックチェックチェック・・・・テストテストテストテスト可能可能可能可能

仕様書作成仕様書作成仕様書作成仕様書作成仕様書作成仕様書作成仕様書作成仕様書作成

開発内容開発内容開発内容開発内容ののののドキュメントドキュメントドキュメントドキュメント開発内容開発内容開発内容開発内容ののののドキュメントドキュメントドキュメントドキュメント

（（（（仕様書仕様書仕様書仕様書））））管理管理管理管理がががが可能可能可能可能（（（（仕様書仕様書仕様書仕様書））））管理管理管理管理がががが可能可能可能可能

設設設設設設設設

計計計計計計計計

構

築築築築築築築築

データデータデータデータデータデータデータデータ

ベースベースベースベースベースベースベースベース

既存既存既存既存システムシステムシステムシステム既存既存既存既存システムシステムシステムシステム

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

ASP

.NETJSP

Java

PHPCGI

Perl

TXT

Ajax

対応

ドキュメントドキュメントドキュメントドキュメント管理管理管理管理ドキュメントドキュメントドキュメントドキュメント管理管理管理管理

（（（（１１１１））））業務業務業務業務のののの有効性有効性有効性有効性・・・・効率性効率性効率性効率性をををを実現実現実現実現（（（（１１１１））））業務業務業務業務のののの有効性有効性有効性有効性・・・・効率性効率性効率性効率性をををを実現実現実現実現

（（（（２２２２））））ドキュメントドキュメントドキュメントドキュメント管理管理管理管理ツールツールツールツールとしてとしてとしてとして利用利用利用利用（（（（２２２２））））ドキュメントドキュメントドキュメントドキュメント管理管理管理管理ツールツールツールツールとしてとしてとしてとして利用利用利用利用

（（（（３３３３））））チェックツールチェックツールチェックツールチェックツールとしてとしてとしてとして利用利用利用利用（（（（３３３３））））チェックツールチェックツールチェックツールチェックツールとしてとしてとしてとして利用利用利用利用

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


見積入力見積入力見積入力見積入力見積入力見積入力見積入力見積入力

売上入力売上入力売上入力売上入力売上入力売上入力売上入力売上入力

受注入力受注入力受注入力受注入力受注入力受注入力受注入力受注入力

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

■■■■■■■■画面項目共有化画面項目共有化画面項目共有化画面項目共有化画面項目共有化画面項目共有化画面項目共有化画面項目共有化


DBLINKDBLINKセレクトボックスセレクトボックスセレクトボックスセレクトボックスセレクトボックスセレクトボックスセレクトボックスセレクトボックス

ZoomZoom表表表表表表表表

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


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

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


■■■■開発開発開発開発のののの構造概念構造概念構造概念構造概念■■■■開発開発開発開発のののの構造概念構造概念構造概念構造概念

ExcelExcelシートシートシートシートのののの作成作成作成作成シートシートシートシートのののの作成作成作成作成

AjaxAjax用用用用用用用用ExcelExcelシートシートシートシートシートシートシートシート

SQLSQL文作成文作成文作成文作成文作成文作成文作成文作成 HTMLHTMLJSJS

チェックリストチェックリストチェックリストチェックリストチェックリストチェックリストチェックリストチェックリスト

DBDB

DBDB登録用登録用登録用登録用登録用登録用登録用登録用

ExcelExcelシートシートシートシートシートシートシートシート

ファンクションファンクションファンクションファンクション用用用用ファンクションファンクションファンクションファンクション用用用用


SQLSQL

マスタメンテナンスマスタメンテナンスマスタメンテナンスマスタメンテナンスマスタメンテナンスマスタメンテナンスマスタメンテナンスマスタメンテナンス

ツールツールツールツールツールツールツールツール

AjaxAjax対応対応対応対応ツールツールツールツール対応対応対応対応ツールツールツールツール DBDB用自動用自動用自動用自動マスタマスタマスタマスタ用自動用自動用自動用自動マスタマスタマスタマスタ


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


■■■■■■■■各種作業手順各種作業手順各種作業手順各種作業手順各種作業手順各種作業手順各種作業手順各種作業手順

ExcelExcelのののの作成作成作成作成のののの作成作成作成作成


SQLSQL文作成文作成文作成文作成文作成文作成文作成文作成

マスタメンテナンスマスタメンテナンスマスタメンテナンスマスタメンテナンスマスタメンテナンスマスタメンテナンスマスタメンテナンスマスタメンテナンス



HTMLHTML JSJS チェックリストチェックリストチェックリストチェックリストチェックリストチェックリストチェックリストチェックリスト

AjaxAjax対応対応対応対応ツールツールツールツール対応対応対応対応ツールツールツールツール


DBDB登録用登録用登録用登録用登録用登録用登録用登録用


ファンクションファンクションファンクションファンクション用用用用ファンクションファンクションファンクションファンクション用用用用


SQLSQL

DBDB

DBDB用自動用自動用自動用自動マスタマスタマスタマスタ用自動用自動用自動用自動マスタマスタマスタマスタ


DBDB

マスタメンテナンスマスタメンテナンスマスタメンテナンスマスタメンテナンス対応対応対応対応マスタメンテナンスマスタメンテナンスマスタメンテナンスマスタメンテナンス対応対応対応対応 AjaxAjax対応対応対応対応対応対応対応対応 DBDB対応対応対応対応対応対応対応対応


■画面デザインとプログラム開発の分離により、修正・追加作業が簡素化できる。

■プログラム開発の共通化によりコストダウンを実現できる。

何故何故何故何故このこのこのこの開発手法開発手法開発手法開発手法をををを選択選択選択選択したかしたかしたかしたか・・・・・・・・・・・・・・・・・・・・何故何故何故何故このこのこのこの開発手法開発手法開発手法開発手法をををを選択選択選択選択したかしたかしたかしたか・・・・・・・・・・・・・・・・・・・・

javascript

CSS

SI

AJAX

Framework

AJAX

通信HTML

HTML

HTML=ASP.NET

開発開発開発開発ツールツールツールツール

デザイナ

SE/プログラマ　

MS ExcelMS ExcelMS ExcelMS Excel

■分離開発手法のフロー

■フロントエンドの開発の簡素化

プログラム言語は、問わない

.NETを例に記載


開発構造開発構造開発構造開発構造のののの概念概念概念概念開発構造開発構造開発構造開発構造のののの概念概念概念概念

Javascript

Framework

JavaScript

CSS

HTML

AJAX

ファンクション名

ID名/クラス名

デーブルデーブルデーブルデーブル名名名名などのなどのなどのなどのマスターマスターマスターマスター情報情報情報情報

③③③③

HTML

SI

AJAX

通信

④④④④

HTML

実装

＋＋＋＋

⑤⑤⑤⑤


MS ExcelMS ExcelMS ExcelMS Excel

②②②②


DBDBDBDB

HTML

初期HTML

ID名/クラス名

CSS

CSS ＋＋＋＋

①①①①

■エレメントIDの共通化


ZoomZoomZoomZoomZoomZoomZoomZoom

運用運用運用運用フローフローフローフロー

■参照ボタンを押下し、Zoomウインドウ(管理された子ウインドウ)が開いて検索

■検索された値は親ウインドウに対してZoomウインドウの値をセットする

■検索結果に合わせて複数箇所に値をセットする

DBLinkDBLinkDBLinkDBLinkDBLinkDBLinkDBLinkDBLink

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


チェックリストチェックリストチェックリストチェックリスト概要書概要書概要書概要書

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

Ajaxツールより

各種定義文の作成

Ajaxツールより

チェックリストの作成

DBツールより

各種データ使用の作成

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


ツールツールツールツール使用使用使用使用でのでのでのでの

コーディングコーディングコーディングコーディング

手組手組手組手組みみみみ

コーディングコーディングコーディングコーディング再利用再利用再利用再利用

完全手組完全手組完全手組完全手組みみみみ

※当社グラフ作成ツールを使用

当社では販売管理システムを、テストケースとして今回ご提案を

させていただきました開発手法（Exceｌシートよりコンバート・

各種ツール使用）により作成いたしましたので、開発時のご報告を

させていただきます。

開発期間：1ヶ月半（1名により）

開発状況：画面の仕様変更による、3回の修正がありました。

結果結果結果結果

①Excelシートよりコンバートをかけ各種ツールを使用してコーディング

　した部分は約70％でした。

②トランザクション処理など残り、約30％が手組みの処理で行いました。

③手組み処理の30％のうち、80％がコーディング時に作成したものが、

　　再利用が可能でした。

④エラー発生の要因としては、DBのフィールド名・画面ID名の入力時

　のヒューマンエラーが大半をしめ、プログラムでのエラー発生は

　ありませんでした。

当社開発手法当社開発手法当社開発手法当社開発手法をををを利用利用利用利用したしたしたした

コーディングコーディングコーディングコーディング比率比率比率比率

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


見積集計表

見積メニュー見積入力

見積明細書

見積照会

見積合計書

見積集計表

≪3種類≫

※リンク

ログイン

メインメニュー

受注メニュー

受注入力

（在庫）

受注状況照会

受注照会

受注入力

（照会）

受注残明細表

受注票

※照会モードの受注入力

　画面へ（在庫・発注）

※完納や出荷数の確認

※リンク

出荷メニュー

出荷入力

（在庫）

出荷指示書

出荷伝票

（即伝）

出荷指示書

出荷照会

出荷入力

（照会）

出荷明細表

※照会モードの出荷入力

　画面へ

※リンク

売上メニュー

売上入力

（見積）

売上入力

（出荷）

納品書

（即伝）

納品書

（即伝）

売上入力

納品書

（即伝）

売上照会

売上入力

（照会）

売上明細表

※照会モードの売上入力

　画面へ（見積・受注・出荷・売上）

※リンク

売上集計表

売上集計表

入金メニュー入金入力

印刷

入金照会

入金入力

（照会）

入金明細表

※リンク

未入金明細票

未入金明細表

回収予定表

回収予定表

領収書入力

領収書

入庫メニュー入庫入力

【得意先別】

【商品別】

【担当者別】

【得意先別】

【商品別】

受注集計表

受注集計表

≪3種類≫

【得意先別】

【商品別】

【担当者別】

出荷入力

出荷伝票

（即伝）

売上入力

（受注）

納品書

（即伝）

【得意先別】

【商品別】

【得意先別】

【商品別】

【担当者別】

【得意先別】

【入金日別】

【部門別】

【担当者別】

入庫伝票

（即伝）

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


JavaScriptJavaScriptJavaScriptJavaScriptであなたがであなたがであなたがであなたが探探探探していたしていたしていたしていた

グラフグラフグラフグラフのののの作成作成作成作成ができたができたができたができた。。。。

プロフェッショナルプロフェッショナルプロフェッショナルプロフェッショナルのあなたへのあなたへのあなたへのあなたへ

ピッタリピッタリピッタリピッタリなななな本格派技術本格派技術本格派技術本格派技術

作成作成作成作成はははは簡単簡単簡単簡単、、、、種類種類種類種類もももも多種多様多種多様多種多様多種多様

ＦｌａｓｈＦｌａｓｈＦｌａｓｈＦｌａｓｈにににに対抗対抗対抗対抗

でもでもでもでも単体技術単体技術単体技術単体技術ではなくではなくではなくではなく連携可能連携可能連携可能連携可能

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

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


グラフ開発（Canvas対応）

グラフグラフグラフグラフのののの種類種類種類種類

　●縦棒グラフ　　●横棒グラフ　　●エリアグラフ　　　●線グラフ　　●バブルチャート　　

　●円グラフ　　　●ドーナツグラフ　　　●三角グラフ　　　●棒と線の組合せ　　

　●ファイナンシャルチャート　　●レーダーチャート　　●回転計器　など

■グラフの変化がリアルタイムに表示。

■縮小・拡大が自由自在に実現。

■多種多様なグラフを簡単に作成。

■パソコンのブラウザ上から利用可能。

　　　　　　（インターネット接続環境が必要です）。

Web上で

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


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

レーダーチャート

ファイナンシャルチャート

横棒グラフ

回転機器

棒と線の組合せ


≪説明・制約について≫

ローカルプリンタへの出力は、FormChorusから出力データを生成しActiveXを介してクライアント環境へ送信することが可能です。

※クライアント側ブラウザ設定の「ActiveXコントロールとプラグインの実行」を有効にしておく必要があります。（設定が有効でない場

合は都度ブラウザからの指定が発生します）

また、初回接続時だけはOCXファイルのダウンロード作業が発生します。（次回の接続からは不要作業）

サーバーサーバーサーバーサーバーサーバーサーバーサーバーサーバー

PCPCPCPC

プリンタープリンタープリンタープリンター

BBBB支店支店支店支店

PCPCPCPC

PCPCPCPC


AAAA支店支店支店支店

PCPCPCPC


CCCC支店支店支店支店

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

本社本社本社本社

WebWebWebWeb

FormChorusFormChorusFormChorusFormChorus

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


ご清聴ありがとうございました。

• 株式会社メティオAJAXフレームワーク開発・販売WEB帳票サーバ　FormChorusシリーズ

お問い合わせ先

• E-mail [email protected]

Technology

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