JP2012243034A - Ｗｅｂ画面設計支援システム、Ｗｅｂ画面設計支援方法、Ｗｅｂ画面設計支援プログラム - Google Patents

Abstract

【課題】使用プラットフォームが異なる設計工程間を跨った設計用情報の引き継ぎを可能とし、Ｗｅｂ画面設計における効率化を図る。
【解決手段】Ｗｅｂ画面設計の所定工程で、ユーザが、Ｗｅｂ画面の記述言語とは異なるプラットフォームでの画面出力を行う所定のアプリケーションを用いて、Ｗｅｂ画面上での表示形態と同一の表示形態である表示素材の配置により定義したＷｅｂ画面のレイアウト定義情報と、前記表示素材の属性情報とを記憶した記憶部１０１を備える情報処理装置１００が、記憶部１０１から前記レイアウト定義情報を抽出し、当該レイアウト定義情報が示す画面に配置された表示素材の検索を実行して各表示素材の配置位置を特定し、前記検索された表示素材の属性について記憶部１０１における前記属性情報と照合して各表示素材を識別し、前記レイアウト定義情報に対応した、各表示素材の識別情報とその配置位置の情報を含むプログラム構成定義情報を記憶部１０１に格納する処理を実行する。
【選択図】図１

Description

本発明は、Ｗｅｂ画面設計支援システム、Ｗｅｂ画面設計支援方法、Ｗｅｂ画面設計支援プログラムに関するものであり、具体的には、使用プラットフォームが異なる設計工程間を跨った設計用情報の引き継ぎを可能とし、Ｗｅｂ画面設計における効率化を図る技術に関する。

Ｗｅｂベースのシステムを構築する場合、顧客等の要望に応じて、必要な機能やデザインを備えたＷｅｂ画面の設計作業が生じる。こうした作業を効率化する技術としては、以下のようなものが提案されている。

例えば、ビュー定義及びビュー定義に伴うソースコーディング量を削減可能とする情報処理装置（特許文献１参照）などが提案されている。

また、パターン化が可能なＷｅｂアプリケーションを生成するＷｅｂアプリケーション自動生成装置において、複数のＷｅｂアプリケーションを格納する記憶手段と、前記複数のＷｅｂアプリケーションのうち、当該生成において利用するＷｅｂアプリケーションを特定する手段と、特定された前記Ｗｅｂアプリケーションについて、当該生成におけるカスタマイズ可能箇所を特定する手段とを有し、特定された前記カスタマイズ可能箇所について開発を行うことで開発の局所化を可能となることを特徴とするＷｅｂアプリケーション自動生成装（特許文献２参照）なども提案されている。

また、画面操作による業務実行を実現するアプリケーションプログラムの開発に際して、開発支援ツールとして画面の作成とアプリケーションプログラム実行時の画面入力を制御する機能を有するソフトウェアを利用する場合において、このソフトウェアで作成した複数の画面一つ一つについての画面表示時のキー操作やボタン操作と、その操作に対してアプリケーションプログラムで何を行うか（別の画面を表示する、あるいは処理を終了する）といった動作情報を予め定義しておき、この定義情報通りに画面表示動作をデモンストレーションすることで、実際にアプリケーションプログラムを開発することなく、開発されたアプリケーションプログラムの操作感や仕様の検証を可能にし、以ってアプリケーションプログラム開発後の仕様変更による手戻り作業をなくしてプログラム開発者の負担を軽減することを特徴とする画面の表示動作方法（特許文献３参照）なども提案されている。

特開２００８−４０７５１号公報 特開２００９−２５１９７５号公報 特開平１０−４９３５５号公報

Ｗｅｂ画面の作成は、顧客等と打ち合わせを行いながらその要望をインタビューし、Ｗｅｂ画面のレイアウト案を作成および提示するいわゆる業務設計の工程と、この工程で固まったレイアウト案に沿って実際のＷｅｂ画面設計を行う工程と、この画面設計に応じて最終的なコーディング等を行うプログラミングの工程とで構成されている。

業務設計の工程で顧客等に提示するレイアウト案は、一般的な表計算ソフト等で作成したり、或いは担当者が画面イメージを手書きして作成したものであることが多い。ところが、この業務設計の工程で顧客に提示したレイアウト案は単純に顧客の要望に応じたものであって、業務設計以降の工程にて用いられるｈｔｍｌ等の各種機能や提供予定のＷｅｂシステム上の仕様にマッチしていない場合もあり、結果的に工程上の手戻りや顧客との契約内容見直しが発生することがある。また、各工程それぞれで、個別に画面設計やコーディング等を行っており、同じ画面についての同様の作業が各工程で重複する事態となっている。そのため作業効率の観点から改善の余地が残されていた。

そこで本発明の目的は、使用プラットフォームが異なる設計工程間を跨った設計用情報の引き継ぎを可能とし、Ｗｅｂ画面設計における効率化を図る技術を提供することにある。

上記課題を解決する本発明のＷｅｂ画面設計支援システムは、Ｗｅｂ画面設計の所定工程で、ユーザが、Ｗｅｂ画面の記述言語とは異なるプラットフォームでの画面出力を行う所定のアプリケーションを用いて、Ｗｅｂ画面上での表示形態と同一の表示形態である表示素材の配置により定義したＷｅｂ画面のレイアウト定義情報と、前記表示素材の属性情報とを記憶した記憶部と、記憶部から前記レイアウト定義情報を抽出し、当該レイアウト定義情報が示す画面に配置された表示素材の検索を実行して各表示素材の配置位置を特定し、前記検索された表示素材の属性について記憶部における前記属性情報と照合して各表示素材を識別し、前記レイアウト定義情報に対応した、各表示素材の識別情報とその配置位置の情報を含むプログラム構成定義情報を記憶部に格納する処理を実行する演算部と、を含むことを特徴とする。

また、本発明のＷｅｂ画面設計支援方法は、Ｗｅｂ画面設計の所定工程で、ユーザが、Ｗｅｂ画面の記述言語とは異なるプラットフォームでの画面出力を行う所定のアプリケーションを用いて、Ｗｅｂ画面上での表示形態と同一の表示形態である表示素材の配置により定義したＷｅｂ画面のレイアウト定義情報と、前記表示素材の属性情報とを記憶した記憶部を備える情報処理装置が、記憶部から前記レイアウト定義情報を抽出し、当該レイアウト定義情報が示す画面に配置された表示素材の検索を実行して各表示素材の配置位置を特定し、前記検索された表示素材の属性について記憶部における前記属性情報と照合して各表示素材を識別し、前記レイアウト定義情報に対応した、各表示素材の識別情報とその配置位置の情報を含むプログラム構成定義情報を記憶部に格納する処理を実行する、ことを特徴とする。

また、本発明のＷｅｂ画面設計支援プログラムは、Ｗｅｂ画面設計の所定工程で、ユーザが、Ｗｅｂ画面の記述言語とは異なるプラットフォームでの画面出力を行う所定のアプリケーションを用いて、Ｗｅｂ画面上での表示形態と同一の表示形態である表示素材の配置により定義したＷｅｂ画面のレイアウト定義情報と、前記表示素材の属性情報とを記憶した記憶部を備える情報処理装置に、記憶部から前記レイアウト定義情報を抽出し、当該レイアウト定義情報が示す画面に配置された表示素材の検索を実行して各表示素材の配置位置を特定し、前記検索された表示素材の属性について記憶部における前記属性情報と照合して各表示素材を識別し、前記レイアウト定義情報に対応した、各表示素材の識別情報とその配置位置の情報を含むプログラム構成定義情報を記憶部に格納する処理を実行させる、ことを特徴とする。

本発明によれば、使用プラットフォームが異なる設計工程間を跨った設計用情報の引き継ぎを可能とし、Ｗｅｂ画面設計における効率化を図ることが可能となる。

本実施形態のＷｅｂ画面設計支援システムを含むネットワーク構成図である。 本実施形態におけるＷｅｂ画面設計支援システムの構成例を示すブロック図である。 本実施形態における画面レイアウト定義ファイルの一例を示す図である。 本実施形態における表示素材の一例を示す図である。 本実施形態におけるプログラム構成定義ファイルの一例を示す図である。 本実施形態におけるＷｅｂ画面設計支援方法の処理手順例１を示すフロー図である。 本実施形態におけるＷｅｂ画面設計支援方法の処理手順例２を示すフロー図である。 本実施形態におけるＷｅｂ画面設計支援方法の処理概念例を示す図である。 本実施形態におけるＷｅｂ画面設計支援方法の処理手順例３を示すフロー図である。 本実施形態における新画面レイアウト定義ファイルとプログラム構成定義ファイル（旧）との比較処理の概念例を示す図である。 Ｗｅｂ画面設計支援システムの他の構成例を示す図である。

−−−システム構成−−−
以下に本発明の実施形態について図面を用いて詳細に説明する。図１は、本実施形態のＷｅｂ画面設計支援システム１００を含むネットワーク構成図である。図１に示すＷｅｂ画面設計支援システム１００（以下、システム１００）は、使用プラットフォームが異なる設計工程間を跨った設計用情報の引き継ぎを可能とし、Ｗｅｂ画面設計における効率化を図るコンピュータシステムである。

前記システム１００は、ネットワーク１２０を介して、Ｗｅｂ画面設計の担当者らが用いる担当者端末２００と通信可能な、例えばサーバ装置を想定できる。上述してきたように、Ｗｅｂ画面の設計、生成はいくつかの工程に分かれており、例えば各工程毎に担当者が存在するものとすれば、担当者の数だけ担当者端末２００がネットワーク１２０に接続されていることとなる。

図２は、本実施形態におけるＷｅｂ画面設計支援システムの構成例を示すブロック図である。また、前記システム１００のハードウェア構成は以下の如くとなる。前記システム１００は、ハードディスクドライブなど適宜な不揮発性記憶装置で構成される記憶部１０１、ＲＡＭなど揮発性記憶装置で構成されるメモリ１０３、前記記憶部１０１に保持されるプログラム１０２をメモリ１０３に読み出すなどして実行し装置自体の統括制御を行なうとともに各種判定、演算及び制御処理を行なうＣＰＵなどの演算部１０４、ユーザからのキー入力や音声入出力を担う入出力部１０５、ネットワーク１２０と接続し他装置との通信処理を担う通信部１０６、を備える。なお、システム１００に対する担当者からのデータ入力や、画面出力の処理が前記担当者端末２００で行われる場合、前記入出力部１０５は不要としてよい。

また、記憶部１０１内には、本実施形態のＷｅｂ画面設計支援システムとして必要な機能を実装する為のプログラム１０２と、処理に必要な各種データ類（レイアウト定義情報１２５、プログラム構成定義情報１２６、表示素材１２７およびその属性情報１２８、Ｗｅｂ画面のプロトコルに対応した言語で記述した表示素材の定義データなど）が少なくとも記憶されている。レイアウト定義情報１２５は、Ｗｅｂ画面設計の所定工程で、ユーザが、Ｗｅｂ画面の記述言語とは異なるプラットフォームでの画面出力を行う所定のアプリケーションを用いて、Ｗｅｂ画面上での表示形態と同一の表示形態である表示素材の配置により定義した定義情報となる。なお、以降は、前記レイアウト定義情報１２５を、画面レイアウト定義ファイル１２５、前記プログラム構成定義情報１２６を、プログラム構成定義ファイル１２６と称する。

続いて、本実施形態のＷｅｂ画面設計支援システム１００が備える機能について説明する。上述したように、以下に説明する機能は、例えばＷｅｂ画面設計支援システム１００を構成する情報処理装置（サーバ装置）がプログラムを実行することで実装される機能と言える。

前記システム１００は、記憶部１０１から前記画面レイアウト定義ファイル１２５を抽出し、当該画面レイアウト定義ファイル１２５が示す画面に配置された表示素材１２７の検索を実行して各表示素材１２７の配置位置を特定し、前記検索された表示素材１２７の属性について記憶部１０１における前記属性情報１２８と照合して各表示素材１２７を識別し、前記画面レイアウト定義ファイル１２５に対応した、各表示素材１２７の識別情報とその配置位置の情報を含むプログラム構成定義ファイル１２６を記憶部１０１に格納する。

なお、上記したように、前記システム１００の記憶部１０１が、前記表示素材１２７のデータを記憶しており、担当者からの指示を受けて前記画面レイアウト定義ファイル１２５の生成をシステム１００にて実行するとすれば好適である。この場合、前記システム１００は、ｈｔｍｌなどＷｅｂ画面の記述言語とは異なるプラットフォームでの画面出力を行う所定のアプリケーションを記憶部１０１に備えている。このアプリケーションの例としては、一般的な表計算アプリケーション１１０を想定できる。

例えば、業務設計工程の担当者は、担当者端末２００を介して前記システム１００にアクセスして前記表計算アプリケーション１１０を起動、実行し、該表計算アプリケーション実行時の表示画面上で、画面を構成するセルに記憶部１０１の前記表示素材１２７を呼び出して配置し、画面レイアウト定義を行う。前記システム１００の側では、前記表計算アプリケーション１１０での表示素材１２７のユーザ選択指示を入出力部１０５（入力部）で受け付け、ユーザ選択指示が示す表示素材１２７を記憶部１０１より抽出し、ユーザ選択指示が示す表示位置に配置する処理を行い、当該処理により定義された画面レイアウト定義ファイル１２５を記憶部１０１に記憶する処理を実行することとなる。

なお、担当者端末２００にて前記表計算アプリケーション１１０および表示素材１２７が備わっていて、担当者端末２００で画面レイアウト定義ファイル１２５の生成を行うとしてもよい。この場合は担当者端末２００から前記システム１００に画面レイアウト定義ファイル１２５がアップロードされる。

表示素材１２７としては、ラベル、ボタン、テーブル、チェックボックス、ラジオボタン、ハイパーリンク、検索窓、画像、テキストボックス、などがあげられる。これら表示素材１２７は、いずれもＷｅｂ画面での表示形態と同じサイズ、色を前記表計算アプリケーション１１０の表示画面でも発現する表示用オブジェクトとなる。当然ながら、顧客に提供するＷｅｂサービスの仕様に技術的にも適合したオブジェクトである。

また前記システム１００は、既に画面レイアウト定義ファイル１２５が記憶部１０１に格納されている所定のＷｅｂ画面に関して、新たに画面レイアウト定義ファイル１２５が記憶部１０１にて格納された場合、これを読み出して当該新画面レイアウト定義ファイル１２５が示す画面に配置された表示素材１２７の検索を実行して各表示素材１２７の配置位置を特定し、前記検索された表示素材１２７の属性について記憶部１０１における前記属性情報と照合して各表示素材１２７を識別し、前記新画面レイアウト定義ファイル１２５に関して新たなプログラム構成定義ファイル１２６を得る処理を実行する。

この場合、前記システム１００は、前記新画面レイアウト定義ファイル１２５に関して得られた新プログラム構成定義ファイル１２６と、該当Ｗｅｂ画面に関して記憶部１０１に保持している現在のプログラム構成定義ファイル１２６とを対照し、表示素材１２７の名称と表示素材間の配置構成が異なる場合に、記憶部１０１における現在のプログラム構成定義ファイル１２６を新プログラム構成定義ファイル１２６で更新し、表示素材１２７の名称と表示素材間の配置構成が同じであってその他の所定項目についてのみ相違する場合に、現在のプログラム構成定義ファイル１２６のうち、前記所定項目についてのみ新プログラム構成定義ファイル１２６で更新する処理を実行する。

また、前記システム１００は、記憶部１０１において、Ｗｅｂ画面のプロトコルに対応したｈｔｍｌなどの言語で記述した前記各表示素材１２７の定義データを格納したテーブルを更に記憶しているとしてもよい。つまりシステム１００は、前記表示素材１２７をｈｔｍｌ等の記述言語で表現したデータを保持していることになる。

この場合、前記システム１００は、前記所定工程以降（例：業務設計工程）の後工程で用いられる、前記表計算アプリケーション１１０とは異なる他アプリケーション１１１（例：Ｗｅｂサイトのデザインを行うアプリケーションなど）の実行に対応して、記憶部１０１より前記プログラム構成定義ファイル１２６を読み出し、当該プログラム構成定義ファイル１２６が含む各表示素材１２７の情報を前記テーブルに照合して、各表示素材１２７の定義データ（例：ｈｔｍｌ等で記述されたもの）を特定する。

また前記システム１００は、ここで特定した定義データを、該当表示素材１２７の配置位置（プログラム構成定義ファイル１２６に情報が定義されている）に合わせて、例えば所定Ｗｅｂ画面のひな形中に配置したり、或いは前記ひな形を記述しているｈｔｍｌファイル中に記述を埋め込むことでＷｅｂ画面表示用データを生成して入出力部１０５（出力部）に表示する処理を実行する。Ｗｅｂ画面表示用データの表示先は、入出力部１０５でなく、担当者端末２００であっても勿論よい。

なお、図１にて示した上記システム構成の他、図１１の構成例に示すように前記担当者端末２００がシステム１００の機能およびデータ類を備え、Ｗｅｂ画面設計支援システムとして機能する構成も想定できる。この場合、担当者それぞれの担当者端末２００、すなわちローカル環境で本発明のＷｅｂ画面設計支援方法が実行され、プログラム構成定義ファイル１２６の作成も可能となる。或いは利用環境等に応じて、こうした担当者端末２００と、前記システム１００としてのサーバ装置とで、機能やデータ類を分担保持し、互いにネットワークを介して処理データ授受を行って協働することも想定できる。

−−−データ構造例−−−
次に、本実施形態のＷｅｂ画面設計支援システム１００が記憶部１０１に備えて、適宜利用する各種データ、テーブル等におけるデータ構造例について説明する。図３は本実施形態における画面レイアウト定義ファイル１２５の一例を示す図である。レイアウト定義情報１２５は、Ｗｅｂ画面設計の所定工程、例えば業務設計工程で、担当者端が、Ｗｅｂ画面の記述言語（ｈｔｍｌ等）とは異なるプラットフォームでの画面出力を行う所定のアプリケーション１１０（表計算アプリケーション等）を用いて、Ｗｅｂ画面上での表示形態と同一の表示形態である表示素材１２７の配置により定義した定義情報となる。図３に示すように、この画面レイアウト定義ファイル１２５は、前記表計算アプリケーション１１０での出力画面３００に対応した表計算シートのファイルとなる。

表示素材１２７としては、図４に例を示すように、ラベル、ボタン、テーブル、チェックボックス、ラジオボタン、ハイパーリンク、検索窓、画像、テキストボックス、などがあげられる。これら表示素材１２７は、いずれもＷｅｂ画面での表示形態と同じサイズ、色を前記表計算アプリケーション１１０の表示画面でも発現する表示用オブジェクトとなる。当然ながら、顧客に提供するＷｅｂサービスの仕様に技術的にも適合したオブジェクトである。

また、図４にて例示するように、各表示素材１２７は、ラベル、ボタン、テーブル、チェックボックス、ラジオボタン、ハイパーリンク、検索窓、画像、テキストボックスといったタイプに分類され、該当タイプ名が表示素材１２７に付与されている。こうしたタイプ名は、表示素材１２７それぞれの属性情報１２８となる。

本実施形態では、例えば前記システム１００の記憶部１０１が、前記表示素材１２７のデータを記憶しており、前記システム１００（ないし担当者端末２００）は、前記表計算アプリケーション１１０の起動時には、図４に示すような画面４００にて表示素材１２７の一覧として入出力部１０５（ないし担当者端末２００の出力装置）へ出力する。また、前記システム１００は、当然ながら、前記表計算アプリケーション１１０の起動に際し、図３に例示した前記画面３００を入出力部１０５ないし担当者端末２００へ出力している。

業務設計工程の担当者は、前記画面３００および前記画面４００を閲覧しつつ、後のＷｅｂ画面を構成すべき表示素材１２７を画面４００から選び出して、ドラッグ等の操作で画面３００中に配置し、表計算シートを作成する要領で画面レイアウト定義を行う。前記システム１００の側では、前記表計算アプリケーション１１０での表示素材１２７のユーザ選択指示を入出力部１０５で（ないし担当者端末２００から）受け付け、ユーザ選択指示が示す表示素材１２７を記憶部１０１より抽出し、ユーザ選択指示が示す表示位置に配置する処理を行い、当該処理により定義された表計算シートを画面レイアウト定義ファイル１２５として記憶部１０１に記憶することとなる。

図５は本実施形態におけるプログラム構成定義ファイル１２６の一例を示す図である。プログラム構成定義ファイル１２６は、前記システム１００が、記憶部１０１から前記画面レイアウト定義ファイル１２５を抽出し、当該画面レイアウト定義ファイル１２５が示す画面に配置された表示素材１２７の検索を実行して各表示素材１２７の配置位置を特定し、前記検索された表示素材１２７の属性について記憶部１０１における前記属性情報１２８と照合して各表示素材１２７を識別して得た情報を含むものであり、前記画面レイアウト定義ファイル１２５に対応した、各表示素材１２７の識別情報とその配置位置の情報を含むファイルとなる。よって図５では、画面レイアウト定義ファイル１２５からプログラム構成定義ファイル１２６が生成される処理イメージをあわせて例示している。

図５の例に示すように、プログラム構成定義ファイル１２６は、前記画面レイアウト定義ファイル１２５から検索された表示素材１２７を識別する項目名称（例：担当コード、担当者名、顧客コード、顧客名、ＣＳＶ出力ボタン、など）、キー名称（例：Ａ０１＿ｔｅｘｔ０１、など）、タイプ（例：ｌａｂｅｌ、ｔｅｘｔ、ｂｕｔｔｏｎ、など）、該当セルの位置情報（例：縦１,横１、など）、セルの結合情報（例：縦結合数１，横結合数３、など）といった情報が、画面毎に集約されたファイルである。また、本実施形態では表計算アプリケーション１１０を例にあげていることから、表示素材１２７が表計算アプリケーション１１０におけるセルをターゲットに設定されることが前提として、セル色など所定属性を持ったセル＝表示素材１２７のかたまりを１グループとみなしてグループ毎に表示素材１２７の情報をまとめている。こうしたグルーピングの処理等の詳細については後述する。

−−−処理手順例１−−−
以下、本実施形態におけるＷｅｂ画面設計支援方法の実際手順について図に基づき説明する。以下で説明するＷｅｂ画面設計支援方法に対応する各種動作は、前記システム１００がメモリ等に読み出して実行するプログラムによって実現される。そして、このプログラムは、以下に説明される各種の動作を行うためのコードから構成されている。

図６は、本実施形態におけるＷｅｂ画面設計支援方法の処理手順例１を示すフロー図である。ここで、当該フローの開始に先立って、既に画面レイアウト定義ファイル１２５が前記システム１００の記憶部１０１に保持されているものとする。画面レイアウト定義ファイル１２５は、上述したように、例えば、業務設計工程の担当者が、担当者端末２００を介して前記システム１００にアクセスして前記表計算アプリケーション１１０を起動、実行し、該表計算アプリケーション実行時の表示画面上で、画面を構成するセルに記憶部１０１の前記表示素材１２７を呼び出して配置し定義を行ったものとなる。

当該フローにおいて、まず前記システム１００は、前記記憶部１０１から前記画面レイアウト定義ファイル１２５をメモリ１０３に読み込み（ｓ１００）、画面レイアウト定義ファイル１２５の解析を行う（ｓ１０１）。この画面レイアウト定義ファイル１２５の解析処理については図７のフロー図に示している。

このフローにおいて、まず前記システム１００は、前記画面レイアウト定義ファイル１２５の左部セルを上から縦に読み込んで表示素材１２７の検索を行う（ｓ１５０）。続いて前記システム１００は、前記ステップｓ１５０で読み込んだセルの背景色をチェックする（ｓ１５１）。本実施形態では、画面レイアウト定義ファイル１２５におけるセルの背景色”灰色”を、画面上の”背景色”と定義しているため、セルの背景色チェックに際しては背景色が「灰色」かそれ以外の色かのチェックを実施することになる。この背景色チェックのステップｓ１５１は、画面レイアウト定義ファイル１２５が示す画面レイアウト内のグループ数分繰返し実行する（「グループ」については後述）。

読み込んだセルの背景色が「灰色」であった場合（ｓ１５１：灰色）、前記システム１００は該当セルが表示素材１２７ではないと認識し、読み込み対象のセルを１列下のセルに移動する（ｓ１５２）。他方、読み込んだセルの背景色が「灰色」以外であった場合（ｓ１５１：灰色以外）、前記システム１００は、該当セルを表示素材１２７と認識する。この場合、前記システム１００は、例えばそのセルの背景色によってグループの種類（例：ボタン、ヘッダなど）を識別し（ｓ１５３）、読み込み対象のセルを１列下のセルに移動して前記ステップｓ１５１と同様の処理を実行する。該処理を繰り返し実行し、読み込んだセルの背景色が以降最初に灰色となった時点で、それまで前記ステップｓ１５３にて識別されていたセルのグループを１グループとして範囲の確定を行う（ｓ１５４）。

続いて前記システム１００は、前記ステップｓ１５４で確定したグループに関して、グループ内のセルを左上から読み込む（ｓ１５５）。以降のステップは、該当グループ内のセル数分繰返し実行する。前記システム１００は、前記ステップｓ１５５で読み込んだセルに関して縦横の結合数をカウントする（ｓ１５６）。

次に前記システム１００は、前記ステップｓ１５５で読み込んだセルについて、そのタイプがラベルかラベル以外かをセルの色でチェックする（ｓ１５７）。該当セルの色が例えば「薄い灰色」であった場合（ｓ１５７：うす灰色）、前記システム１００は、該当セルを、タイプが「ラベル」の表示素材１２７と識別し（ｓ１５８）、該当セルに結合している結合数分の他セルを読み飛ばし（ｓ１５９）、処理をステップｓ１５６に戻す（同グループでの次の対象セルを特定してｓ１５８まで処理を繰り返す）。

他方、前記ステップｓ１５５で読み込んだセルの色が例えば「白色」であった場合（ｓ１５７：白色）、前記システム１００は、該当セルについて、その枠線の種類、色を確認する（ｓ１６０）。例えば、枠線が太線であった場合、前記システム１００は該当セルに関して、顧客による入力が可能なセルと識別し、枠線が細線であった場合、前記システム１００は該当セルに関して、顧客による入力に応じてシステム側で自動的に値が設定される読み取り専用のセルと識別する。こうした枠線に応じた判定を行った前記システム１００は、該当セルをタイプが「テキスト」で「入力可能」ないし「読み取り専用」の表示素材１２７と識別して（ｓ１６１）、前記ステップｓ１５９に処理を進める。

前記システム１００は以上の処理を画面レイアウト定義ファイル１２５に関して読み込んだセルについて全て実行し、プログラム構成定義ファイル１２６（図５参照）を生成し、記憶部１０１に格納することとなる（ｓ１０２）。なお、前記システム１００は上記の処理にてセルの読み込み等を行って表示素材１２７を識別するのにあわせて、該当表示素材１２７が配置されているセルの配置位置（例：表計算アプリケーション１１０の画面上におけるセルの行列番号）も当然ながら取得しているものとする。

その後、前記システム１００は、前記所定工程以降（例：業務設計工程）の後工程で用いられる、前記表計算アプリケーション１１０とは異なる他アプリケーション１１１（例：Ｗｅｂサイトのデザインを行うアプリケーションなど）の実行に対応して、記憶部１０１より前記プログラム構成定義ファイル１２６を読み出し、当該プログラム構成定義ファイル１２６が含む各表示素材１２７の情報を所定テーブルに照合して、各表示素材１２７の定義データ（例：ｈｔｍｌ等で記述されたもの）を特定するとしてもよい（ｓ１０３）。

前記所定テーブルは、Ｗｅｂ画面のプロトコルに対応したｈｔｍｌなどの言語で記述した前記各表示素材１２７の定義データを格納したテーブルとなる。つまりシステム１００は、前記表示素材１２７をｈｔｍｌ等の記述言語で表現したデータを保持していることになる。

また前記システム１００は、前記ステップｓ１０３で特定した定義データを、該当表示素材１２７の配置位置（プログラム構成定義ファイル１２６に情報が定義されているセルの位置情報）に合わせて、例えば所定Ｗｅｂ画面（例：表計算アプリケーション１１０の出力画面と形態、サイズが同じで、表計算アプリケーション１１０におけるセル位置とＷｅｂ画面中での位置との対応関係が予め明らか）のひな形中に配置したり、或いは前記ひな形を記述しているｈｔｍｌファイル中の所定位置（例：表示素材１２７のタイプ、項目名等に応じて予めフラグが立ててある）に記述を埋め込むことでＷｅｂ画面表示用データを生成して入出力部１０５（出力部）に表示する処理を実行する（ｓ１０４）。Ｗｅｂ画面表示用データの表示先は、入出力部１０５でなく、担当者端末２００であっても勿論よい。

こうして、業務設計工程で顧客に提示する画面レイアウト（画面レイアウト定義ファイル１２５）と、以降の工程（プログラミングの工程など）で実際に設計、作成されるＷｅｂ画面とを跨って、設計用情報が効率的に引き継ぎされ、例えばプログラミング工程から業務設計工程への手戻りといった無駄な手順が抑制される。勿論、業務設計工程で顧客に提示された画面レイアウトに基づいた設計用情報が以降の工程で共有され、工程毎に同じＷｅｂ画面を一から設計するといった重複作業も低減されることになる。

−−−処理手順例２−−−
次に、画面レイアウト定義ファイル１２５の変更に応じてプログラム構成定義ファイル１２６を更新する処理について図に基づき説明する。図８は当該処理手順例２を示す概念図であり、図９は、本実施形態におけるＷｅｂ画面設計支援方法の処理手順例３を示すフロー図である。また、図１０は新画面レイアウト定義ファイル１２５とプログラム構成定義ファイル１２６（旧）との比較について説明した図である。

この場合、前記システム１００は、記憶部１０１において画面レイアウト定義ファイル１２５の更新事象を検知し、新たな画面レイアウト定義ファイル１２５を記憶部１０１から読み出す。この時、例えば該当画面レイアウト定義ファイル１２５の含むグループを１つ読み込む（ｓ２００）。以降の処理は、画面レイアウト定義ファイル１２５の含むグループ数分繰返しとなる。

前記システム１００は、前記新たな画面レイアウト定義ファイル１２５が示す画面に配置された表示素材１２７の検索を実行して各表示素材１２７の配置位置を特定し、前記検索された表示素材１２７の属性について記憶部１０１における前記属性情報と照合して各表示素材１２７を識別し、前記新画面レイアウト定義ファイル１２５に関して新たなプログラム構成定義ファイル１２６を得る処理を実行する。また前記システム１００は、得られた新プログラム構成定義ファイル１２６と、該当Ｗｅｂ画面に関して記憶部１０１に保持している現在のプログラム構成定義ファイル１２６（旧）とを対照する。

上記処理を行うため、前記システム１００は、記憶部１０１にてそれまで保持していたプログラム構成定義ファイル１２６(旧)において、所定グループ（＝前記ステップｓ２００で前記新たな画面レイアウト定義ファイル１２５について読み込んだグループに対応したグループ）において、エレメント（各表示素材１２７の識別情報と配置位置の情報を記述したレコード）を上方から順次読み込む（ｓ２０１）。

続いて前記システム１００は、前記プログラム構成定義ファイル１２６（旧）および前記新画面レイアウト定義ファイル１２５からそれぞれ読み込んだ各エレメントにおける、例えば「項目名称（日本語）」が互いに完全一致し、エレメント（表示素材１２７の各情報等）間の配置の順序が同じであることを確認する（ｓ２０２）。

前記ステップｓ２０２での確認の結果、新画面レイアウト定義ファイル１２５とプログラム構成定義ファイル１２６（旧）とで、エレメントすなわち表示素材１２７に関する所定項目の名称、および表示素材間の配置順序が異なっていた場合（ｓ２０３：異なる）、前記システム１００は、画面レイアウト定義ファイル１２５が異なる構成に変更されたものと判断し、対象グループに関して記憶部１０１におけるプログラム構成定義ファイル１２６（旧）を新プログラム構成定義ファイル１２６で更新し（ｓ２０４）、フローを終了する。

他方、前記ステップｓ２０２での確認の結果、新画面レイアウト定義ファイル１２５とプログラム構成定義ファイル１２６（旧）とで、エレメントすなわち表示素材１２７に関する所定項目の名称、および表示素材間の配置順序が同じであった場合（ｓ２０３：同じ）、前記システム１００は、新画面レイアウト定義ファイル１２５とプログラム構成定義ファイル１２６（旧）との間で、対象グループのエレメントごとに、例えば「タイプ」、「位置情報」、「結合数」を比較する（ｓ２０５）。以降の処理は、対象グループ内のエレメント数分繰り返し実行することとなる。

前記システム１００は、前記ステップｓ２０５の比較処理により、「タイプ」、「位置情報」、「結合数」が異なると判定した場合（ｓ２０６：異なる）、新画面レイアウト定義ファイル１２５において一部のレイアウト変更が発生したと判断し、前記プログラム構成定義ファイル１２６（旧）のうち、該当項目（「タイプ」、「位置情報」、「結合数」など）についてのみ新プログラム構成定義ファイル１２６で更新する処理を実行する（ｓ２０７）。

他方、前記ステップｓ２０５の比較処理により、「タイプ」、「位置情報」、「結合数」が同じであると判定した場合（ｓ２０６：同じ）、前記システム１００は、新たな画面レイアウト定義ファイル１２５において変更はないと判断し（ｓ２０８）、フローを終了する。

以上、本発明を実施するための最良の形態などについて具体的に説明したが、本発明はこれに限定されるものではなく、その要旨を逸脱しない範囲で種々変更可能である。

こうした本実施形態によれば、使用プラットフォームが異なる設計工程間を跨った設計用情報の引き継ぎを可能とし、Ｗｅｂ画面設計における効率化を図ることが可能となる。

本明細書の記載により、少なくとも次のことが明らかにされる。すなわち、前記Ｗｅｂ画面設計支援システムにおける前記演算部は、既にレイアウト定義情報が記憶部に格納されている所定のＷｅｂ画面に関して、新たにレイアウト定義情報が記憶部にて格納された場合、これを読み出して当該新レイアウト定義情報が示す画面に配置された表示素材の検索を実行して各表示素材の配置位置を特定し、前記検索された表示素材の属性について記憶部における前記属性情報と照合して各表示素材を識別し、前記新レイアウト定義情報に関して新たなプログラム構成定義情報を得る処理と、前記新レイアウト定義情報に関して得られた新プログラム構成定義情報と、該当Ｗｅｂ画面に関して記憶部に保持している現在のプログラム構成定義情報とを対照し、表示素材の名称と表示素材間の配置構成が異なる場合に、記憶部における現在のプログラム構成定義情報を新プログラム構成定義情報で更新し、表示素材の名称と表示素材間の配置構成が同じであってその他の所定項目についてのみ相違する場合に、現在のプログラム構成定義情報のうち、前記所定項目についてのみ新プログラム構成定義情報で更新する処理を実行する、としてもよい。

また、前記Ｗｅｂ画面設計支援システムにおける前記記憶部は、前記表示素材のデータを更に記憶しており、前記演算部は、前記アプリケーションでの表示素材のユーザ選択指示を入力部で受け付け、ユーザ選択指示が示す表示素材を記憶部より抽出し、ユーザ選択指示が示す表示位置に配置する処理を行い、当該処理により定義されたＷｅｂ画面のレイアウト定義情報を記憶部に記憶する処理を実行する、としてもよい。

また、前記Ｗｅｂ画面設計支援システムにおいて、前記記憶部は、Ｗｅｂ画面のプロトコルに対応した言語で記述した前記各表示素材の定義データを格納したテーブルを更に記憶しており、前記演算部は、前記所定工程以降の後工程で用いられる、前記アプリケーションとは異なる他アプリケーションの実行に対応して、記憶部より前記プログラム構成定義情報を読み出し、当該プログラム構成定義情報が含む各表示素材の情報を前記テーブルに照合して、各表示素材の定義データを特定し、Ｗｅｂ画面の表示用データを生成して出力部に表示する処理を実行する、としてもよい。

１００ Ｗｅｂ画面設計支援システム
１０１ 記憶部
１０２ プログラム
１０３ メモリ
１０４ 演算部
１０５ 入出力部
１０６ 通信部
１１０ 表計算アプリケーション（所定のアプリケーション）
１１１ Ｗｅｂデザインアプリケーション（他アプリケーション）
１２０ ネットワーク
１２５ 画面レイアウト定義ファイル（レイアウト定義情報）
１２６ プログラム構成定義ファイル（プログラム構成定義情報）
１２７ 表示素材
１２８ 表示素材の属性情報
２００ 担当者端末

Claims (6)

1. Ｗｅｂ画面設計の所定工程で、ユーザが、Ｗｅｂ画面の記述言語とは異なるプラットフォームでの画面出力を行う所定のアプリケーションを用いて、Ｗｅｂ画面上での表示形態と同一の表示形態である表示素材の配置により定義したＷｅｂ画面のレイアウト定義情報と、前記表示素材の属性情報とを記憶した記憶部と、
   記憶部から前記レイアウト定義情報を抽出し、当該レイアウト定義情報が示す画面に配置された表示素材の検索を実行して各表示素材の配置位置を特定し、前記検索された表示素材の属性について記憶部における前記属性情報と照合して各表示素材を識別し、前記レイアウト定義情報に対応した、各表示素材の識別情報とその配置位置の情報を含むプログラム構成定義情報を記憶部に格納する処理を実行する演算部と
   を含むことを特徴とするＷｅｂ画面設計支援システム。
2. 前記演算部は、
   既にレイアウト定義情報が記憶部に格納されている所定のＷｅｂ画面に関して、新たにレイアウト定義情報が記憶部にて格納された場合、これを読み出して当該新レイアウト定義情報が示す画面に配置された表示素材の検索を実行して各表示素材の配置位置を特定し、前記検索された表示素材の属性について記憶部における前記属性情報と照合して各表示素材を識別し、前記新レイアウト定義情報に関して新たなプログラム構成定義情報を得る処理と、
   前記新レイアウト定義情報に関して得られた新プログラム構成定義情報と、該当Ｗｅｂ画面に関して記憶部に保持している現在のプログラム構成定義情報とを対照し、表示素材の名称と表示素材間の配置構成が異なる場合に、記憶部における現在のプログラム構成定義情報を新プログラム構成定義情報で更新し、表示素材の名称と表示素材間の配置構成が同じであってその他の所定項目についてのみ相違する場合に、現在のプログラム構成定義情報のうち、前記所定項目についてのみ新プログラム構成定義情報で更新する処理を実行する、
   ことを特徴とする請求項１に記載のＷｅｂ画面設計支援システム。
3. 前記記憶部は、
   前記表示素材のデータを更に記憶しており、
   前記演算部は、
   前記アプリケーションでの表示素材のユーザ選択指示を入力部で受け付け、ユーザ選択指示が示す表示素材を記憶部より抽出し、ユーザ選択指示が示す表示位置に配置する処理を行い、当該処理により定義されたＷｅｂ画面のレイアウト定義情報を記憶部に記憶する処理を実行する、
   ことを特徴とする請求項１または２に記載のＷｅｂ画面設計支援システム。
4. 前記記憶部は、
   Ｗｅｂ画面のプロトコルに対応した言語で記述した前記各表示素材の定義データを格納したテーブルを更に記憶しており、
   前記演算部は、
   前記所定工程以降の後工程で用いられる、前記アプリケーションとは異なる他アプリケーションの実行に対応して、記憶部より前記プログラム構成定義情報を読み出し、当該プログラム構成定義情報が含む各表示素材の情報を前記テーブルに照合して、各表示素材の定義データを特定し、Ｗｅｂ画面の表示用データを生成して出力部に表示する処理を実行する、
   ことを特徴とする請求項１〜３のいずれかに記載のＷｅｂ画面設計支援システム。
5. Ｗｅｂ画面設計の所定工程で、ユーザが、Ｗｅｂ画面の記述言語とは異なるプラットフォームでの画面出力を行う所定のアプリケーションを用いて、Ｗｅｂ画面上での表示形態と同一の表示形態である表示素材の配置により定義したＷｅｂ画面のレイアウト定義情報と、前記表示素材の属性情報とを記憶した記憶部を備える情報処理装置が、
   記憶部から前記レイアウト定義情報を抽出し、当該レイアウト定義情報が示す画面に配置された表示素材の検索を実行して各表示素材の配置位置を特定し、前記検索された表示素材の属性について記憶部における前記属性情報と照合して各表示素材を識別し、前記レイアウト定義情報に対応した、各表示素材の識別情報とその配置位置の情報を含むプログラム構成定義情報を記憶部に格納する処理を実行する、
   ことを特徴とするＷｅｂ画面設計支援方法。
6. Ｗｅｂ画面設計の所定工程で、ユーザが、Ｗｅｂ画面の記述言語とは異なるプラットフォームでの画面出力を行う所定のアプリケーションを用いて、Ｗｅｂ画面上での表示形態と同一の表示形態である表示素材の配置により定義したＷｅｂ画面のレイアウト定義情報と、前記表示素材の属性情報とを記憶した記憶部を備える情報処理装置に、
   記憶部から前記レイアウト定義情報を抽出し、当該レイアウト定義情報が示す画面に配置された表示素材の検索を実行して各表示素材の配置位置を特定し、前記検索された表示素材の属性について記憶部における前記属性情報と照合して各表示素材を識別し、前記レイアウト定義情報に対応した、各表示素材の識別情報とその配置位置の情報を含むプログラム構成定義情報を記憶部に格納する処理を実行させる、
   ことを特徴とするＷｅｂ画面設計支援プログラム。