ホーム > 特許ランキング > 株式会社ＪＶＣケンウッド
(19)【発行国】日本国特許庁(JP)
(12)【公報種別】特許公報(B2)
(11)【特許番号】
(24)【登録日】2023-06-19
(45)【発行日】2023-06-27
(54)【発明の名称】操作画面作成装置、操作画面作成方法及びプログラム
(51)【国際特許分類】
G06F 3/0481 20220101AFI20230620BHJP
G06F 8/34 20180101ALI20230620BHJP
【ＦＩ】
G06F3/0481
G06F8/34
【請求項の数】
7
(21)【出願番号】P 2019171924
(22)【出願日】2019-09-20
(65)【公開番号】P2021051333
(43)【公開日】2021-04-01
【審査請求日】2022-04-28
(73)【特許権者】
【識別番号】308036402
【氏名又は名称】株式会社ＪＶＣケンウッド
(74)【代理人】
【識別番号】110002147
【氏名又は名称】弁理士法人酒井国際特許事務所
(72)【発明者】
【氏名】林下 裕
【審査官】▲高▼瀬 健太郎
(56)【参考文献】
【文献】特開２００８－２０３９１２（ＪＰ，Ａ）
【文献】特開２００９－００９４７３（ＪＰ，Ａ）
【文献】特開２０１５－０９９５９０（ＪＰ，Ａ）
(58)【調査した分野】(Int.Cl.，ＤＢ名)
Ｇ０６Ｆ ３／０４８１
Ｇ０６Ｆ ８／３４
(57)【特許請求の範囲】
【請求項1】
実行する処理が対応付けられたオブジェクトを含む電子機器の操作画面を作成する操作画面作成装置であって、前記オブジェクトのサイズ情報と、前記オブジェクトに表示されるテキスト又はアイコンの配置情報とを異なる階層に定義し、前記サイズ情報に基づいて前記オブジェクトを構成する土台レイヤーを作成し、前記配置情報に基づいて前記テキストを表示するテキストロケーションレイヤーまたは前記アイコンを表示するアイコンレイヤーを作成し、前記土台レイヤーと前記テキストロケーションレイヤーまたは前記アイコンレイヤーとを含む前記オブジェクトを構成するレイヤーの階層構造を作成する画像編集処理部と、
前記画像編集処理部が作成した前記階層構造を解析して、前記サイズ情報に対応づけられた第１のＩＤと、前記配置情報に対応づけられた第２のＩＤとを作成し、前記第１のＩＤと前記第２のＩＤとが埋め込まれた前記操作画面のソースコードを作成するデータ解析処理部と、を備え、
前記画像編集処理部は、前記土台レイヤーに対する前記アイコンレイヤーの上下左右のマージン幅を含む前記配置情報に基づいて前記階層構造を作成する、
ことを特徴とする操作画面作成装置。
【請求項2】
前記第１のＩＤと前記サイズ情報とを関連付けて格納する第１のＩＤ管理台帳を更に備え、前記第１のＩＤ管理台帳に格納された前記サイズ情報が変更された場合、変更された前記サイズ情報を基に、前記操作画面に含まれる前記オブジェクトのサイズが変更される、請求項１に記載の操作画面作成装置。
【請求項3】
前記第２のＩＤと前記配置情報とを関連付けて格納する第２のＩＤ管理台帳を更に備え、前記第２のＩＤ管理台帳に格納された前記配置情報が変更された場合、変更された前記配置情報を基に、前記操作画面に含まれる前記オブジェクトに表示されるテキスト又はアイコンの配置が変更される、請求項１又は請求項２に記載の操作画面作成装置。
【請求項4】
前記画像編集処理部は、前記オブジェクトに表示されるテキストのフォントの属性情報を、前記サイズ情報及び前記配置情報とは異なる階層に定義して前記オブジェクトを作成し、前記データ解析処理部は、前記画像編集処理部が作成した前記操作画面に含まれる前記オブジェクトの階層構造を解析して、前記フォントの属性情報に対応づけられた第３のＩＤを作成し、前記第１のＩＤ及び前記第２のＩＤと共に前記第３のＩＤが埋め込まれた前記操作画面のソースコードを作成する、請求項１から請求項３のいずれか一項に記載の操作画面作成装置。
【請求項5】
前記第３のＩＤと前記属性情報とを関連付けて格納する第３のＩＤ管理台帳を更に備え、前記第３のＩＤ管理台帳に格納された前記属性情報が変更された場合、変更された前記属性情報を基に、前記オブジェクトに表示されるテキストのフォントの属性が変更される、請求項４に記載の操作画面作成装置。
【請求項6】
実行する処理が対応付けられたオブジェクトを含む電子機器の操作画面を作成するための操作画面作成方法であって、前記オブジェクトのサイズ情報と、前記オブジェクトに表示されるテキスト又はアイコンの配置情報とを異なる階層に定義し、前記サイズ情報に基づいて前記オブジェクトを構成する土台レイヤーを作成し、前記配置情報に基づいて前記テキストを表示するテキストロケーションレイヤーまたは前記アイコンを表示するアイコンレイヤーを作成し、前記土台レイヤーと前記テキストロケーションレイヤーまたは前記アイコンレイヤーとを含む前記オブジェクトを構成するレイヤーの階層構造を作成することと、
前記操作画面に含まれる前記オブジェクトの階層構造を解析することと、
前記サイズ情報に対応付けられた第１のＩＤを作成することと、
前記配置情報に対応付けられた第２のＩＤを作成することと、
前記第１のＩＤと前記第２のＩＤとが埋め込まれた前記操作画面のソースコードを作成することと、を含み、
前記土台レイヤーに対する前記アイコンレイヤーの上下左右のマージン幅を含む前記配置情報に基づいて前記階層構造を作成する操作画面作成方法。
【請求項7】
実行する処理が対応付けられたオブジェクトを含む電子機器の操作画面を電子計算機に作成させるためのプログラムであって、前記オブジェクトのサイズ情報と、前記オブジェクトに表示されるテキスト又はアイコンの配置情報とを異なる階層に定義し、前記サイズ情報に基づいて前記オブジェクトを構成する土台レイヤーを作成し、前記配置情報に基づいて前記テキストを表示するテキストロケーションレイヤーまたは前記アイコンを表示するアイコンレイヤーを作成し、前記土台レイヤーと前記テキストロケーションレイヤーまたは前記アイコンレイヤーとを含む前記オブジェクトを構成するレイヤーの階層構造を作成するステップと、
前記操作画面に含まれる前記オブジェクトの階層構造を解析するステップと、
前記サイズ情報に対応付けられた第１のＩＤを作成するステップと、
前記配置情報に対応付けられた第２のＩＤを作成するステップと、
前記第１のＩＤと前記第２のＩＤとが埋め込まれた前記操作画面のソースコードを作成するステップと、を含み、
前記土台レイヤーに対する前記アイコンレイヤーの上下左右のマージン幅を含む前記配置情報に基づいて前記階層構造を作成する、処理を、前記電子計算機に実行させるためのプログラム。
【発明の詳細な説明】
【技術分野】
【0001】
本発明は、操作画面作成装置、操作画面作成方法及びプログラムに関する。
【背景技術】
【0002】
電子機器の画面上に操作画面として表示させるためのＧＵＩ（グラフィカルユーザインターフェース）は、実行する操作を対応付けた画像がオブジェクトとして、画面上に配置される。この操作画面であるＧＵＩを作成する装置としては、種々の装置が提案されている（例えば、特許文献１、２参照）。
【0003】
特許文献１には、オブジェクトの座標・サイズ・属性等をデータベースで共有することが記載されている。また、特許文献２には、オブジェクト情報から共通部分を抽出し、オブジェクト座標情報から算出された座標に、結合したオブジェクトを表示することが記載されている。
【先行技術文献】
【特許文献】
【0004】
【文献】特開２００９－９４７３号公報
【文献】特開２０１０－２３１３１６号公報
【発明の概要】
【発明が解決しようとする課題】
【0005】
ここで、ＧＵＩは、使用者に合わせて、複数の言語で表示可能であることが求められる場合、機種に対応して微調整が必要な場合等がある。このように、情報を管理するデータベースや、ＧＵＩを表示させるコードを修正して、ＧＵＩを微調整する場合、修正対象のオブジェクトが、どこにあるかを確認し、その対象のデータやコードを修正する必要があるため、作業に時間がかかる。
【0006】
本発明は、上記課題に鑑みてなされたものであって、オブジェクトの配置や変更を容易に行うことができ、ＧＵＩの作成を簡単にすることができる操作画面作成装置、操作画面作成方法及びプログラムを提供することを目的とする。
【課題を解決するための手段】
【0007】
上述した課題を解決し、目的を達成するために、本発明に係る操作画面作成装置は、実行する処理が対応付けられたオブジェクトを含む電子機器の操作画面を作成する操作画面作成装置であって、当該オブジェクトのサイズ情報と、当該オブジェクトに表示されるテキスト又はアイコンの配置情報とを異なる階層に定義して当該オブジェクトを作成し、当該オブジェクトを含む当該操作画面を作成する画像編集処理部と、当該画像編集処理部が作成した当該操作画面に含まれる当該オブジェクトの階層構造を解析して、当該サイズ情報を定義する第１のＩＤと、当該配置情報を定義する第２のＩＤとを作成し、当該第１のＩＤと第２のＩＤとが埋め込まれた当該操作画面のソースコードを作成するデータ解析処理部とを備える。
【0008】
上述した課題を解決し、目的を達成するために、本発明に係る操作画面作成方法は、実行する処理が対応付けられたオブジェクトを含む電子機器の操作画面を作成するための操作画面作成方法であって、当該オブジェクトのサイズ情報と、当該オブジェクトに表示されるテキスト又はアイコンの配置情報とを異なる階層に定義して当該オブジェクトを作成することと、当該オブジェクトを含む当該操作画面を作成することと、当該操作画面に含まれる当該オブジェクトの階層構造を解析することと、当該サイズ情報を定義する第１のＩＤを作成することと、当該配置情報を定義する第２のＩＤを作成することと、当該第１のＩＤと第２のＩＤとが埋め込まれた当該操作画面のソースコードを作成することとを含む。
【0009】
上述した課題を解決し、目的を達成するために、本発明に係るプログラムは、実行する処理が対応付けられたオブジェクトを含む電子機器の操作画面を電子計算機に作成させるためのプログラムであって、当該オブジェクトのサイズ情報と、当該オブジェクトに表示されるテキスト又はアイコンの配置情報とを異なる階層に定義して当該オブジェクトを作成するステップと、当該オブジェクトを含む当該操作画面を作成するステップと、当該操作画面に含まれる当該オブジェクトの階層構造を解析するステップと、当該サイズ情報を定義する第１のＩＤを作成するステップと、当該配置情報を定義する第２のＩＤを作成するステップと、当該第１のＩＤと第２のＩＤとが埋め込まれた当該操作画面のソースコードを作成するステップとを、当該電子計算機に実行させるためのプログラムである。
【発明の効果】
【0010】
本発明によれば、ＧＵＩの作成において、配置するオブジェクトの変更を容易にすることができるという効果を奏する。
【図面の簡単な説明】
【0011】
【発明を実施するための形態】
【0012】
以下、添付図面を参照して、本発明の実施形態について詳細に説明する。なお、この実施形態により本発明が限定されるものではない。また、実施形態が複数ある場合には、各実施形態を組み合わせて構成するものも含む。
【0013】
＜実施形態＞
図１から図４を用いて、本発明の実施形態に係る操作画面作成装置の構成について説明する。本実施形態に係る操作画面作成装置は、パーソナルコンピュータ等の電子計算機１に実装される。図１は、本実施形態に係る操作画面作成装置が実装される電子計算機１の構成の一例を示すブロック図である。以下の説明において、同様の構成要素について同一の符号を付すことがある。以下の説明において、重複する説明は省略することがある。
図１から図４を用いて、本発明の実施形態に係る操作画面作成装置の構成について説明する。本実施形態に係る操作画面作成装置は、パーソナルコンピュータ等の電子計算機１に実装される。図１は、本実施形態に係る操作画面作成装置が実装される電子計算機１の構成の一例を示すブロック図である。以下の説明において、同様の構成要素について同一の符号を付すことがある。以下の説明において、重複する説明は省略することがある。
【0014】
［操作画面作成装置］
図１に示すように、本実施形態に係る操作画面作成装置が実装される電子計算機１は、処理装置２と、主記憶装置３と、入出力インターフェース４と、外部記憶装置５と、入力装置６と、表示装置７と、駆動装置８と、通信装置９とを備える。ここで、処理装置２と、主記憶装置３と、入出力インターフェース４とは、互いに内部バスで接続されている。更に、入出力インターフェース４には、外部記憶装置５と、入力装置６と、表示装置７と、駆動装置８と、通信装置９とがそれぞれ接続されている。
図１に示すように、本実施形態に係る操作画面作成装置が実装される電子計算機１は、処理装置２と、主記憶装置３と、入出力インターフェース４と、外部記憶装置５と、入力装置６と、表示装置７と、駆動装置８と、通信装置９とを備える。ここで、処理装置２と、主記憶装置３と、入出力インターフェース４とは、互いに内部バスで接続されている。更に、入出力インターフェース４には、外部記憶装置５と、入力装置６と、表示装置７と、駆動装置８と、通信装置９とがそれぞれ接続されている。
【0015】
処理装置２は、例えば、ＣＰＵ（Central Processing Unit）等のマイクロプロセッサやマイクロコントローラ等、ソフトウェアプログラムに記述された命令セット（データの転送、計算、加工、制御、管理等）を実行する装置である。また、処理装置２は、主記憶装置３とのデータのやり取りを高速化するために、アクセスする頻度の高いデータや命令を保存しておくためのキャッシュメモリ（図示省略）を搭載している。なお、処理装置２には、例えば、画像処理をするＧＰＵ（Graphics Processing Unit）等、補助的な処理を行うプロセッサも含まれる。
【0016】
主記憶装置３は、例えば、ＲＯＭ（Read Only Memory）やＲＡＭ（Random Access Memory）等、実行中のプログラムやデータを一時的に格納している記憶装置である。入出力インターフェース４は、電子計算機１の本体と周辺装置とを接続するためのインターフェースである。入出力インターフェース４の規格の種類には、例えば、PS/2コネクタ、IDE/E-IDE、シリアルATA、USB、RS-232C、IEEE1394、SCSI、HDMI（登録商標）、PCカード、Bluetooth（登録商標）、ZigBee（登録商標）、IrDA、NFC等がある。
【0017】
外部記憶装置５は、例えば、ＨＤＤ（Hard Disk Drive）、ＳＳＤ（Solid State Disk）、ＵＳＢフラッシュメモリー等、主記憶装置３を補助するための記憶装置である。なお、外部記憶装置５は、電子計算機１に内蔵されていてもよいし、外付けであってもよい。また、外部記憶装置５は、後述する通信装置９を介して接続されたネットワーク上に存在するファイルサーバ（ストレージサーバ）であってもよい。
【0018】
入力装置６は、例えば、キーボードやマウス、あるいはキーパッド等、ユーザの操作に応じて、電子計算機１にデータや情報、指示等を与えるための装置である。入力装置６は、ユーザの操作を特定の信号に変換して電子計算機１に入力する。なお、入力装置６には、例えば、スキャナーやデジタルカメラ、ペンタブレット、マイク等も含まれる。即ち、入力装置６は、画像認識や音声認識等の技術を用いて、画像データや音声データをテキストデータに変換するものであってもよい。
【0019】
表示装置７は、例えば、液晶ディスプレイ（ＬＣＤ：Liquid Crystal Display）や有機ＥＬディスプレイ（ＯＥＬＤ：Organic Electro-Luminescence Display）等、電子計算機１から出力されるデータを、文字、数字、記号、図形、静止画または動画等の映像で表示するための装置である。なお、表示装置７がタッチパネルである場合、入力装置６と表示装置７は一体化していてもよい。
【0020】
駆動装置８は、例えば、ＣＤ（Compact Disc）やＤＶＤ（Digital Versatile Disc）を始めとする光ディスク、又は磁気テープ等の記憶媒体の読み取りや書き込みを行う装置である。通信装置９は、例えば、通信用ケーブルを接続するためのＮＩＣ（Network Interface Card）等のネットワークアダプタや、無線通信用のアンテナ等、ネットワークに接続するための装置である。
【0021】
本実施形態では、処理装置２が駆動装置８又は通信装置９を介してネットワーク上のサーバ等又は光ディスク等の記憶媒体に格納されたプログラムやデータを取得して外部記憶装置５内にインストールすることにより、本実施形態に係る操作画面作成装置が電子計算機１に実装される。その後、処理装置２がそのプログラムやデータを外部記憶装置５から主記憶装置３に読み込んで処理することで、本実施形態に係る操作画面作成装置の各機能が処理装置２内に構成される。
【0022】
なお、実際には、処理装置２が通信装置９を介してネットワーク上のアプリケーションサーバにアクセスし、アプリケーションサーバ上でプログラムやデータを処理するようにしてもよい。また、シンクライアント（Thin client）等の技術を利用して、サーバ上でプログラムやデータを処理するようにしてもよい。また、クラウドコンピューティング等の技術を利用して、ネットワーク経由で他のコンピュータ資源を利用するようにしてもよい。この場合、ネットワーク上のサーバ等が、本実施形態に係る操作画面作成装置を実装した電子計算機１となる。
【0023】
図２は、本実施形態に係る操作画面作成装置の機能構成の一例を示すブロック図である。図３は、実機で使用されるＧＵＩ（グラフィカルユーザインターフェース）の操作画面の一例を示す模式図である。図４は、本実施形態に係る操作画面作成装置におけるＧＵＩ開発画面の例について説明するための模式図である。図４に示すように、本実施形態に係る操作画面作成装置におけるＧＵＩ開発画面は、表示装置７に表示される。
【0024】
図２に示すように、処理装置２は、ソースコード変換処理部２１と、画像編集処理部２２と、データ解析処理部２３とを備える。ソースコード変換処理部２１、画像編集処理部２２、及びデータ解析処理部２３の各々は、処理装置２がプログラムやデータを外部記憶装置５から主記憶装置３に読み込んで処理することで、処理装置２内に構成される。
【0025】
ソースコード変換処理部２１は、ソースコードファイル１０をデータ交換用ファイル１１に変換し、このデータ交換用ファイル１１を画像編集処理部２２に出力する。ソースコードファイル１０は、例えば、図３に示すようなＧＵＩの操作画面のソースコードファイルであり、電子機器等の操作に用いる操作画面を表示装置７や当該電子機器等の画面上に表示させる。例えば、ＷｅｂベースのＧＵＩの場合には、ソースコードファイル１０はＨＴＭＬ（HyperText Markup Language）ファイルである。データ交換用ファイル１１は、異なるアプリケーション間でデータをやり取りする際に使用されるデータ交換用のファイルである。データ交換用ファイル１１として、ＣＳＶ（Comma-Separated Values）ファイルが例示される。ＣＳＶファイルは、カンマの代わりにタブ（Tab）又はその他の区切り文字で区切られたファイルであってもよい。
【0026】
図３に示すようなＧＵＩの操作画面には、実行する操作が対応付けられたオブジェクトが含まれている。本実施形態では、オブジェクトは、複数のレイヤーにより構成されている。図５から図７を用いて、オブジェクトを構成する複数のレイヤーの詳細について説明する。図５は、オブジェクトを構成するレイヤーの階層構造を説明するための模式図である。
【0027】
図５に示すように、まず、台紙となる土台レイヤーが配置され、その土台レイヤーの上に、入れ子となるアイコンを表示するためのアイコンレイヤーや、テキストを表示するためのテキストレイヤーセットが配置される。テキストレイヤーセットは、テキストロケーションレイヤーと、テキストレイヤーとの組み合わせである。テキストロケーションレイヤーは、台紙の中の入れ子となるテキスト表示領域に関するレイヤーである。テキストロケーションレイヤーは、上記土台レイヤーの上に重ねられる。テキストレイヤーは、テキスト表示領域に記述されるテキストに関するレイヤーである。テキストレイヤーは、上記テキストロケーションレイヤーの上に重ねられる。
【0028】
本実施形態では、土台レイヤーは第１のＩＤで管理される。第１のＩＤは、オブジェクトの座標情報及びサイズ情報を定義するＩＤである。座標情報は、平面上の点の位置を数値で表す直交座標系であり、座標軸としてＸを横軸に、Ｙを縦軸にとり、ＸとＹの値を組み合わせた座標「Ｘ、Ｙ」の形式で表現される。サイズ情報は、座標「Ｘ、Ｙ」を基準点とし、土台レイヤーのＸ軸方向の長さである幅Ｗ（width）と、Ｙ軸方向の長さである高さＨ（height）の値を組み合わせたサイズ「Ｗ、Ｈ」の形式で表現される。
【0029】
図６Ａは、第１のＩＤを格納する第１のＩＤ管理台帳３１のデータ構造を説明するための図表である。図６Ａに示すように、第１のＩＤ管理台帳３１においては、例えば、「第１のＩＤ、座標情報、サイズ情報」の形式、即ち、「第１のＩＤ、Ｘ、Ｙ、Ｗ、Ｈ」のレコード形式で管理される。したがって、第１のＩＤには、土台レイヤーを定義するために必要な情報が含まれている。また、別の観点から見れば、第１のＩＤや土台レイヤーは、オブジェクト自体のサイズ情報を定義するものである。
【0030】
また、テキストロケーションレイヤーやアイコンレイヤーは第２のＩＤで管理される。第２のＩＤは、テキスト／アイコン（画像）の表示位置に関するマージン（margin）及びアライメント（alignment）を定義するＩＤである。マージンは、土台レイヤーとアイコンレイヤーとのオフセット値であり、直交座標系における上下左右のマージン幅を指定する際に使用される。
【0031】
図７は、土台レイヤーに対するテキストロケーションレイヤー／アイコンレイヤーのマージンについての説明図である。（ａ）は、土台レイヤーに対するアイコンレイヤーのマージンを示す。（ｂ）は、土台レイヤーに対するテキストロケーションレイヤーのマージンを示す。（ａ）、（ｂ）に示すように、マージンは、直交座標系における上下左右のマージン幅、即ち、上側Ｔ（Top）、下側Ｂ（Bottom）、左側Ｌ（Left）、右側Ｒ（Right）について、マージン「Ｔ、Ｒ、Ｂ、Ｌ」の形式で表現される。（ｃ）は、座標情報、サイズ情報、マージンの具体的な数値を例示する。（ｃ）に示す例では、土台レイヤーの座標Ｘ「２５９」、座標Ｙ「３８１」、幅Ｗ「１２２」、高さＨ「６９」である。一方、アイコンレイヤーの座標Ｘ「２９５」、座標Ｙ「３９２」、幅Ｗ「４９」、高さＨ「４７」である。マージン幅は、上側Ｔ「１１」、右側Ｒ「３７」、下側Ｂ「１１」、左側Ｌ「３６」であるため、マージン「１１、３７、１１、３６」と表現される。
【0032】
アライメントは、テキストロケーションレイヤーやアイコンレイヤーの位置決めに関する値であり、水平方向のアライメントＡ（align）と、垂直方向のアライメントＶ（valign）について、アライメント「Ａ、Ｖ」の形式で表現される。水平方向のアライメントＡには、右揃え（right）、左揃え（left）、左右中央揃え（center）等が指定される。垂直方向のアライメントＶには、上揃え（top）、下揃え（bottom）、上下中央揃え（middle）等が指定される。アライメント「Ａ、Ｖ」を指定することで、アイコンの伸縮の有無、左中央、左下、右上、右中央の配置指定が可能である。
【0033】
図６Ｂは、第２のＩＤを格納する第２のＩＤ管理台帳３２のデータ構造を説明するための図表である。図６Ｂに示すように、第２のＩＤ管理台帳３２においては、例えば、「第２のＩＤ、マージン、アライメント」の形式、即ち、「第２のＩＤ、Ｔ、Ｒ、Ｂ、Ｌ、Ａ、Ｖ」のレコード形式で管理される。したがって、第２のＩＤには、テキストロケーションレイヤーやアイコンレイヤーを定義するために必要な情報が含まれている。また、別の観点から見れば、第２のＩＤや、テキストロケーションレイヤー／アイコンレイヤーは、オブジェクトに表示されるテキストやアイコンのオブジェクト内での配置情報を定義するものである。
【0034】
更に、テキストレイヤーは第３のＩＤで管理される。第３のＩＤは、テキストに指定するフォントのプロパティを定義するＩＤである。プロパティとは、例えば、フォントサイズ（Font-size）、フォントスタイル（Font-style）、フォントカラー（Font-color）、影付き（Text-shadow）、アウトライン（Outline）、行間（Linespace）等である。
【0035】
図６Ｃは、第３のＩＤを格納する第３のＩＤ管理台帳３３のデータ構造を説明するための図表である。図６Ｃに示すように、第３のＩＤ管理台帳３３においては、例えば、「第３のＩＤ、プロパティ」の形式、即ち、「第３のＩＤ、フォントサイズ、フォントスタイル、フォントカラー、影付き、アウトライン、行間」のレコード形式で管理される。したがって、第３のＩＤには、テキストレイヤーに表示されるテキストのフォントを定義するために必要な情報が関連付けられている。また、別の観点から見れば、第３のＩＤやテキストレイヤーは、オブジェクトに表示されるテキストのフォントの属性情報を定義するものである。
【0036】
本実施形態では、ソースコードファイル１０のソースコードには、第１のＩＤ、第２のＩＤ及び第３のＩＤが埋め込まれており、ソースコードファイル１０から変換されたデータ交換用ファイル１１にも、第１のＩＤ、第２のＩＤ及び第３のＩＤが含まれている。
【0037】
図２に示すように、処理装置２は、第１のＩＤ管理台帳３１、第２のＩＤ管理台帳３２、及び第３のＩＤ管理台帳３３にアクセスし、これらの参照や操作を行うことができる。第１のＩＤ管理台帳３１、第２のＩＤ管理台帳３２、及び第３のＩＤ管理台帳３３は一元化されることなく、個別に管理される。第１のＩＤ管理台帳３１、第２のＩＤ管理台帳３２、及び第３のＩＤ管理台帳３３は、主記憶装置３又は外部記憶装置５に格納されていてもよいし、通信装置９を介して接続されたネットワーク上に存在するファイルサーバ（ストレージサーバ）上に存在していてもよい。第１のＩＤ管理台帳３１、第２のＩＤ管理台帳３２、及び第３のＩＤ管理台帳３３はそれぞれデータベースに限らず表形式のファイルやＣＳＶファイルであってもよい。
【0038】
このように、第１のＩＤ、第２のＩＤ及び第３のＩＤを使用することで、ＧＵＩのデザインを設計するデザイナーと、ＧＵＩの機能を設計するエンジニアとの間で、オブジェクトの各レイヤーに関する情報のやり取りが簡潔かつ容易になる。
【0039】
画像編集処理部２２は、ソースコード変換処理部２１からデータ交換用ファイル１１を取得し、ＧＵＩの編集に用いる画像編集ソフトウェア（Image editor）と連携して、データ交換用ファイル１１を画像編集用ファイル１２に変換する。画像編集用ファイル１２は、画像編集ソフトウェアで使用可能な画像編集用ファイルである。
【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】
画像ファイル名は、プレフィックス（prefix：接頭辞）と、任意の名称と、拡張子とを組み合わせたものとして規定されている。プレフィックスとは、画像ファイルのファイル名の接頭辞である。画像ファイル名のプレフィックスは、オブジェクトの種類を示す。オブジェクトの種類については、背景画、画像、ボタン、チェックボタン、ラジオボタン、リスト、エディットテキスト、テンポラリ、バリエーション等が例示される。プレフィックスについては、例えば、画像の場合には「img」、ボタンの場合には、「btn」、バリエーションの場合には「var」等とする。
【0108】
画像ファイル名には、画像の変更による影響がないものを付ける。例えば、画像ファイル名には、画像サイズの情報を使用しない。画像サイズを微調整した時に画像ファイル名まで変更する必要が生じるためである。
【0109】
次に、データ解析処理部２３は、取得した土台レイヤーの座標情報及びサイズ情報を定義する第１のＩＤを生成する（ステップＳ４０４）。第１のＩＤは、画像ファイル名のプレフィックスと、任意の名称とを組み合わせて生成される。画像ファイル名のプレフィックスとは、土台レイヤーに指定された画像ファイルのファイル名の接頭辞である。画像ファイル名のプレフィックスは、オブジェクトの種類を示す。したがって、第１のＩＤは、［プレフィックス］_［名称］となる（例えば、img_albumart、btn_playpaus）。
【0110】
また、土台レイヤーに画像ファイルの指定がない場合には、第１のＩＤは、オブジェクトの種類としてテキストを示す文字列「txt」と、任意の名称とを組み合わせて生成されるようにしてもよい。この場合、第１のＩＤは、txt_［名称］となる（例えば、txt_title）。
【0111】
次に、データ解析処理部２３は、主記憶装置３又は外部記憶装置５に格納された第１のＩＤ管理台帳３１を確認する（ステップＳ４０５）。即ち、データ解析処理部２３は、第１のＩＤ管理台帳３１にアクセスする。
【0112】
次に、データ解析処理部２３は、上記生成された第１のＩＤと同名のものが第１のＩＤ管理台帳３１に既にあるか確認する（ステップＳ４０６）。即ち、データ解析処理部２３は、第１のＩＤ管理台帳３１で管理されている第１のＩＤの中に、上記生成された第１のＩＤと一致するものが既に存在しているか確認する。
【0113】
データ解析処理部２３は、上記生成された第１のＩＤと同名のものが第１のＩＤ管理台帳３１にはない場合には、上記生成された第１のＩＤを第１のＩＤ管理台帳３１に追加登録する（ステップＳ４０７）。本実施形態では、データ解析処理部２３は、例えば、「第１のＩＤ、座標情報、サイズ情報」の形式、即ち、「第１のＩＤ、Ｘ、Ｙ、Ｗ、Ｈ」のレコード形式で、第１のＩＤ管理台帳３１に追加登録する。そして、一連の処理を終了する。
【0114】
また、データ解析処理部２３は、上記生成された第１のＩＤと同名のものが第１のＩＤ管理台帳３１に既にある場合には、上記生成された第１のＩＤと、第１のＩＤ管理台帳３１に既に存在する同名の第１のＩＤとを比較照合し、両第１のＩＤの座標情報及びサイズ情報が同じであるか確認する（ステップＳ４０８）。データ解析処理部２３は、両第１のＩＤの座標情報及びサイズ情報が同じである場合（ステップＳ４０８でＹｅｓ）には、同一の第１のＩＤであると判断して、一連の処理を終了する。
【0115】
データ解析処理部２３は、両第１のＩＤの座標情報及びサイズ情報が同じではない場合（ステップＳ４０８でＮｏ）には、第１のＩＤ管理台帳３１に既に存在する同名の第１のＩＤを、上記生成された第１のＩＤで上書き（更新）するか確認する（ステップＳ４０９）。この場合、データ解析処理部２３は、例えば、ユーザに対して第１のＩＤを上書きするか否かを問い合わせる確認メッセージ等を表示装置７に表示し、それに対するユーザの操作に応じて、当該第１のＩＤの上書きの可否を判断する。データ解析処理部２３は、当該第１のＩＤの上書きを行わないと判断した場合（ステップＳ４０９でＮｏ）には、一連の処理を終了する。その後、画像編集処理部２２が実施する画像編集処理に戻り、再度ユーザがレイアウト設計を行うようにしてもよい。
【0116】
データ解析処理部２３は、当該第１のＩＤの上書きを行うと判断した場合（ステップＳ４０９でＹｅｓ）には、第１のＩＤ管理台帳３１に既に存在する同名の第１のＩＤを、上記生成された第１のＩＤで上書き（更新）する（ステップＳ４１０）。その後、一連の処理を終了する。
【0117】
【0118】
図１２に示すように、データ解析処理部２３は、アイコンレイヤーの座標情報を取得する（ステップＳ５０１）。次に、データ解析処理部２３は、アイコンレイヤーのサイズ情報を取得する（ステップＳ５０２）。次に、データ解析処理部２３は、第１のＩＤ管理台帳３１にアクセスして、アイコンレイヤーが表示される土台画像レイヤーの座標情報及びサイズ情報を取得する（ステップＳ５０３）。
【0119】
次に、データ解析処理部２３は、アイコンレイヤーの座標情報及びサイズ情報と、土台画像レイヤーの座標情報及びサイズ情報とから、土台画像レイヤーに対するアイコンレイヤーのマージン及びアライメントを求め、そのアイコンレイヤーのマージン及びアライメントを定義する第２のＩＤを生成する（ステップＳ５０４）。第２のＩＤは、オブジェクトの種類としてアイコン（画像）を示す文字列「img」と、任意の名称とを組み合わせて生成される。したがって、第２のＩＤは、img_［名称］となる（例えば、img_back）。
【0120】
次に、データ解析処理部２３は、主記憶装置３又は外部記憶装置５に格納された第２のＩＤ管理台帳３２を確認する（ステップＳ５０５）。即ち、データ解析処理部２３は、第２のＩＤ管理台帳３２にアクセスする。
【0121】
次に、データ解析処理部２３は、上記生成された第２のＩＤと同名のものが第２のＩＤ管理台帳３２に既にあるか確認する（ステップＳ５０６）。即ち、データ解析処理部２３は、第２のＩＤ管理台帳３２で管理されている第２のＩＤの中に、上記生成された第２のＩＤと一致するものが既に存在しているか確認する。
【0122】
データ解析処理部２３は、上記生成された第２のＩＤと同名のものが第２のＩＤ管理台帳３２にはない場合（ステップＳ５０６でＮｏ）には、上記生成された第２のＩＤを第２のＩＤ管理台帳３２に追加登録する（ステップＳ５０７）。本実施形態では、データ解析処理部２３は、例えば、「第２のＩＤ、マージン、アライメント」の形式、即ち、「第２のＩＤ、Ｔ、Ｒ、Ｂ、Ｌ、Ａ、Ｖ」のレコード形式で、第２のＩＤ管理台帳３２に追加登録する。その後、一連の処理を終了する。
【0123】
また、データ解析処理部２３は、上記生成された第２のＩＤと同名のものが第２のＩＤ管理台帳３２に既にある場合（ステップＳ５０６でＹｅｓ）には、上記生成された第２のＩＤと、第２のＩＤ管理台帳３２に既に存在する同名の第２のＩＤとを比較照合し、両第２のＩＤのマージン及びアライメントが同じであるか確認する（ステップＳ５０８）。データ解析処理部２３は、両第２のＩＤのマージン及びアライメントが同じである場合（ステップＳ５０８でＹｅｓ）には、同一の第２のＩＤであると判断して、一連の処理を終了する。
【0124】
データ解析処理部２３は、両第２のＩＤのマージン及びアライメントが同じではない場合（ステップＳ５０８でＮｏ）には、第２のＩＤ管理台帳３２に既に存在する同名の第２のＩＤを、上記生成された第２のＩＤで上書き（更新）するか確認する（ステップＳ５０９）。この場合、データ解析処理部２３は、例えば、ユーザに対して第２のＩＤを上書きするか否かを問い合わせる確認メッセージ等を表示装置７に表示し、それに対するユーザの操作に応じて、当該第２のＩＤの上書きの可否を判断する。
【0125】
データ解析処理部２３は、当該第２のＩＤの上書きを行わないと判断した場合（ステップＳ５０９でＮｏ）には、一連の処理を終了する。その後、画像編集処理部２２が実施する画像編集処理に戻り、再度ユーザがレイアウト設計を行うようにしてもよい。
【0126】
データ解析処理部２３は、当該第２のＩＤの上書きを行うと判断した場合（ステップＳ５０９でＹｅｓ）には、第２のＩＤ管理台帳３２に既に存在する同名の第２のＩＤを、上記生成された第２のＩＤで上書き（更新）する（ステップＳ５１０）。その後、一連の処理を終了する。
【0127】
［第３のＩＤ生成処理］
図１３Ａ及び図１３Ｂを用いて、第３のＩＤ生成処理の詳細について説明する。図１３Ａは、第３のＩＤ生成処理の前半の流れを示すフローチャートである。図１３Ｂは、第３のＩＤ生成処理の後半の流れを示すフローチャートである。
図１３Ａ及び図１３Ｂを用いて、第３のＩＤ生成処理の詳細について説明する。図１３Ａは、第３のＩＤ生成処理の前半の流れを示すフローチャートである。図１３Ｂは、第３のＩＤ生成処理の後半の流れを示すフローチャートである。
【0128】
図１３Ａに示すように、データ解析処理部２３は、テキストロケーションレイヤーの座標情報を取得する（ステップＳ６０１）。次に、データ解析処理部２３は、テキストロケーションレイヤーのサイズ情報を取得する（ステップＳ６０２）。次に、データ解析処理部２３は、第１のＩＤ管理台帳３１にアクセスして、テキストロケーションレイヤーが表示される土台ノーマルレイヤーの座標情報及びサイズ情報を取得する（ステップＳ６０３）。
【0129】
次に、データ解析処理部２３は、テキストロケーションレイヤーの座標情報及びサイズ情報と、土台ノーマルレイヤーの座標情報及びサイズ情報とから、土台ノーマルレイヤーに対するテキストロケーションレイヤーのマージン及びアライメントを求め、そのテキストロケーションレイヤーのマージン及びアライメントを定義する第２のＩＤを生成する（ステップＳ６０４）。第２のＩＤは、オブジェクトの種類としてテキストを示す文字列「txt」と、任意の名称とを組み合わせて生成される。したがって、第２のＩＤは、txt_［名称］となる（例えば、txt_title）。
【0130】
次に、データ解析処理部２３は、主記憶装置３又は外部記憶装置５に格納された第２のＩＤ管理台帳３２を確認する（ステップＳ６０５）。即ち、データ解析処理部２３は、第２のＩＤ管理台帳３２にアクセスする。
【0131】
次に、データ解析処理部２３は、上記生成された第２のＩＤと同名のものが第２のＩＤ管理台帳３２に既にあるか確認する（ステップＳ６０６）。即ち、データ解析処理部２３は、第２のＩＤ管理台帳３２で管理されている第２のＩＤの中に、上記生成された第２のＩＤと一致するものが既に存在しているか確認する。
【0132】
データ解析処理部２３は、上記生成された第２のＩＤと同名のものが第２のＩＤ管理台帳３２にはない場合（ステップＳ６０６でＮｏ）には、上記生成された第２のＩＤを第２のＩＤ管理台帳３２に追加登録する（ステップＳ６０７）。その後、図１３Ｂに示すステップＳ６１１の処理に移行する。
【0133】
また、データ解析処理部２３は、上記生成された第２のＩＤと同名のものが第２のＩＤ管理台帳３２に既にある場合（ステップＳ６０６でＹｅｓ）には、上記生成された第２のＩＤと、第２のＩＤ管理台帳３２に既に存在する同名の第２のＩＤとを比較照合し、両第２のＩＤのマージン及びアライメントが同じであるか確認する（ステップＳ６０８）。データ解析処理部２３は、両第２のＩＤのマージン及びアライメントが同じである場合（ステップＳ６０８でＹｅｓ）には、図１３Ｂに示すステップＳ６１１の処理に移行する。
【0134】
データ解析処理部２３は、両第２のＩＤのマージン及びアライメントが同じではない場合（ステップＳ６０８でＮｏ）には、第２のＩＤ管理台帳３２に既に存在する同名の第２のＩＤを、上記生成された第２のＩＤで上書き（更新）するか確認する（ステップＳ６０９）。この場合、データ解析処理部２３は、例えば、ユーザに対して第２のＩＤを上書きするか否かを問い合わせる確認メッセージ等を表示装置７に表示し、それに対するユーザの操作に応じて、当該第２のＩＤの上書きの可否を判断する。データ解析処理部２３は、当該第２のＩＤの上書きを行わないと判断した場合（ステップＳ６０９でＮｏ）には、図１３Ｂに示すステップＳ６１１の処理に移行する。
【0135】
データ解析処理部２３は、当該第２のＩＤの上書きを行うと判断した場合（ステップＳ６０９でＹｅｓ）には、第２のＩＤ管理台帳３２に既に存在する同名の第２のＩＤを、上記生成された第２のＩＤで上書き（更新）する（ステップＳ６１０）。その後、図１３Ｂに示すステップＳ６１１の処理に移行する。
【0136】
図１３Ｂに示すように、データ解析処理部２３は、テキストレイヤーの詳細情報を取得する（ステップＳ６１１）。次に、データ解析処理部２３は、テキストレイヤーの詳細情報に第３のＩＤの指定があるか確認する（ステップＳ６１２）。データ解析処理部２３は、テキストレイヤーの詳細情報に第３のＩＤの指定がある場合（ステップＳ６１２でＹｅｓ）には、外部記憶装置５に格納された第３のＩＤ管理台帳３３にアクセスし、第３のＩＤ管理台帳３３から、指定された第３のＩＤを取得する（ステップＳ６１３）。その後、一連の処理を終了する。
【0137】
データ解析処理部２３は、テキストレイヤーの詳細情報に第３のＩＤの指定がない場合（ステップＳ６１２でＮｏ）には、テキストレイヤーに入力されるテキストのフォントのプロパティを定義する第３のＩＤを生成する（ステップＳ６１４）。このとき、データ解析処理部２３は、テキストレイヤーの詳細情報にプロパティに関する情報が含まれている場合には、その情報に基づいてプロパティを設定する。また、データ解析処理部２３は、初期値（デフォルト）として事前に規定されているプロパティを設定してもよいし、プロパティをユーザに問い合わせてユーザ操作に応じてプロパティを設定してもよい。
【0138】
各プロパティに指定できる設定値は、例えば、以下のとおりである。フォントサイズには、サイズの値［ｐｘ］を指定できる。フォントスタイルには、通常（Normal）、太字（Bold）、斜体（Italic）等が指定できる。フォントカラーには、「#000000形式」でフォントの色を指定できる。影付きには、オフセット値と色を指定できる。オフセット値は水平距離、垂直距離のみ指定可能である。半径は０［ｐｘ］とする。アウトラインには、色と幅を指定できる。但し、幅の値は固定値である。行間には、行間の値［px］を指定できる。複数行表示する場合には指定し、１行表示する場合には指定しない。なお、行間の代わりに行の高さ（Line-height）を用いてもよい。
【0139】
第３のＩＤは、そのフォントが使用されるオブジェクトの種類と、任意の名称と、必要に応じて状態とを組み合わせて生成される。したがって、第３のＩＤは、テキスト用フォントの場合、txt_［名称］となり（例えば、txt_title）、ボタン用フォントの場合、btn_［名称］_［状態］となり（例えば、btn_ok_p）、リスト用フォントの場合、lst_［名称］_［状態］となる（例えば、lst_music_n）。
【0140】
オブジェクトがボタンやリストの場合、押下や選択等の操作によって、オブジェクトの状態が変化する。「状態」は、オブジェクトの状態を示す識別子である。例えば、通常状態（Normal）は状態「n」である。押下状態（Pushed）は状態「p」である。無効状態（Disabled）は状態「d」である。選択状態（Selected）は状態「s」である。選択及び押下状態（SelectedPushed）は状態「sp」である。選択及び無効状態（SelectedDisabled）は状態「sd」である。
【0141】
次に、データ解析処理部２３は、主記憶装置３又は外部記憶装置５に格納された第３のＩＤ管理台帳３３を確認する（ステップＳ６１５）。即ち、データ解析処理部２３は、第３のＩＤ管理台帳３３にアクセスする。
【0142】
次に、データ解析処理部２３は、上記生成された第３のＩＤと同名のものが第３のＩＤ管理台帳３３に既にあるか確認する（ステップＳ６１６）。即ち、データ解析処理部２３は、第３のＩＤ管理台帳３３で管理されている第３のＩＤの中に、上記生成された第３のＩＤと一致するものが既に存在しているか確認する。
【0143】
データ解析処理部２３は、上記生成された第３のＩＤと同名のものが第３のＩＤ管理台帳３３にはない場合（ステップＳ６１６でＮｏ）には、上記生成された第３のＩＤを第３のＩＤ管理台帳３３に追加登録する（ステップＳ６１７）。本実施形態では、データ解析処理部２３は、例えば、「第３のＩＤ、プロパティ」の形式、即ち、「第３のＩＤ、フォントサイズ、フォントスタイル、フォントカラー、影付き、アウトライン、行間」のレコード形式で、第３のＩＤ管理台帳３３に追加登録する。その後、一連の処理を終了する。
【0144】
また、データ解析処理部２３は、上記生成された第３のＩＤと同名のものが第３のＩＤ管理台帳３３に既にある場合（ステップＳ６１６でＹｅｓ）には、上記生成された第３のＩＤと、第３のＩＤ管理台帳３３に既に存在する同名の第３のＩＤとを比較照合し、両第３のＩＤのプロパティが同じであるか確認する（ステップＳ６１８）。データ解析処理部２３は、両第３のＩＤのプロパティが同じである場合（ステップＳ６１８でＹｅｓ）には、同一の第３のＩＤであると判断して、一連の処理を終了する。
【0145】
データ解析処理部２３は、両第３のＩＤのプロパティが同じではない場合（ステップＳ６１８でＮｏ）には、第３のＩＤ管理台帳３３に既に存在する同名の第３のＩＤを、上記生成された第３のＩＤで上書き（更新）するか確認する（ステップＳ６１９）。この場合、データ解析処理部２３は、例えば、ユーザに対して第３のＩＤを上書きするか否かを問い合わせる確認メッセージ等を表示装置７に表示し、それに対するユーザの操作に応じて、当該第３のＩＤの上書きの可否を判断する。データ解析処理部２３は、当該第３のＩＤの上書きを行わないと判断した場合（ステップＳ６１９でＮｏ）には、一連の処理を終了する。その後、画像編集処理部２２が実施する画像編集処理に戻り、再度ユーザがレイアウト設計を行うようにしてもよい。
【0146】
データ解析処理部２３は、当該第３のＩＤの上書きを行うと判断した場合（ステップＳ６１９でＹｅｓ）には、第３のＩＤ管理台帳３３に既に存在する同名の第３のＩＤを、上記生成された第３のＩＤで上書き（更新）する（ステップＳ６２０）。その後、一連の処理を終了する。
【0147】
［各ＩＤの埋め込み方法］
次に、データ解析処理部２３が階層構造情報から生成するソースコードファイル１０上での各ＩＤの埋め込み方法について説明する。ソースコードファイル１０上での各ＩＤの記載法は入れ子構成とする。ソースコードファイル１０がＨＴＭＬファイルの場合には、ＨＴＭＬタグ「div」の要素「id」に第１のＩＤや第２のＩＤを記述し、要素「class」に第３のＩＤを記述する。例えば、単独テキストＳＴの場合、<div id="第１のＩＤ/第２のＩＤ" class="第３のＩＤ">文字列</div>と記述する。
次に、データ解析処理部２３が階層構造情報から生成するソースコードファイル１０上での各ＩＤの埋め込み方法について説明する。ソースコードファイル１０上での各ＩＤの記載法は入れ子構成とする。ソースコードファイル１０がＨＴＭＬファイルの場合には、ＨＴＭＬタグ「div」の要素「id」に第１のＩＤや第２のＩＤを記述し、要素「class」に第３のＩＤを記述する。例えば、単独テキストＳＴの場合、<div id="第１のＩＤ/第２のＩＤ" class="第３のＩＤ">文字列</div>と記述する。
【0148】
また、第２のＩＤを記述する際、台紙は「base」、文字の入れ子は「text*」、画像の入れ子は「icon*」と記述する。「*」は１～９の数字である。例えば、同一オブジェクト内のテキスト、画像の数に応じて、「text」、「icon」にそれぞれ１から順に９までの数字を割り当てる。
【0149】
また、入れ子テキストＮＴや入れ子画像ＮＩの場合には、文字の入れ子「text*」、又は画像の入れ子「icon*」の後に、区切り文字「/」で続けて第２のＩＤを付与する。テキストは「text*/第２のＩＤ」、アイコンは「icon*/第２のＩＤ」と記述する。例えば、入れ子テキストＮＴの場合、<div id="第１のＩＤ"><div id="base"><img src="画像ファイル名"></div><div id="text*/第２のＩＤ" class="第３のＩＤ">文字列</div></div>と記述する。
【0150】
［変形例］
（電子計算機の例）
本実施形態に係る電子計算機１、又はその電子計算機１により作成されたＧＵＩの操作画面を表示する電子機器は、例えば、携帯電話機、スマートフォン、タブレット、モバイルパソコン、メディアプレイヤ、電子書籍リーダ、ナビゲータ、ウェアラブルデバイス、又はゲーム機等でもよい。
（電子計算機の例）
本実施形態に係る電子計算機１、又はその電子計算機１により作成されたＧＵＩの操作画面を表示する電子機器は、例えば、携帯電話機、スマートフォン、タブレット、モバイルパソコン、メディアプレイヤ、電子書籍リーダ、ナビゲータ、ウェアラブルデバイス、又はゲーム機等でもよい。
【0151】
（他の第１のＩＤ生成方法）
土台レイヤーに画像ファイルの指定がある場合には、第１のＩＤは、画像ファイル名のプレフィックス（prefix：接頭辞）と、画像編集用ファイル名（拡張子なし）と、グループ名とを組み合わせて生成されるようにしてもよい。この場合、第１のＩＤは、［画像ファイル名のプレフィックス］_［画像編集用ファイル名（拡張子なし）］_［グループ名］となる。
土台レイヤーに画像ファイルの指定がある場合には、第１のＩＤは、画像ファイル名のプレフィックス（prefix：接頭辞）と、画像編集用ファイル名（拡張子なし）と、グループ名とを組み合わせて生成されるようにしてもよい。この場合、第１のＩＤは、［画像ファイル名のプレフィックス］_［画像編集用ファイル名（拡張子なし）］_［グループ名］となる。
【0152】
画像ファイル名のプレフィックスとは、土台レイヤーに指定された画像ファイルのファイル名の接頭辞である。画像編集用ファイル名とは、現在編集中の画像編集用ファイル１２のファイル名である。グループ名とは、例えば、画像編集処理部２２により作成されたグループ毎のフォルダ名のうち、当該土台レイヤーが属するグループのフォルダ名である。例えば、画像ファイル名「btn_card_n.png」、画像編集用ファイル名「69_7333.edit」、グループ名「card_left」の場合には、第１のＩＤ「btn_69_7333_card_left」となる。
【0153】
また、土台レイヤーに画像ファイルの指定がない場合には、第１のＩＤは、オブジェクトの種類としてテキストを示す文字列「txt」と、グループ名とを組み合わせて生成されるようにしてもよい。この場合、第１のＩＤは、txt_［グループ名］となる。
【0154】
（他の第２のＩＤ生成方法）
アイコンレイヤーの第２のＩＤは、オブジェクトの種類としてアイコン（画像）を示す文字列「img_i」と、アイコンレイヤー番号と、画像編集用ファイル名（拡張子なし）と、グループ名とを組み合わせて生成されるようにしてもよい。この場合、第２のＩＤは、img_i［アイコンレイヤー番号］_［画像編集用ファイル名（拡張子なし）］_［グループ名］となる。例えば、アイコンレイヤー番号「1」、画像編集用ファイル名「69_7333.edit」、グループ名「card_left」の場合には、第２のＩＤ「img_i1_69_7333_card_left」となる。
アイコンレイヤーの第２のＩＤは、オブジェクトの種類としてアイコン（画像）を示す文字列「img_i」と、アイコンレイヤー番号と、画像編集用ファイル名（拡張子なし）と、グループ名とを組み合わせて生成されるようにしてもよい。この場合、第２のＩＤは、img_i［アイコンレイヤー番号］_［画像編集用ファイル名（拡張子なし）］_［グループ名］となる。例えば、アイコンレイヤー番号「1」、画像編集用ファイル名「69_7333.edit」、グループ名「card_left」の場合には、第２のＩＤ「img_i1_69_7333_card_left」となる。
【0155】
また、テキストロケーションレイヤーの第２のＩＤは、オブジェクトの種類としてテキストを示す文字列「txt_t」と、テキストレイヤー番号と、画像編集用ファイル名（拡張子なし）と、グループ名とを組み合わせて生成されるようにしてもよい。なお、テキストレイヤー番号は、テキストロケーションレイヤーと、テキストレイヤーとで同一の番号とする。この場合、第２のＩＤは、txt_t［テキストレイヤー番号］_［画像編集用ファイル名（拡張子なし）］_［グループ名］となる。例えば、テキストレイヤー番号「1」、画像編集用ファイル名「81_3143.edit」、グループ名「title」の場合には、第２のＩＤ第２のＩＤ「txt_t1_81_3143_title」となる。
【0156】
（他の第３のＩＤ生成方法）
第３のＩＤは、オブジェクトの種類と、レイヤー番号と、画像編集用ファイル名（拡張子なし）と、グループ名と、状態を組み合わせて生成されるようにしてもよい。この場合、第３のＩＤは、［オブジェクトの種類］_［レイヤー番号］_［画像編集用ファイル名（拡張子なし）］_［グループ名］となる。「オブジェクトの種類」は、フォントを適用するオブジェクトにより異なる。オブジェクトの種類は、例えば、テキスト用フォントの場合には「txt」である。ボタン用フォントの場合には「btn」である。リスト用フォントの場合には「lst」である。例えば、オブジェクトの種類「txt」、テキストレイヤー番号「1」、画像編集用ファイル名「81_3143.edit」、グループ名「title」、状態「n」の場合には、第３のＩＤ「txt_1_81_3143_title_n」となる。
第３のＩＤは、オブジェクトの種類と、レイヤー番号と、画像編集用ファイル名（拡張子なし）と、グループ名と、状態を組み合わせて生成されるようにしてもよい。この場合、第３のＩＤは、［オブジェクトの種類］_［レイヤー番号］_［画像編集用ファイル名（拡張子なし）］_［グループ名］となる。「オブジェクトの種類」は、フォントを適用するオブジェクトにより異なる。オブジェクトの種類は、例えば、テキスト用フォントの場合には「txt」である。ボタン用フォントの場合には「btn」である。リスト用フォントの場合には「lst」である。例えば、オブジェクトの種類「txt」、テキストレイヤー番号「1」、画像編集用ファイル名「81_3143.edit」、グループ名「title」、状態「n」の場合には、第３のＩＤ「txt_1_81_3143_title_n」となる。
【0157】
以上説明したように、本発明では、ＧＵＩの作成において、部品となるオブジェクトのサイズ（第１のＩＤ）、テキストやアイコンの配置（第２のＩＤ）、フォントの属性（第３のＩＤ）を個別に管理・編集することができる。そのため、表示位置を変えずに、配置したオブジェクトの形状等の変更を容易に行うことができる。また、本発明では、各ＩＤの組み合わせにより、ＧＵＩの構成を決定する。したがって、レイアウトを変えずに部品を変える、または部品を流用してレイアウトを変える、といったＧＵＩ開発ができる。また、本発明では、ＧＵＩ情報（データ、ソースコード）を画像ファイル形式に変換することができる。
【0158】
添付の請求項に係る技術を完全かつ明瞭に開示するために特徴的な本実施形態に関し記載してきた。しかし、添付の請求項は、上記本実施形態に限定されるべきものでなく、本明細書に示した基礎的事項の範囲内で当該技術分野の当業者が創作し得る全ての変形例及び代替可能な構成を具現化するように構成されるべきである。
【符号の説明】
【0159】
１…電子計算機、２…処理装置、３…主記憶装置、４…入出力インターフェース、５…外部記憶装置、６…入力装置、７…表示装置、８…駆動装置、９…通信装置、１０…ソースコードファイル、１１…データ交換用ファイル、１２…画像編集用ファイル、２１…ソースコード変換処理部、２２…画像編集処理部、２３…データ解析処理部、３１…第１のＩＤ管理台帳、３２…第２のＩＤ管理台帳、３３…第３のＩＤ管理台帳
【図1】
【図2】
【図3】
【図4】
【図5】
【図6A】
【図6B】
【図6C】
【図7】
【図8】
【図9A】
【図9B】
【図9C】
【図9D】
【図9E】
【図9F】
【図9G】
【図10A】
【図10B】
【図11】
【図12】
【図13A】
【図13B】