Webアプリケーション自動生成ツール 　 Web Performer V1.5.0 ご紹介資料

JIMUC オープン・セミナー

超高速開発ツールWeb Performer Ver2.0ご紹介

2016年9月14日

ソリューション推進センター ソリューション企画第二部

杉本 達雄

IT部門の課題

対象業務

システム化の目的

必要な技術

人事

経理

コンピュータを活用する業務は限定的

業務効率化

ハード面

汎用機

ソフト面

COBOL

生産

対象業務

システム化の目的

必要な技術

人事

経理

ハード面

汎用機、サーバ、PC スマホ、タブレット・・・

企画

稟議

監査

生産

販売

部門別

全ての業務にシステムは必須

ソフト面

Windows,Linux,iOS Java,C#,PHP,ObjC

業務効率化

売上拡大

システム化の目的や、

知識・スキルが限定的

IT技術の急速な変化

目的の多様化と、

ビジネス戦略

システム設計

プログラマー

CSR

スペシャリスト

IT部門の役割り

◆ 現在と今後の、IT部門に求められる役割

このままでは役割を失うIT部門

⇒

部門横断型で各部門と“協業”するという社内での独特な立ち位置、先進技術のビジネス活用に関する目利き

を行う高度なノウハウとスキルを担う必要がある。

(％) 従来型の機能 は大きく縮小 ビジネス戦略は やや拡大 (*)出展：上記と同じ (*)出展：ITR 「IT投資動向調査2015」 『IT部門の役割（現在／今後）』 http://it.impressbm.co.jp/articles/-/11953?page=4

IT部門とユーザ部門の共創関係が重要

これまでは 「一方向」

システム開発におけるスタイルは、ユーザ部門との「

共創型

」へ

これからは 「共創型」

ユーザ部門（ユーザ企業）

IT部門（SI企業）

ユーザ部門

（ユーザ企業）

（

IT部門

SI企業）

IT

_{部門はユーザ部門の注文に応える役割。}

膨れるシステム仕様に納期を守って応える。

IT

ユーザ部門のIT投資への責任。

部門のビジネス戦略への参画。

アジャイル型のスピード開発

スピードを優先する中でも、

要望を取り入れて作りこんでいく、

失敗を恐れない開発

①要件定義

②開発

③確認

④追加

開発

⑤確認

開発者

開発の流れ

_①

まずは１～２時間のミーティングで要望概要や、

イメージを書き出し、 ユーザと認識を合わせる

②③

それらを元に作成した画面をユーザに触ってもらう

④⑤

さらに細かい要望やニーズを引き出してから、

ビジネスプロセスを使い機能を載せていく。

再度確認の繰り返し

■ 5 ■

アジャイル型のスピード開発

スピードを優先する中でも、

要望を取り入れて作りこんでいく、

失敗を恐れない開発

①要件定義

②開発

③確認

④追加

開発

⑤確認

開発者

開発の流れ

_①

まずは１～２時間のミーティングで要望概要や、

イメージを書き出し、 ユーザと認識を合わせる

②③

それらを元に作成した画面をユーザに触ってもらう

④⑤

さらに細かい要望やニーズを引き出してから、

ビジネスプロセスを使い機能を載せていく。

再度確認の繰り返し

開発ツールを利用する

方法が有効な手段

開発ツールの現状と予測

出展：@IT「業務アプリにおける次世代テクノロジの3大トレンド」 現在の業務アプリの課題 http://www.atmarkit.co.jp/ait/articles/1404/21/news013.html

2009

2016～

リーマンショック

2012/3/15

「日経コンピュータ」

特集：超高速開発

コスト削減目的での需要が高まる

攻めのIT投資

ニーズも

ビジネスに乗り遅れない

迅速なシステム開発が必要

出展：2015年2月18日 ガートナー ジャパン株式会社 プレス・リリース記事 http://www.gartner.co.jp/press/html/pr20150218-01.html

■ガートナー発表 アプリケーション戦略

2018年までに、日本の大企業における基幹

系カスタム・アプリケーション開発プロジェクトの

40%では、プログラム自動生成ツールを利用

した開発の自動化・効率化を行うようになる。

出展：2014年11月17日 IDC Japan株式会社 国内エンタープライズWeb／モバイルアプリケーション開発ソフトウェア市場） http://www.idcjapan.co.jp/Press/Current/20141117Apr.html

■市場成長率

Webアプリ開発ツールは、ソフトウェア市場全体

の15%程度。年間平均成長率は8％程度。

2013/1/10

「日経コンピュータ」

特集：軽い内製

2013/8/6

超高速開発コミュニティ

発足

■ 7 ■

導入実績

「Web Performer」は2005年に販売を開始し、大手、中堅を問わず企業内の開発部門やSIベンダーなど様々な開発

分野で導入520社、ライセンス650本以上の導入実績を誇ります。

(2016年7月1日時点)

2008上2008下2009上2009下2010上2010下2011上2011下2012上2012下2013上2013下2014上2014下2015上2015下2016上 2008年 2009年 2010年 マルチ ブラウザ 対応 多言語 対応 エディタGUI 対応 スマート デバイス 対応 バッチ 生成 対応 画面 遷移図 対応 HTML5 対応

ライセンス売上推移

累積導入社数

200

社

520

社

650

本

2012年 2013年 2014年 2015年

100

社

2016年 データ グリッド対応 グラフ表示

■ 9 ■

導入実績

システムインテグレータ様

ユーザ企業様

順不同

累計導入ライセンス

650

本

・サッポロビール株式会社

・日本通運株式会社

・京セラクリスタルデバイス株式会社

・三井住友海上火災保険株式会社

・株式会社東京商工リサーチ

・株式会社ソディック

・清水建設株式会社

・日機装株式会社

・大鵬薬品工業株式会社

・とぴあ浜松農業協同組合

・科研製薬株式会社

・東京航空計器株式会社

・千葉ガス株式会社

・東急不動産株式会社

・株式会社日立ソリューションズ

・新日鉄住金ソリューションズ株式会社

・西日本コンピュータ株式会社

・株式会社オーユーシステム

・株式会社ユニットシステムエンジニアリング

・

AJS株式会社

・株式会社静岡情報処理センター

・東京東信用金庫

・ミドリ安全株式会社

・株式会社

JSP

・日新加工株式会社

Webアプリ自動生成ツール

起案者 承認者 承認者 条件分岐

業務用

Webアプリケーション

JavaScript

JSP

Servlet

JavaBeans

基本設計情報に基づきリポジトリを登録

自動生成

結合

実装要件

業務要件

自動生成の概念

スキーマ

情報

データモデル

_（DM）

画面

情報

業務

ロジック

ビジネスプロセス

（BP）

Safari

Firefox

Chrome

IE

アプリケーションを

ノンプログラミング開発

マルチブラウザ

スマートデバイス

JQuery

Mobile

バッチアプリケーション

自

動

生

成

RedHat

AIX

Solaris

Windows

IBMi

CentOS

自動生成時に選択

【HTML4 ・ HTML5】

（

PC）

（

MOBILE）

入出力

（IO)

GUIエディタによる開発

•

画面のレイアウトの設定をグラフィカルに行い、プレビュー参照も可能

•

定義内では、カーソルの移動順や項目間の参照関係を確認

ドラックアンドドロップ

によるレイアウト定義

レイアウトエディタ画面

_{プレビュー画面}

CSVデータに

よるテストデータ表示

デザインテーマの切替や

設計を補助するツール群

項目の参照関係や

カーソルの移動順表示

表形式による画面設定

同期

双方向の定義が可能

■ 13 ■

操作性の良いWeb画面を自動生成

データ入力に伴う

自動計算

Enterキーや

フル桁キーで

自動カーソル遷移

データに応じて表示項

目切り替え・データ取得

データ候補を

表示する

サジェスト機能

Ajaxによる

画面項目の

部分再描画

•

画面表示レスポンスが速く、操作性の高いアプリケーションの自動生成を実現

カレンダー機能

画面遷移図出力機能

【入出力定義】

【画部システム画面】の

「入出力名」「ロール」

「サイズ」「位置」等の変更

【画面遷移アクション】

「アクション名」「パラメータ」

「ロール」等の変更

画面遷移図エディタ上の

各要素の変更・修正・整列

未定義の入出力の追加

画面遷移アクションの追加

外部システム画面の追加

メモの追加 等

画像ファイル出力

画面をクリックすると

対象画面の定義へ

•

画面遷移図上で新規画面追加、入出力定義の「入出力名」「ロール」等変更可能

•

入出力定義上での変更も、画面遷移図にも反映

■ 15 ■

Web Performer 選ばれる3つのポイント

①生産性の向上

③信頼性への取組み

②保守性の向上

生産性の向上： 超高速開発

出典： StatCounter Global Stats

ウォーターフォール型Javaスクラッチ開発工程

システム フロー DBテーブル レイアウト 画面 レイアウト 項目設計 機能設計 オブジェクト 設計 クラス図 シーケンス 図 等 等

簡略

従来通り

プログラマーの

コーディング作業

リポジトリ定義

従来通り

結合テスト 仕様書

機能テスト

結合テスト

運用テスト

性能テスト

等

システムテスト 仕様書

Web Performerによる開発工程

詳細

設計

基本設計

単体

テスト

結合

テスト

システム

テスト

単体テスト

仕様書

基本設計

詳細設計

プログラミング

単

体

結合

テスト

システム

テスト

WP

簡略

手戻り

実装工数

生産性の向上： 超高速開発

•

開発工数比較

顧客名

システム名

開発

期間

(バッチ数)

画面数

_WPの場合

_{スクラッチ開発の}

システム規模

場合

比率

A社

業務パッケージシステム

3か月

50

6人月

20人月

3.33

B社

製品管理システム

3か月

50

（10）

9人月

20人月

2.22

C社

予算管理システム

5か月

80

15人月

58人月

3.87

D社

IT資産管理システム

7か月

108

（24）

30人月

77人月

2.57

E社

人事給与システム

22か月

1050

（550）

400人月

1659人月

4.15

※ スクラッチ開発の工数は、以下の指標を元に算出

ユーザー企業 ソフトウェアメトリックス －要点ハンドブック－

一般財団法人 日本情報システム・ユーザ協会(JUAS)

スクラッチ開発と比較して

2倍から4倍の生産性を実現

！

■ 19 ■

生産性の向上： 習得が容易

•

習得が容易（Javaスキル不要）



オブジェクト指向を意識することなく開発可能



業務知識とDB設計知識でWebアプリケーションを開発

設計書情報を

リポジトリに登録するだけ

（ご参考）ご導入ユーザ様の習得期間

リポジトリ

73%

のお客様が

2か月以内

に

Web Performerの操作を習得しています。

第5回 Web Performer Developers Meeting（2013年3月6日開催）顧客アンケート結果より

言語習得に比べると楽

COBOL技術者の私が

Webアプリ開発者になれた

ユーザの声

HTML

オブジェクト指向

Java

集まらない

Java技術者を

雇うよりも効率的

Web Performer 選ばれる3つのポイント

①生産性の向上

③信頼性への取組み

②保守性の向上

保守性の向上：容易なバージョンアップ

Windoｗs 7

IE11対応

アプリケーション

過去の生成アプリ

定義情報はそのまま

Windoｗs 10

MS Edge対応

アプリケーション

•

稼働環境のバージョンアップ対応をWeb Performerで吸収



開発したアプリケーションはWeb Performerをバージョンアップし

再生成すれば新しい環境に対応



OSやブラウザのサポート切れ問題にもスムーズに対応可能

新しい生成アプリ

定義情報

構成が わからない

保守性の向上：属人性を排除した開発

ドキュメント管理，

ソース管理が不十分

開発プロセス，

ドキュメント・コーディング

規約の習熟

頻繁な要員異動により、

技術やノウハウが蓄積し

ない

改修によるシステム

影響度調査

項目属性定義

選択リスト定義

演算や表示/非表示定義

機能別に定義ルールが明確化されているため、

Web Performerで定義した内容は開発者に依存しない

【開発チームの問題点・悩み】

WebPerformer の採用

•

少ない入力工数(プロパティベースの設定)にてWebアプリ構築が可能

•

定義ルールの明確化による開発・改修が容易

■ 23 ■

Web Performer 選ばれる3つのポイント

①生産性の向上

③信頼性への取組み

信頼性への取組み：純国産製品

•

製造から販売、サポートを同じ会社で担当

製品開発

企画/

販売

サポート

問合せ回答

サポート

サイト

反映

新たなニーズに

対応する稼働環境

採用

取込み

市場

ニーズ

ユーザ

要望

セキュリティリスク

対応

機能追加/

改善要望

_{製品へ反映}

_調査回答

機能追加/改善要望

調査依頼

契約状況

■ 25 ■

SQL インジェクション SQLエラーの 発生 クロスサイトス クリプティング 改行コード インジェクション CSRF （クロスサイ ト・リクエスト・ フォージェリ） セッションID の保持方法 Cookieの 扱い ディレクトリ インデックス

信頼性への取組み： セキュリティリスク対策

•

外部機関によるセキュリティ対策を実施

信頼性への取組み：独自ランタイム不要

サーバ

クライアント

ユーザインターフェース部

Spring Framework

アプリケーション

DB

画面制御 _{入出力情報}画面 業務ロジック 駆動 画面表示

JSP

ビジネス

プロセス部

アクセス部

データ

Servlet

JPA

業務ロジック

アプリケーション

DB

ブラウザ

CSS

JavaScript

JavaBeans

Pure Javaのアプリケーションを自動生成

※自動生成されるソースコードの可読性にも配慮

■ 27 ■

サーバ OS Windows Server 2008/2008 R2/2012/2012 R2、

AIX V6.1/V7.1、Solaris 10/11、RedHat EL5/6/7、

IBM i V6R1/V7R1/V7R2、CentOS 5/6/7

データベース Oracle 11g/11g R2/12c R1、SQL Server 2008/2008 R2/2012/2014、 MySQL 5.6/5.7、PostgreSQL 9.3/9.4、DB2 v9.7/v10.1/v10.5、

DB2 400 V6R1/V7R1/V7R2

APサーバ WebSphere 7.0/8.0/8.5/8.5.5、Oracle Weblogic Server 11g 10.3.4以降 /12c 12.1.1以降、Tomcat 7.0/8.0、uCosminexus Application Server Standard V9.70※3 クライ アント OS_{ツール※1} Windows 7/8.1/10_Eclipse 4.2/4.3/4.4/4.5 APサーバ Tomcat 7.0/8.0 Java※2 JDK6/7/8 ＊ 推奨環境 ： ［CPU］Core 2 Duo2.13GHz以上 ［メモリ］3.0GB以上 ［Disk］空き容量3.0GB以上

Web Performer V2.0.0 動作環境

クライ アント アプリタイプ ※4 PC スマートデバイス

デバイスタイプ※5 PC iPad iPhone,iPad Android

OS Windows 7/8.1/10 Mac OS XV10.7/V10.8/ V10.9/V10.10 /V10.11 i OS 7/8/9 i OS 7/8/9 Android 4.1/4.2/ 4.3/4.4/ 5.0 ブラウザ Internet Explorer 11.0、 Firefox、 Chrome、 Microsoft Edge Safari

6/7/8/9 モバイル版Safari モバイル版Safari モバイル版Chrome

＊クライアント推奨環境： ［CPU］Core 2 Duo2.13GHz以上［ メモリ］3.0GB以上 ※3 動作に際しての留意点等に関しましては別途メーカまでお問合せください。 ※4 PCとスマートデバイスを併用する場合、アプリタイプを分けてそれぞれ画面を作成してください。 ※5 ワークフローオプションのクライアント環境は、ワークフローオプション稼動環境をご確認ください。 ※1 Eclipseの推奨バージョンは「4.4.2以上」となります。 ※2 JDK8に対応したTomcatのリビジョンは、「8.0.1以 上」、「7.0.53以上」となります。

Web Client

動作環境① AIX利用例

OS ： AIX

Web Sphere

Webアプリ

■ 29 ■

DB2

RDBMS

Web Client

動作環境② IBM i利用例

OS ： Windows Server etc

Web Server

Web Sphere , Tomcat etc・・・

Webアプリ

OS ： V6.1/V7.1/V7.2

DB ：DB2 for i

_DB

5250 Emulator

OS ： Windows

5250 Client

RPG Application

Web Sphere

Webアプリ

高機能な

UIを持つアプリを実現



データグリッド

_

_{グラフ表示}

スマートデバイス対応 イメージ

入力画面

一覧画面

親子画面

•

Unicodeを採用しているため、初期設定済みの

「日本語、英語、中国語（簡体字）」以外の言語にも対応可能。

•

エンドユーザのブラウザ言語設定に合わせて、自動切り替え可能。

多国語対応 イメージ

その他言語

・・・

日本語

中国語

英語

Webサービス連携

PC画面

_モバイル

アプリケーション層(ビジネスプロセス)

プレゼンテーション層(入出力)

HTML Webサービス_{プロバイダ}

Webブラウザ

データ層

(データモデル)

RDBMS

Webサービス

業務ルール

SOAP SOAP or REST

■ 35 ■

帳票ツール連携

•

imageWARE Form Manager連携



キヤノンが提供する帳票ツールとの連携



Web Performer側に連携用の機能が標準機能として

用意しており、

シームレスな連携

が可能

•

JasperReports連携



オープンソースのJavaレポーティングエンジン



Web Performerと連携する場合

拡張定義

が必要

•

エクセルダウンロード機能による帳票出力



エクセル出力時に帳票形式で出力するよう



ダウンロード用のテンプレートシートを作成。



マクロを組込むこと

でグラフ等の表示も可能

imageWARE Form Manager

_連携

•

システム構成

Tomcat

FMServlet

（サーバ機能）

Form Editor

アプリケーション

(Eclipse)

サーバ

任意のフォルダ

帳票

_【印刷】

ボタン

帳票

imageWARE

Form Manager定義

起動スクリプト

（標準機能）

帳票作成

印刷設定

■ 37 ■

JasperReports連携

•

システム構成

Tomcat

iReport

アプリケーション

(Eclipse)

※iReportインストール時に

インストールされたjarファイルを使用

サーバ

任意のフォルダ

帳票

_【印刷】

ボタン

帳票

JasperReports

向け定義

帳票作成

作成＆印刷設定

JasperReports

サーブレット

※サンプルあり

Eclipse

作成

Servlet呼出

（JavaScript）

※サンプルあり

Excel ダウンロード機能による帳票出力

•

システム構成

Tomcat

Excel

アプリケーション

(Eclipse)

サーバ

任意のフォルダ

【印刷】

ボタン

マクロ付き帳票作成

帳票

表示データを

EXCEL出力し

マクロが帳票に配置

帳票XLS

■ 39 ■