特開 2024-30005 画面設計情報生成システム、画面設計情報生成方法およびコンピュータプログラム

(19)【発行国】日本国特許庁(JP)

(12)【公報種別】公開特許公報(A)

(11)【公開番号】P2024030005

(43)【公開日】2024-03-07

(54)【発明の名称】画面設計情報生成システム、画面設計情報生成方法およびコンピュータプログラム

(51)【国際特許分類】

   G06F 8/34 20180101AFI20240229BHJP

【ＦＩ】

G06F8/34

【審査請求】未請求

【請求項の数】8

【出願形態】ＯＬ

(21)【出願番号】P 2022132522

(22)【出願日】2022-08-23

(71)【出願人】

【識別番号】000233491

【氏名又は名称】株式会社日立システムズ

(74)【代理人】

【識別番号】110000279

【氏名又は名称】弁理士法人ウィルフォート国際特許事務所

(72)【発明者】

【氏名】村田 大二郎

(72)【発明者】

【氏名】河合 克己

(72)【発明者】

【氏名】前岡 淳

(72)【発明者】

【氏名】是木 玄太

(72)【発明者】

【氏名】芳ケ迫 仁

【テーマコード（参考）】

5B376

【Ｆターム（参考）】

5B376BC07

5B376BC38

5B376BC43

5B376BC44

(57)【要約】

【課題】画面部品を含む画面ページの画面設計情報を効率的に作成できる画面設計情報生成システムを提供すること。
【解決手段】画面ページの画面設計情報を生成する画面設計情報生成システム１であって、画面ページには、所定イベントに関連付けられる画面部品が少なくとも一つ含まれており、既存画面ページ管理情報は、既存の画面ページに含まれる画面部品間の構成情報と、所定イベントが発生した場合に実行される一連の処理とを対応付けて記憶しており、プロセッサは、作成対象の画面ページ（１１１）を取得し、取得された作成対象の画面ページに含まれる画面部品間の構成情報を取得し、既存画面ページ管理情報に基づいて、作成対象の画面ページに含まれる画面部品について所定イベントが発生した場合に呼び出される一連の処理の候補を生成する（１１０）。
【選択図】図１

【特許請求の範囲】

【請求項1】

画面ページの画面設計情報を生成する画面設計情報生成システムであって、
前記画面設計情報は、イベントに対して呼び出される一連の処理を含み、
前記画面ページには、イベントに関連付けられる画面部品が少なくとも一つ含まれており、
少なくとも一つのプロセッサと、
前記プロセッサにより使用される少なくとも一つのメモリと、
を備え、
前記メモリは、画面ページに関する前記画面設計情報を生成する所定のコンピュータプログラムを少なくとも記憶しており、
前記プロセッサは、前記所定のコンピュータプログラムを実行することにより、
既存ソースコードから抽出されたコードスニペットとイベントに関するイベント情報と前記イベントに関する画面部品の情報とが対応付けられたスニペット情報を生成し、
前記既存ソースコードに対応する既存画面構成情報から各画面部品の位置関係および属性を示す画面部品情報を抽出し、
前記スニペット情報と前記画面部品情報と前記既存ソースコードの構造情報から抽出される前記スニペット情報間の依存関係とに基づいて、スニペットの利用状況を示すスニペット利用状況情報を生成し、
前記スニペット利用状況情報に基づいて、前記コードスニペットを所定の順序で実行する画面設計情報の候補を生成し、前記メモリに記憶させる
画面設計情報生成システム。

【請求項2】

前記プロセッサは、前記所定のコンピュータプログラムを実行することにより、
作成対象の新規画面ページを取得すると、前記新規画面ページで発生するイベントと前記新規画面ページに含まれる画面部品の位置関係および属性を示す画面部品情報を抽出し、
前記スニペット利用状況情報を用いて、前記新規画面ページから抽出された前記イベントおよび画面部品情報に適合する画面設計情報の候補を選択する
請求項１に記載の画面設計情報生成システム。

【請求項3】

前記プロセッサは、前記所定のコンピュータプログラムを実行することにより、
前記選択された画面設計情報の候補を所定のコンピュータ端末へ提供する
請求項２に記載の画面設計情報生成システム。

【請求項4】

前記プロセッサは、前記画面設計情報の候補に基づいて前記所定のコンピュータ端末により作成された画面設計情報を前記所定のコンピュータ端末から受信して、前記メモリに記憶させる
請求項３に記載の画面設計情報生成システム。

【請求項5】

前記プロセッサは、前記所定のコンピュータプログラムを実行することにより、
前記生成されたスニペット情報同士の類似度を算出し、
前記算出された類似度が所定値以上のスニペット情報を一つのスニペット情報として統合し、
前記スニペット情報と前記画面部品情報と前記既存ソースコードの構造情報から抽出される前記スニペット情報間の依存関係と前記一つのスニペット情報として統合された他のスニペット情報とに基づいて、スニペットの利用状況を示すスニペット利用状況情報を生成し、
前記スニペット利用状況情報に基づいて、前記コードスニペットを所定の順序で実行する画面設計情報の候補を生成し、前記メモリに記憶させる
請求項１に記載の画面設計情報生成システム。

【請求項6】

前記プロセッサは、前記所定のコンピュータプログラムを実行することにより、
前記生成されたスニペット情報の実行実績を抽出し、
前記スニペット情報と前記画面部品情報と前記既存ソースコードの構造情報から抽出される前記スニペット情報間の依存関係と前記スニペットの実行実績とに基づいて、スニペットの利用状況を示すスニペット利用状況情報を生成し、
前記スニペット利用状況情報に基づいて、前記コードスニペットを所定の順序で実行する画面設計情報の候補を生成し、前記メモリに記憶させる
請求項１に記載の画面設計情報生成システム。

【請求項7】

画面ページの画面設計情報を画面設計情報生成システムにより生成させる画面設計情報生成方法であって、
前記画面設計情報は、イベントに対して呼び出される一連の処理を含み、
前記画面ページには、イベントに関連付けられる画面部品が少なくとも一つ含まれており、
前記画面設計情報生成システムは、少なくとも一つのプロセッサと、前記プロセッサにより使用される少なくとも一つのメモリと、を備えており、
前記メモリは、画面ページに関する前記画面設計情報を生成する所定のコンピュータプログラムを少なくとも記憶しており、
前記プロセッサは、前記所定のコンピュータプログラムを実行することにより、
既存ソースコードから抽出されたコードスニペットとイベントに関するイベント情報と前記イベントに関する画面部品の情報とが対応付けられたスニペット情報を生成し、
前記既存ソースコードに対応する既存画面構成情報から各画面部品の位置関係および属性を示す画面部品情報を抽出し、
前記スニペット情報と前記画面部品情報と前記既存ソースコードの構造情報から抽出される前記スニペット情報間の依存関係とに基づいて、スニペットの利用状況を示すスニペット利用状況情報を生成し、
前記スニペット利用状況情報に基づいて、前記コードスニペットを所定の順序で実行する画面設計情報の候補を生成し、前記メモリに記憶させる
画面設計情報生成方法。

【請求項8】

計算機を、画面ページの画面設計情報を生成する画面設計情報生成システムとして機能させるコンピュータプログラムであって、
前記画面設計情報は、イベントに対して呼び出される一連の処理を含み、
前記画面ページには、イベントに関連付けられる画面部品が少なくとも一つ含まれており、
既存ソースコードから抽出されたコードスニペットとイベントに関するイベント情報と前記イベントに関する画面部品の情報とが対応付けられたスニペット情報を生成する機能と、
前記既存ソースコードに対応する既存画面構成情報から各画面部品の位置関係および属性を示す画面部品情報を抽出させる機能と、
前記スニペット情報と前記画面部品情報と前記既存ソースコードの構造情報から抽出される前記スニペット情報間の依存関係とに基づいて、スニペットの利用状況を示すスニペット利用状況情報を生成する機能と、
前記スニペット利用状況情報に基づいて、前記コードスニペットを所定の順序で実行する画面設計情報の候補を生成し、メモリに記憶させる機能と
を前記計算機上に実現させるコンピュータプログラム。

【発明の詳細な説明】

【技術分野】

【0001】

本発明は、画面設計情報生成システム、画面設計情報生成方法およびコンピュータプログラムに関する。

【背景技術】

【0002】

例えばオンラインショップ、予約ページ、ニュースサイト、生産管理システムの提供するページなど、ウェブページとして知られる画面ページが日々生産されている。画面ページの中には、ユーザにより操作される画面部品を含むページがある。ユーザが画面部品を操作するとイベントが発生し、所定の一連の処理が呼び出されて実行される。

【0003】

なお、画面部品を含む画面ページの作成に関する技術ではないが、ソフトウェアを効率的に作成する技術として特許文献１または特許文献２が知られている。

【先行技術文献】

【特許文献】

【0004】

【特許文献1】特許第５４５６７０７号公報

【特許文献2】特許第４８４６４８３号公報

【発明の概要】

【発明が解決しようとする課題】

【0005】

ユーザが画面部品を操作したときに呼び出される一連の処理を毎回検討して定義するのでは手間がかかり、一連の処理に係わるソースコードの作成に時間を要し、画面ページの生産効率（作業効率）が低い。

【0006】

特許文献１では、機能に関連づいた用語を元に確率情報を生成し、機能とソースの関係を示すトレーサビリティマトリックスを作成する。もしも画面ページの作成効率化に特許文献１を使用できたとしても、単語に基づいて画面ページのソースコードを解析できるにすぎない。しかし実際には、より使いやすいユーザインターフェース、直感的に利用可能なユーザインターフェースが望まれており、画面デザイン（ユーザインターフェースのデザイン）には暗黙の了解があることが知られている。或るイベントが発生したときに呼び出されるべき一連の処理は、画面部品の表示位置、および他の画面部品との位置関係といった画面構成に依存して定まることが多い。したがって、画面部品の名称だけでは画面部品間の構成を把握することができないため、一連の処理を抽出できない。

【0007】

特許文献２は、部品のカテゴリを指定してリポジトリを検索し、実行カバレッジが閾値を越える部品を開発者に推薦する。仮に特許文献２を画面ページの作成効率化に利用できたとしても、画面部品名やイベント名をカテゴリ化して、検索対象の一つの処理についてのソースコードを検索できるだけである。しかし実際には、あるイベントが発生すると複数の処理が所定の順序で実行されることが多い。特許文献２の技術では、画面部品間の構成を把握できない上に、実行の順番まで考慮して処理を抽出することはできない。

【0008】

本発明は、上述の課題に鑑みてなされたもので、その目的は、画面部品を含む画面ページの画面設計情報を効率的に作成できるようにした画面設計情報生成システム、画面設計情報生成方法およびコンピュータプログラムを提供することにある。

【課題を解決するための手段】

【0009】

上記課題を解決すべく、本発明の一つの観点に画面設計情報生成システムは、画面ページの画面設計情報を生成する画面設計情報生成システムであって、画面ページには、所定イベントに関連付けられる画面部品が少なくとも一つ含まれており、少なくとも一つのプロセッサと、プロセッサにより使用される少なくとも一つのメモリと、を備え、メモリは、画面ページに関する動作を規定する画面設計情報を生成する所定のコンピュータプログラムと、既存の画面ページに関する既存画面ページ管理情報とを記憶しており、既存画面ページ管理情報は、既存の画面ページに含まれる画面部品間の構成情報と、所定イベントが発生した場合に実行される一連の処理とを対応付けて記憶しており、プロセッサは、所定のコンピュータプログラムを実行することにより、作成対象の画面ページを取得し、取得された作成対象の画面ページに含まれる画面部品間の構成情報を取得し、既存画面ページ管理情報に基づいて、作成対象の画面ページに含まれる画面部品について所定イベントが発生した場合に呼び出される一連の処理の候補を生成する。

【発明の効果】

【0010】

本発明によれば、作成対象の画面ページにおける画面部品間の構成情報に基づいて既存画面ページ管理情報を参照することにより、所定イベントが発生した場合に呼び出される一連の処理の候補を生成することができる。

【図面の簡単な説明】

【0011】

【図1】画面設計情報生成システムの概要を示す図である。

【図2】画面設計情報生成システムのハードウェア構成を示す図である。

【図3】画面設計情報生成システムに記憶されるコンピュータプログラムの例を示す図である。

【図4】画面設計情報生成システムに記憶される情報の例を示す図である。

【図5】画面設計情報生成システムの機能間の関係と全体の流れを示す図である。

【図6】既存のソースコード情報の例である。

【図7】既存の画面構成情報（画面ＨＴＭＬ情報）の例である。

【図8】既存の画面構成情報により表示される画面の例である。

【図9】スニペット情報の例である。

【図10】スニペット間の依存関係情報の例である。

【図11】ログ情報の例である。

【図12】カバレッジ情報の例である。

【図13】スニペット間の類似度を管理する情報の例である。

【図14】画面部品情報の例である。

【図15】スニペットの利用状況を示す情報の例である。

【図16】フロー候補の一覧を示す情報の例である。

【図17】新規に作成される画面の構成情報（画面ＨＴＭＬ情報）の例である。

【図18】新規に作成される画面構成情報により表示される画面の例である。

【図19】イベントフロー候補情報の例である。

【図20】画面設計情報生成システムのユーザに提供される情報の例である。

【図21】イベントフロー候補の情報を用いて新たに作成されるソースコード情報の例である。

【図22】既存のソースコードからスニペットを抽出する処理を示すフローチャートである。

【図23】ログを解析する処理を示すフローチャートである。

【図24】類似度を判定する処理を示すフローチャートである。

【図25】画面部品情報を抽出する処理を示すフローチャートである。

【図26】スニペットの利用状況を作成する処理を示すフローチャートである。

【図27】フロー候補を生成する処理を示すフローチャートである。

【図28】画面部品フローを生成する処理を示すフローチャートである。

【図29】フロー候補をコンピュータ端末へ表示させる処理のフローチャートである。

【図30】ソースコード情報を生成する処理を示すフローチャートである。

【発明を実施するための形態】

【0012】

以下、図面に基づいて、本発明の実施の形態を説明する。本実施形態では、プレゼンテーション層のアプリケーションプログラム（以下、アプリケーション）を効率的に作成できるようにしたシステムおよび方法を開示する。プレゼンテーション層のアプリケーションは、画面部品への操作によりイベントが発生すると、例えば、検索、データ取得、画面作成、画面更新などの所定の一連の処理を実行する。

【0013】

本実施形態では、既存ソースコードを分割し、イベント及び画面部品と紐づけて、コード（スニペット）を生成する。そして、本実施形態では、スニペットに紐づいた画面のイベント及び画面の構成要素（画面部品）を、作成する新画面の画面部品のイベントと文字列情報と位置関係とを照合することにより、新画面のイベントに対して、一つ以上のスニペットからなるイベントフローを作る。ユーザはイベントフローを参考にして、新画面を作成することができる。

【0014】

これにより本実施形態によれば、画面に多数の画面部品がある場合に、暗黙的な画面部品間の関係を考えてイベントフローをフルスクラッチで作成する必要がなく、比較的簡単に新画面（表示と内部処理を含む。）を作成することができる。

【0015】

本実施形態では、実績のある既存ソースコード情報を使って、作成対象の新画面に似た画面のソースコードを抽出して再利用することができるため、ユーザは効率的に新画面を作成することができる。

【0016】

本実施形態では、後述のように、既存システムのソースコードと既存システムの画面構成とを解析しておき、次に、既存システムの画面とイベントとに関する解析結果を利用して、新システムの画面に適用されるイベントフローの生成を支援する。

【0017】

準備段階では、既存システムで使用されたソースコードを解析することにより、画面部品間の構成情報と出現確率を求め、ソースコードの中から複数のスニペットを抽出し、抽出されたスニペットの実行順序を考慮してイベントフローの候補を生成する。新画面の生成支援段階では、新画面の画面構成情報と既存システムの画面構成情報を照合し、似た画面構成に関連するスニペットを抽出し、抽出されたスニペットの依存関係に基づき各スニペットを所定の順番に並べてイベントフローを生成する。

【0018】

既存ソースコードからスニペットを抽出する際に、スニペット間の類似度を判定し、所定値以上類似するスニペットは統合してもよい。画面構成とイベントの組み合わせに対応するスニペットが複数検出された場合は、実行された実績が他のスニペットよりも多いスニペットを選択することができる。

【0019】

本実施形態では、以下のように用語を定義する。ただし、以下の定義以外に定義可能である。

【0020】

「既存ソースコード」とは、既存システム（既存ソフトウェア）において、画面部品とイベントとに紐づけられた一連の処理が記述されたソースコードである。

【0021】

「スニペット依存関係」とは、ソースコードからスニペットを分割するときに、ソースコードの構造情報を用いて依存関係を抽出した情報である。依存関係には、例えば、時系列の順番、エラーフローなどがある。

【0022】

「カバレッジ」とは、ソースコードの各行の動作時に通過したか否かの情報である。

【0023】

「スニペット」とは、何らかの観点で分割されたコードスニペットとイベント情報と画面部品（画面ＨＴＭＬ情報）の結合体である。スニペットは「コードスニペット」に対応する。同一または所定値以上類似するスニペットは、スニペット利用状況情報にて一つのスニペットへ統合される。

【0024】

「スニペット類似度」とは、スニペット同士が似ている度合いを示す。例えば、ソースコードから抽出されたすべてのスニペットを表の縦軸と横軸に並べて、セルに類似度を記載することにより管理することができる。

【0025】

「スニペット利用状況情報」とは、スニペットごとに利用状況を管理する情報である。スニペット利用状況情報は、スニペットの利用量、類似スニペット、関連するイベント、関連する画面部品を整理した情報を含む。スニペット統合が起きた場合は、イベントの情報および画面部品の情報が併記される。

【0026】

「フロー候補一覧」とは、過去に作成された既存システム（既存システムの画面）から抽出可能なイベントフロー候補の一覧である。

【0027】

「イベントフロー」とは、イベントが発生すると呼び出される一連の処理である。イベントフローは「画面設計情報」の例である。イベントは、例えば「検索ボタン」「ページ切替ボタン」「画面更新ボタン」「編集ボタン」などの画面部品がユーザにより操作されると発生する。

【0028】

「新規画面ＨＴＭＬ」とは、画面設計情報の作成対象である新たな画面の画面構成を規定するコンピュータプログラムである。

【0029】

「フロー」とは、イベントフローの候補から選択され、選択されたイベントフローに基づいて作成されるイベントフローである。

【実施例0030】

図１～図３０を用いて第１実施例を説明する。図１は、画面設計情報生成システム１の概要を示す。

【0031】

画面設計情報生成システム１は、既存ソフトウェア資産記憶部１０と電気的に接続されている。既存ソフトウェア資産記憶部１０は、過去に作成された情報処理システム（既存システム）についての既存ソースコードの情報１０１と既存画面ページの画面ＨＴＭＬ（Ｈｙｐｅｒ Ｔｅｘｔ Ｍａｒｋｕｐ Ｌａｎｇｕａｇｅ）の情報１０２とを記憶する。以下、既存ソースコード１０１、既存画面ＨＴＭＬ１０２と呼ぶことがある。

【0032】

画面設計情報生成システム１は、図２で後述するように計算機上に構成される。画面設計情報生成システム１は、例えば、スニペット抽出部１５１、ログ解析部１５２、スニペット類似度判定部１５３、画面部品情報抽出部１５４、スニペット利用状況作成部１５５、フロー候補生成部１１０、画面部品フロー生成部１５７を機能として備える。画面設計情報生成システム１は、図１に示す各機能の全部を備えている必要はない。さらに、画面設計情報生成システム１は、図２～図５で後述するように、図１に示されていない機能を備えることもできる。

【0033】

図１では、画面設計情報生成システム１の概略動作を説明する。詳細な動作は図５、図２２～図３０で後述する。

【0034】

既存ソフトウェア資産記憶部１０は、既存システムのソースコードおよび画面ＨＴＭＬ情報などを記憶するレポジトリである。既存ソフトウェア資産記憶部１０に記憶された既存ソースコードの実行ログ１０５は、ログ解析部１５２により解析され、その解析結果はスニペット利用状況作成部１５５に入力される。

【0035】

スニペット抽出部１５１は、既存ソースコード１０１からイベントに紐づく処理を分割してスニペット化する。既存ソースコード１０１からスニペットを抽出する方法には複数ある。

【0036】

例えば、既存ソースコード内のコメントに着目して、イベントに紐づく処理（所定処理）のソースコード片をスニペットとして抽出することができる。例えば、既存ソースコード内の関数に着目して、既存ソースコード内のソースコード片をスニペットとして抽出することもできる。例えば、既存ソースコード内の変数の依存関係に着目して、既存ソースコード内のソースコード片をスニペットとして抽出することもできる。

【0037】

上述の方法のいずれか一つまたは複数あるいは全てを使用することで、既存ソースコード１０１から一つ以上のスニペット１０３（図５参照）を得ることができる。抽出されたスニペット１０３は、ソースコード片とイベント情報と画面ＨＴＭＬ情報の結合した情報である。

【0038】

後述のように、抽出された複数のスニペットの中には、依存関係にあるスニペットが含まれていることがある。ソースコードの構造情報を用いることで、どのスニペットの次にどのスニペットが実行されるのかを検出できる。例えば、買物客（画面ページの提供するサービスのユーザ）が商品購入画面で商品を選択し、「カートへ追加」ボタンを操作した場合を説明する。

【0039】

買物客の操作対象となる画面部品の一つである「カートへ追加」ボタンが買物客によって操作されると、「カートへ追加」というイベントが発生する。このイベントの発生によって、商品購入画面内の商品一覧表から買物客の選択した商品の個数を取得する処理（第１処理）が実施され、その次にカートの情報を更新させるサービスを呼び出す処理（第２処理）が実施される。

【0040】

この実行順序（スニペット間の依存関係）は、抽出元の既存ソースコードに記述された構造情報から検出できる。そこで、画面設計情報生成システム１は、「商品一覧表」という画面部品と「カートへ追加」ボタンという画面部品が同一画面に存在する場合に、「カートへ追加」イベントが発生したならば、第１処理のスニペットを実行させ、次に第２処理のスニペットを実行させるというイベントフローの候補を生成する。プログラマ（画面設計情報生成システム１にとってのユーザ）は、画面設計情報生成システム１から提案されたイベントフローの候補を参考にして、新たな画面に関するソースコードを効率的に作成することができる。新たに作成されたソースコードとそのソースコードに対応する画面ＨＴＭＬ情報は、既存ソースコード１０１および既存画面ＨＴＭＬ情報１０２として、既存ソフトウェア資産記憶部１０に記憶される。

【0041】

ログ解析部１５２は、ソースコード１０１の実行ログ１０５を解析する。例えば、ログ解析部１５２は、ソースコードの実行時に、ソースコードの各行を何回通過したか（実行されたか）をスニペット毎に算出する。スニペット１０３の利用量（利用回数、実行実績）を算出できるのであれば、実行ログ１０５の解析以外の方法を用いてもよい。スニペット１０３の利用量は、そのスニペットが過去にどれだけの既存システムで使用されたかを示す情報として利用できる。本実施例では、画面部品の位置関係および画面部品の属性から抽出されたスニペットの候補の中から、より多く使用されたスニペットをプログラマへ提供する。

【0042】

スニペット類似度判定部１５３は、スニペット抽出部１５１で抽出されたスニペット同士の類似度を判定する。類似度が所定値以上のスニペット（同一スニペットを含む。）は一つのスニペットとして統合される。

【0043】

画面部品情報抽出部１５４は、既存画面ＨＴＭＬ情報１０２から全ての画面部品について画面部品情報を抽出する。画面部品情報には、例えば、同一画面に存在する他の画面部品との位置関係と、画面部品の属性情報とが含まれる。画面情報間の位置関係は、例えば、ＤＯＭ（Ｄｏｃｕｍｅｎｔ Ｏｂｊｅｃｔ Ｍｏｄｅｌ）から、または、画面部品の画面上の座標から、求めることができる。画面部品の属性情報は、例えば、画面部品の種類、画面部品のラベル（名称）のいずれかまたは両方を含む。画面部品の種類には、例えば「ボタン」、「表」などがある。「ラベル」には、例えば「検索」、「カートに追加」などがある。

【0044】

スニペット利用状況作成部１５５は、グループ化されて統合されたスニペットの利用状況に関する情報１０９（図１５で後述）を作成する。スニペット利用状況情報１０９は、例えば、スニペットが利用された回数（カバレッジ）、そのスニペットに対応するイベント、そのスニペットの前に実行される他のスニペット、そのスニペットに関する画面部品などが記憶される。

【0045】

フロー候補生成部１１０は、既存システムの画面から抽出可能なイベントフローを生成する。フロー候補生成部１１０は、条件に合致するスニペットを抽出して所定の順序に配置することにより、イベントフローの候補を生成する。イベントフローの候補は、少なくとも一つのスニペットを含んでいればよく、必ずしも複数のスニペットを含んでいる必要はない。スニペットを一つだけ含むイベントフロー候補もある。

【0046】

例えば、フロー候補生成部１１０は、イベントフローを構成するスニペットの条件（イベント、イベントに対応する画面部品の属性（名称）、イベントに対応する画面部品と同一画面にある他の画面部品の位置関係）を満たすスニペットのうち、利用量が所定値以上のスニペットをイベントフローの候補を構成するスニペットとして選択する。

【0047】

例えば、「ボタンをクリック」というイベントについて、スニペットＡ，Ｂが関連付けられており、スニペットＡの方がスニペットＢよりも利用量が多い場合は、スニペットＡが選択される。さらに、スニペットＢの後でスニペットＣが発生する確率が高い場合、スニペットＡの次にスニペットＣを実行するというイベントフロー候補（Ａ→Ｃ）が生成される。スニペットＣの実行される確率が低い場合は、スニペットＡだけが選択され、スニペットＡだけを含むイベントフロー候補が生成される。

【0048】

画面部品フロー生成部１５７は、新規画面ＨＴＭＬ情報１１１に適合するイベントフロー候補を選択し、選択したイベントフロー候補をコンピュータ端末に表示させることでプログラマへ提供する。

【0049】

図２は、画面設計情報生成システム１のハードウェア構成を示す。画面設計情報生成システム１は、例えば、プロセッサ１１、メモリ１２、記憶装置１３、ユーザインターフェース部１４、通信部１５を備える計算機として構成される。図中、プロセッサを「ＣＰＵ」と、ユーザインターフェースを「ＵＩ」と、それぞれ表示する。

【0050】

メモリ１２は主記憶装置であり、所定の機能１５１～１５８，１６０を実現するための所定のコンピュータプログラムを記憶する。記憶装置１３は補助記憶装置であり、所定の機能１５１～１５８，１６０を実現する際に使用される管理情報とデータベースなどを記憶する。プロセッサ１１は「プロセッサ」の一例である。メモリ１２および記憶装置１３は「メモリ」の一例である。メモリ１２の記憶内容と記憶装置１３の記憶内容は、図３，図４で後述する。

【0051】

ユーザインターフェース部１４は、画面設計情報生成システム１のユーザであるプログラマとの間で情報を交換する装置である。ユーザインターフェース部１４は、キーボードなどの入力装置２と、モニタディスプレイなどの出力装置３とに接続される。入力装置２からの情報は、ユーザインターフェース部１４を介して画面設計情報生成システム１に入力される。画面設計情報生成システム１からの情報は、ユーザインターフェース部１４を介して出力装置３へ出力される。

【0052】

通信部１５は、画面設計情報生成システム１が他の情報機器と通信するための通信装置である。通信部１５は、通信ネットワークＣＮを介して他の情報機器と双方向通信可能に接続される。

【0053】

他の情報機器には、例えば、コンピュータ端末４、ストレージシステム５がある。コンピュータ端末４はプログラマの使用する端末であり、ユーザ端末と呼ぶこともできる。プログラマは、コンピュータ端末４を用いて、画面設計情報生成システム１の提供する画面設計情報生成支援サービスを利用し、生成したソースコードを画面設計情報生成システム１へ登録する。コンピュータ端末４は、例えば、プロセッサ、メモリ、ユーザインターフェース部、通信部（いずれも図示せず）を備える。一つの画面設計情報生成システム１に複数のコンピュータ端末４を接続することができる。複数のコンピュータ端末４は共同して新規画面の画面設計情報を作成することもできるし、あるいは、それぞれ別々の新規画面の画面設計情報を作成することもできる。

【0054】

ストレージシステム５は、例えば、フラッシュメモリ、ハードディスク、磁気テープ、光磁気ディスクなどを備えたファイル共有システムのように構成される。記憶装置１３に記憶される情報の一部または全部をストレージシステム５に記憶させてもよい。なお、図示は省略するが、複数の画面設計情報生成システム１が一つのストレージシステム５を共有する構成でもよい。

【0055】

記憶媒体ＭＭは、不揮発性メモリまたは電池でバックアップされた揮発性メモリであり、画面設計情報生成システム１に接続することができる。記憶媒体ＭＭは、画面設計情報生成システム１のメモリ１２または記憶装置１３からコンピュータプログラムまたはデータを読みだして非一時的に記憶することができる。記憶媒体ＭＭを図外の他の計算機に接続し、記憶媒体ＭＭに記憶されたコンピュータプログラムおよびデータを他の計算機のメモリまたは記憶装置（いずれも図示せず）に転送することもできる。

【0056】

図３は、メモリ１２に記憶されるコンピュータプログラムの例を示す。メモリ１２には、例えば、スニペット抽出部１５１、ログ解析部１５２、類似度判定部１５３、画面部品情報抽出部１５４、スニペット利用状況作成部１５５、フロー候補生成部１５６、画面部品フロー生成部１５７、フロー候補表示部１５８、ソースコード生成部１６０といった各機能を実現するための所定のコンピュータプログラムが記憶されている。

【0057】

スニペット抽出部１５１は、既存ソースコード情報１０１から所定の観点でスニペット情報１０３（スニペット１０３とも呼ぶ。）を抽出する機能を持つ。ログ解析部１５２は、既存ソースコード情報１０１のログ情報１０５を解析し、カバレッジ情報１０６を出力する。

【0058】

スニペット類似度判定部１５３は、抽出された各スニペットの類似度を判定し、スニペット類似度情報１０７を生成する。スニペットの類似度は、例えば、スニペットに含まれる文字列またはトークン列を比較することで算出される。スニペット類似度情報１０７は、図１３で後述するように、例えば、比較対象のスニペットを表の縦横に並べ、縦の列と横の行が交差する各セルに類似度を格納して構成される。

【0059】

画面部品情報抽出部１５４は、既存ＨＴＭＬ情報１０２を解析することにより、画面部品情報１０８を抽出する。画面部品情報抽出部１５４は、既存ＨＴＭＬ情報１０２の各画面部品について、例えば、同一画面に存在する他の画面部品との位置関係と画面部品の属性（種類、ラベルなど）とを取得して、画面部品情報１０８を抽出する。スニペット利用状況作成部１５５は、スニペット利用状況情報１０９を作成する。

【0060】

フロー候補生成部１５６は、イベントフロー候補を生成し、イベントフロー候補の一覧情報１１０を出力する。

【0061】

フロー候補表示部１５８は、新規作成対象の画面についてのイベントフロー候補をコンピュータ端末４に送信して、コンピュータ端末４の画面に表示させる機能を持つ。ソースコード生成部１６０は、プログラマがイベントフロー候補を使用してソースコードを作成するための機能を持つ。プログラマがコンピュータ端末４を用いて作成した新規画面のソースコードは、既存ソースコード情報１０１の一部として画面設計情報生成システム１に保存される。

【0062】

図４は、記憶装置１３に記憶される情報の例を示す。記憶装置１３は、例えば、既存ソースコード情報１０１、既存画面ＨＴＭＬ情報１０２、スニペット情報１０３、スニペット依存関係情報１０４、ログ情報１０５、カバレッジ情報１０６、スニペット類似度情報１０７、画面部品情報１０８、スニペット利用状況情報１０９、フロー候補一覧情報１１０、新規画面ＨＴＭＬ情報１１１、イベントフロー候補情報１１２、出力ソースコード情報１２０を記憶する。以下、スニペット情報をスニペットと略記するように、「情報」という語句を省略する場合がある。

【0063】

カバレッジ情報１０６は、抽出されたスニペットの利用量を示す情報である。フロー候補一覧情報１１０は、既存画面の情報（既存ソースコードおよび既存画面ＨＴＭＬからなる情報）から抽出されたイベントフローの候補を一覧で示す情報である。出力ソースコード情報１２０は、イベントフロー候補情報１１２に基づいてプログラマにより作成されたソースコードである。

【0064】

図５は、画面設計情報生成システム１の機能間の関係と全体の流れを示す。主な流れは、図面中央部のスニペット抽出部１５１、スニペット利用状況作成部１５５、フロー候補生成部１５６、画面部品フロー生成部１５７、フロー候補表示部１５８、ソースコード生成部１６０である。

【0065】

スニペット抽出部１５１は、既存システムのソースコード１０１からスニペット１０３を抽出する。さらに、スニペット抽出部１５１は、既存ソースコード１０１の構造情報を解析することにより、スニペット間の依存関係１０４を抽出する。

【0066】

スニペット類似度判定部１５３は、各スニペット１０３の類似度を算出し、スニペット類似度１０７を出力する。

【0067】

ログ解析部１５２は、ログ１０５を解析してカバレッジ１０６を生成する。画面部品抽出部１５４は、既存画面ＨＴＭＬ１０２を解析して画面部品１０８を抽出する。

【0068】

スニペット利用状況作成部１５５は、スニペット１０３と、スニペット依存関係１０４と、スニペット類似度１０７と、カバレッジ１０６と、画面部品１０８とに基づいて、スニペット利用状況１０９を作成する。

【0069】

フロー候補生成部１５６は、スニペット利用状況１０９に基づいてフロー候補一覧１１０を生成する。画面部品フロー生成部１５７は、新規画面ＨＴＭＬ１１１とフロー候補一覧１１０とに基づいてイベントフロー候補１１２を生成する。

【0070】

フロー候補表示部１５８は、イベントフロー候補１１２をユーザインターフェース部１４を介してプログラマに提供する。ソースコード生成部１６０は、イベントフロー候補の中からプログラマにより選択されたイベントフローと、プログラマから入力された初期値などに基づいて新規画面ＨＴＭＬ１１１のソースコード１２０を生成する。

【0071】

図６は、既存のソースコード情報１０１の例である。ソースコードの例１０１０からは、コメント、関数、変数の依存関係に基づいて、複数のスニペット１０１０００，１０１００１，１０１００２，１０１００３，１０１００４，１０１００５，１０１００６，１０１００７を抽出することができる。図６に示すスニペットは、説明のための例であって、本開示は図６に示されるスニペットに限定されない。

【0072】

図７は、既存画面ＨＴＭＬ情報１０２の例１０２０である。既存画面の描画を制御する既存画面ＨＴＭＬの例１０２０には、複数の画面部品１０２０００，１０２００１，１０２００２，１０２００３，１０２００４，１０２００５，１０２００６，１０２０１０，１０２０１１，１０２０１２，１０２０１３，１０２０２０，１０２０２１，１０２０３０，１０２０３１が含まれている。図７に示すように、既存画面ＨＴＭＬの例１０２０には、例えば、テキストや数字の入力欄を示す画面部品、表を示す画面部品、表を前後のページに切り替えるボタンを示す画面部品、お気に入りに追加するボタンを示す画面部品、カートへ追加するボタンを示す画面部品などが含まれている。図７に示す画面部品は、説明のための例であって、本開示は図７に示すされる画面部品に限定されない。

【0073】

図８は、既存の画面ＨＴＭＬ情報１０２により表示される画面例１０２１である。画面例１０２１は、商品選択画面と商品一覧表とに大別される。

【0074】

商品選択画面は、画面部品１０２１１０，１０２１１１，１０２１１２，１０２１１３，１０２１１４，１０２１１５，１０２１１６を含む。これら画面部品は、図４に示す既存画面ＨＴＭＬ例１０２０の画面部品１０２０００，１０２００１，１０２００２，１０２００３，１０２００４，１０２００５，１０２００６に対応する。

【0075】

商品一覧表は、表１０２１３、詳細１０２１４、画像１０２１５を含む。表１０２１３は、画面部品１０２１２０，１０２１２１，１０２１２３，１０２１３０，１０２１３１，１０２１３２，１０２１３３，１０２１３４，１０２１３５を含む。表１０２１３には、複数の商品の行２０２１３６，１０２１３７が表示されている。

【0076】

詳細１０２１４は、画面部品１０２１４０，１０２１４１を含み，１つの行１０２１４２が表示されている。

【0077】

画面例１０２１の一番には、「お気に入りに追加」ボタン１０２１６０と、「カートに追加」ボタン１０２１６１が表示されている。

【0078】

図９は、スニペット情報１０３の例１０３０を示す。スニペット情報（スニペット）１０３の例１０３０は、例えば、スニペット識別子（スニペットＩＤ）１０３００１、画面名１０３００２、画面部品１０３００３、イベント１０３００４、ソースコード１０３００５、行番号１０３００６、コード断片１０３００７を有する。

【0079】

スニペットＩＤ１０３００１は、画面設計情報生成システム１で管理する各スニペットを一意に特定する情報である。画面名１０３００２は、スニペットに対応する画面の名称である。画面名には、例えば「商品検索画面」などがある。

【0080】

画面部品１０３００３は、スニペットに対応する画面部品を示す情報である。イベント１０３００４は、スニペットに対応するイベントを特定する情報である。画面部品１０３００３が操作されるとイベント１０３００４が発生する。

【0081】

ソースコード１０３００５は、スニペットが切り出された元のソースコードを示す情報である。行番号１０３００６は、スニペットの範囲をソースコード１０３００５の行番号で特定する。コード断片１０３００７は、スニペットの内容を示す。

【0082】

図９の例１０３０では、３つのスニペットを示す３つの行１０３０５１，１０３０５２，１０３０５３が示されている。なお、各図中の記載内容は、それぞれの図中での説明に用いられるもので、他の図との整合性は意識していない。ある図の記載内容と他の図の記載内容が正確に一致していない場合でも、いわゆる当業者であれば、本開示の画面設計情報生成システム１を実現することができる。

【0083】

図１０は、スニペット間の依存関係を示す情報１０４の例１０４０である。スニペット依存関係情報１０４の例１０４０は、例えば、先に実施されるスニペットのＩＤ１０４００１（前スニペットＩＤ）、その次に実施されるスニペットのＩＤ１０４００２（後スニペットＩＤ）、前スニペットＩＤと後スニペットＩＤとの関係１０４００３を有する。スニペット間の関係１０４００３には、例えば「順序（時系列順）」、「エラーフロー」がある。

【0084】

図１１は、ログ情報１０５の例１０５０である。ログ情報例１０５０は、例えば、ソースコード１０５００１、実行された行１０５００２を備える。ログ情報例１０５０には、３つの行１０５０５１，１０５０５２，１０５０５３が示されている。

【0085】

図１２は、カバレッジ情報１０６の例１０６０である。カバレッジ情報例１０６０は、例えば、スニペットＩＤ１０６００１、カバレッジの値１０６００２を備える。カバレッジ情報例１０６０には、３つの行１０６０５１，１０６０５２，１０６０５３が示されている。

【0086】

図１３は、スニペット間の類似度を管理するスニペット類似度情報１０７の例１０７０である。スニペット類似度情報例１０７０は、例えば、各スニペットのＩＤを表の縦１０７００１～１０７００７と横１０７０５１～１０７０５７に配置し、行と列の交差した箇所に類似度を格納している。例１０７０では、類似度を小数点付きで表現しているが、整数でもよい。スニペット類似度の例１０７０は、類似度が大きいスニペット同士は類似しており、類似度の小さいスニペット同士は類似していないということを示している。

【0087】

図１４は、画面部品情報１０８の例１０８０である。画面部品情報例１０８０は、例えば、画面部品の設けられる画面を特定する情報１０８００１、画面部品の種類を特定する情報１０８００２、同一画面に存在する他の画面部品との位置関係１０８００３、情報１０８００２で特定された画面部品の属性１０８００４を備えている。

【0088】

他の画面部品との位置関係１０８００３は、例えば、「表」などの他の画面部品の種類、他の画面部品との位置関係（同一ＤＯＭであって、上側に位置するなど）である。画面部品の属性１０８００４は、例えば、ラベル名などである。

【0089】

図１５は、スニペットの利用状況を示す情報１０９の例である。スニペット利用状況情報１０９の例１０９０は、例えば、スニペットのＩＤ１０９００１、スニペットの利用量１０９００２、類似するスニペットのＩＤ１０９００３、スニペットが呼び出されるイベントを特定する情報１０９００４、そのスニペットの後に発生するスニペットの情報１０９００５、同一画面内の画面部品についての情報１０９００６、対象の画面部品の情報１０９００７がある。スニペット利用状況情報例１０９０には、３つの行１０９０５１，１０９０５２，１０９０５３が示されている。

【0090】

イベント１０９００４には、例えば、スニペットに関連するイベントの種類と、そのイベントが発生したときにスニペットが呼び出される確率が記憶される。スニペットの後に発生するスニペットの情報（「事後発生）と図１５では表記されている。）１０９００５は、例えば、スニペットＩＤ１０９００１で特定されるスニペットの後に実行される可能性のあるスニペットのＩＤと、その発生確率と、発生の関係を示す。発生の関係には、時系列順での発生、エラー処理による発生がある。

【0091】

同一画面内の画面部品についての情報１０９００６には、例えば、同一画面内の他の画面部品の種類、スニペットが呼び出されるイベントと関係する確率、画面内での位置関係などが記憶される。対象画面部品の情報１０９００７には、イベント１０９００４の発生に関する画面部品についての情報、すなわち例えば、画面部品の種類およびラベル名が記憶される。

【0092】

図１６は、フロー候補の一覧を示す情報１１０の例１１００である。フロー候補一覧情報の例１１００は、例えば、イベントフローを特定するＩＤ１１０００１、イベント１１０００２、フロー１１０００３、同一画面内の画面部品１１０００４、対象画面部品１１０００５、優先度１１０００６を備える。

【0093】

イベント１１０００２は、イベントフローの発生起点となるイベントを特定する情報である。フロー（イベントフロー）１１０００３は、イベントが発生すると呼び出される一つまたは複数のスニペットをその実行順番と共に示す情報である。同一画面内の画面部品１１０００４は、イベント１１０００２を発生させる対象画面部品１１０００５と同一画面内にある他の画面部品の種類を示す情報である。

【0094】

優先度１１０００６は、ＩＤ１１０００１で特定されるイベントフローが選択される際の優先度を示す情報である。図１６では、一つの行１１００５１だけが示されているが、実際には多くのイベントフローが抽出されて管理される。

【0095】

そのため、特定の画面部品の配置おいて特定のイベントが発生した場合に実行されるイベントフロー１１０００３が複数存在する場合があり得る。複数のイベントフロー１１０００３が検出された場合、画面設計情報生成システム１は、より大きい優先度１１０００６を持つイベントフローを選択する。画面設計情報生成システム１は、最も大きな優先度を持つイベントフローを一つだけ選択してプログラマへ提案してもよいし、優先度の大きい順に所定数のイベントフローを選択してプログラマへ提案してもよい。

【0096】

図１７は、新規に作成される画面の構成情報（画面ＨＴＭＬ情報）１１１の例１１１０である。画面例１１１０には、例えば、各種ボタン、入力欄、表などの、複数の画面部品１１１０００，１１１００１，１１１００２，１１１００３，１１１００４，１１１００５，１１１０１０，１１１０１１，１１１０１２，１１１０１３，１１１０２０，１１１０３０，１１１０３１が含まれている。

【0097】

図１８は、新規に作成される画面ＨＴＭＬ情報１１１により表示される画面例１１１１である。画面例１１１１では、その上側の領域でユーザが商品を検索し、その下側の領域で検索結果が表で示される。ユーザは、検索結果の中からお気に入りの商品を「お気に入り」に追加したり、購入を希望する商品を「カート」へ追加したりする。ここでのユーザとは、新規画面ＨＴＭＬ情報例１１１１により提供されるサービス（オンラインショップなど）を利用する者である。

【0098】

画面例１１１１は、商品を検索するための画面部品１１１１１０，１１１１１１，１１１１１２，１１１１１３，１１１１１４，１１１１１５と、検索結果を切替表示するための画面部品１１１１２０，１１１１２１，１１１１２２，１１１１２３と、表の画面部品１１１１３，１１１１３０，１１１１３１，１１１１３２，１１１１３３と、ユーザのお気に入りに追加するための画面部品１１１１４０と、ユーザがカートに追加するための画面部品１１１１４１とを含む。なお、カートへ追加するボタン１１１１４１をユーザが操作すると、図示せぬ商品購入画面に切り替わる。

【0099】

図１９は、イベントフロー候補情報１１２の例１１２０である。イベントフロー候補情報の例１１２０は、例えば、イベントフローＩＤ１１２００１、イベントの発生する画面１１２００２、イベントの発生する画面部品１１２００３、イベント内容１１２００４、イベントフローの内容１１２００５を備える。イベントフロー候補情報の例１１２０には、一つの行１１２０５１が示されている。

【0100】

図２０は、画面設計情報生成システム１を利用するユーザ（プログラマ）へ提供される情報の例３１である。出力画面例３１は、ユーザインターフェース部１４から出力装置３へ送信されて表示される。あるいは、出力画面例３１は、通信部１５を介してコンピュータ端末４へ送信され、端末画面に表示される。

【0101】

出力画面例３１は、イベントについての情報を示すイベント情報表示部３１１と、イベントフロー候補の一覧を示すイベントフロー候補一覧表示部３１２と、スニペットに関する情報を示すスニペット表示部３１３と、ボタン３１４を含む。

【0102】

イベント情報表示部３１１は、例えば、画面３１１００、画面部品３１１０１、イベント３１１０２を含む。イベント情報表示部３１１には、一つの行３１１５１が示されている。画面３１１００はイベントの発生する画面の種類を示す。画面部品３１１０１は、イベントを発生させる画面部品の種類を示す。イベント３１１０２は、イベントの発生する操作（ユーザ操作）の種類を示す。

【0103】

イベントフロー候補一覧表示部３１２は、例えば、イベントフローを選択するための選択部３１２００、イベントフローを識別するイベントフローＩＤ３１２０１、イベントの内容を概略的に示すイベントフロー３１２０２を備える。イベントフロー３１２０２では、一つまたは複数のスニペットＩＤと、複数スニペット間の実行順序だけを記載することができる。

【0104】

スニペット表示部３１３は、選択部３１２００で選択されたイベントフローを構成するスニペットの詳細を表示する。スニペット表示部３１３では、スニペットＩＤ３１３００，３１３０１と、スニペットの内容（ソースコード断片）３１３５０，３１３５１が表示される。

【0105】

プログラマは、出力装置３（またはコンピュータ端末４の端末画面）に表示されたイベントフロー候補の情報を参考にして、新規画面ＨＴＭＬで使用されるソースコードを作成する。

【0106】

図２１は、イベントフロー候補の情報を用いて新たに作成されるソースコード情報１２０の例１２００である。ソースコード情報の例１２００は、複数のソースコード断片１２００００～１２０００７を含んでいる。

【0107】

図２１上側のソースコード断片１２０００１，１２０００２は、図２０でプログラマに提供されたイベントフローを利用して作成されたものである。他のソースコード断片についても同様に、プログラマは、新規画面ＨＴＭＬとイベントに基づいて画面設計情報生成システム１から提供されるイベントフロー（不図示）を利用して、効率よく新規ソースコードを作成することができる。

【0108】

図２２は、スニペット抽出部１５１が既存のソースコード１０１からスニペット１０３を抽出する処理を示す。

【0109】

ステップ１５１００：スニペット抽出部１５１は、既存ソースコード情報１０１の全てのファイルを読み込む。

【0110】

ステップ１５１０１：ループ１の開始。スニペット抽出部１５１は、既存ソースコード情報１０１の全てのファイルに対して以下の所定ステップを実行する。

【0111】

ステップ１５１０２：スニペット抽出部１５１は、既存ソースコード情報１０１のファイルの画面名を取得する。

【0112】

ステップ１５１０３：ループ２の開始。スニペット抽出部１５１は、ステップ１５１０１のファイルの全ての画面部品に対して以下の所定ステップを実行する。

【0113】

ステップ１５１０４：ループ３の開始。スニペット抽出部１５１は、ステップ１５１０３の画面部品の、全ての処理のあるイベントに対して以下の所定ステップを実行する。

【0114】

ステップ１５１０５：スニペット抽出部１５１は、ステップ１５１０４のイベントに対する処理行を、ステップ１５１０１のファイルから取得する。

【0115】

ステップ１５１０６：スニペット抽出部１５１は、ステップ１５１０５で取得した処理行を、特定の条件に従い分割する。

【0116】

ステップ１５１０７：ループ４の開始。スニペット抽出部１５１は、ステップ１５１０６の分割した処理行群の単位に対して以下の所定ステップを実行する。

【0117】

ステップ１５１０８：スニペット抽出部１５１は、スニペット情報１０３に一列を追加し、任意のＩＤをＩＤ列１０３００１に、ステップ１５１０２の画面名を画面名列１０３００２に、ステップ１５１０３の画面部品情報を画面部品列１０３００３に、ステップ１５１０４のイベントをイベント列１０３００４に、ステップ１５１０１で選択したファイルのパスをソース列１０３００５に、ステップ１５１０６で分割した行の番号を行番号列１０３００６に、行の文字列をコード断片列１０３００７に、それぞれ書き込む。このステップの後で、ループ４は終了。

【0118】

ステップ１５１０９：ループ５の開始。スニペット抽出部１５１は、ステップ１５１０６の分割した処理行を組み合わせる。

【0119】

ステップ１５１１０：スニペット抽出部１５１は、スニペット依存関係情報１０４のＩＤ前列１０４００１とＩＤ後列１０４００２に、ステップ１５１０６の処理行群に対応するステップ１５１０８で設定した１０３００１列の値を、関係列１００４００３に、その関係が順序関係である場合は値「順序」を、その関係がエラー処理である場合は値「エラー」を書き込む。その後、ループ５，ループ３，ループ２，ループ１の順でループ終了し、本処理は正常終了する。

【0120】

図２３は、ログ解析部１５２がログ１０５を解析する処理を示す。

【0121】

ステップ１５２００：ログ解析部１５２は、スニペット情報１０３の全ての列を読み込む。

【0122】

ステップ１５２０１：ログ解析部１５２は、ログ情報１０５の全ての列を読み込む。

【0123】

ステップ１５２０２：ループ１の開始。ログ解析部１５２は、スニペット情報１０３の全ての行に対して以下の所定ステップを実行する。

【0124】

ステップ１５２０３：ログ解析部１５２は、ステップ１５２０２で選択した行のソース列１０３００５の値とソースコード列１０６００１の値を比較し、値が同じ行をログ情報１０５より取得する。

【0125】

ステップ１５２０４：ループ２の開始。ログ解析部１５２は、ステップ１５２０１で取得したログ情報１０５の全ての行に対して以下の所定ステップを実行する。

【0126】

ステップ１５２０５：ログ解析部１５２は、ステップ１５２０２での行番号列１０３００とステップ１５２０４の行の実行行列１０６００２を比較し、一致する行数を計算する。この後、ループ２終了。

【0127】

ステップ１５２０６：ログ解析部１５２は、カバレッジ情報１０６に１列を追加し、ステップ１５２０２で取得した行のＩＤ列１０３００１の値をＩＤ列１０６００１に、ステップ１５２０５で計算した行数の総和を値列１０６００２に出力する。この後、ループ１終了。そして本処理は正常終了する。

【0128】

図２４は、類似度判定部１５３が類似度を判定する処理を示す。

【0129】

ステップ１５３００：類似度判定部１５３は、スニペット情報１０３の各行を読み込む。

【0130】

ステップ１５３０１：ループ１の開始。類似度判定部１５３は、スニペット情報１０３の全ての行の組み合わせに対して以下の所定ステップを実行する。

【0131】

ステップ１５３０２：類似度判定部１５３は、ステップ１５３０１で取得した２つの行について、コード断片列１０３００７の一致する行数の和を行数の和で割った値を計算する。

【0132】

ステップ１５３０３：類似度判定部１５３は、ステップ１５３０１で取得した２つの行のＩＤ列１０３００１の値に対応する、スニペット類似度情報１０７０のセルに、ステップ１５３０２で計算したパーセンテージを書き込む。この後、ループ１終了。そして、本処理は正常終了する。

【0133】

図２５は、画面部品抽出部１５４が画面部品情報を抽出する処理を示す。

【0134】

ステップ１５４００：画面部品抽出部１５４は、既存画面ＨＴＭＬ情報１０２の全てのファイルを読み込む。

【0135】

ステップ１５４０１：ループ１の開始。画面部品抽出部１５４は、ステップ１５４００で読み込んだすべてのファイルに対して以下の所定ステップを実行する。

【0136】

ステップ１５４０２：画面部品抽出部１５４は、ステップ１５４０１で選択したファイルから画面部品を抽出する。

【0137】

ステップ１５４０３：ループ２の開始。画面部品抽出部１５４は、ステップ１５４０２で抽出した全ての画面部品に対して以下の所定ステップを実行する。

【0138】

ステップ１５４０４：画面部品抽出部１５４は、ステップ１５４０１で選択したファイルから、ステップ１５４０３で選択した画面部品の属性を抽出する。

【0139】

ステップ１５４０５：画面部品抽出部１５４は、画面部品情報１０８に一行を追加し、画面列１０８００１にステップ１５４０１で選択したファイルの画面名を、画面部品列１０８００２にステップ１５４０３で選択した画面部品の名前を、画面部品属性列１０８００４にステップ１５４０４で取得した画面部品の属性を書き込む。

【0140】

ステップ１５４０６：ループ３の開始。画面部品抽出部１５４は、部品の全ての組み合わせに対して以下の所定ステップを実行する。

【0141】

ステップ１５４０７：画面部品抽出部１５４は、ステップ１５４０１で選択したファイルの情報に基づき、ステップ１５４０６で選択した２つの画面部品間の関係を特定する。

【0142】

ステップ１５４０８：画面部品抽出部１５４は、画面部品情報１０８のステップ１５４０４で追加した行の同じ画面の画面部品列１０８００３に、ステップ１５４０７で計算した画面部品間の関係を書き込む。この後、ループ３，ループ２，ループ１の順で終了。そして、本処理は正常終了する。

【0143】

図２６は、スニペット利用状況作成部１５５がスニペットの利用状況を作成する処理を示す。

【0144】

ステップＳ１５５００：スニペット利用状況作成部１５５は、スニペット情報１０３の全ての行を取得する。

【0145】

ステップＳ１５５０１：スニペット利用状況作成部１５５は、ステップ１５５００で取得したスニペット情報１０３の行について、その全ての行の組み合わせについて、そのＩＤ列１０３００１の値と同じ値を行と列に持つ、スニペット類似度情報１０７のセルを取得し、その値が１である場合に、ＩＤ列１０３００１の２つのＩＤを同じ群にいれる。

【0146】

ステップＳ１５５０２：ループ１の開始。スニペット利用状況作成部１５５は、ステップ１５５０１でまとめた全ての群に対して以下の所定ステップを実行する。

【0147】

ステップＳ１５５０３：スニペット利用状況作成部１５５は、ステップ１５５０２で選択した群に対し、スニペット利用状況情報１０９に、一行書き込む。

【0148】

ステップＳ１５５０４：スニペット利用状況作成部１５５は、ステップ１５５０２で選択した群のＩＤ列１０３００１の値と同じＩＤ列１０６００１を有するカバレッジ情報１０６の行の値１０６００２の総和を計算し、ステップ１５５０３で追加したスニペット利用状況情報１０９の行の利用量列１０９００２に書き込む。

【0149】

ステップＳ１５５０５：スニペット利用状況作成部１５５は、ステップ１５５０２で選択した群のＩＤ列１０３００１の値と同じ値を行または列に有するスニペット類似度情報１０７のセルの値が一定の閾値以上である場合に、同じ値が行の場合は列の値を、同じ値が列の場合は行の値を取得し、取得した行または列の値を、ステップ１５５０３で追加したスニペット利用状況情報１０９の行の類似スニペット列１０９００３に書き込む。

【0150】

ステップＳ１５５０６：スニペット利用状況作成部１５５は、ステップ１５５０２で選択した群のＩＤ列１０３００１の値と同じ値をＩＤ列１０３００１に有するスニペット情報１０３の行のイベント列１０３００３の値を所得し、その群におけるそれぞれのイベントの割合を計算し、ステップ１５５０３で追加したスニペット利用状況情報１０９の行のイベント列１０９００４に書き込む。

【0151】

ステップＳ１５５０７：スニペット利用状況作成部１５５は、ステップ１５５０２で選択した群のＩＤ列１０３００１の値と、その前ＩＤ列１０４００１の値が同じスニペット依存関係情報１０４の行の後ＩＤ列１０４００２と関係列１０４００３の情報を、ステップ１５５０３で追加したスニペット利用状況情報１０９の行の事後発生列１０９００５に書き込む。

【0152】

ステップＳ１５５０８：スニペット利用状況作成部１５５は、ステップ１５５０２で選択した群の画面名列１０３００２の値及び画面部品列１０３００３の値と同じ値を、画面列１０８００１及び画面部品列１０８００２に有する画面部品情報１０８の行を取得し、同じ画面の画面部品列１０８００３と対象画面部品列１０８００４の値にその群におけるそれぞれの値の割合を計算して追加し、ステップ１５５０３で追加したスニペット利用状況情報１０９の行の同じ画面の画面部品列１０９００６と対象画面部品列１０９００７に書き込む。この後、ループ１終了し、本処理は正常終了する。

【0153】

図２７は、フロー候補生成部１５６がフロー候補を生成する処理を示す。

【0154】

ステップＳ１５６００：フロー候補生成部１５６は、スニペット利用状況情報１０９の各行を読み込む。

【0155】

ステップＳ１５６０１：フロー候補生成部１５６は、ステップ１５６００で取得した行のイベント列１０９００４の値を取得する。

【0156】

ステップＳ１５６０２：ループ１の開始。フロー候補生成部１５６は、ステップ１５６０１で取得した全ての値に対して以下の所定ステップを実行する。

【0157】

ステップＳ１５６０３：ループ２の開始。フロー候補生成部１５６は、ステップ１５６０２及びステップ１５６０６で取得した全ての値に対して以下の所定ステップを実行する。

【0158】

ステップＳ１５６０４：フロー候補生成部１５６は、ステップ１５６０３の値に含まれる割合の数値が一定の閾値を超える、スニペット利用状況情報１０９の行を抽出する。

【0159】

ステップＳ１５６０５：フロー候補生成部１５６は、ステップ１５６０４で抽出した行について、類似スニペット列１０９００３に類似のスニペットが指定される場合は、より利用量列１０９００２の値が大きい行を選択する。

【0160】

ステップＳ１５６０６：フロー候補生成部１５６は、事後発生列１０９００５より、その数値が一定の閾値を超える場合に、次のスニペットＩＤを取得し、その関係とともにフローとして保持する。この後、ループ２は終了する。

【0161】

ステップＳ１５６０７：フロー候補生成部１５６は、ループ２のステップ１５６０６の全てで条件に当てはまるスニペットＩＤ値がなく、かつステップ１５６０３で未処理の値が残っていないか判定する。「はい」と判定すると、ステップ１５６０３へ戻る。「いいえ」と判定すると、ステップＳ１５６０８へ進む。

【0162】

ステップＳ１５６０８：フロー候補生成部１５６は、フロー候補一覧情報１１０に一行を追加し、ＩＤ列１１０００１に連番を、イベント列１１０００２にステップ１５６０１で取得したイベントを、フロー列１１０００３にステップ１５６０６で作成したフローを、同じ画面の画面部品列１１０００４に同じ画面の画面部品列１０９００６から取得した値を、対象画面部品列１１０００５に対象画面部品列１０９００７から取得した値を、それぞれ書き込む。この後、ループ１は終了する。そして、本処理は正常終了する。

【0163】

図２８は、画面部品フロー生成部１５７が画面部品フローを生成する処理を示す。

【0164】

ステップ１５７００：画面部品フロー生成部１５７は、フロー候補一覧情報１１０の全ての行を読み込む。

【0165】

ステップ１５７０１：ループ１の開始。画面部品フロー生成部１５７は、ステップ１５７００で取得したフロー候補一覧情報１１０の全ての行に対して以下の所定ステップを実行する。

【0166】

ステップ１５７０２：画面部品フロー生成部１５７は、ステップ１５７０１で選択したフロー候補一覧情報１１０のフロー列１１０００３の全てのＩＤ値と同じ値の、スニペット情報１０３のＩＤ列１０３００１を有する行の画面名列１０３００２の値に対応する、新規ＨＴＭＬ情報１０２のファイルの全ての画面部品を読み込む。

【0167】

ステップ１５７０３：ループ２の開始。画面部品フロー生成部１５７は、ステップ１５７０２で取得した全ての画面部品の全てのイベントに対して以下の所定ステップを実行する。

【0168】

ステップ１５７０４：画面部品フロー生成部１５７は、ステップ１５７０３で選択したイベントと、ステップ１５７０２で選択した行のイベント列１１２００４の値を比較する。

【0169】

ステップ１５７０５：画面部品フロー生成部１５７は、ステップ１５７０４で比較した値は一致するか判定する。

【0170】

ステップ１５７０６：画面部品フロー生成部１５７は、イベントフロー候補情報１１２のＩＤ列１１２００１に列番を、画面列１１２００２にステップ１５７０２で取得した画面名を、画面部品列１１２００３にステップ１５７０２で取得した画面部品名を、イベント列１１２００４にステップ１５７０３で取得したイベント名を、イベントフロー列１１２００５にステップ１５７０１で選択したフロー候補一覧情報１１０の行のフロー列１１０００３の値を、それぞれ出力する。この後、ループ２が終了し、続いてループ１も終了する。そして本処理は正常終了する。

【0171】

図２９は、フロー候補表示部１５８がフロー候補をコンピュータ端末４へ表示させる処理を示す。

【0172】

ステップＳ１５８００：フロー候補表示部１５８は、イベントフロー候補情報１１２の全行を取得する。

【0173】

ステップＳ１５８０１：フロー候補表示部１５８は、ステップ１５８００で所得したイベントフロー候補情報１１２の全ての行に対し、イベントフロー列１１２００５のイベントフロー値の値に対し、スニペット情報１０３のＩＤ列１０３００１の値が同じ行の、ＩＤ列１０３００１及びコード断片列１０３００７の値を取得する。

【0174】

ステップＳ１５８０２：フロー候補表示部１５８は、ステップ１５８００で取得したイベントフロー候補情報１１２の全行と、ステップ１５８０１で習得したＩＤ列１０３００１及びコード断片列１０３００７の値を、出力装置３に表示する。

【0175】

図３０は、ソースコード生成部１６０がソースコード情報を生成する処理を示す。

【0176】

ステップ１６０００：ソースコード生成部１６０は、入力装置２より、ステップ１５８０２において出力装置３に表示したイベントフロー候補に対する、選択列３１２００において選択されたイベントフロー候補のＩＤ３１２０１を取得する。

【0177】

ステップ１６００１：ソースコード生成部１６０は、ステップ１６０００で取得したＩＤと同じＩＤ列１１２００１の値を有するイベントフロー候補情報１１２の行の、イベントフロー列１１２００５のイベントフロー値の値に従い、その含むスニペットＩＤに対し、スニペット情報１０３のＩＤ列１０３００１が同じ行のコード断片列１０３００７の値で置き換えた文字列を生成する。

【0178】

ステップ１６００２：ソースコード生成部１６０は、ステップ１６００１にて作成した文字列を出力ソースコード情報１２０に出力する。

【0179】

このように構成される本実施例によれば、これから作成しようとする新規画面に複数の画面部品がある場合に、暗黙的な画面部品間の関係を考えてイベントフローをフルスクラッチで作成する必要がなく、新画面の設計情報（イベントフロー）を効率的に作成することができる。

【0180】

本実施例では、実績のある既存ソースコード情報を使って、作成対象の新画面に似た画面のソースコード断片を抽出して再利用できるため、プログラマは効率的に新画面を作成することができる。

【0181】

なお、本発明は上述の実施形態に限定されず、様々な変形例が含まれる。上記実施形態は本発明を分かりやすく説明するために詳細に説明したものであり、必ずしも説明した全ての構成を備えるものに限定されるものではない。また、ある実施形態の構成の一部を他の実施形態の構成に置き換えることもできる。また、ある実施形態の構成に他の実施形態の構成を加えることもできる。また、各実施形態の構成の一部について、他の構成を追加・削除・置換することもできる。

【0182】

本発明の各構成要素は、任意に取捨選択することができ、取捨選択した構成を具備する発明も本発明に含まれる。さらに特許請求の範囲に記載された構成は、特許請求の範囲で明示している組合せ以外にも組み合わせることができる。

【符号の説明】

【0183】

１：画面設計情報生成システム、２：入力装置、３：出力装置、４：コンピュータ端末、５：ストレージシステム、１０１：既存ソースコード情報、１０２：既存画面ＨＴＭＬ、１０３：スニペット情報、１０４：スニペット依存関係情報、１０５：ログ情報、１０６：カバレッジ情報、１０８：画面部品情報、１０９：スニペット利用状況情報、１１０：フロー候補一覧情報、１１１：新規画面ＨＴＭＬ情報、１１２：イベントフロー候補情報、１２０：出力ソースコード情報、１５１：スニペット抽出部、１５２：ログ解析部、１５３：スニペット類似度判定部、１５４：画面部品情報抽出部、１５５：スニペット利用状況作成部、１５６：フロー候補生成部、１５７：画面部品フロー生成部、１５８：フロー候補表示部、１６０：ソースコード生成部

【図1】

【図2】

【図3】

【図4】

【図5】

【図6】

【図7】

【図8】

【図9】

【図10】

【図11】

【図12】

【図13】

【図14】

【図15】

【図16】

【図17】

【図18】

【図19】

【図20】

【図21】

【図22】

【図23】

【図24】

【図25】

【図26】

【図27】

【図28】

【図29】

【図30】