JP4960188B2

JP4960188B2 - 画面遷移図の表示方法およびシステム

Info

Publication number: JP4960188B2
Application number: JP2007253608A
Authority: JP
Inventors: 剛川尻; 義一蓬田
Original assignee: Hitachi Solutions Ltd
Current assignee: Hitachi Solutions Ltd
Priority date: 2007-09-28
Filing date: 2007-09-28
Publication date: 2012-06-27
Anticipated expiration: 2027-09-28
Also published as: JP2009086851A

Description

本発明は、例えばＷｅｂアプリケーション開発における画面遷移図の表示方法に係り、特に画面遷移図が複雑な遷移である場合に、機能的に類似している画面を類似機能の画面として折り畳んで表示することにより、画面遷移を分かり易く表示するための表示方法およびシステムに関するものである。

現在、インターネットの普及により、Ｗｅｂブラウザ上で利用するアプリケーションが非常に多く開発されている。このようなアプリケーションはＷｅｂアプリケーションと呼ばれる。
Ｗｅｂアプリケーションでは、一連の複数の画面で一つの機能を実現する事が多い。
例えば新規会員登録機能は、氏名入力画面、コース選択画面、登録内容確認画面といった複数の画面から構成される。Ｗｅｂアプリケーションの開発においては、これらの画面遷移を正確に把握する事が重要となるので、近年はこのような画面遷移を画面遷移図と呼ばれる図で整理して実装を行うようになってきてきる。

図１４は一般的な画面遷移図を示す図であり、画面を示す画面シェイプ（１４０１）と、画面遷移を示す画面遷移シェイプ（１４０２）から構成されている。例えばこの図においては、Ｆ０００５画面はＦ０００９画面とＦ００１０画面に遷移する事が一目で解かる。
本発明に関連する公知技術文献としては下記特許文献１があげられる。

特開平７−２１９７５４

ところで、近年のＷｅｂアプリケーションの機能は複雑化・巨大化しており、全体で数百以上の画面を持つ事が普通になってきた。そこで問題となるのが画面遷移図における画面の表示方法であり、単純に全画面を表示してしまうと実装したい画面がその中に埋もれてしまうので解かりづらくなる。
これは各画面に属性を付け、開発者の指示に従って同じ属性の画面を折り畳むように重ねて表示することで解決できる。しかし、一つ一つの画面に手動で属性を記述するのは大変な手間となり、開発コストが嵩むという問題がある。

本発明はこのような事情に鑑みなされたものであり、その目的は、機能が類似している画面をソースコードの実装から自動的に判定し、それらを折り畳む形式、または重ね合わせる形式で表示し、複雑な画面遷移を分かり易く表示することができる画面遷移図の表示方法及びシステムを提供することである。

上記目的を達成するために、本発明に係る画面遷移図の表示方法は、ＳＱＬ抽出手段により画面遷移を含むアプリケーションのソースコードを読込み、当該ソースコードから各画面がデータベースの呼び出しを行うＳＱＬ文を抽出し、第１の記憶手段に記憶する第１のステップと、画面遷移図中のユーザによって指定された画面から遷移する複数の画面におけるＳＱＬ文を前記第１の記憶手段から取得し、データベースへの操作、対象テーブルの異動に応じて前記ユーザによって指定された画面との機能上の類似度を数値化する第２のステップと、各画面を前記類似度に応じて前記ユーザによって指定された画面に折り畳んで表示する第３のステップとを備えることを特徴とする。
また、本発明に係る画面遷移図表示システムは、画面遷移を含むアプリケーションのソースコードを読込み、当該ソースコードから各画面がデータベースの呼び出しを行うＳＱＬ文を抽出し、第１の記憶手段に記憶する第１の手段と、画面遷移図中のユーザによって指定された画面から遷移する複数の画面におけるＳＱＬ文を画面遷移表示手段により前記第１の記憶手段から取得し、データベースへの操作、対象テーブルの異動に応じて前記ユーザによって指定された画面との機能上の類似度を数値化する第２の手段と、各画面を前記類似度に応じて前記ユーザによって指定された画面に折り畳んで表示する第３の手段とを備えることを特徴とする。

本発明によれば、データベースに対する機能が類似した画面を重ねて表示するので、複雑な画面遷移であっても分かり易く表示することができ、注目すべき重要な画面の遷移に専念することができるなど、作業効率の向上に貢献することが可能になる。また、ソースコードの実装を元に動的に判定するので、各画面に対して属性を付けるといった手間も必要がない。

以下、本発明を適用したアプリケーション開発システムについて説明する。
図１は、本発明の実施の形態を示すシステム構成図であり、ここで示すＷｅｂアプリケーション開発システムは、入力装置としてキーボード（１０１）と、マウス（１０２）を備え、表示装置（１０３）を備えたコンピュータ（１０４）にソースコード編集環境（１０５）と、画面遷移図編集環境（１０６）が搭載されている。
開発者（１０７）は、キーボード（１０１）とマウス（１０２）を操作して画面遷移図編集環境（１０６）で画面遷移図を記述し、それに基づいてソースコード編集環境（１０５）でＷｅｂアプリケーションの実装を行う。

図２は、画面遷移図編集環境（１０６）のブロック構成図であり、本環境は画面遷移定義部（２０１）と、画面遷移表示部（２０２）と、画面データ（２０３）の記憶手段と、表示データ（２０４）の記憶手段と、設定データ（２０５）の記憶手段と、ソースコード（２１３）から抽出した抽出ＳＱＬデータ（２０６）の記憶手段から構成され、設定データ（２０５）で指定された設定に基づいて動作する。

画面遷移定義部（２０１）は、画面遷移の定義を行うモジュールであり、画面シェイプの生成を行う画面定義手段（２０７）を備える。画面定義手段（２０７）によって定義された、呼び出しクラスや遷移先といった画面の情報は画面データ（２０３）の記憶手段に格納される。
また、開発者によって指定された画面シェイプの位置は表示データ（２０４）に格納される。

次に画面遷移表示部（２０２）は、画面データ（２０３）に格納された画面を表示するモジュールで、画面シェイプを重ねる範囲を決定する重ね範囲決定手段（２０８）と、その結果に基づいて描画する遷移シェイプを決定する表示遷移決定手段（２０９）と、その結果に基づいて図形を描画する画面遷移描画手段（２１０）から構成される。
画面遷移描画手段（２１０）によって描画された図形は、外部の出力部（２１１）によってピクセルに変換されて表示装置（１０３）に表示される。
なお、図形を表示する方法は公知なので説明を省略する。画面を重ねる範囲は画面が呼び出すロジックを実装したソースコードの内容からＳＱＬ文を抽出した抽出ＳＱＬデータ（２０６）から決定する。

抽出ＳＱＬデータ（２０６）は、外部のＳＱＬ抽出部（２１２）がソースコード編集環境（１０５）で記述したソースコード（２１３）の内容から作成する。なお、ソースコードを走査してＳＱＬ文を抽出する技術は公知なので説明を省略する。

図３は、設定データ（２０５）のデータ構造例を示す図であり、本データは設定名（３０１）と設定値（３０２）から構成される。設定にはソースコードを保管する場所を指定するソースコード保存位置（３０３）や、画面の実装を保管する場所を指定する画面保存位置（３０４）や、どの程度似ている場合に画面を重ねているかを数値で指定した閾値（３０５）を備える。

図４は、画面データ（２０３）のデータ構造例を示す図であり、本データは一意に画面を識別する文字列である画面ＩＤ（４０１）と、画面を実装したファイルを示すファイル名（４０２）と、画面が呼び出すロジックを示すロジック実装クラス（４０３）と、ロジックの結果によって遷移する先を画面ＩＤで指定した遷移先（４０４）から構成される。

図５は、表示データ（２０４）のデータ構造例を示す図であり、本データは画面の表示情報（５０１）と、ロジックの表示情報（５０２）の２種類のデータから構成される。このうち画面ごとの情報５０１は、画面データで定義された画面ＩＤ（４０１）を指定する画面ＩＤ（５０３）と、画面遷移図上で開発者が指定した画面の位置を格納する開発者指定位置（５０４）と、折り畳んだ座標を指定する折り畳み位置（５０５）から構成される。
なお、開発者指定位置（５０４）と折り畳み位置（５０５）は、それぞれ水平方向の位置を示すＸ座標と、垂直方向の位置を示すＹ座標の２つの数値で表現される。
次にロジックの表示情報（５０２）は、画面データ（２０３）で定義されたロジック実装クラス（４０３）を指定するロジック実装クラス（５０６）と、該当ロジック実装クラスから派生する画面遷移を表示するかどうかを示す折り畳み表示フラグ（５０７）から構成される。
画面遷移描画手段２１０は、この折り畳み表示フラグ（５０７）の値に従って画面を折り畳んで表示する。

図６は、抽出ＳＱＬデータ（２０６）のデータ構造例を示す図であり、本データは対象のクラスを示すロジック実装クラス（６０１）と、ロジックがデータベースに対して行う操作の種類を示す操作（６０２）と、ロジックが扱うテーブルを示す対象テーブル（６０３）と、操作するカラムを示す対象カラム（６０４）から構成される。なお、ＳＱＬの内容には実行時に決まるものがあるが、その場合は格納されないものとする。

図７は、本システムを用いて開発を行う際の全体チャートを示すものである。
本システムにおいて、開発者はまず画面遷移図編集環境（１０６）を用いて画面遷移図を記述する（ステップ７０１）。画面遷移の定義が完了したら、次に画面遷移図を見ながら個々の画面の実装を行っていく（ステップ７０２）。その際に画面遷移図が複雑で解かりづらい場合（ステップ７０３）は、対象となる画面をマウスなどで指定して、機能が類似した画面を重ねて表示する（ステップ７０４）。未実装の画面が無くなれば開発は完了となる（ステップ７０５）。

図８は、画面定義手段（２０７）を用いて画面を定義する際のインターフェイスを示す図であり、本インターフェイスは画面ＩＤを指定する欄（８０１）と、画面を保存するファイル名を指定する欄（８０２）と、ロジック実装クラスを指定する欄（８０３）と、指定したロジックから発生する遷移を指定する遷移先（８０４）と、作成ボタン（８０５）から構成される。
開発者が画面遷移図上でマウスを操作して指示すると本インターフェイスが表示され、内容を入力した上で作成ボタン（８０５）を押すと、指示された位置に画面シェイプが表示される。また、入力した内容は画面データ（２０３）の記憶手段に格納され、指示された位置は表示データ（２０４）の記憶手段に格納される。

図９は、重ね範囲決定手段（２０８）を用いて画面を重ねる範囲を決定するフローである。
まず、開発者によって指定された画面シェイプを取得する（ステップ９０１）。
次に、表示データから開発者指定位置（５０２）を取得して、その値を中心座標Ｚに格納する（ステップ９０２）。また、その値を折り畳み位置（５０５）に格納しておく。
次に、折り畳んだ個数を記憶する変数を“０”で初期化する（ステップ９０３）。
次に、指定された画面の画面データ（２０３）を参照し、ロジック実装クラス（４０３）を取得する（ステップ９０４）。

次に、ロジック実装クラス（４０３）が一致する折り畳み表示フラグ（５０７）を真ならば偽に、偽ならば新に更新する（ステップ９０５）。
次に、更新した折り畳みフラグ（５０７）の値を変数ｆに退避する（ステップ９０６）。
次に、取得したロジック実装クラス（４０３）に対応する抽出ＳＱＬデータ（２０６）を取得して、そのリストを退避する（ステップ９０８）。
次に、取得したロジック実装クラス（４０３）の遷移先（４０４）を取得して、その画面に対し折り畳み処理を行っていく（ステップ９０９，９１０，９１１）。
全ての遷移に対して処理を行ったら、次のロジック実装クラス（４０３）を取得して同様の処理を行う。
開発者によって指定された画面シェイプの全てのロジック実装クラス（４０３）の処理が完了したら、表示遷移決定手段（２０９）を用いて画面遷移を表示して終了となる（ステップ９１２）。

図１０は、ステップ９１１で述べた折り畳み処理の詳細フローである。
本処理は再帰的に呼び出されて、呼び出し元の画面から派生する全ての画面に対して行う。
まず、指定された画面を変数ｉに格納する（ステップ１００１）。次に、その画面が持つロジック実装クラス（４０３）を取得する（ステップ１００２）。
次に、取得したロジック実装クラス（４０３）に対応する抽出ＳＱＬデータ（２０６）を取得する（ステップ１００３）。
次に、ステップ９０８で退避した内容と比較し、その差を数値で表現する（ステップ１００４）。

次に、この差を設定データの閾値（３０５）と比較し、閾値以上ならば機能が異なると判断して、何もせず呼び出し側に制御を戻す（ステップ１００５、１０１２）。
閾値以下ならば同様の機能を実装していると判断し、そのロジック実装クラス（４０３）の折り畳み表示フラグ（５０７）に、ステップ９０６で退避したｆの値を格納する（ステップ１００６）。
次に、ステップ９０３で初期化した折り畳み個数に“１”を加える（ステップ１００７）。
次に、その折り畳み個数に固定値をかけた結果を、ステップ９０２で退避した座標に加算して折り畳み位置（５０５）に格納する（ステップ１００８）。
以上の操作を開発者によって指定された画面から派生する全てのロジック実装クラス（４０３）に対して再帰的に行う（ステップ１００９，１０１０）。

図１１は、ステップ１００４で述べたＳＱＬデータの内容を比較して、その差を数値で表現する詳細フローを示す。
まず、ＳＱＬデータの点数を格納する配列の領域を確保する（ステップ１１０１）。
次に、ステップ９０８で退避したリストから、ＳＱＬデータを一つ取得する（ステップ１１０２）。
次に、ステップ１００２で取得したロジック実装クラス（４０３）が持つＳＱＬデータを一つ取得する（ステップ１１０３）。
両者のＳＱＬデータを、それぞれの項目別に比較していき、対象テーブル（６０３）に一致するものがあれば、点数にその個数だけ“１０”を加算する（ステップ１１０４，１１０５）。
対象カラム（６０４）が一致していれば、点数にその個数だけ“５”を加算する（ステップ１１０６，１１０７）。
操作（６０２）が一致していれば、点数にその個数だけ“２”を加算する（ステップ１１０８，１１０９）。
以上の操作を、全ての操作に対して行い、その平均点を評価点とする（ステップ１１１０、１１１１）。

図１２は、ステップ９１２で述べた、表示遷移決定手段（２０９）の詳細フローを示すものである。
まず、画面データ（２０３）から一つの画面を取得する（ステップ１２０１，１２０２）。
次に、取得した画面が持つロジック実装クラス（４０３）を一つ取得する（ステップ１２０３、ステップ１２０４）。
次に、取得したロジック実装クラス（４０３）の折り畳み表示フラグ（５０７）を表示データから取得する（ステップ１２０５）。
折り畳みフラグ（５０７）が真であれば、そのロジック実装クラスの遷移先（４０４）に対応する画面シェイプを折り畳み位置（５０３）で指定された箇所に描画して、残りのロジック実装クラス（４０３）を処理する（ステップ１２０８）。
折り畳みフラグが偽であれば、そのロジック実装クラス（４０３）の遷移先（４０４）に対応する画面シェイプを開発者指定位置に描画して（ステップ１２０６）、両者の画面シェイプ間に画面遷移シェイプを描画する（ステップ１２０７）。以上の処理を全ての画面に対して行う。

図１３は、本発明を適用した場合の画面遷移図を示す図であり、折り畳む前の状態と、折り畳んだ後の状態を上下で表現している。Ｆ０００３画面（１３０１）のロジック実装クラスが１３０２，１３０３，１３０４に示す画面遷移を派生させるロジック実装クラスのものと同様の場合に、１３０１を指定すると、１３０５に示すように画面が重ねられて表示され、開発者は残りの画面の開発に専念することができる。
なお、再度１３０５を指定すると、ステップ９０６において反転させた値を格納しているので画面遷移は上の元の状態に戻る。

本発明を適用したアプリケーション開発システムの実施形態を示すシステム構成図である。画面遷移図編集環境のブロック構成図である。設定データのデータ構造例を示す図である。画面データのデータ構造例を示す図である。表示データのデータ構造例を示す図である。抽出ＳＱＬデータのデータ構造例を示す図である。システム開発を行う際の全体チャートである。画面定義を行うインターフェイス画面の例を示す図ある。画面の折り畳み表示を行う手順を示すフローチャートである。折り畳み画面決定処理のフローチャートである。類似性の判定処理を示すフローチャートである。画面遷移の表示処理を示すフローチャートである。折り畳んだ画面遷移図である。画面遷移図の一例を示す図である。

符号の説明

１０６画面遷移図編集環境
２０１画面遷移定義部
２０２画面遷移表示部
２０８重ね範囲決定手段
２０９表示遷移決定手段
２１０画面遷移描画手段
２１２ＳＱＬ抽出部

Claims

ＳＱＬ抽出手段により画面遷移を含むアプリケーションのソースコードを読込み、当該ソースコードから各画面がデータベースの呼び出しを行うＳＱＬ文を抽出し、第１の記憶手段に記憶する第１のステップと、画面遷移図中のユーザによって指定された画面から遷移する複数の画面におけるＳＱＬ文を画面遷移表示手段により前記第１の記憶手段から取得し、データベースへの操作、対象テーブルの異動に応じて前記ユーザによって指定された画面との機能上の類似度を数値化する第２のステップと、各画面を前記類似度に応じて前記ユーザによって指定された画面に折り畳んで表示する第３のステップとを備えることを特徴とする画面遷移図の表示方法。
画面遷移を含むアプリケーションのソースコードを読込み、当該ソースコードから各画面がデータベースの呼び出しを行うＳＱＬ文を抽出し、第１の記憶手段に記憶する第１の手段と、画面遷移図中のユーザによって指定された画面から遷移する複数の画面におけるＳＱＬ文を前記第１の記憶手段から取得し、データベースへの操作、対象テーブルの異動に応じて前記ユーザによって指定された画面との機能上の類似度を数値化する第２の手段と、各画面を前記類似度に応じて前記ユーザによって指定された画面に折り畳んで表示する第３の手段とを備えることを特徴とする画面遷移図表示システム。