JP2005122504A - Ｗｅｂアプリケーション開発支援装置及び開発支援方法 - Google Patents

Abstract

【課題】 Ｗｅｂアプリケーションによりプログラムロジックが実行されて生成された出力ＨＴＭＬとデザインＨＴＭＬとの適切な比較処理を行うことにより、確認作業における作業効率を向上させるとともに、エラー箇所の見落としを無くすことを可能とするＷｅｂアプリケーション開発支援装置及び方法を提供する。
【解決手段】 Ｗｅｂアプリケーション開発支援装置１００は、デザイン部分抽出処理部１０１と、ＨＴＭＬ比較処理部１０２と、比較結果レポート生成処理部１０３とを備えるとともに、情報記憶部として、抽出ルールテーブル１０４と、比較ルールテーブル１０５と、マッピングテーブル１０６と、レポートメッセージテーブル１０７とを備え、Ｗｅｂデザイナにより作成されたデザインＨＴＭＬ１１０について、動的レイアウト部分におけるデザイン部分を抽出した抽出ＨＴＭＬと、サーバ１２０より出力された出力ＨＴＭＬ１２１との比較処理を行う。
【選択図】 図１

Description

本発明は、Ｗｅｂアプリケーション開発支援装置及び方法に関し、特に、開発対象となるＷｅｂアプリケーションが生成するＨＴＭＬファイルと、Ｗｅｂデザイナの作成した画面レイアウトを示すＨＴＭＬファイルとについて比較処理を行う装置及び方法に関する。

近年、Ｗｅｂアプリケーションの開発では、レイアウト部分と業務処理部分を分担して開発することが一般的に行われている。この場合、レイアウト部分と業務処理部分とを分担して開発するために、Ｗｅｂアプリケーションを、業務処理部分(モデル)と、ブラウザに表示するためのレイアウト部分(ビュー)と、業務部分とレイアウト部分を制御する制御部分(コントローラー)とに分けるＭＶＣ(モデル−ビュー−コントローラー)モデルが採用されている。例えば、サーバサイドＪａｖａ技術（「Ｊａｖａ」は、サンマイクロシステムズ社の登録商標）を使用したＷｅｂアプリケーションの場合には、表示レイアウトの作成にＪＳＰ技術を用いることにより、Ｊａｖａで開発された業務処理を行うコンポーネントに処理要求を出すことが可能であるため、表示レイアウトにＪＳＰ(Java Server Pages)技術を採用し、業務処理部分にＪａｖａＢｅａｎｓやＥＪＢ（Enterprise JavaBeans）を採用することで、レイアウト部分と業務処理部分とを明確に分散して開発することができる。
上記の技術を採用することにより、Ｗｅｂアプリケーション開発を行う企業では、レイアウト部分の作成については見栄えの良いレイアウトの作成のため、専門のＷｅｂデザイナに依頼することが多い。しかし、このＷｅｂデザイナはデザインを専門とするため、論理の実装やプログラムロジックを組み立てるプログラムの生成など、技術的な知識、テクニックを持つ人が少なく、例えば、ＨＴＭＬ形式データ中にＪａｖａコードを埋め込んだＪＳＰに代表されるような動的なＷｅｂページのための仕組みを使用することはできない。
また、Ｗｅｂデザイナが業務処理結果の取得、繰返し等のプログラムロジックを記述することができる場合であっても、Ｗｅｂ開発者の期待するプログラムロジックを記述できるとは限らない。
従って、ＷｅｂデザイナはＨＴＭＬ形式データである静的なＷｅｂページのみを作成し、Ｗｅｂ開発者がＷｅｂページに表示する業務処理結果を得るため業務処理を行う業務層コンポーネントと、デザイナが作成したレイアウトにプログラムロジックを埋め込んだ表示層コンポーネントとをそれぞれ分けて、独立して作成することが多かった。

ここで、表示層コンポーネントを作成する作業においては、表示層コンポーネントが実際に生成するＨＴＭＬについて、Ｗｅｂデザイナの作成したレイアウト（以下、「デザインＨＴＭＬ」とする。）通りであるか否かを確認することが必要となっていた。
この場合の確認方法としては、Ｗｅｂアプリケーションによりプログラムロジックが実行され、動的に生成されたＨＴＭＬ（以下、「出力ＨＴＭＬ」とする。）とデザインＨＴＭＬとを目視により比較する方法があり、この方法を支援する装置として、従来、デザインＨＴＭＬと出力ＨＴＭＬとに基づき、それぞれビットマップ画像を生成して表示する手段を備えた構成が公知となっている（例えば、特許文献１参照。）
また、他の確認方法としては、デザインＨＴＭＬと出力ＨＴＭＬとのそれぞれのソースコードの文字列比較を行う方法が行われていた。
特開平１１−２８２８４０号公報

しかし、特許文献１に記載された構成では、ビットマップ画像により比較を行うため、例えば、検索ページのように検索結果によってレイアウトが動的に変化する場合には利用できないという問題があった。
また、一般にレイアウトを目視により確認する方法では、細かい相違を判別することが困難な場合があるとともに、レイアウトの相違に対応するソースコードの相違点の判別に手間を要することとなっていた。
一方、ソースコードの文字列を比較する方法では、動的に変化する部分か、静的な部分かを判別して比較する必要がある。
さらに、動的に変化する部分については、ロジック部分が異なるのか、デザイン部分が異なるのかを判別することが必要となっていた。
従って、機械的な比較処理を行うことが困難であり、Ｗｅｂ開発者がソースコードの相違部分について目視による確認を行っているので多大な手間を要するとともに、見落とし等が生じ易いものとなっていた。

本発明は前記課題を解決することを目的とし、動的に変化するレイアウト部分を含む出力ＨＴＭＬと、Ｗｅｂデザイナの作成したデザインＨＴＭＬとについて、適切な文字列比較処理を行うことにより、確認作業における作業効率を向上させるとともに、エラー箇所の見落としを無くすことを可能とするＷｅｂアプリケーション開発支援装置及び方法を提供することを目的とする。

前記課題を解決するため、本発明は、開発対象となるＷｅｂアプリケーションの実行結果としてブラウザに表示される画面レイアウトについて、予め静的なレイアウトを定義したデザインＨＴＭＬと、前記Ｗｅｂアプリケーションの実行結果として生成された動的レイアウト部分を含む出力ＨＴＭＬとについて比較処理を行うＷｅｂアプリケーション開発支援装置であって、前記デザインＨＴＭＬを読込み、当該デザインＨＴＭＬについて、プログラムロジックを埋め込む部分として任意に指定された動的レイアウト部分を、予め定義された抽出ルールに基づき変換して、抽出ＨＴＭＬを生成するデザイン部分抽出処理部と、前記表示層コンポーネントにより生成された出力ＨＴＭＬと、前記抽出ＨＴＭＬとを一行ずつ読込み、予め定義された比較ルールに基づき各ＨＴＭＬのソースコードの文字列比較処理を行い、比較結果情報を出力するＨＴＭＬ比較処理部とを備えることを特徴とする。
また、前記比較ルールとして、比較対象として取扱わない文字列が定義されたことを特徴とする。
また、前記ＨＴＭＬ比較処理部の出力した比較結果情報に含まれる属性情報に基づき、各属性情報に応じて予め定義されたメッセージテンプレートを参照して、前記各比較結果に応じたレポートメッセージを生成する比較結果レポート生成処理部をさらに備えることを特徴とする。
また、本発明の開発支援方法は、開発対象となるＷｅｂアプリケーションの実行結果としてブラウザに表示される画面レイアウトについて、予め静的なレイアウトを定義したデザインＨＴＭＬと、前記Ｗｅｂアプリケーションの実行結果として生成された動的レイアウト部分を含む出力ＨＴＭＬとについて比較処理を行うＷｅｂアプリケーション開発支援装置が行う開発支援方法であって、前記デザインＨＴＭＬを読込み、当該デザインＨＴＭＬについて、プログラムロジックを埋め込む部分として任意に指定された動的レイアウト部分を、予め定義された抽出ルールに基づき変換して、抽出ＨＴＭＬを生成する第１のステップと、前記表示層コンポーネントにより生成された出力ＨＴＭＬと、前記抽出ＨＴＭＬとを読込み、予め定義された比較ルールに基づき、各ＨＴＭＬのソースコードの文字列比較処理を行い、比較結果情報を出力する第２のステップとを有することを特徴とする。
また、前記比較ルールとして、比較対象として取扱わない文字列が定義されたことを特徴とする。
また、前記第２のステップで出力した比較結果情報に含まれる属性情報に基づき、各属性情報に応じて予め定義されたメッセージテンプレートを参照して、前記各比較結果に応じたレポートメッセージを生成する第３のステップをさらに有することを特徴とする。

以上の構成により、本発明では、予め定義された抽出ルールに基づき動的レイアウト部分についてデザイン部分を抽出して変換した抽出ＨＴＭＬを生成することにより、出力ＨＴＭＬとの適切な文字列比較処理が可能となる。従って、動的に変化するレイアウト部分を含む出力ＨＴＭＬが、Ｗｅｂデザイナの作成したデザインＨＴＭＬ通りか否かを確認する場合において、目視による確認が不要となるため、作業効率を向上させるとともに、エラー箇所の見落としを無くすことが可能となる。
また、予め比較を行わない文字列を定義した比較ルールを定義し、当該比較ルールに基づき比較処理を行うことにより、出力ＨＴＭＬにおいて、デザインＨＴＭＬに対応しない行が含まれる場合であっても、適切な文字列比較処理を行うことが可能となる。
また、比較結果情報に含まれる属性情報に応じて予め定義されたメッセージテンプレートを用いて、比較結果レポートを生成することにより、Ｗｅｂ開発者に対しエラー箇所及びエラー内容を容易に把握させることが可能となる。

以下、本発明の一実施の形態に係るＷｅｂアプリケーション開発支援装置について、図面に基づき説明する。
図１は、本発明の一実施の形態に係るＷｅｂアプリケーション開発支援装置の概略構成を示すブロック図である。
本実施の形態では、Ｗｅｂアプリケーション開発支援装置１００は、各処理部として、デザイン部分抽出処理部１０１と、ＨＴＭＬ比較処理部１０２と、比較結果レポート生成処理部１０３とを備えるとともに、情報格納部として、抽出ルールテーブル１０４と、比較ルールテーブル１０５と、マッピングテーブル１０６と、レポートメッセージテーブル１０７とを備え、Ｗｅｂデザイナにより作成されたデザインＨＴＭＬ１１０と、サーバ１２０より出力された出力ＨＴＭＬ１２１との比較処理を行う。ここで、出力ＨＴＭＬ１２１とは、例えば、テスト用のサーバ１２０に実装された開発対象としてのＷｅｂアプリケーションにより、クライアント端末１３０のブラウザ１３１からの処理要求に応じて生成されるものを示す。
デザイン部分抽出処理部１０１は、Ｗｅｂデザイナにより作成されたデザインＨＴＭＬ１１０を読込み、抽出ルールテーブル１０４に予め格納された抽出ルールに基づき、動的レイアウト部分についてデザイン部分を抽出した抽出ＨＴＭＬ１１１を生成するとともに、マッピングテーブル１０５に、抽出ＨＴＭＬ情報を格納する。
ＨＴＭＬ比較処理部１０２は、抽出ＨＴＭＬ１１１と、出力ＨＴＭＬ１２１とを読込み、比較ルールテーブル１０６に予め格納された比較ルールを参照して、各ＨＴＭＬのソースコードの文字列比較処理を行い、エラー箇所及び当該エラー箇所の属性情報を含む比較結果ファイル１１２を生成する。
比較結果レポート生成処理部１０３は、比較結果ファイル１１２を読込み、エラー箇所の属性情報に基づき、レポートメッセージテーブル１０７に予め格納されたメッセージテンプレート情報を参照して、比較結果レポート１１３を生成し、Ｗｅｂ開発者の使用するクライアント端末１３０のブラウザ１３１に表示させる。

図２は、開発対象となるＷｅｂアプリケーションの概略構成を示すブロック図である。
サーバ２００には、クライアント端末２１０のブラウザ２１１からの要求を受信するＷｅｂサーバ２２０と、Ｗｅｂサーバ２２０の受信した要求に基づく処理を行うアプリケーションサーバ２３０とを備える。
アプリケショーンサーバ２３０は、開発対象となるＷｅｂアプリケーション２４０の実行環境を備えるものである。
Ｗｅｂアプリケーション２４０は、本発明の開発支援対象となる表示層コンポーネント２４１と、ユーザ認証処理やデータベース２５０にアクセスしてデータを取得する処理を行う業務層コンポーネント２４２と、業務層コンポーネント２４２からの呼び出しに応じて、既に実装されたＣ＃等の実行を行うコンポーネント２４３とを備える。
表示層コンポーネント２４１は、業務層コンポーネント２４２から処理結果を受取って、出力ＨＴＭＬ２６０を生成し、Ｗｅｂサーバ２２０を介してクライアント端末２１０に送信し、ブラウザ２１１に表示させる。出力ＨＴＭＬ２６０は、業務層コンポーネント２４２により処理された結果として、例えば、ユーザＩＤを使用して、データベース２５０から取得したユーザ情報や、認証処理結果，検索処理結果の一覧等を含む。
表示層コンポーネント２４１は、Ｗｅｂデザイナ２７０により作成されたデザインＨＴＭＬ２８０に基づき、Ｗｅｂ開発者２９０がプログラムロジックを記述することにより生成される。

図３は、Ｗｅｂアプリケーション開発支援装置の処理を含む、表示層コンポーネントの開発作業手順を示すフローチャートである。
表示層コンポーネントの開発作業では、まず、ＷｅｂデザイナによりデザインＨＴＭＬ１１０の作成が行われる（ステップ３０１）。
次に、Ｗｅｂ開発者により、Ｗｅｂデザイナの作成したデザインＨＴＭＬ１１０に基づきプログラムロジックが記述されることにより、表示層コンポーネントの編集が行われた後（ステップ３０２）、Ｗｅｂアプリケーション開発支援装置を用いたレイアウトチェック処理を行う（ステップ３０３〜３０５）。なお、表示層コンポーネントの編集作業と並行して、業務層コンポーネント等の作成作業が行われる。
レイアウトチェック処理では、デザインＨＴＭＬ１１０からのデザイン部分抽出処理（ステップ３０３），出力ＨＴＭＬ１２１との比較処理（ステップ３０４）、比較結果レポートの生成処理（ステップ３０５）の各処理を行う。
最後にＷｅｂ開発者に、比較結果レポートを確認させ、修正が必要であれば（ステップ３０６）、再度、表示層コンポーネントの編集，レイアウトチェックを行わせ（ステップ３０２〜３０５）、修正の必要がなくなれば、開発作業の終了となる。

図４は、図３のステップ３０３に示すデザイン部分抽出処理の手順を示すフローチャートである。
Ｗｅｂアプリケーション開発支援装置１００のデザイン部分抽出処理部１０１は、Ｗｅｂ開発者により入力されたデザインＨＴＭＬ１１０を読込むとともに（ステップ４０１）、Ｗｅｂ開発者からのプログラムロジックを埋め込む部分（以下、「動的レイアウト部分」とする。）の指定を受付ける（ステップ４０２）。
次に、デザイン部分抽出処理部１０１は、Ｗｅｂ開発者により指定された動的レイアウト部分について、抽出ルールテーブル１０４に格納された抽出ルールに基づき、抽出ＨＴＭＬ１１１を生成する（ステップ４０３）。
最後に、デザイン部分抽出処理部１０１は、抽出ＨＴＭＬ情報として、デザインＨＴＭＬ１１０のファイルパスと、抽出ＨＴＭＬ１１１のファイルパスと、Ｗｅｂ開発者により入力された表示コンポーネントのファイル名とを、マッピングテーブル１０５に格納して（ステップ４０４）、処理を終了する。

図５は、図３のステップ３０４，３０５に示すＨＴＭＬ比較処理及び比較結果レポート生成処理の手順を示すフローチャートである。
Ｗｅｂアプリケーション開発支援装置１００のＨＴＭＬ比較処理部１０２は、サーバ端末１３０から出力ＨＴＭＬを取得するとともに（ステップ５０１）、サーバ端末１３０からのＨＴＴＰレスポンスのヘッダに含まれるＵＲＬの情報から表示層コンポーネントのファイル名を取得する（ステップ５０２）。
取得したファイル名に基づき、マッピングテーブル１０５を参照して、抽出ＨＴＭＬ１１１のファイルパスに基づき抽出ＨＴＭＬ１１１を取得する（ステップ５０３）。
出力ＨＴＭＬ１２１から一行取得し（ステップ５０４）、比較ルールとの照合を行う（ステップ５０５）。比較ルールの照合では、比較ルールテーブル１０６を参照して、一致する情報があるか否かを確認する。ここで、比較ルールとは、比較対象から除外する行を定義したものである。
比較ルールテーブル１０６に一致する情報がある場合には、取得した一行を無視して、出力ＨＴＭＬ１２１から次の一行を取得する（ステップ５０４，５０５）。
比較ルールテーブル１０６に一致する情報が無い場合には、抽出ＨＴＭＬ１１１から一行取得して（ステップ５０６）、比較処理を行う（ステップ５０７）。
出力ＨＴＭＬ１２１の全ての行について、比較処理を行った後（ステップ５０８，５０４〜５０７）、相違する文字列について比較結果ファイル１１２を出力する（ステップ５０９）。この場合、比較結果ファイル１１２には、相違する文字列を特定するためのエラー箇所に関する情報及び当該エラー箇所の属性情報が含まれる。
比較結果レポート生成処理部１０３は、比較結果ファイル１１２を取得し、レポートメッセージテーブル１０７を参照して、比較結果レポート１１３を生成する（ステップ５１０）。

以上の各処理について、具体例に基づき説明する。
図６は、Ｗｅｂアプリケーションの画面レイアウトの一例として、検索結果表示画面の画面構成を示す図であり、図７は、検索結果表示画面を示すＨＴＭＬファイルとして、Ｗｅｂデザイナにより作成されたデザインＨＴＭＬを示す図である。ここで、デザインＨＴＭＬとは、検索結果表示画面を静的なレイアウトで示したものであり、プログラムロジックが埋め込まれることにより、サーバが受信した要求の内容に応じて出力ＨＴＭＬが動的に変化する動的レイアウト部分と、変化をしない静的レイアウト部分とを有する。
図６に示す検索結果表示画面６００は、ユーザにより入力された検索条件を示す検索条件表示部６０１と、検索条件に一致した情報をテーブル形式で表示する検索結果表示部６０２と、送信ボタン６０３とを有する。
図７に示すデザインＨＴＭＬ７００は、静的レイアウト部分７０１，７０３，７０５，７０７と、検索条件表示部６０１，検索結果表示部６０２，送信ボタン６０３に対応する動的レイアウト部分７０２，７０４，７０６とを有する。
本例では、検索条件表示部６０１は、入力された文字列により動的に変化するデザイン部分となり、検索結果表示部６０２は、検索結果として取得した情報により表示する内容，行数が動的に変化するデザイン部分となり、対応する動的レイアウト部分７０２，７０４には、プログラムロジックが埋め込まれる。また、送信ボタン６０３に対応する動的レイアウト部分７０６にもプログラムロジックが埋め込まれる。

図８は、図７に示すデザインＨＴＭＬ７００に基づき、Ｗｅｂ開発者により作成された表示層コンポーネントを示す図であり、図９は、図８の表示層コンポーネントにより生成された出力ＨＴＭＬを示す図である。
表示層コンポーネント８００は、動的レイアウト部分７０２，７０４，７０６にプログラムロジック８０１〜８０３が埋め込まれる。
出力ＨＴＭＬ９００では、図７のデザインＨＴＭＬ７００の静的レイアウト部分７０１，７０３，７０５に対応する静的レイアウト部分９０１，９０３，９０５，９０７と、動的レイアウト部分７０２，７０４，７０６に対応する動的レイアウト部分９０２，９０４，９０６とを有する。なお、行９０８，９０９は、表示層コンポーネント８００により追加される行を示す。
動的レイアウト部分９０２，９０４，９０６は、表示層コンポーネント８００に埋め込まれたプログラムロジック８０１〜８０３により生成される。
本例では、表示層コンポーネント８００のプログラムロジック８０２において、デザインＨＴＭＬの動的レイアウト部分７０４の一行目に含まれる「ｗｉｄｔｈ＝“３００”」の記述が不足しているため、出力ＨＴＭＬ９００の動的レイアウト部分９０４の一行目においても、「ｗｉｄｔｈ＝“３００”」が不足している状態を示している。

図１０は、デザイン部分抽出処理部の参照する抽出ルールが格納された抽出ルールテーブルの一例を示す図であり、図１１は、図７に示すデザインＨＴＭＬ７００について、デザイン部分抽出処理部１０１が抽出処理を行った結果としての抽出ＨＴＭＬを示す図である。
抽出ルールテーブル１０００は、変換の対象となる文字列を示す対象１００１と、変換後文字列１００２との各データ項目を有する。
抽出ルールテーブル１０００中、レコード１０１０は、Ｗｅｂ開発者により指定された動的レイアウト部分が、タグを含まない任意の文字列の場合に、任意の文字列を示す「＊」に変換することを表している。
レコード１０１１は、Ｗｅｂ開発者により指定された動的レイアウト部分がテーブル形式の場合に、ｔａｂｌｅタグ中のｔｒ，ｔｄタグの繰返しについて、テーブルのヘッダ部分と最初の一行のみを抽出することを表している。
レコード１０１２は、Ｗｅｂ開発者により指定された動的レイアウト部分がテーブル形式の場合に、ｔａｂｌｅタグ中のテーブルのヘッダ部分以外のｔｒ，ｔｄタグ内の文字列について、任意の文字列を示す「＊」に変換することを表している。
抽出ＨＴＭＬ１１００は、静的レイアウト部分７０１，７０３，７０５，７０７に対応する静的レイアウト部分１１０１，１１０３，１１０５，１１０７と、動的レイアウト部分７０２，７０４，７０６について、抽出ルールに基づき変換した動的レイアウト部分１１０２，１１０４，１１０６とを有する。
静的レイアウト部分１１０１，１１０３，１１０５，１１０７では、ｃｈｅｃｋタグのｉｄ属性を「ｓｔａｔｉｃ」とし、動的レイアウト部分１１０２，１１０４，１１０６では、ｃｈｅｃｋタグのｉｄ属性を「ｄａｙｎａｍｉｃ」とするとともに、ｔａｒｇｅｔｉｄ属性にデザインＨＴＭＬのテーブル、ボタンといった要素を特定するｉｄ属性を抽出する。動的レイアウト部分が１つの要素でない、またはｉｄ属性を含まない１つの要素である場合は「Ｎｏｎｅ」をｔａｒｇｅｔｉｄ属性として抽出する。具体例では、動的レイアウト部分１１０２では「Ｎｏｎｅ」、動的レイアウト部分１１０４では「Ｔａｂｌｅ１」、動的レイアウト部分１１０６では「Ｂｕｔｔｏｎ１」をｔａｒｇｅｔｉｄ属性として抽出している。
また、動的レイアウト部分１１０２において文字列「あああ」が「＊」に変換され、動的レイアウト部分１１０４においてテーブルのヘッダ部分と一行目のみが抽出されるとともに、文字列が「＊」に変換されている。

図１２は、抽出ＨＴＭＬ情報を格納するマッピングテーブルのデータ構造の一例を示す図である。
マッピングテーブル１２００は、デザインＨＴＭＬの格納場所を示すファイルパス１２０１と、デザインＨＴＭＬに対応する表示層コンポーネントのファイル名１２０２と、抽出ＨＴＭＬの格納場所を示すファイルパス１２０３との各データ項目を有する。
ＨＴＭＬ比較処理部１０２は、出力ＨＴＭＬを取得するとともに、サーバ１２０からのＨＴＴＰレスポンスのヘッダに含まれるＵＲＬの情報から表示層コンポーネントのファイル名「Sample.aspx」を取得し、マッピングテーブル１２００から、表示層コンポーネントのファイル名に対応する抽出ＨＴＭＬファイルパス「C:\\…\Sample.target」を取得する。

図１３は、ＨＴＭＬ比較処理部の参照する比較ルールが格納された比較ルールテーブルの一例を示す図である。
比較ルールテーブル１３００では、出力ＨＴＭＬと抽出ＨＴＭＬとを比較する際に、比較対象としない条件を比較ルール１３０１に定義している。
本例では、条件として、レコード１３１０でｆｏｒｍタグの場合を、また、レコード１３１１でｉｎｐｕｔタグのｎａｍｅ属性が「＿ＶＩＥＷＳＴＡＴＥ」の場合を定義している。
従って、図９に示す出力ＨＴＭＬ９００と、図１１に示す抽出ＨＴＭＬとの比較処理を行う場合、出力ＨＴＭＬ９００の行９０８，９０９は比較ルール１３１０，１３２０と一致するため、比較対象として取扱わないものとする。
なお、比較ルールテーブルにおいては、他の取扱いを定義することとしてもよい。

図１４は、ＨＴＭＬ比較処理部が出力する比較結果ファイルの一例を示す図である。
比較結果ファイル１４００は、表示層コンポーネントのファイル名１４０１と、比較結果でエラーになった箇所を示す情報及び当該エラー箇所の属性情報として、エラーとなった行を示すＬｉｎｅ１４０２，エラーとなったタグのｔａｒｇｅｔｉｄ属性を示すｉｄ１４０３，エラーとなったタグ名を示すタグ１４０４，エラーとなった属性値を示す属性１４０５と、エラー箇所について抽出ＨＴＭＬ１１００に記述された正しい値を示すｃｏｌｌｅｃｔ１４０６と、表示層コンポーネントにより出力ＨＴＭＬ９００に記述された値を示すｒｅｓｕｌｔ１４０７と、エラー発生箇所について、動的なレイアウト部分か静的なレイアウト部分かを識別するｃｈｅｃｋｉｄ１４０８の各データ項目を有する。
本例では、図９に示す出力ＨＴＭＬ９００と、図１１に示す抽出ＨＴＭＬ１１００とを比較した結果として、動的レイアウト部分９０４，１１０４において、ｔａｂｌｅタグのｗｉｄｔｈ属性が一致していないため、比較結果ファイル１４００にエラー箇所，エラー内容等を示す各種の情報が格納される。
この場合、比較結果ファイル１４００の各データ項目１４０２〜１４０７は、出力ＨＴＭＬ９００の１１行目におけるｉｄがＴａｂｌｅのテーブルタグのｗｉｄｔｈ属性の値について、デザインＨＴＭＬ７００では「３００」に設定されているが出力ＨＴＭＬ９００では設定されていないことを示している。また、ｃｈｅｃｋｉｄ１４０８により、動的レイアウト部分にエラーが発生していることを示しており、プログラムロジックを追加した際にエラーが発生していることを表している。

図１５は、比較結果レポート生成処理部１０３が参照するレポートメッセージテーブルの一例を示す図であり、図１６は、比較結果レポート生成処理部１０３が生成する比較結果レポートの一例を示す図である。
レポートメッセージテーブル１５００は、エラー箇所から取得された属性情報としてのタグ名１５０１，属性１５０２，ｃｈｅｃｋｉｄ１５０３と、各属性情報に応じたメッセージテンプレート１５０４の各データ項目を有する。メッセージテンプレート１５０４には、比較結果ファイルに含まれるｔａｒｇｅｔｉｄ属性を示す「コントロールＩＤ」，抽出ＨＴＭＬに記述された「正しい値」，出力ファイルに「出力された値」，「エラー箇所」の行を示す情報を記述する。
比較結果レポート１６００は、表示層コンポーネントのファイル名１６０１と、比較処理結果メッセージを示す比較結果１６０２とを有する。
比較結果１６０２は、ＨＴＭＬ比較処理部１０２の処理結果として出力された比較結果に基づき、比較結果レポート生成処理部１０３がレポートメッセージテーブル１５００に定義されたメッセージテンプレート１５０４を用いて生成する。
本例では、比較結果レポート１６００として、テーブルの幅が異なっている旨のメッセージと、「コントロールＩＤ」，「正しい値」，「出力された値」，「エラー箇所」等を表示する。

以上のように、本実施の形態では、予め定義された抽出ルールに基づき、動的レイアウト部分についてデザイン部分を抽出して変換した抽出ＨＴＭＬを生成することにより、出力ＨＴＭＬとの適切な文字列比較処理が可能となる。従って、例えば、テーブル形式での表示等、検索処理の結果により表示件数，行数等が動的に変化するレイアウト部分を含む出力ＨＴＭＬについて、Ｗｅｂデザイナの作成したデザインＨＴＭＬ通りか否かを確認する場合においても目視による確認が不要となるため、作業効率を向上させるとともに、エラー箇所の見落としを無くすことが可能となる。
また、予め比較を行わない文字列を定義した比較ルールを定義し、当該比較ルールに基づき比較処理を行うことにより、出力ＨＴＭＬにおいてデザインＨＴＭＬに対応しない行が含まれる場合であっても、適切な文字列比較処理を行うことが可能となる。
さらに、エラー箇所について取得した属性情報に基づき、各属性情報に応じて予め定義されたメッセージテンプレートを用いて、比較結果レポートを生成することにより、Ｗｅｂ開発者に対しエラー箇所及びエラー内容を容易に把握させることが可能となる。
この場合、抽出ＨＴＭＬから取得した正しい値と、出力ＨＴＭＬに出力された値とを比較結果レポートに含めることにより、修正内容をＷｅｂ開発者に把握させることができ、修正作業を容易なものとすることができる。特に、テーブル幅等について「３００」と設定されている値が「２００」となっているような微細な誤りについては、エラー内容の把握が困難となる場合があるが、本実施の形態では、比較結果レポートにエラー箇所，エラー内容及び正しい値等を示すメッセージを含めているため、微細な誤りについてもＷｅｂ開発者に対し容易に把握させることが可能となり、修正作業を容易なものとすることができる。

なお、本発明のＷｅｂアプリケーション開発支援装置の構成としては、前記実施の形態に示すものには限られず、同様の処理を可能とするものであれば、各処理部の構成及び各情報格納部におけるデータ構造等を変更してもよい。また、各処理部及び各情報格納部は、複数の端末により構成することとしてもよい。

本発明の一実施の形態に係るＷｅｂアプリケーション開発支援装置の概略構成を示すブロック図である。 本発明において、開発対象となるＷｅｂアプリケーションの概略構成を示すブロック図である。 本発明の一実施の形態に係るＷｅｂアプリケーション開発支援装置の処理を含む、表示層コンポーネントの開発作業手順を示すフローチャートである。 本発明の一実施の形態に係るＷｅｂアプリケーション開発支援装置によるデザイン部分抽出処理手順を示すフローチャートである。 本発明の一実施の形態に係るＷｅｂアプリケーション開発支援装置によるＨＴＭＬ比較処理及び比較結果レポート生成処理手順を示すフローチャートである。 Ｗｅｂアプリケーションにより表示される検索結果表示画面の画面構成の一例を示す図である。 図６の検索結果表示画面に対応するデザインＨＴＭＬの一例を示す図である。 図７のデザインＨＴＭＬに基づき、Ｗｅｂ開発者の作成する表示層コンポーネントの一例を示す図である。 デザインＨＴＭＬの比較対象となる出力ＨＴＭＬの一例を示す図である。 抽出ルールテーブルのデータ構造の一例を示す図である。 図７のデザインＨＴＭＬに基づき抽出された抽出ＨＴＭＬの一例を示す図である。 マッピングテーブルのデータ構造の一例を示す図である。 比較ルールテーブルのデータ構造の一例を示す図である。 比較結果ファイルのデータ構造の一例を示す図である。 レポートメッセージテーブルのデータ構造の一例を示す図である。 比較結果レポートの一例を示す図である。

符号の説明

１００ Ｗｅｂアプリケーション開発支援装置、１０１ デザイン部分抽出処理部、１０２ ＨＴＭＬ比較処理部、１０３ 比較結果レポート生成処理部、１０４ 抽出ルールテーブル、１０５ マッピングテーブル、１０６ 比較ルールテーブル、１０７ レポートメッセージテーブル、１１０ デザインＨＴＭＬ、１１１ 抽出ＨＴＭＬ、１１２ 比較結果ファイル、１１３ 比較結果レポート、１２１ 出力ＨＴＭＬ。

Claims (6)

1. 開発対象となるＷｅｂアプリケーションの実行結果としてブラウザに表示される画面レイアウトについて、予め静的なレイアウトを定義したデザインＨＴＭＬと、前記Ｗｅｂアプリケーションの実行結果として生成された動的レイアウト部分を含む出力ＨＴＭＬとについて比較処理を行うＷｅｂアプリケーション開発支援装置であって、
   前記デザインＨＴＭＬを読込み、当該デザインＨＴＭＬについて、プログラムロジックを埋め込む部分として任意に指定された動的レイアウト部分を、予め定義された抽出ルールに基づき変換して、抽出ＨＴＭＬを生成するデザイン部分抽出処理部と、
   前記表示層コンポーネントにより生成された出力ＨＴＭＬと、前記抽出ＨＴＭＬとを一行ずつ読込み、予め定義された比較ルールに基づき各ＨＴＭＬのソースコードの文字列比較処理を行い、比較結果情報を出力するＨＴＭＬ比較処理部と
   を備えることを特徴とするＷｅｂアプリケーション開発支援装置。
2. 前記比較ルールとして、比較対象として取扱わない文字列が定義されたことを特徴とする請求項１に記載のＷｅｂアプリケーション開発支援装置。
3. 前記ＨＴＭＬ比較処理部の出力した比較結果情報に含まれる属性情報に基づき、各属性情報に応じて予め定義されたメッセージテンプレートを参照して、前記各比較結果に応じたレポートメッセージを生成する比較結果レポート生成処理部をさらに備えることを特徴とする請求項１又は２のいずれかに記載のＷｅｂアプリケーション開発支援装置。
4. 開発対象となるＷｅｂアプリケーションの実行結果としてブラウザに表示される画面レイアウトについて、予め静的なレイアウトを定義したデザインＨＴＭＬと、前記Ｗｅｂアプリケーションの実行結果として生成された動的レイアウト部分を含む出力ＨＴＭＬとについて比較処理を行うＷｅｂアプリケーション開発支援装置が行う開発支援方法であって、
   前記デザインＨＴＭＬを読込み、当該デザインＨＴＭＬについて、プログラムロジックを埋め込む部分として任意に指定された動的レイアウト部分を、予め定義された抽出ルールに基づき変換して、抽出ＨＴＭＬを生成する第１のステップと、
   前記表示層コンポーネントにより生成された出力ＨＴＭＬと、前記抽出ＨＴＭＬとを読込み、予め定義された比較ルールに基づき、各ＨＴＭＬのソースコードの文字列比較処理を行い、比較結果情報を出力する第２のステップと
   を有することを特徴とするＷｅｂアプリケーション開発支援方法。
5. 前記比較ルールとして、比較対象として取扱わない文字列が定義されたことを特徴とする請求項４に記載のＷｅｂアプリケーション開発支援方法。
6. 前記第２のステップで出力した比較結果情報に含まれる属性情報に基づき、各属性情報に応じて予め定義されたメッセージテンプレートを参照して、前記各比較結果に応じたレポートメッセージを生成する第３のステップをさらに有することを特徴とする請求項４又は５のいずれかに記載のＷｅｂアプリケーション開発支援方法。
   
   

Images