レガシー資産とUXとマイグレーション手法〜 単なるWeb化ではない、レガシーシステムUX化の提案 〜

自己紹介
も り

ひでき森 英樹

hmori@nexaweb.com

所属

日本ネクサウェブ株式会社

職種

ソリューション営業経験

開発/テスト支援ツール 他
販売管理 管理会計 他
2Agenda
1. 会社紹介2. 企業システムを振り返る
3. UX化技術 nexacro 紹介
4. レガシー資産をUX化する
5. まとめ

会社概要
社名
設⽴
代表取締役
最⾼執⾏責任者
所在地
事業内容
親会社

日本ネクサウェブ株式会社
2005年7月
Steve Kim
永井 一美
〒101-0021 東京都千代田区外神田5-3-1
秋葉原OSビル10F
WEBアプリケーションを支援するプラット
フォーム 製品の販売、サポート、導入支援
Nexaweb Inc. （米国 ボストン）

2014年4月、米国 Nexaweb Technologies.のRIA 部門が独⽴、NexawebInc.を設⽴し、その日本法⼈であった 旧「日本ネクサウェブ株式会社」と、
韓国 TOBESOFT の日本法⼈「トゥービーソフト・ジャパン」が事業統合。
新生「日本ネクサウェブ株式会社」として新たに船出をしました。
企業向けのWEBプラットフォームとして、グローバル市場で9,500サイトの実績を持つリーディングカンパニー
4

日本ネクサウェブ製品の導入実績
全世界 9,500サイト 以上に導入

and More

5

企業システム年表
企業システムの変遷
2000年代
Web化が加速
1990年代後半
業務パッケージの導入企業が増加

1980年代後半
WindowsやUNIX
オープン化の時代へ
1960年代給与計算や決算処理など限定的な業務のみシス
テム化

1970年代
大手企業：メインフレーム
中小企業：オフコン

現在
クラウドの活用

〜現在
マルチデバイス
モバイル対応技術の進化

2000年代〜
C/SからWebへ
RIA技術の発展

1990年代後半〜
業務パッケージ市場が拡大

1980年代後半〜
ダウンサイジングがトレンド

1970年代〜
各社は、独自で業務システムを構築、ハードとあわせて販売

1960年代〜
電子計算センター（SIerの前身）が相次ぐ創業〜1960年代
コンピュータ製造メーカーの情報システム部門によるシステム構築

1960

1970

ベンダー市場の動向
1980

1990

2000

2010

（年）

6

業務アプリケーションの方向性
Cloud（SaaS）

SocialApplication

マッシュアップ環境
マッシュアップ環境
Web

システム化化化化
WebFixedMobile
マルチデバイス対応
マルチデバイス対応
NonWeb
出所：デロイトトーマツコンサルティング

7

方向性の実現には？

マルチプラットフォーム
Windows , Mac , Linux , iOS , Android

マルチブラウザInternet Explorer , Firefox , Chrome , Safari

マルチスクリーンサイズ
Monitor
11.6～
11.6～30.0 inch
Smart Phone 3.5～
3.5～5.5 inch
Tablet7.0～
7.0～11.6 inch8

弊社のご提案

OSMU : One Source Multi Use
デスクトップからモバイルまで、異なるブラウザ、異なる端末で動作する
表現⼒豊かなアプリケーションを、一回（One Source）で開発する技術

UI/UX
設計方法論

BUX Model

実装技術
9nexacro 構成図
UI/UX 統合開発環境

nexacro platform

RUNTIME Version

nexacro platform

Multi Layout
ManagerHTML5 Version

Generate
Web Server / Application Server

HTML, Java Script, CSS(Windows)(Android)(iOS)

Multi platform RUNTIME Apps
(Full Functionalities & High Performance)

Multi Web Browser Apps
(No Install)10nexacro 動作の仕組み
共通アプリケーション

nexacro動作環境

OS 差異を吸収

ブラウザ差異を吸収

アプリケーション差異を吸収

11

nexacro 動作環境
ClientWeb Server

Application Server
JSP/Servlet,
ASP .NetX-API
RUNTIME
Environment

LegacyDBMSHTMLJava Script
CSS

リクエスト取得（パラメータ情報）
データセット作成とレスポンス送信

HTML5
Environment

IDE

Back EndWeb
Service/SOA

SAP
/ ERP

Java Script
Generate

WOA

12

nexacro 開発環境

nexacro STUDIO・Drag & Drop 操作による
UI/UXデザイン（汎用的な操作性）
・記述言語は JavaScript（独自言語習得は不要）
・スタイルシート機能（デザインの登録・共通化）
・マルチレイアウトデザイン（異なる画⾯サイズにワンソースで対応）
・データバインディング（迅速な開発支援）・etc

13

豊富なコンポーネント
業務アプリケーションに必要なコンポーネントを豊富に提供
Grid

Tab

Tree View

Mask Edit

CheckBox

Spin

ListBoxEdit

TextAreaRadio

ButtonStatic

Combo

Image

Calendar

その他

他にも多数

各種ライブラリ
14

マルチスクリーンサイズ対応機能 ①
Position （自動リサイズ）
簡単な設定のみで画⾯レイアウトの自動リサイズが可能
実⾏画⾯

Left : 00%

Right : 00%• ％を設定すると画⾯サイズにあわせて、各コンポーネントが自動的にリサイズされる。
15

マルチスクリーンサイズ対応機能 ②
Multi Layout Manager （マルチレイアウト編集）
利用対象の端末（画⾯サイズ）に最適な複数のレイアウトを WYSIWYG で作成可能
MLM
多様なデバイスの画⾯サイズにあわせてソースコードを修正することなく、 UI
画⾯をカット & ペーストで変更可能。
開発期間の短縮と、メンテナンス費用の削減に貢献します。

デバイス解像度を自動把握し自動的に画⾯レイアウト表示

16マルチスクリーンサイズ対応機能 ③
STEP （画面分割編集）
画⾯レイアウトの分割配置
LayoutSTEP構成

12

実⾏画⾯

3Portrait

123

Landscape

パソコンやタブレット向けに作成した画⾯レイアウトを分割してスマートフォンにぴったり合う画⾯レイアウトを素早く作成可能。
17

開発生産性（ケーススタディ）
開発標準係数対比 約2倍*の開発生産性を実現▼ 弊社製品を使用した場合の開発生産性（実績）*業務処理の複雑性により変動します。

※ コーディング/単体テスト Ph.

種類

JavaScript

Server Java

JSP

画⾯XML
(自動生成)

Struts-Config

ステップ数 (KStep)

14.79

35.17

0.03

9.85

0.6

ファイル数 (File)

87406

172

9

期間4ヵ月(ヵ月)

開発工数（実績）

27人月

生産性(1人)(KStep／月)

4.02(コーディング3ヵ月：5名)▼ 標準的 Java/Web 系開発手法を用いた場合の開発生産性（係数）から算出された工数

55人月※ コーディング/単体テスト Ph.

▼ 装置管理システム

FP：1,368

アプリケーション開発規模（画⾯数：40TABLE数：43

機能数：約174）18

レガシー資産をUX化して活用するには？

・メインフレーム（COBOL）
・オフコン（AS/400・DB2）
・C/S（VB6.0）
・SAP ERP
・古くなった Web システム
19

レガシーマイグレーションの背景

メーカーサポートの打ち切り
⽼朽化によるリスクの増大
メンテナンス費用の高止まり

etc
20一般的なレガシーマイグレーションの方法
ラッピング

既存システムをそのまま残し、システム外部からアクセス可能なインターフェイスのみ新設する方法。根本的なビジネス・プロセスの再構築には不向きだが、短期間・低コストで業務課題を解決可能。

リホスト

レガシー資産を流用し、ホストマシンをオープン系プラットフォームに移⾏する方法。既存のビジネスロジックが活用でき、運用コストを抑制できる反面、最新技術への柔軟な対応、拡張性に課題も。

リライト

既存アプリケーションのソースコードを、オープンなプラットフォーム用にJava言語などで書き換える方法。根本的なビジネス・プロセスの再構築には不向きだが、⾃動変換ツールや⾃動生成ツールを用いることで開発期間の短縮や開発コストの抑制が可能。

リビルド

既存資産を流用せず、オープンなプラットフォーム上でアプリケーションを再構築する方法。ビジネス環境の変化に迅速に対応できる柔軟性と拡張性を持たせることも可能だが、ビジネスロジックの⾒直しや作り込みに膨大なコストと時間が必要。

21たとえば － メインフレーム（COBOL）
ClientApplication Server

Authentication
Manager

DeployService

Mashup Controller

ModelManager

レガシー COBOL

DataSetBuilderConnector

Protocol Listener

X-UP（データ連携ミドルウェア）

Cobol
Invoker

JAVA Class(Cobol Program)

JAVA Class(Cobol Program)

JAVA Class(Cobol Program)

画⾯上の操作のみでデータ連携が実現できるデータ連携基盤

BuilderBusiness
X-UPModel

Business
X-UP
Model

Business
X-UP
Model

Business
X-UP
Model

Business
X-UP
Model

COBOLソースをJava
クラスに自動変換

22たとえば － オフコン（AS/400・DB2）
不動産物件管理システム
TOBE

物件情報

バラバラだった情報を統合して１物件の情報すべてを１画⾯で表示させることで UX化を実現。
業務環境、業務効率を改善することができた。

基本情報
費目情報
水道情報
Java用のビジネスロジック
HTTP

X-API

JDBC
(Ver 8.2)

照会

ASIS
nexacro で開発した UI/UXWAS

AS/400(DB2)

ひとつの不動産物件の各種情報がバラバラに分かれており、参照や登録等の業務が煩雑となっていた。
23

たとえば － C/S（VB6.0）

XConverter *2015.1Q リリース予定
Microsoft Visual Basic 6.0で書かれたアプリケーションのソースコードを入⼒とし nexacro & Java に自動コンバート
デザイン

Wrapping共通関数• スタイル設定• イメージ変換• グローバル関数• メッソド/プロパティ

スクリプト分析変換規則• ボキャブラリ分岐• 構文分析

XConverter• マッチングデーブル

変換設定

処理ログ

• 変換対象選択• 変換要素選択• 変換結果• 変換内容24

たとえば － SAP ERPXCRO *2015.1Q リリース予定

SAP ERPの標準UI環境をフレキシブルに拡張可能なワンストップソリューション

1 Pre-Defined

Smart ERP
Plug & Play

Smart
ERP

Template(packaged)

Rapid(RDS)

2AutomationPlay

UI AutoGenerator
RFC

modifyBDC

CustomBuilt

3 Custom-built
RFC(UIPlatform)

ERP開発サーバODATA

UI Tool &F/W
画面

デザイン

画面

ロジック

連動
ロジック25たとえば － 既存 Web システム
既存のビジネスロジックをそのまま活用してレガシーWebをモバイル対応にApplication Server

ClientAction Contoroller
Request 受信（X-API）

リクエスト取得（パラメータ情報）

Back End

Action
既存ロジックはそのまま活用
ビジネスロジック

Request POST データ分析

Action 呼出
Result データ
JSP 呼出Form

JSP

データセット作成とレスポンス送信
nexacroEnvironment

送信用データを作成（X-API）

Response 送信（X-API）

BO
DAO(データ格納)Result データ

XSL(画面レイアウト)
既存UIは不使用
nexacroで新設

26

実演（ライブと動画）

DEMO
27

まとめ

レガシー資産をUX化して有効活用
・メインフレーム（COBOL）
・オフコン（AS/400・DB2）
・C/S（VB6.0）
・SAP ERP
・古くなった Web システム
28

まとめ

OSMU : One Source Multi Use
デスクトップからモバイルまで、異なるブラウザ、異なる端末で動作する
表現⼒豊かなアプリケーションを、一回（One Source）で開発する技術

29日本ネクサウェブ製品をよろしくお願いします！
日本ネクサウェブ株式会社
営業本部 本部⻑ 森 英樹
Mobile 080-5861-5060
hmori@nexaweb.com