(57)【要約】【課題】  画面デザインのテンプレートの編集に係る作業を効率化する仕組みを提供する。【解決手段】  複数の部品を持つテンプレート画面のデザインを編集し、スタイルシートを生成する情報処理装置であって、テンプレート画面に含まれる部品のデザインのプロパティのキーに対応する値を編集するためのテンプレート編集画面を表示し、デザインを適用した部品を表示する。表示された部品に対して、ユーザの指示を受け付ける。デザインのプロパティのうち、指示を受け付けた部品に対応するプロパティのキーと値を表示する。表示されたプロパティのキーに対応する値の変更を受け付ける。変更を受け付けた値に従って、部品の表示を更新する。表示を更新された部品のプロパティのキーおよび値を用いて、スタイルシートを生成することを特徴とする情報処理装置。【選択図】  図２１
2017059237.tif 000002
【特許請求の範囲】
【請求項１】
複数の部品を持つテンプレート画面のデザインを編集し、スタイルシートを生成する情報処理装置であって、
前記テンプレート画面に含まれる部品のデザインのプロパティのキーに対応する値を編集するためのテンプレート編集画面を表示するテンプレート編集画面表示手段と、
前記テンプレート編集画面表示手段により表示されたテンプレート編集画面に、前記デザインを適用した前記部品を表示するテンプレート部品表示手段と、
前記テンプレート部品表示手段により表示された部品に対して、ユーザの指示を受け付けるテンプレート部品指示受付手段と、
前記デザインのプロパティのうち、前記テンプレート部品指示受付手段により指示を受け付けた部品に対応するプロパティのキーと値を表示するプロパティ表示手段と、
前記プロパティ表示手段により表示されたプロパティのキーに対応する値の変更を受け付けるプロパティ値変更受付手段と、
前記プロパティ値変更受付手段により変更を受け付けた値に従って、前記部品の表示を更新するテンプレート部品表示更新手段と、
前記テンプレート部品表示更新手段により表示を更新された部品のプロパティのキーおよび値を用いて、前記スタイルシートを生成するスタイルシート生成手段と
を備えることを特徴とする情報処理装置。
【請求項２】
前記プロパティ表示手段は、
前記テンプレート部品指示受付手段により指示を受け付けた部品が複数の場合、前記テンプレート部品指示受付手段により指示を受け付けた複数の部品のすべてに含まれるプロパティのキーと値を表示すること
を特徴とする請求項１に記載の情報処理装置。
【請求項３】
前記テンプレート部品表示手段は、
前記プロパティ値変更受付手段により変更を受け付けたプロパティの値に従って、前記テンプレート部品指示受付手段により指示を受け付けた部品と前記プロパティ値変更受付手段により変更を受け付けたプロパティに対応する部品との表示を更新すること
を特徴とする請求項１または２に記載の情報処理装置。
【請求項４】
前記テンプレート部品表示手段により表示された部品のプロパティのキーおよび値を対応付けて、デザインテンプレートとして記憶するデザインテンプレート記憶手段を更に備えること
を特徴とする請求項１乃至３のいずれか１項に記載の情報処理装置。
【請求項５】
前記部品を含むアプリケーション画面を出力するアプリケーションを構築するアプリケーション構築手段を更に備え、
前記アプリケーション構築手段は、
前記スタイルシート生成手段により生成されたスタイルシートを用いるアプリケーション画面を出力するアプリケーションを構築すること
を特徴とする請求項１乃至４のいずれか１項に記載の情報処理装置。
【請求項６】
前記アプリケーション画面に表示する前記部品のレイアウトを編集するレイアウト編集画面を表示するレイアウト編集画面表示手段と、
前記プロパティ値変更受付手段により変更を受け付けた値に従って、前記レイアウト編集画面表示手段により表示されたレイアウト編集画面に含まれる前記部品にデザインを適用するレイアウト編集画面適用手段と
を更に備えることを特徴とする請求項５に記載の情報処理装置。
【請求項７】
前記レイアウト編集画面表示手段により表示された部品に対して、ユーザの指示を受け付けるレイアウト編集画面部品指示受付手段
を更に備え、
前記プロパティ表示手段は、前記レイアウト編集画面部品指示受付手段により指示を受け付けた部品に対応するプロパティのキーと値を表示すること
を特徴とする請求項６に記載の情報処理装置。
【請求項８】
前記レイアウト編集画面表示手段により表示されたアプリケーション画面に適用している前記テンプレートがユーザによって作成されたテンプレートか否かを判定するテンプレート判定手段
を更に備え、
前記プロパティ表示手段は、
前記レイアウト編集画面部品指示受付手段によりユーザの指示を受け付けた場合であって、前記テンプレート判定手段によりユーザによって作成されたテンプレートであると判定された場合は当該テンプレートを用い、前記テンプレート判定手段によりユーザによって作成されたテンプレートでないと判定された場合は当該テンプレートをコピーして作成したテンプレートを用い、前記レイアウト編集画面部品指示受付手段により指示を受け付けた画面部品に対応するプロパティのキーと値を表示すること
を特徴とする請求項７に記載の情報処理装置。
【請求項９】
前記プロパティ表示手段により表示されたプロパティのキーに対応する値の変更をすべく、ユーザの指示に従って、前記デザインテンプレート記憶手段により記憶されているデザインテンプレートの選択を受け付けるデザインテンプレート選択手段と
を更に備え、
前記プロパティ値変更受付手段は、
前記デザインテンプレート選択手段により選択を受け付けたデザインテンプレートとして前記デザインテンプレート記憶手段により記憶されているプロパティの値を用いて、前記プロパティ表示手段により表示されたプロパティのキーに対応する値を変更すること
を特徴とする請求項４に記載の情報処理装置。
【請求項１０】
前記プロパティ値変更受付手段により変更を受け付ける値が、前記テンプレート画面のどこのデザインに影響を及ぼすかを識別して表示するデザイン影響識別表示手段を更に備えること
を特徴とする請求項１乃至９のいずれか１項に記載の情報処理装置。
【請求項１１】
前記デザイン影響識別表示手段により表示された識別表示するためのオブジェクトに対して、ユーザの操作を受け付けるユーザ操作受付手段と
前記プロパティ値変更受付手段は、
前記ユーザ操作受付手段により受け付けた操作に従って、前記プロパティ表示手段により表示されたプロパティのキーに対応する値を変更すること
を特徴とする請求項１０に記載の情報処理装置。
【請求項１２】
前記プロパティ表示手段は、
前記テンプレート部品指示受付手段により指示を受け付けた部品が複数の場合、前記テンプレート部品指示受付手段により指示を受け付けた部品のプロパティのキーと値を部品毎に並べて表示し、同じキーに対応して設定されている値が部品間で異なることを識別して表示すること
を特徴とする請求項１乃至１１のいずれか１項に記載の情報処理装置。
【請求項１３】
前記プロパティ表示手段は、
前記テンプレート部品指示受付手段により指示を受け付けた部品のプロパティのキーと値を表示する場合、当該値の近傍に他の部品で同じキーに対応して設定されている値を表示すること
を特徴とする請求項１乃至１２のいずれか１項に記載の情報処理装置。
【請求項１４】
複数の部品を持つテンプレート画面のデザインを編集し、スタイルシートを生成する情報処理装置における処理方法であって、
前記情報処理装置が、
前記テンプレート画面に含まれる部品のデザインのプロパティのキーに対応する値を編集するためのテンプレート編集画面を表示するテンプレート編集画面表示ステップと、
前記テンプレート編集画面表示ステップにより表示されたテンプレート編集画面に、前記デザインを適用した前記部品を表示するテンプレート部品表示ステップと、
前記テンプレート部品表示ステップにより表示された部品に対して、ユーザの指示を受け付けるテンプレート部品指示受付ステップと、
前記デザインのプロパティのうち、前記テンプレート部品指示受付ステップにより指示を受け付けた部品に対応するプロパティのキーと値を表示するプロパティ表示ステップと、
前記プロパティ表示ステップにより表示されたプロパティのキーに対応する値の変更を受け付けるプロパティ値変更受付ステップと、
前記プロパティ値変更受付ステップにより変更を受け付けた値に従って、前記部品の表示を更新するテンプレート部品表示更新ステップと、
前記テンプレート部品表示更新ステップにより表示を更新された部品のプロパティのキーおよび値を用いて、前記スタイルシートを生成するスタイルシート生成ステップと
を実行すること
を特徴とする処理方法。
【請求項１５】
複数の部品を持つテンプレート画面のデザインを編集し、スタイルシートを生成する情報処理装置で実行可能なプログラムであって、
前記情報処理装置を、
前記テンプレート画面に含まれる部品のデザインのプロパティのキーに対応する値を編集するためのテンプレート編集画面を表示するテンプレート編集画面表示手段と、
前記テンプレート編集画面表示手段により表示されたテンプレート編集画面に、前記デザインを適用した前記部品を表示するテンプレート部品表示手段と、
前記テンプレート部品表示手段により表示された部品に対して、ユーザの指示を受け付けるテンプレート部品指示受付手段と、
前記デザインのプロパティのうち、前記テンプレート部品指示受付手段により指示を受け付けた部品に対応するプロパティのキーと値を表示するプロパティ表示手段と、
前記プロパティ表示手段により表示されたプロパティのキーに対応する値の変更を受け付けるプロパティ値変更受付手段と、
前記プロパティ値変更受付手段により変更を受け付けた値に従って、前記部品の表示を更新するテンプレート部品表示更新手段と、
前記テンプレート部品表示更新手段により表示を更新された部品のプロパティのキーおよび値を用いて、前記スタイルシートを生成するスタイルシート生成手段
として機能させること
を特徴とするプログラム。
【発明の詳細な説明】
【技術分野】
【０００１】
本発明は、プログラムを生成するための情報処理装置、情報処理装置の処理方法、およびプログラムに関する。
【背景技術】
【０００２】
Ｗｅｂアプリケーションは、検索画面や登録画面など複数の画面を持つことが一般的である。複数の各画面デザインは、色彩やフォントなど、一定の統一感を持つデザインであることが望まれる。このように統一されたデザインのテンプレートを「テーマ」と呼ぶ。
従来、特許文献１に示すように、画面毎にグラフィカルツールを使って、画面デザインを編集する仕組みが示されている。
【先行技術文献】
【特許文献】
【０００３】
【特許文献１】特願２００８−３１３１５６号公報
【発明の概要】
【発明が解決しようとする課題】
【０００４】
しかし、特許文献１の仕組みでは、ある画面のデザインを修正した場合、その他の画面にも同様のデザイン修正を施す必要があるため、非効率であり、作業工数が増加するという課題があった。
【０００５】
一方、複数画面のデザインのテンプレートを管理するスタイルシートを作成するグラフィカルなツールがある。このツールのプレビュー機能を用いれば、作成したスタイルシートをツールが用意してあるサンプル画面に適用し、デザインのテンプレートである「テーマ」を確認することができる。
【０００６】
しかし、このようなツールには、スタイルシートに含まれる沢山のプロパティのキーと値が表示されており、ユーザによってプロパティ値が変更されると、値が変更されたプロパティのキーに対応するサンプル画面に表示された部品の表示が更新される仕組みである。よって、沢山のプロパティの中からユーザが変更したいプロパティを探し出して指定し、値を変更しなくてはならないという課題がある。
【０００７】
そこで、本発明の目的は、画面デザインのテンプレートの編集に係る作業を効率化する仕組みを提供することである。
【課題を解決するための手段】
【０００８】
複数の部品を持つテンプレート画面のデザインを編集し、スタイルシートを生成する情報処理装置であって、前記テンプレート画面に含まれる部品のデザインのプロパティのキーに対応する値を編集するためのテンプレート編集画面を表示するテンプレート編集画面表示手段と、前記テンプレート編集画面表示手段により表示されたテンプレート編集画面に、前記デザインを適用した前記部品を表示するテンプレート部品表示手段と、前記テンプレート部品表示手段により表示された部品に対して、ユーザの指示を受け付けるテンプレート部品指示受付手段と、前記デザインのプロパティのうち、前記テンプレート部品指示受付手段により指示を受け付けた部品に対応するプロパティのキーと値を表示するプロパティ表示手段と、前記プロパティ表示手段により表示されたプロパティのキーに対応する値の変更を受け付けるプロパティ値変更受付手段と、前記プロパティ値変更受付手段により変更を受け付けた値に従って、前記部品の表示を更新するテンプレート部品表示更新手段と、前記テンプレート部品表示更新手段により表示を更新された部品のプロパティのキーおよび値を用いて、前記スタイルシートを生成するスタイルシート生成手段とを備えることを特徴とする情報処理装置。
【発明の効果】
【０００９】
本発明によれば、画面デザインのテンプレートの編集に係る作業を効率化する仕組みを提供することができる。
【図面の簡単な説明】
【００１０】
【図１】本発明に係わるプログラム開発装置、プログラム開発サーバ、データベースサーバ、アプリケーションクライアント、アプリケーションサーバの構成の一例を示すシステム構成図である。
【図２】本発明に係わるプログラム開発装置、プログラム開発サーバ、データベースサーバ、アプリケーションクライアント、アプリケーションサーバとして適用可能な各ハードウェア構成の一例を示すブロック図である。
【図３】本発明の実施の形態のソフトウェア構成を示すブロック図の一例である。
【図４】プログラム開発装置の構成図である。
【図５】Ｅ−Ｒ図の一例を示す図である。
【図６】画面遷移図の一例を示す図である。
【図７】リポジトリ定義の一例を示す図である。
【図８】データベース定義４０１の一例を示す図である。
【図９】アプリケーション定義４０２の一例を示す図である。
【図１０】データモデル定義４０３の一例を示す図である。
【図１１】データモデル定義４０３の一例を示す図である。
【図１２】データモデル操作定義の一例を示す図である。
【図１３】商品検索画面６０１の入出力定義の一例を示す図である。
【図１４】商品購入画面６０２の入出力定義の一例を示す図である。
【図１５】商品購入結果画面６０３の入出力定義の一例を示す図である。
【図１６】受注一覧画面の入出力定義の一例を示す図である。
【図１７】入出力定義の一例を示す図である。
【図１８】入出力定義のメニュー設定の一例を示す図である。
【図１９】ビジネスプロセス定義の一例を示す図である。
【図２０】新テーマ作成ダイアログの一例を示す図である。
【図２１】テーマエディタの一例を示す図である。
【図２２】テーマエディタ画面２１００を用いて、夏のテーマをベースに作成した、春のテーマの一例を示す図である。
【図２３】テーマエディタ画面２１００を用いて、夏のテーマをベースに作成した、秋のテーマの一例を示す図である。
【図２４】テーマエディタ画面２１００を用いて、夏のテーマをベースに作成した、冬のテーマの一例を示す図である。
【図２５】テーマ部品４１２のうち、ラベルを選択した場合のプロパティエディタ部４１３の一例を示す図である。
【図２６】テーマ部品４１２のうち、ボタンを選択した場合のプロパティエディタ部４１３の一例を示す図である。
【図２７】テーマ部品４１２のうち、リンクを選択した場合のプロパティエディタ部４１３の一例を示す図である。
【図２８】テーマ部品４１２のうち、複数のテーマ部品４１２を選択した場合のプロパティエディタ部４１３の一例を示す図である。
【図２９】テーマファイルの中身の一例を示す図である。
【図３０】ユーザテーマファイル作成のフローチャートの一例を示す図である。
【図３１】ユーザテーマファイル更新のフローチャートの一例を示す図である。
【図３２】テーマエディタ画面描画のフローチャートの一例を示す図である。
【図３３】レイアウトエディタ部の一例を示す図である。
【図３４】レイアウトエディタ部へテーマを適用するフローチャートの一例を示す図である。
【図３５】Ｗｅｂアプリケーション生成フローチャートの一例を示す図である。
【図３６】Ｗｅｂアプリケーション画面イメージの一例を示す図である。
【図３７】Ｗｅｂアプリケーション画面イメージの一例を示す図である。
【図３８】レイアウトエディタ部からテーマ部品４１２選択を行う一例を示す図である。
【図３９】レイアウトエディタ部からテーマ部品４１２選択を行う一例を示す図である。
【図４０】レイアウトエディタ部からテーマエディタ部を表示する処理フローチャートの一例を示す図である。
【図４１】テーマ部品４１２とテーマプロパティファイルにおけるプロパティキーとの対応付けテーブルの一例を示す図である。
【図４２】第３の実施形態において、ユーザテーマファイル更新のフローチャートの一例を示す図である。
【図４３】第３の実施形態において、テーマ部品４１２のうち、複数のテーマ部品４１２を選択した場合のプロパティエディタ部４１３の一例を示す図である。
【図４４】第３の実施形態において、プロパティエディタ部４１３で選択されたプロパティが部品のどこに影響を与えるかを識別表示の一例を示す図である。
【図４５】第３の実施形態において、プロパティエディタ部４１３で選択されたプロパティのキーと同じプロパティのキーを持つ他の部品の値表示の一例を示す図である。
【図４６】第３の実施形態において、プロパティエディタ部４１３の値として既存テーマ選択の一例を示す図である。
【発明を実施するための形態】
【００１１】
〔第１の実施形態〕
以下、本発明の実施の形態を、図面を参照して詳細に説明する。
図１は、本発明に係わるプログラム開発装置（開発者端末）、プログラム開発サーバ、データベースサーバ、アプリケーションクライアント（クライアント装置）、アプリケーションサーバの構成の一例を示すシステム構成図である（情報処理システム）。
【００１２】
プログラム開発装置１０１（情報処理装置）は、開発者の操作に従って画面レイアウトおよびデータベース検索指示などを定義する。プログラム開発装置１０１単体では、ユーザ（Ｗｅｂアプリケーション開発者）の入力受付を行い、後述するプログラム開発サーバ１０２に実際のプログラム生成処理、アプリケーション生成処理をさせてもよいし、プログラム開発装置１０１単体でプログラム生成、アプリケーション生成まで処理してもよい。
【００１３】
なお、この実施形態においては、プログラム開発装置１０１で生成するアプリケーションはＷｅｂアプリケーションとしたが、これに限定するものではなく、携帯電話・スマートフォン・タブレットなどの情報処理装置で動作するアプリケーションや組込みソフトウェアなど、Ｗｅｂ技術による通信を利用したアプリケーションでなくてもよい。
【００１４】
プログラム開発サーバ１０２ａ〜１０２ｂ（情報処理装置）は、プログラム開発装置１０１により入力された開発者の指示に従って、プログラムを開発する。プログラム開発サーバ１０２ａはＬＡＮなどのネットワーク１０６内に配置されてもよいし、プログラム開発サーバ１０２ｂはインターネット上やクラウド上に配置されてもよい。
【００１５】
データベースサーバ１０３ａ〜１０３ｂ（情報処理装置）は、開発されたアプリケーションが使用するデータベースであり、また本発明では開発時にも動作確認などのために利用してもよい。例えば、開発者が利用するためにデータベースサーバ１０３は、プログラム開発装置１０１と同一の装置で構成されていてもよいし、ＬＡＮなどのネットワーク１０６内に配置されてもよい（データベースサーバ１０３ａ）。またインターネット上やクラウド上に配置されてもよい（データベースサーバ１０３ｂ）。また、プログラム開発装置１０１が、プログラム開発サーバ１０２と協調する場合には、プログラム開発サーバ１０２とデータベースサーバ１０３が同一の装置内に構成されていてもよい。
【００１６】
アプリケーションサーバ１０５ａ〜１０５ｂ（情報処理装置）は、プログラム開発装置１０１で開発されたアプリケーションを実行する。ＬＡＮなどのネットワーク１０６内に配置されてもよい（アプリケーションサーバ１０５ａ）し、またインターネット上やクラウド上に配置されてもよい（アプリケーションサーバ１０５ｂ）。また、ネットワーク１０６、インターネット、クラウド上のデータベースサーバ１０３と接続して動作する可能である。
【００１７】
アプリケーションクライアント１０４ａ〜１０４ｂ（情報処理装置）は、アプリケーションサーバ１０５と協調してプログラム開発装置１０１で開発したアプリケーションプログラムを動作させる、ユーザの入力端末である。ＬＡＮなどのネットワーク１０６内に配置されてもよい（アプリケーションクライアント１０４ａ）し、またインターネット上やクラウド上に配置されてもよい（アプリケーションクライアント１０４ｂ）。携帯端末などの情報処理装置であってもよい。
【００１８】
図２は、本発明に係わるプログラム開発装置、プログラム開発サーバ、データベースサーバ、アプリケーションクライアント、アプリケーションサーバとして適用可能な各ハードウェア構成の一例を示すブロック図である。
図２において、ＣＰＵ２０１は、システムバス２０４に接続される各デバイスを統括的に制御する。
【００１９】
また、ＲＯＭ２０３あるいは外部メモリ２１１には、ＣＰＵ２０１の制御プログラムであるオペレーティングシステム（ＯＳ）や、各サーバ、クライアント、装置など情報処理装置の後述する各種機能を実現するためのプログラムが記憶されている。
ＲＡＭ２０２は、ＣＰＵ２０１の主メモリ、ワークエリア、一時待避領域等として機能する。
【００２０】
入力コントローラ２０５は、入力部２０９からの入力を制御する。この入力部２０９としては、情報処理装置では、キーボード、マウス等のポインティングデバイスが挙げられる。
出力コントローラ２０６は、出力部２１０の表示を制御する。この出力部２１０としては、例えば、ＣＲＴや液晶ディスプレイ等が挙げられる。
【００２１】
外部メモリコントローラ２０７は、ブートプログラム、各種のアプリケーション、フォントデータ、ユーザーファイル、編集ファイル、プリンタドライバ等を記憶する外部メモリ２１１へのアクセスを制御する。加えて、各サーバ、クライアント、装置等の各種機能を実現するための各種テーブル、パラメータが記憶されている。この外部メモリ２１１としては、ハードディスク（ＨＤ）やフレキシブルディスク（ＦＤ）、ＰＣＭＣＩＡカードスロットにアダプタを介して接続されるコンパクトフラッシュ（登録商標）、スマートメディア等が挙げられる。
通信Ｉ／Ｆコントローラ２０８は、ネットワークを介して外部機器との通信制御処理を実行する。
【００２２】
本発明を実現するためのプログラム２１２は外部メモリ２１１に記録されており、必要に応じてＲＡＭ２０２にロードされることによりＣＰＵ２０１によって実行されるものである。
図３は、本発明の実施の形態のソフトウェア構成を示すブロック図の一例である。
プログラム開発装置１０１は、以下の機能部を備える。
テンプレート編集画面表示部３０１は、テンプレートに含まれるプロパティのキーと値とを編集する画面を表示する機能部である。
【００２３】
テンプレート編集画面表示部３０１は、テンプレート画面に含まれる部品のデザインのプロパティのキーに対応する値を編集するためのテンプレート編集画面を表示する機能部である。
テンプレート部品表示部３０２は、テンプレート編集画面表示部３０１により表示された画面に、テンプレートを適用した部品を表示する機能部である。
【００２４】
テンプレート部品表示部３０２は、テンプレート編集画面表示部３０１により表示されたテンプレート編集画面に、デザインを適用した部品を表示する機能部である。
テンプレート部品指示受付部３０３は、テンプレート部品表示部３０２により表示された部品に対して、ユーザの指示を受け付ける機能部である。
【００２５】
プロパティ表示部３０４は、テンプレートに含まれるプロパティのうち、テンプレート部品指示受付部３０３により指示を受け付けた部品に対応するプロパティのキーと値を表示する機能部である。
【００２６】
プロパティ表示部３０４は、デザインのプロパティのうち、テンプレート部品指示受付部３０３により指示を受け付けた部品に対応するプロパティのキーと値を表示する機能部である。
プロパティ値変更受付部３０５は、プロパティ表示部３０４により表示されたプロパティの値の変更を受け付ける機能部である。
プロパティ値変更受付部３０５は、プロパティ表示部３０４により表示されたプロパティのキーに対応する値の変更を受け付ける機能部である。
テンプレート部品表示部３０２は、プロパティ値変更受付部３０５により変更を受け付けたプロパティの値に従って、部品の表示を更新する機能部である。
テンプレート部品表示更新部３１２は、プロパティ値変更受付部３０５により変更を受け付けた値に従って、部品の表示を更新する機能部である。
テンプレート部品表示更新部３１２は、プロパティ値変更受付部３０５により変更を受け付けたプロパティの値に従って、部品の表示を更新する機能部である。
【００２７】
スタイルシート生成部３１３は、テンプレート部品表示更新部３１２により表示を更新された部品のプロパティのキーおよび値を用いて、スタイルシートを生成する機能部である。
【００２８】
プロパティ表示部３０４は、テンプレート部品指示受付部３０３により指示を受け付けた部品が複数の場合、テンプレート部品指示受付部３０３により指示を受け付けた複数の部品のすべてに含まれるプロパティのキーと値を表示する機能部である。
【００２９】
テンプレート部品表示部３０２は、プロパティ値変更受付部３０５により変更を受け付けたプロパティの値に従って、テンプレート部品指示受付部３０３により指示を受け付けた部品とプロパティ値変更受付部３０５により変更を受け付けたプロパティに対応する部品との表示を更新する機能部である。
プログラム生成部３０６は、アプリケーションプログラムを生成する機能部である。
【００３０】
編集画面表示部３０７は、プログラム生成部３０６により生成されたプログラムが動作することによって出力される、複数の画面部品を持つアプリケーション画面を編集する編集画面を表示する機能部である。
レイアウト編集画面表示部３１４は、アプリケーション画面に表示する部品のレイアウトを編集するレイアウト編集画面を表示する機能部である。
【００３１】
編集画面表示部３０７により表示された編集画面に含まれる複数の画面部品に対して、テンプレートに含まれるプロパティのキーと値とを適用する機能部である。
【００３２】
レイアウト編集画面適用部３１５は、プロパティ値変更受付部３０５により変更を受け付けた値に従って、レイアウト編集画面表示部３１４により表示されたレイアウト編集画面に含まれる部品にデザインを適用する機能部である。
画面部品指示受付部３０８は、編集画面表示部３０７により表示された画面部品に対して、ユーザの指示を受け付ける機能部である。
レイアウト編集画面部品指示受付部３１６は、レイアウト編集画面表示部３１４により表示された部品に対して、ユーザの指示を受け付ける機能部である。
プロパティ表示部３０４は、画面部品指示受付部３０８により指示を受け付けた画面部品に対応するプロパティのキーと値を表示する機能部である。
【００３３】
プロパティ表示部３０４は、レイアウト編集画面部品指示受付部３１６により指示を受け付けた画面部品に対応するプロパティのキーと値を表示する機能部である。
【００３４】
テンプレート判定部３０９は、編集画面表示部３０７により表示されたアプリケーション画面に適用しているテンプレートがユーザによって作成されたテンプレートか否かを判定する機能部である。
【００３５】
テンプレート判定部３０９は、レイアウト編集画面表示部３１４により表示されたアプリケーション画面に適用しているテンプレートがユーザによって作成されたテンプレートか否かを判定する機能部である。
【００３６】
プロパティ表示部３０４は、画面部品指示受付部３０８によりユーザの指示を受け付けた場合であって、テンプレート判定部３０９によりユーザによって作成されたテンプレートであると判定された場合は当該テンプレートを用い、テンプレート判定部３０９によりユーザによって作成されたテンプレートでないと判定された場合は当該テンプレートをコピーして作成したテンプレートを用い、画面部品指示受付部３０８により指示を受け付けた画面部品に対応するプロパティのキーと値を表示する機能部である。
【００３７】
プロパティ表示部３０４は、レイアウト編集画面部品指示受付部３１６によりユーザの指示を受け付けた場合であって、テンプレート判定部３０９によりユーザによって作成されたテンプレートであると判定された場合は当該テンプレートを用い、テンプレート判定部３０９によりユーザによって作成されたテンプレートでないと判定された場合は当該テンプレートをコピーして作成したテンプレートを用い、レイアウト編集画面部品指示受付部３１６により指示を受け付けた画面部品に対応するプロパティのキーと値を表示する機能部である。
画面レイアウト編集部３１０は、アプリケーションプログラムが動作することによって出力されるアプリケーション画面のレイアウトを編集する機能部である。
テンプレート編集部３１１は、アプリケーション画面のデザインのテンプレートを編集する機能部である。
【００３８】
プログラム生成部３０６は、テンプレート編集部３１１により編集されたテンプレートを適用したアプリケーション画面を含むアプリケーションプログラムを生成する機能部である。
【００３９】
デザインテンプレート記憶部３１７は、テンプレート部品表示部３０２により表示された部品のプロパティのキーおよび値を対応付けて、デザインテンプレートとして記憶する機能部である。
アプリケーション構築部３１８は、部品を含むアプリケーション画面を出力するアプリケーションを構築する機能部である。
【００４０】
アプリケーション構築部３１８は、スタイルシート生成部３１３により生成されたスタイルシートを用いるアプリケーション画面を出力するアプリケーションを構築する機能部である。
【００４１】
デザインテンプレート選択部３１９は、プロパティ表示部３０４により表示されたプロパティのキーに対応する値の変更をすべく、ユーザの指示に従って、デザインテンプレート記憶部３１７により記憶されているデザインテンプレートの選択を受け付ける機能部である。
【００４２】
プロパティ値変更受付部３０５は、デザインテンプレート選択部３１９により選択を受け付けたデザインテンプレートとしてデザインテンプレート記憶部３１７により記憶されているプロパティの値を用いて、プロパティ表示部３０４により表示されたプロパティのキーに対応する値を変更する機能部である。
【００４３】
デザイン影響識別表示部３２０は、プロパティ値変更受付部３０５により変更を受け付ける値が、テンプレート画面のどこのデザインに影響を及ぼすかを識別して表示する機能部である。
【００４４】
ユーザ操作受付部３２１は、デザイン影響識別表示部３２０により表示された識別表示するためのオブジェクトに対して、ユーザの操作を受け付ける機能部である。
【００４５】
プロパティ値変更受付部３０５は、ユーザ操作受付部３２１により受け付けた操作に従って、プロパティ表示部３０４により表示されたプロパティのキーに対応する値を変更する機能部である。
【００４６】
プロパティ表示部３０４は、テンプレート部品指示受付部３０３により指示を受け付けた部品が複数の場合、テンプレート部品指示受付部３０３により指示を受け付けた部品のプロパティのキーと値を部品毎に並べて表示し、同じキーに対応して設定されている値が部品間で異なることを識別して表示する機能部である。
【００４７】
プロパティ表示部３０４は、テンプレート部品指示受付部３０３により指示を受け付けた部品のプロパティのキーと値を表示する場合、当該値の近傍に他の部品で同じキーに対応して設定されている値を表示する機能部である。
【００４８】
図４は、Ｗｅｂアプリケーション自動生成装置の構成図である。Ｗｅｂアプリケーション自動生成装置は、Ｗｅｂアプリケーションを開発するユーザが定義した定義ファイルをもとにＷｅｂアプリケーションを自動生成することを目的とした装置である。リポジトリ定義部４００、テーマエディタ部４１０、レイアウトエディタ部４２０、Ｗｅｂアプリケーション生成部４３０により構成される。リポジトリ定義部４００は、データベース定義４０１、アプリケーション定義４０２、データモデル定義４０３、入出力定義４０４、ビジネスプロセス定義４０５、ユーザテーマファイル４０６を備える。これらのファイルはユーザによって作られ、後述する図７に示すツリー構造で表示される。
テーマエディタ部４１０は、テーマ描画部４１１、テーマ部品４１２、プロパティエディタ部４１３を備える。
【００４９】
テーマ描画部４１１には、テーマの全体イメージがわかるように、Ｗｅｂ画面で利用されるコンポーネント部品が一通り事前に備え付けられている。ここで言う、コンポーネント部品とはテーマ部品４１２を指す。
レイアウトエディタ部４２０は、レイアウト描画部４２１、レイアウト部品４２２を備える。
【００５０】
Ｗｅｂアプリケーション生成部４３０は生成処理部４３１、組込テーマファイル４３２を備える。なお、開発者には組込テーマファイル４３２を編集させたくない、かつ開発者がテーマファイルのすべてのプロパティについて設定することは手間がかかってしまうため、開発者が所望するデザインに最も近い組込テーマファイル４３２を選択させることで、組込テーマファイル４３２をコピーし、リポジトリ定義部４００のユーザテーマファイル４０６を作成する。
【００５１】
図２１は、テーマエディタ部４１０の一例を示す図であり、２１００に示す部分がテーマ描画部４１１である。テーマ描画部４１１にはテーマ部品４１２を表示する。テーマ描画部４１１と同一ウィンドウ上の２１０２には、プロパティエディタ部４１３が存在する。
【００５２】
テーマ描画部４１１には、ユーザテーマファイル４０６（図２９にて後述する）の中身（以下、エントリと記載する）を読み取り、そのエントリに含まれるプロパティのキーと値に従って、「フォント」「カラー」「装飾」等を反映させたテーマ部品４１２を表示する。プロパティエディタ部４１３には、ユーザテーマファイル４０６のエントリに含まれるプロパティのキーと値を表示し、ユーザはプロパティ値を編集できる。すなわち、プロパティエディタ部４１３は、テンプレートに含まれるプロパティのキーと値とを編集する画面である。また、プロパティエディタ部４１３は、テンプレート画面に含まれる部品のデザインのプロパティのキーに対応する値を編集するためのテンプレート編集画面である。また、テーマエディタ部４１０は、アプリケーション画面のデザインのテンプレートを編集する機能部である。
【００５３】
次に、レイアウトエディタ部４２０が備えるレイアウト描画部４２１について説明する。レイアウト描画部４２１には、ユーザが作成した入出力定義の内容をグラフィカルな画面として表示する。レイアウト描画部４２１には、入出力定義４０４の定義したレイアウト部品を表示する。表示に際して、レイアウト描画部４２１はユーザテーマファイル４０６または組込テーマファイル４３２を読み取り、レイアウト部品に「フォント」「カラー」「装飾」等を反映させ、入出力定義４０４の内容を画面表示する。
【００５４】
すなわち、レイアウトエディタ部４２０は、生成されたプログラムが動作することによって出力される、複数の画面部品を持つアプリケーション画面を編集する編集画面を表示する機能部である。また、レイアウトエディタ部４２０は、アプリケーションプログラムが動作することによって出力されるアプリケーション画面のレイアウトを編集する機能部である。また、レイアウトエディタ部４２０は、アプリケーション画面に表示する部品のレイアウトを編集するレイアウト編集画面を表示する機能部である。
【００５５】
次に、Ｗｅｂアプリケーション生成部４３０について説明する。生成処理部４３１はリポジトリ定義部４００からデータベース定義４０１、アプリケーション定義４０２、データモデル定義４０３、入出力定義４０４、ビジネスプロセス定義４０５を読み込む。さらにユーザの指定に従い、組込テーマファイル４３２またはユーザテーマファイル４０６を選択して読み込む。生成処理部４３１は読み込んだ定義ファイルからソースコード４４１、ＨＴＭＬ／ＪＳＰ／ＪａｖａＳｃｒｉｐｔ（登録商標）４４２を生成する。さらにテーマファイルからスタイルシート４４３を生成する。なお、ソースコード４４１は生成処理部によって、生成後にコンパイルが行われる。すなわち、Ｗｅｂアプリケーション生成部４３０は、アプリケーションプログラムを生成する機能部である。また、Ｗｅｂアプリケーション生成部４３０は、編集されたテンプレートを適用したアプリケーション画面を含むアプリケーションプログラムを生成する機能部である。
次にテーマエディタについて、Ｗｅｂアプリケーションのサンプル例を利用して説明する。
【００５６】
図５は、これから説明するアプリケーションサンプルのＥＲ図である。この実施形態においては、例として、商品データモデル５０１と受注データモデル５０２を用意した。これらのデータモデルは物理的にはデータベースのテーブルに該当する。商品と受注の多重度は１：１である。
【００５７】
図６は、アプリケーションの画面遷移図である。ユーザログイン後に表示された商品検索画面６０１において、ユーザにより商品検索が行われる。検索結果を同画面に表示する。検索結果一覧から購入する商品が選択されると、商品購入画面６０２に遷移する。商品購入のための情報入力を受け付け、購入ボタンが押下されると、商品購入結果画面６０３を表示する。
図７は、アプリケーションを生成するためのリポジトリ定義のツリー構造の一例を示す図である。
以降において、リポジトリ定義の詳細について説明する。
図８は、データベース定義４０１の一例を示す図である。８０１は、データベース接続のための情報が記録されている。８０２は、８０１の詳細ビューである。
【００５８】
図９は、アプリケーション定義４０２の一例を示す図である。アプリケーション定義４０２は、入出力一覧９０１と所属入出力９０２の領域に分かれている。入出力一覧９０１には、リポジトリ定義部４００に保存されている入出力定義が初期状態ですべて表示されている。所属入出力９０２は、アプリケーションに所属する入出力定義が設定される。この所属した入出力定義のみがアプリケーション生成の対象となる。
図１０は、データモデル定義４０３の一例を示す図である。このデータモデル定義は、図５で示した商品データモデルの定義である。
図１１は、図１０と同様にデータモデル定義４０３の一例を示す図である。このデータモデル定義４０３は、図５で示した受注データモデルの定義である。
【００５９】
図１２は、受注データモデルのデータ操作を示す、データモデル操作定義の一例を示す図である。受注登録（操作コード：ＪＵＣＨＵ＿ＩＮＳＥＲＴ）の定義を保持している。操作ロジックとして、画面から送信されるＪＵＣＨＵ＿ＩＤ、ＳＨＯＨＩＮ＿ＩＤ、ＱＵＡＮＩＴＹ、ＤＥＬＩＶＥＲＹの各入力データを受注データモデルに登録する定義がなされている。
【００６０】
図１３は、商品検索画面６０１の入出力定義の一例を示す図である。入出力定義画面１３００は、レイアウトエディタ部１３０１に入出力定義をグラフィカルに表示している。また、例として商品ＩＤフィールド１３０２を選択した状態において、商品ＩＤフィールド１３０２の定義詳細を詳細ビュー１３０３に表示する。
図１４は、商品購入画面６０２の入出力定義の一例を示す図である。
図１５は、商品購入結果画面６０３の入出力定義の一例を示す図である。
図１６は、受注一覧画面の入出力定義の一例を示す図である。
図１４〜図１６の説明については、図１３と同様なので割愛する。
図１７は、メニュー部の入出力定義の一例を示す図である。メニュー部は各画面の一部として、他画面の入出力定義と関連を持つ。
【００６１】
図１８は、商品検索画面６０１の入出力定義がメニューを備えることを示す定義である。商品検索画面６０１の入出力定義はＭＥＮＵ＿ＴＯＰというコードの入出力定義をメニューとして備える。（図１８の１８０１）
【００６２】
図１９は、受注登録処理のビジネスプロセス定義の一例を示す図である。受注登録画面（不図示）から受注データの入力を受け付け、受注登録（ＪＵＣＨＵ＿ＩＮＳＥＲＴコード）の処理を実行し、結果を画面に返す処理が記述されている。
以上で、リポジトリ定義の説明を終了する。リポジトリ定義にはユーザテーマファイルが含まれる。
【００６３】
次に、ユーザテーマファイルの作成方法について説明する。
図２０は、新規にユーザテーマファイルを作成するための画面の一例を示す図である。図７のリポジトリ定義の「ｔｈｅｍｅ  テーマ」部分を右クリックし、ポップアップメニュー「ユーザテーマファイルを作成する」を選択する等の方法により、この新規テーマ作成画面２０００を表示する。新規テーマ作成画面２０００は、コードフィールド２００１、名前フィールド２００２、コピー元テーマフィールド２００３により構成される。コードフィールド２００１への入力値はこれから作成するユーザテーマファイルのファイル名となる。
【００６４】
名前フィールド２００２の入力値は、テーマを識別するのに利用する任意の文字列である。コピー元テーマフィールド２００３は、新規に作成するユーザテーマファイルの元となる既存テーマを指定するためのフィールドである。Ｆｉｎｉｓｈボタン２００４をクリックすると、コピー元テーマフィールド２００３で指定された既存テーマをコピーしてユーザテーマファイルを作成し、テーマエディタ画面２１００に描画する。
【００６５】
図２１は、テーマエディタ画面の一例を示す図である。テーマエディタ画面２１００は、テーマ描画部２１０１、プロパティエディタ部２１０２を備える。ユーザによってテーマ描画部２１０１に描画されているテーマ部品４１２が選択されると、テーマ部品４１２に関連するプロパティをテーマファイル（図２９と図４１の説明で後述する）から抽出し、プロパティエディタ部２１０２に表示する。ユーザによって、プロパティエディタ部２１０２の各プロパティが選択されると、各プロパティ値を変更可能にし、値の変更入力を受け付ける。
【００６６】
ここで、図２９を用いて、テーマファイルの中身について説明しておく。図２９は、テーマファイルの中身の一例を示す図である。テーマファイルには、「ユーザテーマファイル４０６」「組込テーマファイル４３２」の２種類があるが、いずれもテーマファイルの中身は、プロパティキーとプロパティ値を“＝”（イコール）で結んだ形式となっている。
【００６７】
なお、本実施形態においては、Ｗｅｂアプリケーション生成時にテーマファイルからスタイルシート４４３を生成するとしたが、これに限定するものではなく、テーマエディタ部４１０を用いてテーマファイルを生成せずに直接スタイルシート４４３を生成するとしてもよい。ただし、テーマファイルのプロパティは、図２９のように、スタイルシート４４３の複数のプロパティをグルーピングしてまとめたものにしたり、Ｗｅｂアプリケーションの開発に必要なものだけを厳選したりするなどによって、開発者や開発ツールにとって管理しやすくなるという効果を生むため、本実施形態のように、テーマエディタ部４１０を用いてテーマファイルを生成し、テーマファイルを用いてスタイルシートを生成することが望ましい。
【００６８】
次に、図４１を用いて、テーマ部品４１２に関連するプロパティについて説明する。図４１は、テーマ部品４１２のカテゴリー属性値４１０１とテーマプロパティファイルのプロパティキー４１０４との対応付けテーブル４１００の一例を示す図である。この対応付けテーブル４１００は、プログラム開発装置１０１の外部メモリ２１１されている。なお、この実施形態においては、テーマ部品４１２のカテゴリー属性値４１０１とテーマプロパティファイルのプロパティキー４１０４との対応付けをテーブルで管理するとしたが、これに限定するものではなく、設定ファイルやプログラム内の配列や変数で管理してもよい。
【００６９】
具体的には、図２１において、ユーザによってテーマ描画部２１０１に描画されているテーマ部品４１２のうち、カテゴリー属性値４１０１＝「ラベル」のテーマ部品４１２が選択された場合、プロパティエディタ部２１０２に表示するプロパティキーは、対応付けテーブル４１００の４１０４より、
ＬＡＢＥＬ．ｆｏｎｔＳｉｚｅ
ＬＡＢＥＬ．ｆｏｎｔＷｅｉｇｈｔ
ＬＡＢＥＬ．ｂａｃｋｇｒｏｕｎｄＣｏｌｏｒ
ＬＡＢＥＬ．ｂｏｒｄｅｒＣｏｌｏｒ
ＬＡＢＥＬ．ｆｏｒｅｇｒｏｕｎｄＣｏｌｏｒ
ＬＡＢＥＬ．ｂａｃｋｇｒｏｕｎｄＩｍａｇｅ
ＬＡＢＥＬ．ｂｏｒｄｅｒＷｉｄｔｈ
ＬＡＢＥＬ．ｐａｄｄｉｎｇ
であることがわかる。
【００７０】
これらのプロパティキーを用いて、図２９のテーマファイル２９００からプロパティ値を抽出し、プロパティエディタ部２１０２に表示する。その際、プロパティの種類４１０２の値を用いて、各プロパティを「Ｂ．フォント」「Ｃ．カラー」「Ｄ．装飾」「Ｅ．配置」に分けて、プロパティエディタ部２１０２に表示する。
【００７１】
値の変更入力を受け付けると、変更されたプロパティ値に従って、テーマ描画部２１０１の表示を更新する。各テーマ部品４１２はカテゴリー属性を持ち、同じカテゴリー属性値を持つテーマ部品４１２については、別のテーマ部品４１２であっても同じプロパティを備える。プロパティ値の変更を受け付けると、同じカテゴリー属性値を持つテーマ部品４１２すべてに対して、表示の更新を行う。
図２２は、テーマエディタ画面２１００を用いて、夏のテーマをベースに作成した、春のテーマの一例を示す図である。
図２３は、テーマエディタ画面２１００を用いて、夏のテーマをベースに作成した、秋のテーマの一例を示す図である。
図２４は、テーマエディタ画面２１００を用いて、夏のテーマをベースに作成した、冬のテーマの一例を示す図である。
【００７２】
ここに挙げたのはあくまでサンプルであるが、本発明のテーマエディタを利用すれば、色やフォント等のデザインを統一して設定することができるため、季節・色調・用途などに応じたテーマを容易に作成することができる。
次に、プロパティエディタ部４１３の詳細について説明する。
【００７３】
図２５の２５０２は、テーマエディタ画面２５００に表示されたテーマ部品４１２のうち、ラベル２５０１を選択した場合のプロパティエディタ部４１３の一例である。プロパティエディタ部２５０２は、「Ａ．テーマ」の領域に、選択されたラベル２５０１の「テーマ」に関するプロパティとその値を表示する。具体的には、「ＨＴＭＬバージョン」「カテゴリー」「テーマ区分」「親カテゴリー」「名前」である。これらは、ユーザが値を変更できないプロパティであり、このように値を変更できないプロパティも存在する。
【００７４】
プロパティエディタ部２５０２の「カテゴリー」は選択中のテーマ部品４１２の種別を示す情報であり、「ラベル」「ボタン」「リンク」などの値がある（図４１の４１０１）。同じカテゴリーのテーマ部品４１２は、同じプロパティ（図４１の４１０４）を持つ。よって、プロパティエディタ部２５０２でプロパティ値を変更すると、同じカテゴリーのテーマ部品４１２すべての表示に変更が適用される。すなわち、プロパティエディタ部２５０２は、テンプレートに含まれるプロパティのキーと値とを編集する画面である。また、プロパティエディタ部２５０２は、テンプレート画面に含まれる部品のデザインのプロパティのキーに対応する値を編集するためのテンプレート編集画面である。
【００７５】
また、プロパティエディタ部２５０２の「親カテゴリー」は、当該テーマ部品４１２の「カテゴリー」の親に該当するカテゴリーである。当該テーマ部品４１２のプロパティに値が設定されていない場合、「親カテゴリー」のプロパティ値を継承する。具体的には、図２５のプロパティエディタ部２５０２から、ラベルの親カテゴリーは、ページであることがわかり、図４１の４１０５から、ラベルの「フォントサイズ」に値が設定されていない場合、ページのフォントサイズ（ＰＡＧＥ．ｆｏｎｔＳｉｚｅ）のプロパティ値を継承する。
ユーザは、プロパティエディタ部２５０２の「Ｂ．フォント」「Ｃ．カラー」「Ｄ．装飾」「Ｅ．配置」に属する各プロパティ値を変更することができる。
【００７６】
図２６の２６０２は、テーマエディタ画面２６００に表示されたテーマ部品４１２のうち、ボタン２６０１を選択した場合のプロパティエディタ部４１３の一例である。「Ｄ．装飾」の領域に表示するプロパティの数は、図２５のラベル２５０１選択時は２つだが、ボタン２６０１選択時は１つである。また、「Ｅ．配置」については、ボタン２６０１に「Ｅ．配置」に関するプロパティが存在しないため表示しない。これらは、図４１の４１０２より、ラベルの「装飾」のプロパティは２つ、ボタンの「装飾」のプロパティは１つ、ラベルの「配置」のプロパティは１つ、ボタンの「配置」のプロパティは０だからである。このように、プロパティエディタ部４１３には、ユーザによって選択されたテーマ部品４１２に従って、プロパティを抽出して表示するという特徴がある。
【００７７】
図２７の２７０２は、テーマエディタ画面２７００に表示されたテーマ部品４１２のうち、リンク２７０１を選択した場合のプロパティエディタ部４１３の一例である。図２６のボタン２６０１選択時と比較して、「Ｃ．カラー」のプロパティが大きく異なることがわかる。これは、図４１の４１０２より、ボタンの「カラー」のプロパティは３つ、リンクの「カラー」のプロパティは５つだからである。
【００７８】
図２８の２８０３は、テーマエディタ画面２８００に表示されたテーマ部品４１２のうち、ボタン２８０１とリンク２８０２のように複数のテーマ部品４１２を選択した場合のプロパティエディタ部４１３の様子である。図２６でボタン２６０１、図２７でリンク２７０１をそれぞれ選択した場合の両方に含まれるプロパティが表示されていることがわかる。
【００７９】
図２８の例では、「Ｃ．カラー」について着目すると、ボタン２８０１とリンク２８０２の両方に含まれるプロパティ「ｃｏｌｏｒ」についてのみ設定が可能となっている。図４１の４１０３からもボタンとリンクの両方に含まれるプロパティは「ｃｏｌｏｒ」であることがわかる。なお、ユーザによってこのプロパティ値が変更されると、ボタン２８０１とリンク２８０２の両方のプロパティ「ｃｏｌｏｒ」のプロパティ値を変更する。このように複数のテーマ部品４１２を選択した場合は、選択したテーマ部品４１２のプロパティのうち、選択したテーマ部品４１２のすべてに含まれるプロパティを抽出して表示し、そのプロパティ値を一括で変更することができるという特徴がある。
【００８０】
以上で、プロパティエディタ部４１３の説明を終了する。プロパティエディタ部４１３で設定されたプロパティ値は、ユーザテーマファイル４０６として記憶される。
【００８１】
次に、図３０を用いて、ユーザテーマファイル４０６を作成する手順を説明する。図３０は、ユーザテーマファイル作成フローチャートの一例を示す図である。以下のステップは、すべてプログラム開発装置１０１のＣＰＵ２０１が実行する。
ステップＳ３００１において、ユーザによる「ユーザテーマファイルを作成する」の指示を受け付けると、新規テーマ作成画面２０００を表示する。
ステップＳ３００２において、ユーザによるテーマコード（図２０の２００１）の入力を受け付ける。
ステップＳ３００３において、ユーザによるテーマ名（図２０の２００２）の入力を受け付ける。
ステップＳ３００４において、ユーザによるコピー元テーマ（図２０の２００３）の選択を受け付ける。
【００８２】
ステップＳ３００５において、ユーザテーマファイルを新規作成する。具体的には、ステップＳ３００４にて選択されたコピー元テーマのテーマファイルをコピーし、ステップＳ３００２にて入力されたテーマコードをファイル名とする新規テーマファイルを作成し、外部メモリ２１１に記憶する。すなわち、ステップＳ３００５は、示された部品のプロパティのキーおよび値を対応付けて、デザインテンプレートとして記憶する処理の一例を示すステップである。
ステップＳ３００６において、テーマエディタ画面２１００を表示する。
【００８３】
ステップＳ３００７において、ステップＳ３００６にて表示したテーマエディタ画面２１００のテーマ描画部２１０１に、ステップＳ３００５にて作成したユーザテーマファイルに定義されているプロパティ値の色、フォント等のデザインを用いて、テーマ部品４１２を描画する。
ステップＳ３００７の処理の詳細については、図３２を用いて説明する。
【００８４】
次に、図３１を用いて、ユーザテーマファイル４０６を更新する手順を説明する。
図３１は、ユーザテーマファイル更新のフローチャートの一例を示す図である。以下のステップは、すべてプログラム開発装置１０１のＣＰＵ２０１が実行する。
【００８５】
ステップＳ３１０１において、ユーザによる、テーマエディタ画面２１００のテーマエディタ部に表示されたテーマ部品４１２の選択を受け付ける。例えば、ＣＴＲＬキーを押しながら複数のテーマ部品４１２を順次クリックする等の操作により、複数のテーマ部品４１２を選択することができる。すなわち、ステップＳ３１０１は、表示された部品に対して、ユーザの指示を受け付ける処理の一例を示すステップである。
【００８６】
ステップＳ３１０２において、ステップＳ３１０１にて選択されたテーマ部品４１２の数を判定する。選択されたテーマ部品４１２の数＝１の場合は、ステップＳ３１０３に進む。選択されたテーマ部品４１２の数が複数（≧２）の場合は、ステップＳ３１０４に進む。
【００８７】
ステップＳ３１０３において、ステップＳ３１０１にて選択されたテーマ部品４１２に関するプロパティ一覧を取得する。具体的には、図４１の説明でも触れたように、選択されたテーマ部品４１２のカテゴリー属性値を用いて、対応付けテーブル４１００からプロパティ一の一覧を取得する。
【００８８】
ステップＳ３１０４において、ステップＳ３１０１にて選択された複数のテーマ部品４１２それぞれに関するプロパティ一覧を取得する。具体的には、ステップＳ３１０３と同じ方法を選択された複数のテーマ部品４１２それぞれについて行い、複数のテーマ部品４１２それぞれに関するプロパティ一覧を取得する。
【００８９】
ステップＳ３１０５において、ステップＳ３１０４にて取得した複数のテーマ部品４１２それぞれに関するプロパティ一覧のうち、すべてのプロパティ一覧に含まれるプロパティを抽出する。具体的には、すべてのプロパティ一覧に含まれるプロパティは、各プロパティ一覧の論理積集合で求める。具体的には、図２８で説明したボタン２８０１とリンク２８０２の両方に含まれるプロパティ「ｃｏｌｏｒ」がこの例である。
【００９０】
ステップＳ３１０６において、ステップＳ３１０２にて取得したプロパティ一覧、またはステップＳ３１０５にて抽出したプロパティのリストをプロパティエディタ部２１０２に表示する。すなわち、ステップＳ３１０６は、テンプレートに含まれるプロパティのキーと値とを編集する画面を表示する処理の一例を示すステップである。また、ステップＳ３１０６は、テンプレート画面に含まれる部品のデザインのプロパティのキーに対応する値を編集するためのテンプレート編集画面を表示する処理の一例を示すステップである。
【００９１】
また、ステップＳ３１０６は、テンプレートに含まれるプロパティのうち、指示を受け付けた部品に対応するプロパティのキーと値を表示する処理の一例を示すステップである。また、ステップＳ３１０６は、デザインのプロパティのうち、指示を受け付けた部品に対応するプロパティのキーと値を表示する処理の一例を示すステップである。
【００９２】
また、ステップＳ３１０６は、指示を受け付けた部品が複数の場合、指示を受け付けた複数の部品のすべてに含まれるプロパティのキーと値を表示する処理の一例を示すステップである。これにより、選択したテーマ部品に対応するプロパティのみがプロパティエディタ部に表示されるようになる。つまり、沢山のプロパティの中からユーザが変更したいプロパティを探し出して指定し、値を変更しなくてはならないという課題を解決することができる。
【００９３】
ステップＳ３１０７において、ユーザによるプロパティ値の変更入力を受け付ける。すなわち、ステップＳ３１０７は、表示されたプロパティの値の変更を受け付ける処理の一例を示すステップである。また、ステップＳ３１０７は、表示されたプロパティのキーに対応する値の変更を受け付ける処理の一例を示すステップである。
【００９４】
ステップＳ３１０８において、ステップＳ３１０３またはステップＳ３１０４にて取得したプロパティ一覧からカテゴリー属性値を読み取り、テーマ描画部４１１に表示されているテーマ部品４１２のうち、同じカテゴリー属性値を持つテーマ部品４１２（以下、関連テーマ部品と記す）を特定する。なお、この実施形態においては、カテゴリー属性値を用いて関連テーマ部品を特定するとしたが、これに限定するものではなく、ステップＳ３１０７にて変更を受け付けたプロパティキーを持つテーマ部品を関連テーマ部品とするとしてもよい。
【００９５】
ステップＳ３１０９において、変更されたプロパティ値に従って、選択テーマ部品と関連テーマ部品の表示を更新する。すなわち、ステップＳ３１０９は、テンプレートを適用した部品を表示する処理の一例を示すステップである。また、ステップＳ３１０９は、変更を受け付けたプロパティの値に従って、部品の表示を更新する処理の一例を示すステップである。また、ステップＳ３１０９は、変更を受け付けたプロパティの値に従って、指示を受け付けた部品と変更を受け付けたプロパティに対応する部品との表示を更新する処理の一例を示すステップである。
ステップＳ３１１０において、変更されたプロパティ値に従って、ユーザテーマファイルを更新し保存する。
以上で、ユーザテーマファイル更新フローチャートの説明を終了する。
【００９６】
次に、図３２を用いて、テーマエディタ画面２１００を描画する手順を説明する。図３２は、テーマエディタ画面描画のフローチャートの一例を示す図である。以下のステップは、すべてプログラム開発装置１０１のＣＰＵ２０１が実行する。
ステップＳ３２０１において、選択メニューからテーマの指定を受け付けると、外部メモリ２１１から指定されたテーマファイルを読み込む。
【００９７】
テーマファイルは図２９に示す通り、プロパティキーとプロパティ値の組み合わせによるエントリが複数記されているため、ステップＳ３２０２からステップＳ３２０９まで、エントリの数だけループ処理を行う。
ステップＳ３２０３において、次のエントリのプロパティキーとプロパティ値を読み込む。
ステップＳ３２０４において、テーマ描画部４１１に表示するテーマ部品４１２の数だけループ処理を行う。
ステップＳ３２０５において、次のテーマ部品４１２のカテゴリー属性値を取得する。
【００９８】
ステップＳ３２０６において、エントリのキーのカテゴリー属性値と、テーマ部品のカテゴリー属性値とが一致するかを判定する。エントリのプロパティキーのカテゴリー属性値について説明する。例えば、図２９のテーマプロパティファイルにおけるエントリ「ＬＡＢＥＬ．ｂａｃｋｇｒｏｕｎｄＣｏｌｏｒ＝＃ｅｅｅｅｅｅ」の場合、エントリのプロパティキーのカテゴリー属性値＝「ＬＡＢＥＬ」である。つまり、プロパティキーのカテゴリー属性値＝プロパティキーの最初の．（ドット）より前の部分である。
【００９９】
エントリのプロパティキーから抽出したカテゴリー属性値と、当該テーマ部品４１２が備えるカテゴリー属性値とを比較し、一致する場合はステップＳ３２０７へ進む。一致しない場合は、ステップＳ３２０４からステップＳ３２０９のループ処理を継続する。
ステップＳ３２０７において、当該テーマ部品４１２が持つ、プロパティキーと一致する変数に、ステップＳ３２０３で取得したプロパティ値を設定する。
【０１００】
ステップＳ３２０８において、ステップＳ３２０７にて設定されたプロパティ値を用いて、テーマ描画部に当該テーマ部品４１２を描画する。すなわち、ステップＳ３２０８は、表示された画面に、テンプレートを適用した部品を表示する処理の一例を示すステップである。また、ステップＳ３２０８は、表示されたテンプレート編集画面に、デザインを適用した部品を表示する処理の一例を示すステップである。
ステップＳ３２０９は、テーマ部品４１２のループ処理の終端である。
ステップＳ３２１０は、テーマファイルのエントリのループ処理の終端である。
以上で、テーマエディタ画面描画のフローチャートの説明を終了する。
【０１０１】
次に、図３３を用いて、ユーザ（Ｗｅｂアプリケーション開発者）がＷｅｂアプリケーションの画面レイアウトを作成するレイアウトエディタ部へ、図３０および図３１にて作成したテーマを反映する手順について説明する。図３３のレイアウトエディタ画面３３００は、レイアウトエディタ部４２０の一例を示す図である。レイアウトエディタ画面３３００は、レイアウト描画部３３０１を備える。
【０１０２】
レイアウト描画部３３０１には、ユーザが配置したレイアウト部品３３０２が表示されている。レイアウト描画部３３０１に表示するレイアウト部品３３０２には、ユーザが指定したテーマファイル（ユーザテーマファイル４０６、または組込テーマファイル４３２）のテーマを反映する。これにより、ユーザは、開発中のＷｅｂアプリケーションをデプロイせずに、開発中のＷｅｂアプリケーションの画面に作成したテーマを適用して、確認することができる。なお、テーマの指定方法は、図３３の３３０３のようなドロップダウンリストでテーマファイルのリストからテーマを選択して指定する。
【０１０３】
次に、図３４を用いて、レイアウトエディタ部４２０にユーザが指定したテーマを適用する手順について説明する。図３４は、レイアウトエディタ部４２０へテーマを適用するフローチャートの一例を示す図である。以下のステップは、すべてプログラム開発装置１０１のＣＰＵ２０１が実行する。
【０１０４】
ステップＳ３４０１において、レイアウトエディタ画面３３００（図３３）にてユーザによるテーマの指定（図３３の３３０３）を受け付ける。すなわち、ステップＳ３４０１は、生成されたプログラムが動作することによって出力される、複数の画面部品を持つアプリケーション画面を編集する編集画面を表示する処理の一例を示すステップである。また、ステップＳ３４０１は、アプリケーション画面に表示する部品のレイアウトを編集するレイアウト編集画面を表示する処理の一例を示すステップである。
【０１０５】
ステップＳ３４０２において、ステップＳ３４０１にて指定を受け付けたテーマに対応するテーマファイル（ユーザテーマファイル４０６、または組込テーマファイル４３２）を外部メモリ２１１から取得する。
ステップＳ３４０３において、レイアウト描画部３３０１に表示中のＷｅｂアプリケーションの画面の入出力定義４０４を外部メモリ２１１から取得する。
ステップＳ３４０４から、ステップＳ３４０３にて取得した入出力定義４０４の入出力項目の数だけループ処理を開始する。
ステップＳ３４０５において、対象となる入出力項目から、レイアウト部品の種別を取得する。
【０１０６】
ステップＳ３４０６において、ステップＳ３４０２にて取得したテーマファイルから、レイアウト部品の種別と一致するエントリをすべて取得する。例えば、レイアウト部品の種別が「ラベル」である場合、図２９に示すテーマプロパティファイルからは、次のエントリが取得される。
ＬＡＢＥＬ．ｂａｃｋｇｒｏｕｎｄＣｏｌｏｒ＝＃ｅｅｅｅｅｅ
ＬＡＢＥＬ．ｆｏｒｅｇｒｏｕｎｄＣｏｌｏｒ＝＃３３３３３３
ＬＡＢＥＬ．ｂｏｒｄｅｒＣｏｌｏｒ＝＃２ｃａ９ｅ１
ＬＡＢＥＬ．ｂｏｒｄｅｒＷｉｄｔｈ＝０  ５ｐｘ  ０  ０
ＬＡＢＥＬ．ｐａｄｄｉｎｇ＝３ｐｔ
【０１０７】
ステップＳ３４０７において、ステップＳ３４０６にて取得したエントリ情報を用いて、レイアウト部品を描画する。すなわち、ステップＳ３４０７は、表示された編集画面に含まれる複数の画面部品に対して、デザインテンプレートに含まれるプロパティのキーと値とを適用する処理の一例を示すステップである。また、ステップＳ３４０７は、変更を受け付けた値に従って、表示されたレイアウト編集画面に含まれる部品にデザインを適用する処理の一例を示すステップである。
ステップＳ３４０８は、入出力項目のループ処理の終端である。
以上で、レイアウトエディタ部４２０へテーマを適用するフローチャートの説明を終了する。
【０１０８】
以上により、Ｗｅｂアプリケーション開発の場合、ツールで作成したスタイルシートを適用したＷｅｂアプリケーションを生成して動作させなければ、テーマを適用したＷｅｂアプリケーション画面を確認することができないという課題を解決することができる。つまり、Ｗｅｂアプリケーションを生成・動作させることなく、作成したデザインのテンプレートを適用したＷｅｂアプリケーション画面を確認することができるようになる。
【０１０９】
次に図３５を用いて、Ｗｅｂアプリケーション生成部４３０がリポジトリ定義部４００を入力としてＷｅｂアプリケーションを生成する手順について説明する。図３５は、Ｗｅｂアプリケーション生成フローチャートの一例を示す図である。以下のステップは、すべてプログラム開発装置１０１のＣＰＵ２０１が実行する。
ステップＳ３５０１において、リポジトリ定義部４００のアプリケーション定義４０２をＲＡＭ２０２に読み込む。
ステップＳ３５０２において、リポジトリ定義部４００のデータモデル定義４０３をＲＡＭ２０２に読み込む。
ステップＳ３５０３において、リポジトリ定義部４００の入出力定義４０４をＲＡＭ２０２に読み込む。
ステップＳ３５０４において、リポジトリ定義部４００のビジネスプロセス定義４０５をＲＡＭ２０２に読み込む。
ステップＳ３５０５において、リポジトリ定義部４００のデータベース定義４０１をＲＡＭ２０２に読み込む。
ステップＳ３５０６において、リポジトリ定義部４００のユーザテーマファイル４０６をＲＡＭ２０２に読み込む。
【０１１０】
ステップＳ３５０７において、ＲＡＭ２０２に読み込んだリポジトリ定義部４００の各定義・各ファイルから情報を取得し、Ｗｅｂアプリケーションのソースコードを生成する。生成されたソースコードにはプログラミング言語が記載されたファイルに加え、ＨＴＭＬ、ＪＳＰ、ＪａｖａＳｃｒｉｐｔ（登録商標）等のＷｅｂアプリケーションの稼働に利用されるファイルも含まれる。すなわち、ステップＳ３５０７は、アプリケーションプログラムを生成する処理の一例を示すステップである。すなわち、ステップＳ３５０７は、編集されたテンプレートを適用したアプリケーション画面を含むアプリケーションプログラムを生成する機能部である。
【０１１１】
また、ステップＳ３５０７は、部品を含むアプリケーション画面を出力するアプリケーションを構築する機能部である。また、ステップＳ３５０７は、生成されたスタイルシートを用いるアプリケーション画面を出力するアプリケーションを構築する機能部である。
ステップＳ３５０８において、ステップＳ３５０６にてＲＡＭ２０２に読み込んだユーザテーマファイル４０６を用いて、スタイルシートを生成する。
以上で、Ｗｅｂアプリケーション生成のフローチャートの説明を終了する。
【０１１２】
次に、図３５のフローチャートにて生成したＷｅｂアプリケーションのサンプル画面について説明する。図３６は、商品検索画面６０１のイメージである。図３７は、商品購入画面６０２のイメージである。これらのＷｅｂアプリケーション画面は、レイアウトエディタ部４２０で作成したレイアウト部品（画面部品）に対し、テーマエディタ部４１０で作成したユーザテーマファイル４０６（デザインのテンプレートファイル）を適用したイメージとなる。以上により、Ｗｅｂアプリケーション開発において、レイアウト編集機能とデザインテンプレート編集機能が密に連携した統合的な開発ツールを提供することができるため、開発者は、レイアウト編集機能とデザインテンプレート編集機能とを連携させることができ、Ｗｅｂアプリケーション開発作業が非効率になっているという課題を解決することができる。
仕組みを提供することができる。
以上で、第１の実施形態の説明を終了する。
以上により、画面デザインのテンプレートの編集に係る作業を効率化する仕組みを提供することができる。
【０１１３】
〔第２の実施形態〕
次に、第２の実施形態について、図を用いて説明する。
第１の実施形態では、すべての画面に統一的なデザインであるテーマを作成する場合、テーマエディタからテーマ部品４１２を選択し、色やフォント等のデザインを変更し、ユーザテーマファイルを作成する方法について説明した。
【０１１４】
一方、ユーザはレイアウトエディタ画面にて個々の画面デザインを作成中にデザインを思いついた場合、他の画面にも統一的にそのデザインを適用したいと考えることがある。
【０１１５】
第２の実施形態では、そのような場合に、レイアウトエディタ画面にて、該当レイアウト部品をダブルクリックする等により、該当レイアウト部品と同じカテゴリーを持つテーマエディタを起動することが可能である。
【０１１６】
図３８は、レイアウトエディタ画面にて画面デザインを行っている場合であっても、購入ボタン３８０１のデザインをテーマとして保存したい場合の例である。購入ボタン３８０１をダブルクリックすると、図３９に示すテーマエディタ画面３９００が起動し、レイアウトエディタ画面にて適用中のユーザテーマファイルを開く。適用中のテーマが組込テーマファイルの場合は、組込テーマファイルをコピーして新規ユーザテーマファイルとして作成し、そのユーザテーマファイルを開く。さらに開いたテーマエディタ画面３９００においては、ダブルクリックが行われた購入ボタン３８０１と同じカテゴリー属性値を持つテーマ部品３９０１が選択されている状態である。以上により、自分の気に入った画面部品のデザインを、デザインテンプレートの部品として、すぐに編集することが可能になる。
【０１１７】
次に、図４０を用いて、レイアウトエディタ部４２０からテーマエディタ部４１０を表示する手順について説明する。図４０は、レイアウトエディタ部からテーマエディタ部を表示する処理フローチャートの一例を示す図である。以下のステップは、すべてプログラム開発装置１０１のＣＰＵ２０１が実行する。
【０１１８】
ステップＳ４００１において、レイアウトエディタ画面にてテーマとして保存したいレイアウト部品の指定を受け付ける。すなわち、ステップＳ４００１は、表示された画面部品に対して、ユーザの指示を受け付ける処理の一例を示すステップである。
【０１１９】
ステップＳ４００２において、レイアウトエディタ画面で適用中のテーマが存在するか判定する。すなわち、ステップＳ４００２は、表示されたアプリケーション画面に適用しているテンプレートがユーザによって作成されたテンプレートか否かを判定する処理の一例を示すステップである。組込テーマファイルを適用中の場合はステップＳ４００３に進む。テーマを適用していない場合はテップＳ４００４に進む。ユーザテーマファイルを適用中の場合はステップＳ４００６に進む。
ステップＳ４００３において、組込テーマファイルをコピーして新規ユーザテーマファイルとして作成する。
ステップＳ４００４において、新規ユーザテーマファイルとして作成する。
【０１２０】
ステップＳ４００５において、ステップＳ４００３またはステップＳ４００４にて新規作成したユーザテーマファイルをステップＳ４００７にて開くテーマファイルとする。
ステップＳ４００６において、適用中のユーザテーマファイルをステップＳ４００７にて開くテーマファイルとする。
【０１２１】
以上により、レイアウト編集画面で適用中のデザインテンプレートが「既定のテンプレート」「ユーザが作成したテンプレート」「テンプレートを適用していない」等によって、開発者自身がデザインテンプレート編集画面で編集するテンプレートを選択しなければならないという課題を解決できる。つまり、開発者が現在適用中のテーマファイルかを意識することなく、レイアウト編集画面で編集したデザインをデザインテンプレートとして作成したり編集したりすることができる。
【０１２２】
ステップＳ４００７において、テーマエディタ画面描画処理（図３２）を行う。すなわち、ステップＳ４００７で行われる図３２のステップＳ３２０１およびステップＳ３２０８は、ユーザによって作成されたテンプレートであると判定された場合は当該テンプレートを用い、ユーザによって作成されたテンプレートでないと判定された場合は当該テンプレートをコピーして作成したテンプレートを用い、指示を受け付けた画面部品に対応するプロパティのキーと値を表示する処理の一例を示すステップである。
ステップＳ４００８において、ステップＳ４００１にてテーマ保存すると指定を受け付けたレイアウト部品のプロパティを取得する。
【０１２３】
ステップＳ４００９において、ステップＳ４００８にて取得したレイアウト部品のカテゴリーと同じカテゴリーのテーマ部品のプロパティをテーマエディタ画面のプロパティエディタ部に表示する。すなわち、ステップＳ４００９は、指示を受け付けた画面部品に対応するプロパティのキーと値を表示する処理の一例を示すステップである。具体的には、ステップＳ４００１にてテーマ保存すると指定を受け付けたレイアウト部品のカテゴリー属性値＝「ボタン」の場合、カテゴリー属性値＝「ボタン」のテーマ部品のプロパティをテーマエディタ画面のプロパティエディタ部に表示する。
【０１２４】
以上により、レイアウト編集画面とデザインテンプレート編集画面を有機的に結び付けることができ、開発者の手間を省くことができる。つまり、Ｗｅｂアプリケーション開発にて、ある画面の画面レイアウト編集中に、その他の画面にも同じデザインを適用したいと開発者が思った場合、レイアウト編集画面とデザインテンプレート編集画面とが有機的に連携していないため、レイアウト編集画面で編集したデザインをデザインテンプレートとして作成したり編集したりする場合、手間がかかってしまうという課題を解決することができる。
以上で、第２の実施形態の説明を終了する。
【０１２５】
〔第３の実施形態〕
次に、第３の実施形態について、図を用いて説明する。
第１の実施形態では、すべての画面に統一的なデザインであるテーマを作成する場合、テーマエディタからテーマ部品４１２を選択し、色やフォント等のデザインを変更し、ユーザテーマファイルを作成する方法について説明した。
【０１２６】
第３の実施形態では、テーマエディタからテーマ部品４１２を選択した後、プロパティエディタ部４１３を用いて、色やフォント等のデザインを変更する作業をより効率化する仕組みを提供する。
【０１２７】
図４２のフローチャートを用いて、プロパティエディタ部４１３を用いて、色やフォント等のデザインを変更する作業を行う手順について説明する。図４２は、第３の実施形態において、ユーザテーマファイル更新のフローチャートの一例を示す図である。以下のステップは、すべてプログラム開発装置１０１のＣＰＵ２０１が実行する。なお、第３の実施形態では、第１の実施形態における図３１のフローチャートを図４２に置き換え、図３１のステップと同じ処理については、同じステップ番号を付与し説明を省略する。
【０１２８】
ステップＳ４２０１において、テーマエディタ部に表示された複数のテーマ部品４１２が選択された場合にプロパティエディタ部４１３に何を表示するかの設定を判定する。具体的には、開発ツールにおいて事前に設定された設定値を判定し、「共通プロパティ表示」の場合はステップＳ３１０５に進み、「複数部品プロパティ表示」の場合はステップＳ４２０２に進む。
ステップＳ４２０２において、ステップＳ３１０４にて取得した部品のプロパティ一覧を並べて表示する（図４３の４３０２と４３０３）。
【０１２９】
ステップＳ４２０３において、ステップＳ３１０４にて取得した部品のプロパティ一覧のうち、同一プロパティキーで異なる値を識別して表示する。例えば、図４３の４３０４と４３０５の値が異なるということが識別できるよう赤く表示したり、図４３の４３０４と４３０５のようにボタンを表示したりする。すなわち、ステップＳ４２０２およびステップＳ４２０３は、指示を受け付けた部品のプロパティのキーと値を表示する場合、当該値の近傍に他の部品で同じキーに対応して設定されている値を表示する処理の一例を示すステップである。
【０１３０】
これにより、複数の部品において異なる値を設定しているプロパティキーを容易に識別することができるため、デザインの統一を図ったり、デザインの特徴を出したりする編集作業をより効率化できるようになる。なお、本実施形態においては、値が異なるということの識別方法として、赤く表示したりボタンを表示したりするとしたが、これに限定するものではなく、点滅表示、丸で囲む等、その他の識別方法であってもよい。
【０１３１】
ステップＳ４２０４において、ステップＳ４２０３にて識別して表示した異なる値のどちらを適用するかの選択を受け付ける。具体的には、矢印ボタン４３０４および矢印ボタン４３０５の押下を受け付ける。
【０１３２】
ステップＳ４２０５において、押下を受け付けたボタンに従って、適用元の値で適用先の値を上書きする。具体的には、押下を受け付けたボタンが矢印ボタン４３０４の場合は、適用元である値４３０４で適用先である値４３０５を上書きする。一方、押下を受け付けたボタンが矢印ボタン４３０５の場合は、適用元である値４３０５で適用先である値４３０４を上書きする。これにより、複数の部品において異なる値を容易に同じ値に変更することができるため、デザインの統一を図る編集作業をより効率化できるようになる。
【０１３３】
ステップＳ４２０６において、ステップＳ３１０７にて変更入力を受け付けるプロパティ値がテーマエディタ部のテーマ部品４１２のどの部分に影響を与えるかを示すオブジェクトを表示する。すなわち、ステップＳ４２０６は、変更を受け付ける値が、前記テンプレート画面のどこのデザインに影響を及ぼすかを識別して表示する処理の一例を示すステップである。具体的には、図４４のテーマエディタ画面４４００のテーマエディタ部に表示されたテーマ部品４１２、例えばテキストフィールド４４０１の選択を受け付けた場合、プロパティエディタ部４１３にテキストフィールド４４０１に関するプロパティ一覧４４０２を表示し、その中から「配置」プロパティの「ｐａｄｄｉｎｇ」キーの値「３ｐｔ」が選択されたとする（図４４の４４０３）。
【０１３４】
その場合、「ｐａｄｄｉｎｇ」キーの値がテーマエディタ部に表示されたテキストフィールド４４０１のどの部分に影響を与えるのかを示すオブジェクト（図４４の矢印４４０４）を表示する。これにより、プロパティエディタ部４１３の値がテーマエディタ部における部品のどこに反映されるのかを容易に認識することができる。なお、本実施形態においては、プロパティエディタ部４１３にてプロパティ値の変更入力を受け付けた場合にオブジェクトを表示するとしたが、これに限定するものではなく、プロパティエディタ部４１３にてプロパティキーまたはプロパティ値が選択された場合にオブジェクトを表示するとしてもよい。
ステップＳ４２０７において、当該プロパティキーと同じキーを持つ他の部品の当該キーに対する値を取得する。
【０１３５】
ステップＳ４２０８において、ステップＳ４２０７にて取得した値を表示する（図４５の４５０３）。具体的には、図４５のテーマエディタ画面４５００のテーマエディタ部に表示されたテーマ部品４１２、例えばテキストフィールド４５０１の選択を受け付けた場合、プロパティエディタ部４１３にテキストフィールド４５０１に関するプロパティ一覧４５０２を表示し、その中から「フォント」プロパティの「ｆｏｎｔ−ｓｉｚｅ」キーの値「１８ｐｔ」が選択されたとする（図４５の４５０２）。
【０１３６】
その場合、現在編集中のテーマにおいて、「ｆｏｎｔ−ｓｉｚｅ」キーを持つ他の部品の「ｆｏｎｔ−ｓｉｚｅ」キーに対する値を取得する。ここでは、「ｆｏｎｔ−ｓｉｚｅ」キーを持つ他の部品として「タイトル」「ボタン」「リンク」の３部品があり、その３部品における「ｆｏｎｔ−ｓｉｚｅ」キーに対する値はそれぞれ「２４ｐｔ」「１１ｐｔ」「１１ｐｔ」であるとすると、図４５の４５０３のような表を表示する。これにより、同じプロパティキーを持つ複数の部品においてどのような値が設定されているかを容易に認識することができるため、デザインの統一を図ったり、デザインの特徴を出したりする編集作業をより効率化できるようになる。
【０１３７】
ステップＳ４２０９において、ステップＳ３１０７にて受け付けた、キーに対する値の変更内容を判定する。変更内容が値の場合はステップＳ４２１０に進み、オブジェクトの場合はステップＳ４２１１に進み、既存テーマが選択された場合はステップＳ４２１２に進む。すなわち、ステップＳ４２０９は、表示されたプロパティのキーに対応する値の変更をすべく、ユーザの指示に従って、記憶されているデザインテンプレートの選択を受け付ける処理の一例を示すステップである。また、ステップＳ４２０９は、表示された識別表示するためのオブジェクトに対して、ユーザの操作を受け付ける処理の一例を示すステップである。
【０１３８】
例えば、図４４の４４０３の値「３ｐｔ」を「５ｐｔ」に変更された場合は、値の変更であると捉えてステップＳ４２１０に進む。また、ユーザのマウス等の操作によって図４４の矢印４４０４の大きさが変更された場合は、オブジェクトの変更であると捉えてステップＳ４２１１に進む。また、図４６のコンボボックス４６０３で既存テーマが選択された場合は、既存テーマの選択であると捉えてステップＳ４２１２に進む。
【０１３９】
ここで、図４６について説明しておく。図４６は、第３の実施形態において、プロパティエディタ部４１３の値として既存テーマ選択の一例を示す図である。
具体的には、図４６のテーマエディタ画面４６００のテーマエディタ部に表示されたテーマ部品４１２、例えばテキストフィールド４６０１の選択を受け付けた場合、プロパティエディタ部４１３にテキストフィールド４６０１に関するプロパティ一覧４６０２を表示し、その中から「フォント」プロパティの「ｆｏｎｔ−ｓｉｚｅ」キーの値が選択されると、コンボボックス４６０３を表示する（図４６の４６０３）。
【０１４０】
コンボボックス４６０３は値の入力だけでなく、既存テーマファイル名を選択肢に持ちそれらの選択肢から１つを選択することができる。値の入力が行われた場合は、値の変更であると捉えてステップＳ４２１０に進む。既存テーマファイル名が選択された場合は、既存テーマの選択であると捉えてステップＳ４２１２に進む。
【０１４１】
ステップＳ４２１０において、受け付けた入力値を取得する。
ステップＳ４２１１において、変更されたオブジェクトの大きさを値として取得する。すなわち、ステップＳ４２１１およびステップＳ３１１０は、受け付けた操作に従って、表示されたプロパティのキーに対応する値を変更する処理の一例を示すステップである。
【０１４２】
具体的には、ユーザのマウス等の操作によって図４４の矢印４４０４の大きさが「３ｐｔ」から「５ｐｔ」に拡大された場合は、変更後の値として「５ｐｔ」を取得する。なお、本実施形態においては、オブジェクトを矢印としたが、これに限定するものではなく、例えば、テキストを枠で囲んだようなボックスをオブジェクトとしてもよい。つまり、矢印の大きさを変更する以外にも、ボックスの位置をずらしたり、大きさを変更したりすることによって、プロパティ値を変更するとしてもよい。これにより、プロパティエディタ部４１３の値を変更しなくても、オブジェクトの大きさや位置を視覚的に変更することで、デザインの編集ができるようになるため、編集作業をより効率化できるようになる。
【０１４３】
ステップＳ４２１２において、コンボボックス４６０３で選択されて既存テーマファイルから、当該プロパティキーに対応する値を取得する。すなわち、ステップＳ４２１２およびステップＳ３１１０は、選択を受け付けたデザインテンプレートとして記憶されているプロパティの値を用いて、表示されたプロパティのキーに対応する値を変更する処理の一例を示すステップである。これにより、プロパティエディタ部４１３に値を直接入力しなくても、既存テーマを選択することにより、選択した既存テーマと同じデザインに統一することができるようになるため、編集作業をより効率化できるようになる。
以下の処理は、図３１のフローチャートと同様である。
以上で、図４２の説明を終了する。
以上で、第３の実施形態の説明を終了する。
【０１４４】
以上により、画面デザインのテンプレートの編集に係る作業を効率化する仕組みを提供することができる。また、Ｗｅｂアプリケーション開発において、レイアウト編集機能とデザインテンプレート編集機能が密に連携した統合的な開発ツールを提供することができるため、開発者は、レイアウト編集機能とデザインテンプレート編集機能とを連携させることができ、Ｗｅｂアプリケーション開発作業が非効率になっているという課題を解決することができる。
【０１４５】
以上のように、前述した実施形態の機能を実現するプログラムを記録した記録媒体を、システムあるいは装置に供給し、そのシステムあるいは装置のコンピュータ（またはＣＰＵやＭＰＵ）が記録媒体に格納されたプログラムを読み出し、実行することによっても本発明の目的が達成されることは言うまでもない。
【０１４６】
この場合、記録媒体から読み出されたプログラム自体が本発明の新規な機能を実現することになり、そのプログラムを記録した記録媒体は本発明を構成することになる。
【０１４７】
プログラムを供給するための記録媒体としては、例えば、フレキシブルディスク、ハードディスク、光ディスク、光磁気ディスク、ＣＤ−ＲＯＭ、ＣＤ−Ｒ、ＤＶＤ−ＲＯＭ、磁気テープ、不揮発性のメモリカード、ＲＯＭ、ＥＥＰＲＯＭ、シリコンディスク等を用いることが出来る。
【０１４８】
また、コンピュータが読み出したプログラムを実行することにより、前述した実施形態の機能が実現されるだけでなく、そのプログラムの指示に基づき、コンピュータ上で稼働しているＯＳ（オペレーティングシステム）等が実際の処理の一部または全部を行い、その処理によって前述した実施形態の機能が実現される場合も含まれることは言うまでもない。
【０１４９】
さらに、記録媒体から読み出されたプログラムが、コンピュータに挿入された機能拡張ボードやコンピュータに接続された機能拡張ユニットに備わるメモリに書き込まれた後、そのプログラムコードの指示に基づき、その機能拡張ボードや機能拡張ユニットに備わるＣＰＵ等が実際の処理の一部または全部を行い、その処理によって前述した実施形態の機能が実現される場合も含まれることは言うまでもない。
【０１５０】
また、本発明は、複数の機器から構成されるシステムに適用しても、ひとつの機器から成る装置に適用しても良い。また、本発明は、システムあるいは装置にプログラムを供給することによって達成される場合にも適応できることは言うまでもない。この場合、本発明を達成するためのプログラムを格納した記録媒体を該システムあるいは装置に読み出すことによって、そのシステムあるいは装置が、本発明の効果を享受することが可能となる。
【０１５１】
上記プログラムの形態は、オブジェクトコード、インタプリタにより実行されるプログラムコード、ＯＳ（オペレーティングシステム）に供給されるスクリプトデータ等の形態から成ってもよい。
【０１５２】
さらに、本発明を達成するためのプログラムをネットワーク上のサーバ、データベース等から通信プログラムによりダウンロードして読み出すことによって、そのシステムあるいは装置が、本発明の効果を享受することが可能となる。なお、上述した各実施形態およびその変形例を組み合わせた構成も全て本発明に含まれるものである。
【符号の説明】
【０１５３】
１０１  プログラム開発装置
１０２  プログラム開発サーバ
１０３  データベースサーバ
１０４  アプリケーションクライアント
１０５  アプリケーションサーバ
１０６  ネットワーク
【図１】
2017059237.tif 000003
【図２】
2017059237.tif 000004
【図３】
2017059237.tif 000005
【図４】
2017059237.tif 000006
【図５】
2017059237.tif 000007
【図６】
2017059237.tif 000008
【図７】
2017059237.tif 000009
【図８】
2017059237.tif 000010
【図９】
2017059237.tif 000011
【図１０】
2017059237.tif 000012
【図１１】
2017059237.tif 000013
【図１２】
2017059237.tif 000014
【図１３】
2017059237.tif 000015
【図１４】
2017059237.tif 000016
【図１５】
2017059237.tif 000017
【図１６】
2017059237.tif 000018
【図１７】
2017059237.tif 000019
【図１８】
2017059237.tif 000020
【図１９】
2017059237.tif 000021
【図２０】
2017059237.tif 000022
【図２１】
2017059237.tif 000023
【図２２】
2017059237.tif 000024
【図２３】
2017059237.tif 000025
【図２４】
2017059237.tif 000026
【図２５】
2017059237.tif 000027
【図２６】
2017059237.tif 000028
【図２７】
2017059237.tif 000029
【図２８】
2017059237.tif 000030
【図２９】
2017059237.tif 000031
【図３０】
2017059237.tif 000032
【図３１】
2017059237.tif 000033
【図３２】
2017059237.tif 000034
【図３３】
2017059237.tif 000035
【図３４】
2017059237.tif 000036
【図３５】
2017059237.tif 000037
【図３６】
2017059237.tif 000038
【図３７】
2017059237.tif 000039
【図３８】
2017059237.tif 000040
【図３９】
2017059237.tif 000041
【図４０】
2017059237.tif 000042
【図４１】
2017059237.tif 000043
【図４２】
2017059237.tif 000044
【図４３】
2017059237.tif 000045
【図４４】
2017059237.tif 000046
【図４５】
2017059237.tif 000047
【図４６】
2017059237.tif 000048