2011年2月25日　成果発表会プレゼン資料

(1)

Web

アプリケーション開発における画面モック

アップを利用した画面仕様書およびテスト仕様書

の自動生成と設計作業の効率化の提案

第第第第262626回26回回回ソフトウェア品質管理研究会ソフトウェア品質管理研究会ソフトウェア品質管理研究会ソフトウェア品質管理研究会第第第第555分科会5分科会分科会分科会ソフトウェアテストソフトウェアテストソフトウェアテストソフトウェアテスト 2011 2011 2011 2011年年年2年22月2月月月25252525日日日日主査主査主査主査秋山秋山秋山秋山浩一浩一浩一浩一（富士ゼロックス株式会社（（（富士ゼロックス株式会社富士ゼロックス株式会社）富士ゼロックス株式会社）））副主査副主査副主査副主査奥村奥村奥村奥村有紀子有紀子有紀子有紀子（有限会社デバッグ工学研究所（（（有限会社デバッグ工学研究所有限会社デバッグ工学研究所）有限会社デバッグ工学研究所）））副主査副主査副主査副主査奥村奥村奥村奥村有紀子有紀子有紀子有紀子（有限会社デバッグ工学研究所（（（有限会社デバッグ工学研究所有限会社デバッグ工学研究所）有限会社デバッグ工学研究所）））リーダリーダリーダリーダ坂本坂本坂本坂本一憲一憲一憲一憲（早稲田大学（（（早稲田大学早稲田大学早稲田大学情報理工学専攻情報理工学専攻情報理工学専攻情報理工学専攻））））東海東海東海東海政治政治政治政治（（（（株式会社株式会社株式会社NTT株式会社NTTデータNTTNTTデータデータCCSデータCCSCCSCCS））））村上村上村上村上裕子裕子裕子裕子（（（（株式会社セゾン情報システムズ株式会社セゾン情報システムズ株式会社セゾン情報システムズ）株式会社セゾン情報システムズ）））宮原宮原宮原宮原里枝里枝里枝里枝

目

次

1.

1. Web

Web

開発の現状と問題点

2.

2. 本研究の目的

本研究の目的

3.

3. 提案手法

提案手法

4.

4. 検証結果

検証結果

4.

4. 検証結果

検証結果

5.

5. まとめ

まとめ

(2)

1.

1. Web

Web

開発の現状と問題点

3

1.1

1.1 Web

Web

アプリケーション開発の現状

Web

アプリケーションの開発期間

15%

42%

2006

2006年

年

2009

2009年

2009

年

短期間での開発が増大

(2006

(2006年の

年の

年の15%

15%

15%→

→2009

→

2009

2009年には

年には

年には42%)

42%)

(3)

1.1

1.1 Web

Web

アプリケーション開発の現状（続き）

Web

アプリケーション開発プロセス

− 要件定義 − 画面モックアップ作成画面モックアップ作成画面モックアップ作成画面モックアップ作成

開発プロセスの早い

段階で画面モック

アップを作成

※画面モックアップ（画面モック） HTML等を用いてUIの外観を試作したプロトタイプ要求分析要求分析要求分析要求分析設計設計設計設計 − 画面モックアップ作成画面モックアップ作成画面モックアップ作成画面モックアップ作成 − 外部設計 − 内部設計 − プログラム実装 − 単体テスト 5 したプロトタイプ開発開発開発開発テストテストテストテスト − 単体テスト − 結合テスト − 総合テスト画面モックを作成する目的画面モックを作成する目的画面モックを作成する目的画面モックを作成する目的

1.1

1.1 Web

Web

アプリケーション開発の現状（続き）

画面モック画面モック画面モック画面モック −ユーザ関与の増大と改善ユーザ関与の増大と改善ユーザ関与の増大と改善ユーザ関与の増大と改善 −ユーザ関与の増大と改善ユーザ関与の増大と改善ユーザ関与の増大と改善ユーザ関与の増大と改善 − 早期に画面動作確認が可能 − ユーザのフィードバックと要求を獲得 − ユーザとの誤解と対話不足が解消 −開発フェーズの効率化開発フェーズの効率化開発フェーズの効率化開発フェーズの効率化 − 画面標準化ドキュメントの策定を支援 − 画面標準化ドキュメントの策定を支援 − 実装に画面モックを流用可能

(4)

−画面仕様書画面仕様書画面仕様書画面仕様書 − 各UIコンポーネントの種別や特徴を記述したドキュメント

画面仕様書とテスト仕様書

1.1

1.1 Web

Web

アプリケーション開発の現状（続き）

− 各UIコンポーネントの種別や特徴を記述したドキュメント − 例）数字入力可能かどうか、DB更新情報やDB参照元 −テスト仕様書テスト仕様書テスト仕様書テスト仕様書 − テストを実施する際に検証すべき内容を記述したドキュメント − テストを実施する際に検証すべき内容を記述したドキュメント − 例）タイトルの字種が全角文字形式であるか検証（12行目） 7 −設計者と実装者の認識を合わせる大切なドキュメント −高品質なソフトウェア開発には不可欠 −常に最新の情報が記述されている事

画面仕様書とテスト仕様書

1.2

1.2 Web

Web

アプリケーション開発の問題点

−常に最新の情報が記述されている事しかし、しかし、しかし、しかし、

短期間での開発が増大

−仕様設計やテスト設計に掛かる工数を削減する事が多い −画面仕様書やテスト仕様書が更新されない

−

画面仕様書やテスト仕様書が作成されない

−

作成されたとしてもトレーサビリティが維持されない

(5)

画面仕様書やテスト仕様書が作成されないので、

テストが仕様と実装の突合せにならない

1.2

1.2 Web

Web

アプリケーション開発

アプリケーション開発の問題点（続き）

の問題点（続き）

作成する場合作成する場合作成する場合作成する場合作成しない場合作成しない場合作成しない場合作成しない場合画面画面画面画面仕様書仕様書仕様書仕様書テストテストテストテスト仕様書仕様書仕様書仕様書画面画面画面画面モックモックモックモック作成する場合作成する場合作成する場合作成する場合作成しない場合作成しない場合作成しない場合作成しない場合画面画面画面画面モックモックモックモック画面画面画面画面仕様書仕様書仕様書仕様書テストテストテストテスト仕様書仕様書仕様書仕様書画面仕様書画面仕様書画面仕様書画面仕様書からからからからテストケースでテストテストケースでテストテストケースでテストテストケースでテスト実装画面実装画面実装画面実装画面からからからから作成作成作成作成テストケースでテストテストケースでテストテストケースでテストテストケースでテスト 9 実装実装実装実装画面画面画面画面テスト実施テスト実施テスト実施テスト実施テストテストテストテストケースケースケースケース実装実装実装実装画面画面画面画面仕様書仕様書仕様書仕様書テストテストテストテストケースケースケースケーステスト実施テスト実施テスト実施テスト実施仕様書仕様書仕様書仕様書からからからから作成作成作成作成したしたしたしたテストケースでテストテストケースでテストテストケースでテストテストケースでテスト作成作成作成作成したしたしたしたテストケースでテストテストケースでテストテストケースでテストテストケースでテスト

画面仕様書やテスト仕様書を作成しても、

トレーサビリティが維持されない

1.2

1.2 Web

Web

アプリケーション開発

アプリケーション開発の問題点（続き）

の問題点（続き）

仕様変更仕様変更仕様変更仕様変更変更反映変更反映変更反映変更反映反映なし反映なし反映なし反映なし −UIUIUIUIの仕様変更の頻度が高いの仕様変更の頻度が高いの仕様変更の頻度が高いの仕様変更の頻度が高い − 実装して初めて分かる問題があるため −人的ミスによるトレーサビリティの欠如人的ミスによるトレーサビリティの欠如人的ミスによるトレーサビリティの欠如人的ミスによるトレーサビリティの欠如例）伝達ミスにより仕様変更が一部の仕様書に反映されない仕様変更仕様変更仕様変更仕様変更変更反映変更反映変更反映変更反映伝達伝達伝達伝達伝達ミス伝達ミス伝達ミス伝達ミス反映なし反映なし反映なし反映なし

欠陥の原因

画面画面画面画面モックモックモックモックテストテストテストテスト仕様書仕様書仕様書仕様書画面画面画面画面仕様書仕様書仕様書仕様書

(6)

2.

2. 本研究の目的

本研究の目的

11

2.1

2.1 研究目的

研究目的

画面画面画面画面モックモックモックモックテストテストテストテスト仕様書仕様書仕様書仕様書画面画面画面画面仕様書仕様書仕様書仕様書作成されない作成されない作成されない作成されないトレーサビリティが維持されないトレーサビリティが維持されないトレーサビリティが維持されないトレーサビリティが維持されないテストテストテストテスト仕様書仕様書仕様書仕様書画面画面画面画面仕様書仕様書仕様書仕様書モックモックモックモック仕様書仕様書仕様書仕様書仕様書仕様書仕様書仕様書画面画面画面画面モックモックモックモックテストテストテストテスト仕様書仕様書仕様書仕様書画面画面画面画面仕様書仕様書仕様書仕様書提案手法の導入提案手法の導入提案手法の導入提案手法の導入トレーサビリティの維持トレーサビリティの維持トレーサビリティの維持トレーサビリティの維持作成作成作成作成テストテストテストテスト仕様書仕様書仕様書仕様書画面画面画面画面仕様書仕様書仕様書仕様書仕様書仕様書仕様書仕様書仕様書仕様書仕様書仕様書モックモックモックモック仕様書仕様書仕様書仕様書仕様書仕様書仕様書仕様書

画面仕様書およびテスト仕様書

画面仕様書およびテスト仕様書が

が

が利用されるプロセスの

利用されるプロセスの

利用されるプロセスの構築

利用されるプロセスの

構築

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

(7)

2.2

2.2 提案手法

提案手法

画面モックから画面仕様書およびテスト仕様書の自動生成画面モックから画面仕様書およびテスト仕様書の自動生成画面モックから画面仕様書およびテスト仕様書の自動生成画面モックから画面仕様書およびテスト仕様書の自動生成 −画面モックから画面モックから画面モックから画面モックから画面仕様書画面仕様書画面仕様書画面仕様書の自動生成の自動生成の自動生成の自動生成

期待効果

−自動生成された画面自動生成された画面自動生成された画面自動生成された画面仕様書から仕様書から仕様書から仕様書からテストテストテストテスト仕様書の自動生成仕様書の自動生成仕様書の自動生成仕様書の自動生成自動生成された画面仕様書およびテスト仕様書の更新自動生成された画面仕様書およびテスト仕様書の更新自動生成された画面仕様書およびテスト仕様書の更新自動生成された画面仕様書およびテスト仕様書の更新 −手入力による詳細情報の追記手入力による詳細情報の追記手入力による詳細情報の追記手入力による詳細情報の追記 13 −画面仕様書、テスト仕様書の自動生成かつ工数の削減画面仕様書、テスト仕様書の自動生成かつ工数の削減画面仕様書、テスト仕様書の自動生成かつ工数の削減画面仕様書、テスト仕様書の自動生成かつ工数の削減 −自動生成による一定の品質を保持した仕様書作成自動生成による一定の品質を保持した仕様書作成自動生成による一定の品質を保持した仕様書作成自動生成による一定の品質を保持した仕様書作成 −詳細情報の追記による、品質の高い仕様書の作成詳細情報の追記による、品質の高い仕様書の作成詳細情報の追記による、品質の高い仕様書の作成詳細情報の追記による、品質の高い仕様書の作成 −自動生成によるトレーサビリティの維持自動生成によるトレーサビリティの維持自動生成によるトレーサビリティの維持自動生成によるトレーサビリティの維持

3.

3. 提案手法

提案手法

(8)

3.1

3.1 従来プロセスと提案プロセスの比較

従来プロセスと提案プロセスの比較

画面画面画面画面モックモックモックモック提案プロセス提案プロセス提案プロセス提案プロセス従来プロセス従来プロセス従来プロセス従来プロセス画面画面画面画面モックモックモックモック画面画面画面画面仕様書仕様書仕様書仕様書テストテストテストテスト仕様書仕様書仕様書仕様書画面画面画面画面仕様書仕様書仕様書仕様書テストテストテストテスト仕様書仕様書仕様書仕様書仕様仕様仕様仕様とととと実装実装実装実装のののの食食食食いいいい違違違違いをいをいをいを検証可検証可検証可検証可仕様仕様仕様仕様とととと実装実装実装実装のののの食食食食いいいい違違違違いをいをいをいを検証不可検証不可検証不可検証不可画面仕様書生成部画面仕様書生成部画面仕様書生成部画面仕様書生成部テスト仕様書生成部テスト仕様書生成部テスト仕様書生成部テスト仕様書生成部テストのテストのテストのテストのテストのテストのテストのテストの観点から観点から観点から観点からプロセスプロセスプロセスプロセス改善改善改善改善 15 実装実装実装実装画面画面画面画面テスト実施テスト実施テスト実施テスト実施テストテストテストテストケースケースケースケース実装実装実装実装画面画面画面画面仕様書仕様書仕様書仕様書テストテストテストテストケースケースケースケーステスト実施テスト実施テスト実施テスト実施仕様書仕様書仕様書仕様書検証不可検証不可検証不可検証不可観点なし観点なし観点なし観点なし観点から観点から観点から観点から分析分析分析分析改善改善改善改善 1. 1. 1. 1. 画面モック（画面モック（画面モック（画面モック（HTMLHTMLHTMLHTMLファイル）の解析ファイル）の解析ファイル）の解析ファイル）の解析 − タグの解析：タグの解析：タグの解析：タグの解析：UIUIUIUIコンポーネントの種類コンポーネントの種類コンポーネントの種類コンポーネントの種類 − テキストボックス、ラベル、リンクなど

3.2

3.2 画面仕様書生成部

画面仕様書生成部

HTML HTML HTML HTML タグ＆タグ＆タグ＆タグ＆コメントコメントコメントコメント画面画面画面画面モックモックモックモック − テキストボックス、ラベル、リンクなど − タグの種類やtype属性の値で判別 − コメントの解析：コメントの解析：コメントの解析：コメントの解析： UIUIUIUIコンポーネントの特徴コンポーネントの特徴コンポーネントの特徴コンポーネントの特徴 − タグの直前に定義した構文のコメントで記述 − 例：最大文字数が例：最大文字数が例：最大文字数が例：最大文字数が555文字のテキストボックス5文字のテキストボックス文字のテキストボックス文字のテキストボックス <! <! <!

<INPUT type="text">--><INPUT type="text">><INPUT type="text">><INPUT type="text">

CSV CSV CSV CSV 画面画面画面画面仕様書仕様書仕様書仕様書モックモックモックモック画面仕様書生成部画面仕様書生成部画面仕様書生成部画面仕様書生成部 <! <! <!

<INPUT type="text">--><INPUT type="text">><INPUT type="text">><INPUT type="text"> 2. 2. 2. 2. 解析結果から画面仕様書を自動生成解析結果から画面仕様書を自動生成解析結果から画面仕様書を自動生成解析結果から画面仕様書を自動生成

→

作成コストの削減、人的ミスの防止

CSV CSV CSV CSV 各各各各UIUIUIUIコンポーネントのコンポーネントのコンポーネントのコンポーネントの情報が記載された表情報が記載された表情報が記載された表情報が記載された表

(9)

3.3

3.3 テスト仕様書生成部

テスト仕様書生成部

−画面仕様書を解析し、テスト仕様書を生成する画面仕様書を解析し、テスト仕様書を生成する画面仕様書を解析し、テスト仕様書を生成する画面仕様書を解析し、テスト仕様書を生成する −画面仕様書から情報を読み取り、有効系の検証内容を生成

テスト仕様書生成ツール

CSV XLS テストテストテストテスト仕様書仕様書仕様書仕様書生成部生成部生成部生成部テストテストテストテスト仕様書仕様書仕様書仕様書画面画面画面画面仕様書仕様書仕様書仕様書 −画面仕様書から情報を読み取り、有効系の検証内容を生成 −画面モックに無い無効系の動作を画面仕様書に手動修正で追記し、それを元にテスト仕様書を完成 17 D3 D3 D3 D3

3.3

3.3 テスト仕様書生成部

テスト仕様書生成部

D1 D1D1 D1

画面モックや画面仕様書の変更に対応できる

P2P2P2P2 必要に応じて必要に応じて必要に応じて必要に応じてさらに手動修正さらに手動修正さらに手動修正さらに手動修正 Modify D3 D3 D3 D3 画面仕様書画面仕様書画面仕様書画面仕様書を変更を変更を変更を変更 D4 D4 D4 D4 新テスト仕様書を新テスト仕様書を新テスト仕様書を新テスト仕様書を生成生成生成生成 P1 P1 P1 P1 抽出分を反映抽出分を反映抽出分を反映抽出分を反映 D2 D2 D2 D2 画面モック画面モック画面モック画面モックを変更を変更を変更を変更 D1 D1 D1 D1 テスト仕様書テスト仕様書テスト仕様書テスト仕様書を手動修正を手動修正を手動修正を手動修正 Modify P1.1.1 P1.1.1 P1.1.1 P1.1.1 手動修正前手動修正前手動修正前手動修正前 P1.1.2 P1.1.2 P1.1.2 P1.1.2 手動修正後手動修正後手動修正後手動修正後 P1.1 P1.1P1.1 P1.1 差分抽出差分抽出差分抽出差分抽出手動で加えた修正を維持しながら、手動で加えた修正を維持しながら、手動で加えた修正を維持しながら、手動で加えた修正を維持しながら、テスト仕様書のトレーサビリティをテスト仕様書のトレーサビリティをテスト仕様書のトレーサビリティをテスト仕様書のトレーサビリティを

(10)

4.

4. 検証結果

検証結果

19

4.1

4.1 従来手法と提案手法の比較実験

従来手法と提案手法の比較実験

画面仕様書

従来手法

画面仕様書

提案手法

− 新規

新規

で

手入力作成

した

時の所要時間

− 保守

保守

保守で

で

で変更箇所を手入

変更箇所を手入

テスト仕様書を

手作業で作成

− 新規

新規

で

自動生成

した時

の所要時間

− 保守

保守

保守で

保守

で

で変更箇所を自動

変更箇所を自動

テスト仕様書を

画面モックから自動生成

比較実験比較実験比較実験比較実験

− 保守

保守

保守で

で

で変更箇所を手入

変更箇所を手入

力で再作成

力で再作成した時の所

した時の所

要時間

− 変更箇所の影響

変更箇所の影響

数確認

− 保守

保守

保守で

保守

で

で変更箇所を自動

変更箇所を自動

で再生成

で再生成した時の所要

した時の所要

時間

− 変更箇所の影響

変更箇所の影響

数確認

(11)

4.2

4.2 画面仕様書生成

画面仕様書生成

–

所要時間比較

70 80 90 分 20 30 40 50 60 70

新規

保守

75%

の時間短縮

21 0 10 20

従来手法

提案手法

手入力自動生成

4.3

4.3 テスト仕様書生成

テスト仕様書生成

–

所要時間比較

120 140 分 40 60 80 100

新規

保守

50%

の時間短縮

0 20

従来手法

提案手法

(12)

5.

5. まとめ

まとめ

23

5.1

5.1 問題解決

問題解決

問題

1

1 画面仕様書とテスト仕様書が作成されない

画面仕様書とテスト仕様書が作成されない

問題

問題1

1

1 画面仕様書とテスト仕様書が作成されない

画面仕様書とテスト仕様書が作成されない

提案手法提案手法提案手法提案手法により、画面仕様書生成においてにより、画面仕様書生成においてにより、画面仕様書生成においてにより、画面仕様書生成において 75% 75% 75% 75% の時間短縮の時間短縮の時間短縮の時間短縮提案手法提案手法提案手法提案手法により、テスト仕様書生成においてにより、テスト仕様書生成においてにより、テスト仕様書生成においてにより、テスト仕様書生成において50505050% % % % の時間短縮の時間短縮の時間短縮の時間短縮

大幅な時間短縮が可能となったので

容易に仕様書が作成できるようになった

(13)

5.1

5.1 問題解決

問題解決

問題

2

2 画面仕様書

画面仕様書

画面仕様書と

と

とテスト仕様書のトレーサビリティ

テスト仕様書のトレーサビリティが

テスト仕様書のトレーサビリティ

が

が維持

維持

維持されない

されない

問題

問題2

2

2 画面仕様書やテスト仕様書を作成しても、

画面仕様書やテスト仕様書を作成しても、

トレーサビリティが維持されない

提案手法では人手で加えた修正を維持した状態で提案手法では人手で加えた修正を維持した状態で提案手法では人手で加えた修正を維持した状態で提案手法では人手で加えた修正を維持した状態で再生成され再生成され再生成され再生成され影響も見られなかった影響も見られなかった影響も見られなかった影響も見られなかった 25

保守コストを低減したうえで

トレーサビリティが確保できるようになった

5.2

5.2 残課題

残課題

実業務への適用実業務への適用実業務への適用実業務への適用 − 業務プロセス改善ツールの実業務へのツールの実業務へのツールの実業務へのツールの実業務への導入と効果の検証導入と効果の検証導入と効果の検証導入と効果の検証 − 業務プロセス改善 − ツールのブラッシュアップ自動生成可能な自動生成可能な自動生成可能な自動生成可能な仕様書の現場導入仕様書の現場導入仕様書の現場導入仕様書の現場導入導入と効果の検証導入と効果の検証導入と効果の検証導入と効果の検証仕様書の自動生成実業務への適用仕様書の自動生成実業務への適用仕様書の自動生成実業務への適用仕様書の自動生成実業務への適用 − 画面モックから画面仕様書を自動生成 − 画面仕様書からテスト仕様書の自動生成

2011年2月25日 成果発表会プレゼン資料

Web

Web

Web

Web

アプリケーション開発における画面モック

アプリケーション開発における画面モック

アプリケーション開発における画面モック

アプリケーション開発における画面モック

アップを利用した画面仕様書およびテスト仕様書

アップを利用した画面仕様書およびテスト仕様書

アップを利用した画面仕様書およびテスト仕様書

アップを利用した画面仕様書およびテスト仕様書

の自動生成と設計作業の効率化の提案

の自動生成と設計作業の効率化の提案

の自動生成と設計作業の効率化の提案

の自動生成と設計作業の効率化の提案

目

目

目

目

次

次

次

次

1.

1.

1.

1.

Web

Web

Web

Web

開発の現状と問題点

開発の現状と問題点

開発の現状と問題点

開発の現状と問題点

2.

2.

2.

2.

本研究の目的

本研究の目的

本研究の目的

本研究の目的

3.

3.

3.

3.

提案手法

提案手法

提案手法

提案手法

4.

4.

4.

4.

検証結果

検証結果

検証結果

検証結果

4.

4.

4.

4.

検証結果

検証結果

検証結果

検証結果

5.

5.

5.

5.

まとめ

まとめ

まとめ

まとめ

1.

1.

1.

2011年2月25日　成果発表会プレゼン資料