JP2004126971A

JP2004126971A - グラフィカルユーザインターフェース用部品生成装置、生成方法、生成プログラム、及び該プログラムを記録したコンピュータ読み取り可能な記録媒体

Info

Publication number: JP2004126971A
Application number: JP2002290706A
Authority: JP
Inventors: Mitsuhiro Sago; 佐郷　充啓
Original assignee: ILC KK
Current assignee: ILC KK
Priority date: 2002-10-03
Filing date: 2002-10-03
Publication date: 2004-04-22

Abstract

【課題】入力されるグラフィックデータのデザイン的な自由度を向上するとともに、ＧＵＩ開発工数を短縮することができるようにする。
【解決手段】本発明のＧＵＩ用部品生成装置１は、画像を配置した仮想的な透明シートであるレイヤを階層状に重ね合わせてなる構造を有するグラフィックデータＧを入力する手段と、グラフィックデータＧの前記各レイヤに配置された画像に含まれる部品画像を抽出する手段と、所定関係にある部品画像同士を互いに切替表示可能なものとして関係付けたＧＵＩ用部品データＰを生成する手段とを備えた部品データ生成手段１５を有している。
【選択図】　　　図１

Description

【０００１】
【発明の属する技術分野】
本発明は、グラフィカルユーザインターフェース用部品生成装置、生成方法、生成プログラム、及び該プログラムを記録したコンピュータ読み取り可能な記録媒体に関するものである。
【０００２】
【従来の技術】
従来のグラフィカルユーザインターフェース（以下、「ＧＵＩ」という。）用部品生成装置としては、特許文献１に開示された画面生成方法及びその装置を例示する。この公報に開示された方法及び装置では、まず、ＧＵＩ部品を定義した文字列とＧＵＩ設計図をイメージスキャナで入力し、イメージバッファに格納する（Ｓ１，２）。次に、イメージバッファ上に沿かれた線分を抽出し、線分画像をベクトル情報に変換する（Ｓ３）。次に、抽出されたベクトル情報から矩形線分を抽出し、ベクトル情報から矩形情報に変換する（Ｓ４）。次に、文字認識を行って文字イメージをキャラクターコードに変換する（Ｓ５）。次に、キャラクターコードの意図するＧＵＩ部品と矩形の対応付けを行う（Ｓ６，７）。
【０００３】
【特許文献１】
特開平８−１６６８６５号公報
【０００４】
【発明が解決しようとする課題】
ところが、従来の方法及び装置では、１枚のＧＵＩ設計図にＧＵＩ画像が互いに重なり合わないように配置されている必要があり、入力データのデザイン的な制約が大きいという課題がある。
【０００５】
また、各ＧＵＩ画像ごとに個別のＧＵＩ部品が生成されるようになっており、複数のＧＵＩ画像を切り替え表示するＧＵＩ部品を自動的に生成することはできないという課題がある。
【０００６】
そして、以上のような課題があるために、ＧＵＩ画像が互いに重なり合うように配置されたり、複数のＧＵＩ画像を切り替えて表示したりするＧＵＩ部品の開発については、手作業が多くなり、ＧＵＩ開発工数が長くなっている。
【０００７】
本発明の目的は、上記課題を解決し、入力されるグラフィックデータのデザイン的な自由度を向上するとともに、ＧＵＩ開発工数を短縮することができるＧＵＩ用部品生成装置、生成方法、生成プログラム、及び該プログラムを記録したコンピュータ読み取り可能な記録媒体を提供することにある。
【０００８】
【課題を解決するための手段】
上記目的を達成するために、本発明のＧＵＩ用部品生成装置は、画像を配置した仮想的な透明シートであるレイヤを階層状に重ね合わせてなる構造を有する１又は２以上のグラフィックデータを入力する手段と、前記グラフィックデータの前記各レイヤに配置された画像に含まれる部品画像を抽出する手段と、所定関係にある部品画像同士を互いに切替表示可能なものとして関係付けたグラフィカルユーザインターフェース用部品を生成する手段とを備えている。
【０００９】
また、本発明のＧＵＩ用部品生成方法は、画像を配置した仮想的な透明シートであるレイヤを階層状に重ね合わせてなる構造を有する１又は２以上のグラフィックデータを入力する段階と、前記グラフィックデータの前記各レイヤに配置された画像に含まれる部品画像を抽出する段階と、所定関係にある部品画像同士を互いに切替表示可能なものとして関係付けたグラフィカルユーザインターフェース用部品を生成する段階とを含んでいる。
【００１０】
また、本発明のＧＵＩ用部品生成プログラムは、画像を配置した仮想的な透明シートであるレイヤを階層状に重ね合わせてなる構造を有する１又は２以上のグラフィックデータを入力するステップと、前記グラフィックデータの前記各レイヤに配置された画像に含まれる部品画像を抽出するステップと、所定関係にある部品画像同士を互いに切替表示可能なものとして関係付けたグラフィカルユーザインターフェース用部品を生成するステップとを含んでいる。
【００１１】
また、本発明のコンピュータ読み取り可能な記録媒体は、前記ＧＵＩ用部品生成プログラムを記録している。
【００１２】
前記グラフィックデータとしては、特に限定されないが、画像を点の集まりとして記録する「ビットマップグラフィックス」や、画像を線や面などの図形の集まりとして記録する「ベクターグラフィックス」等の形式で記録されたものを例示する。
【００１３】
前記所定関係とは、特に限定されないが、次の関係を例示する。
（１）互いに異なるグラフィックデータに含まれる部品画像同士の関係であって、その部品画像が配置されていたレイヤを識別する識別情報（レイヤ名やレイヤ番号等）が同じである関係。
（２）互いに異なるグラフィックデータに含まれる部品画像同士の関係であって、その部品画像が配置されていたレイヤの所定の基準階層（例えばレイヤの最下位層や最上位層）からの相対階層順位が同じである関係（例えば、最下位層から３階層上のレイヤ同士、最上位層から２階層下のレイヤ同士等）。
（３）互いに異なるレイヤに配置された部品画像同士の関係（レイヤ同士は、互いに同じグラフィックデータに含まれている場合や、互いに異なるグラフィックデータに含まれている場合のいずれでもよい。）であって、部品画像の領域同士が互いに重複している関係。
（４）互いに異なるレイヤに配置された部品画像同士の関係（レイヤ同士は、互いに同じグラフィックデータに含まれている場合や、互いに異なるグラフィックデータに含まれている場合のいずれでもよい。）であって、部品画像の中心位置同士が互いに一定距離以内にある関係等を例示する。
（５）前記（１）と、レイヤ同士が互いに異なるグラフィックデータに含まれている場合における前記（３）又は前記（４）とを組み合わせた関係。
（６）前記（２）と、レイヤ同士が互いに異なるグラフィックデータに含まれている場合における前記（３）又は前記（４）とを組み合わせた関係。
【００１４】
また、前記部品画像を抽出する方法としては、特に限定されないが、次のものを例示する。
（ａ）背景とは異なる色で表現された領域を部品画像として抽出する方法。
（ｂ）同一又は類似色の線で囲まれた領域や同じ色で塗りつぶされた領域を部品画像として抽出する方法。
【００１５】
ここで、「類似色」とは、例えば、カラー表現形式における各カラー構成要素が所定の許容範囲内にある場合を例示する。カラー表現形式としては、特に限定されないが、ＲＧＢ形式、ＣＭＹＫ形式、ＨＳＢ形式等を例示する。カラー構成要素としては、特に限定されないが、ＲＧＢ形式におけるＲ（赤）・Ｇ（緑）・Ｂ（青）や、ＣＭＹＫ形式におけるＣ（シアン）・Ｍ（マゼンタ）・Ｙ（黄）・Ｋ（黒）や、ＨＳＢ形式におけるＨ（色相）・Ｓ（彩度）・Ｂ（明度）等を例示する。
【００１６】
また、前記ＧＵＩ用部品としては、特に限定されないが、次の態様を例示する。
（ア）前記ＧＵＩ用部品の属性や状態を含むデータとして構成された態様。
（イ）前記（ア）とともに、前記ＧＵＩ用部品の動作を記述したプログラムを含むオブジェクトとして構成された態様。
【００１７】
また、生成した前記ＧＵＩ用部品の出力方法としては、特に限定されないが、前記ＧＵＩ用部品のデータ内容をファイルに出力したり、ＧＵＩ用部品の内容を表現するプログラミング言語のソースコードを出力したりすることを例示する。
【００１８】
【発明の実施の形態】
図１〜図７は本発明を具体化した一実施形態のＧＵＩ用部品生成装置１を示している。以下、本発明をこの装置に具体化した実施形態について、同装置を使用して実施する生成方法、生成プログラム、及び該プログラムを記録したコンピュータ読み取り可能な記録媒体とともに、図面を参照して説明する。
【００１９】
図１に示すようにＧＵＩ用部品生成装置１は、公知のコンピュータを使用して構成されており、その全体の動作を制御する制御部２と、処理状態、処理経過、利用者へのメッセージ等を表示する表示部３と、制御部２に対する操作・指示やデータを入力するためのキーボード、マウス等の入力部４と、インターネット等の通信ネットワークＮに接続しデータを送受信するための通信インターフェース部５と、光磁気ディスク、コンパクトディスク、フレキシブルディスク、ＩＣメモリカード等のコンピュータ読取可能な記録媒体Ｍ（コンピュータ読取のみ可能な記録媒体やコンピュータ読み書き可能な記録媒体を含む。）にデータを読み書きするメディアインターフェース部６とを備えている。
【００２０】
制御部２は、記憶手段８として、複数のグラフィックデータＧを記憶するグラフィックデータ記憶手段１０と、複数の部品データＰを記憶する部品データ記憶手段１１等を備えている。
【００２１】
また、制御部２は、制御手段９として、複数のグラフィックデータＧを入力して１又は２以上の部品データＰを生成する部品データ生成手段１５と、該部品データ生成手段１５から呼び出されて実行される部品画像抽出・登録手段１６等を備えている。
【００２２】
制御部２の各記憶手段１０，１１、及び各制御手段１５，１６を実現するプログラムは、制御部２が内蔵する記憶装置（図示略）に記憶されている。この記憶装置の記憶内容は、前記コンピュータ読取可能な記録媒体に記録することができる。そして、これらのプログラムが「ＧＵＩ用部品生成プログラム」であり、これらのプログラムを記録したコンピュータ読取可能な記録媒体が「ＧＵＩ用部品生成プログラムを記録したコンピュータ読取可能な記録媒体」である。
【００２３】
次に、各記憶手段を具体的に説明する。まず、グラフィックデータ記憶手段１０は、複数のグラフィックデータＧを記憶可能に構成されている。このグラフィックデータ記憶手段１０に記憶されるグラフィックデータＧは、例えば、入力部４からの操作・指示により作成されたり、例えばメディアインターフェース部６を介して前記記録媒体から読み込んだり、通信インターフェース部５を介して接続された端末装置やサーバー装置から受信したりすることにより得られる。各グラフィックデータＧは、図２に示すように、画像を配置した仮想的な透明シートであるレイヤＬを階層状に重ね合わせてなる構造を有している。各レイヤＬ上の塗りつぶされていない部分は、その下のレイヤＬが透けて見えるようになっている。本例では、番号の小さいレイヤＬほど下側に配置されるようになっており、同図（ａ）に示すグラフィックデータＧのようにレイヤＬ１の上にレイヤＬ２が重ねられ、その上にレイヤＬ３が重ねられている。なお、同図（ｂ）に示すグラフィックデータＧは、単一のレイヤＬ（レイヤＬ２）からなっている。
【００２４】
部品データ記憶手段１１は、複数の部品データＰを記憶可能に構成されており、各部品データＰは、図３に示すように、それを識別するための部品ＩＤ２１と、部品属性２２（例えば、画像、ユーザが選択した操作や指示等を実行するためのボタン、枠を表示するフレーム等）と、部品画像Ｅの表示を切り替えるための切替条件２３（例えば、値を切替条件として使用する変数名、判定結果を切替条件として使用する条件式等）と、切替条件の状態（例えば、値や、判定結果等）ごとに表示する部品画像Ｅに関する１又は２以上の部品画像情報２４とを含んでいる。部品画像情報２４は、部品画像Ｅを表示するレイヤ番号２５と、該部品画像Ｅを表示する座標位置２６（本例では矩形領域の左上の座標）と、該部品画像Ｅの領域（本例では部品画像Ｅを囲む最小矩形領域）のサイズ２７と、該部品画像Ｅの表示内容２８等を含んでいる。
【００２５】
次に、各制御手段を具体的に説明すると、まず、部品データ生成手段１５は、グラフィックデータ記憶手段１０に記憶された２以上のグラフィックデータＧの指定（処理対象の指定）を例えば入力部４や通信インターフェース部５を介して接続された端末装置等から入力し（１又は２以上のグラフィックデータを入力する手段）、各グラフィックデータＧの各レイヤＬについて、部品画像抽出・登録手段１６を実行するようになっている。なお、前記「１又は２以上のグラフィックデータを入力する手段」としては、例えば処理対象のグラフィックデータＧ自体を例えば入力部４や通信インターフェース部５を介して接続された端末装置等から入力するように構成することもできる。この場合、入力されたグラフィックデータＧはグラフィックデータ記憶手段１０に記憶される。
【００２６】
部品画像抽出・登録手段１６は、指定されたグラフィックデータＧの指定されたレイヤＬについて処理を行うようになっており、図４のフローチャートに示すように、まず、指定されたレイヤＬに配置された画像に含まれる部品画像Ｅを抽出する（ステップＳ５１）。この抽出の結果、部品画像Ｅの領域の座標位置と、該領域のサイズとが特定される。次いで、抽出された部品画像Ｅと「所定関係」にある部品画像Ｅが登録されている部品データＰを部品データ記憶手段１１の中から検索する（ステップＳ５２）。本例では、この「所定関係」として、互いに異なるグラフィックデータＧに含まれる部品画像Ｅ同士の関係であって、その部品画像Ｅが配置されていたレイヤ番号が同じである関係であり、しかも、部品画像Ｅの領域同士が互いに重複している関係を採用しているものとする。次いで、前記検索の結果（該当する部品データＰがあったかどうか）を判定し（ステップＳ５３）、該当する部品データＰが見つかれば、その部品データＰに抽出された部品画像Ｅを追加登録し（ステップＳ５４）、見つからなければ、新規部品データＰを生成して部品データ記憶手段１１に記憶するとともに、その部品データＰに抽出された部品画像Ｅを登録する（ステップＳ５４）。そして、本手段の処理を終了するようになっている。なお、以上において、ステップＳ５１が、「グラフィックデータＧの各レイヤＬに配置された画像に含まれる部品画像Ｅを抽出する手段」の構成要素であり、ステップＳ５２〜Ｓ５５が「所定関係にある部品画像Ｅ同士を互いに切替表示可能なものとして関係付けたＧＵＩ用部品データＰを生成する手段」の構成要素である。
【００２７】
次に、本ＧＵＩ用部品生成装置１の一連の動作例について説明する。本例では、図２（ａ）、（ｂ）にそれぞれ示すグラフィックデータＧ１，Ｇ２が入力データとして指定されたものとする。なお、グラフィックデータＧ１のレイヤＬ２から抽出される部品画像Ｅ２と、グラフィックデータＧ２のレイヤＬ２から抽出される部品画像Ｅ４とは前記「所定関係」にあるものとする。まず、部品データ生成手段１５は、グラフィックデータＧ１の各レイヤＬについて、部品画像抽出・登録手段１６を実行し、図５に示すように、レイヤＬ１〜３についてそれぞれ部品データＰ１〜３を生成する。部品データＰ１〜Ｐ３には、それぞれ部品画像Ｅ１〜Ｅ３が登録されている。次に、部品データ生成手段１５は、グラフィックデータＧ２の各レイヤＬ（本例ではレイヤＬ２のみ）について、部品画像抽出・登録手段１６を実行する。ここで、グラフィックデータＧ２のレイヤＬ２に含まれる部品画像Ｅ４は、部品データＰ２に登録された部品画像Ｅ２と「所定関係」にあるので、図６に示すように、部品データＰ２に部品画像Ｅ４を追加登録する。その後、入力部４や通信インターフェース部５を介して接続された端末装置等からの操作・指示により、各部品データＰの内容（例えば、部品属性２２や切替条件２３等）を適宜設定・編集すると、部品データＰが完成する。そして、本例では、ＧＵＩ用部品生成装置１は、生成した部品データＰについて、該部品データＰを表現するプログラミング言語のソースコードを出力するようになっている。
【００２８】
このように生成された部品データＰについては、アプリケーションプログラムに組み込むことにより例えば次のように利用する。なお、本例では、図６のデータを利用する場合について説明するものとする。また、同図の部品データＰ２の切替条件には、例えば変数Ａの値が０のときは部品画像Ｅ２を表示し、同値が１のときは部品画像Ｅ４を表示するように設定されているものとし、初期状態では、変数Ａの値は０であるものとする。また、切替条件や部品データＰの内容が変更されると、自動的に各部品データＰに基づいて表示が更新されるように構成されているものとする。各部品データＰにそれぞれ登録された部品画像Ｅは、レイヤ番号の小さいものほど下側に配置されるようになっている。さて、図７（ａ）は、部品データＰ１〜３にそれぞれ登録された部品画像Ｅ１〜Ｅ３をそれぞれ表示させた状態を示している。例えば、変数Ａの値を１に変化させると、図７（ｂ）に示すように部品データＰ２の表示が部品画像Ｅ４に切り替えられる。また、部品データＰ２の部品画像Ｅ４における座標位置２６を変更すると、図７（ｃ）に示すように、該部品画像Ｅ４の表示位置が変更される。
【００２９】
以上のように構成された本発明によれば、画像を配置した仮想的な透明シートであるレイヤＬを階層状に重ね合わせてなる構造を有する１又は２以上のグラフィックデータＧを入力する手段、段階、又はステップを備えているので、別々のグラフィックデータＧや別々のレイヤＬを利用することにより、互いに重なり合う位置に独立した部品画像Ｅを配置することができ、入力データのデザイン的な自由度を向上することができる。
【００３０】
また、グラフィックデータＧの前記各レイヤＬに配置された画像に含まれる部品画像Ｅを抽出する手段、段階、又はステップを備えており、抽出した部品画像Ｅのレイヤ識別情報（本例ではレイヤ番号）、部品画像Ｅの領域の座標位置、該領域のサイズ等を自動的に部品データＰに登録するようになっているので、正確に登録することができ、手作業に比べ、部品データＰ作成の作業工数を大幅に低減することができる。
【００３１】
また、所定関係にある部品画像Ｅ同士を互いに切替表示可能なものとして関係付けたＧＵＩ用部品データＰを生成する手段、段階、又はステップを備えているので、複数の部品画像Ｅを切り替え表示する部品データＰを自動的に生成することができる。
【００３２】
また、このように生成された部品データＰは、元のグラフィックデータＧのレイヤ識別情報（本例ではレイヤ番号）を含んでいるので、重なり合わせの状態を元のグラフィックデータＧの通りに再現することができる。
【００３３】
そして、以上のように、従来は手作業で開発する必要があった部品データＰ（例えば、部品画像Ｅが互いに重なり合うように配置されるものや、複数の部品画像Ｅを切り替えて表示するもの等）を自動的に生成することができるので、ＧＵＩ開発工数を短縮できる。
【００３４】
なお、本発明は前記実施形態に限定されるものではなく、例えば以下のように、発明の趣旨から逸脱しない範囲で適宜変更して具体化することもできる。
（１）前記所定関係として、［課題を解決するための手段］に例示した別の関係を適宜採用すること。例えば、１つのグラフィックデータＧを入力し、該グラフィックデータＧの各レイヤに含まれる部品画像Ｅ同士を互いに切替表示可能なものとして関係付けた部品データＰを生成するように構成することが挙げられる。
（２）ＧＵＩ用部品として、部品の属性や状態を含むとともに、部品の動作を記述したプログラムを含むオブジェクトを生成するように構成すること。
（３）生成した部品データについて、前記ソースコードを出力することに代えて（又はそれとともに）、そのデータ内容をファイルに出力するように構成すること。
【００３５】
【発明の効果】
本発明に係るＧＵＩ用部品生成装置、生成方法、生成プログラム、及び該プログラムを記録したコンピュータ読み取り可能な記録媒体によれば、入力されるグラフィックデータのデザイン的な自由度を向上するとともに、ＧＵＩ開発工数を短縮することができるという優れた効果を奏する。
【図面の簡単な説明】
【図１】本発明の一実施形態に係るＧＵＩ用部品生成装置の構成を示すブロック図である。
【図２】同ＧＵＩ用部品生成装置に入力されるグラフィックデータの構成を示すブロック図である。
【図３】同ＧＵＩ用部品生成装置が生成するＧＵＩ用部品データの構成を示す図である。
【図４】同ＧＵＩ用部品生成装置における部品画像抽出・登録手段の処理の流れを示すフローチャートである。
【図５】同ＧＵＩ用部品生成装置により生成されたＧＵＩ用部品データの一状態を示す図である。
【図６】同ＧＵＩ用部品生成装置により生成されたＧＵＩ用部品データの別の一状態を示す図である。
【図７】同ＧＵＩ部品データを利用した画面表示例を示す図である。
【符号の説明】
１　ＧＵＩ用部品生成装置
２　制御部
３　表示部
４　入力部
５　通信インターフェース部
６　メディアインターフェース部
１０　グラフィックデータ記憶手段
１１　部品データ記憶手段
１５　部品データ生成手段
１６　部品画像抽出・登録手段
Ｅ　部品画像
Ｇ　グラフィックデータ
Ｌ　レイヤ
Ｐ　部品データ

Claims

画像を配置した仮想的な透明シートであるレイヤを階層状に重ね合わせてなる構造を有する１又は２以上のグラフィックデータを入力する手段と、
前記グラフィックデータの前記各レイヤに配置された画像に含まれる部品画像を抽出する手段と、
所定関係にある部品画像同士を互いに切替表示可能なものとして関係付けたグラフィカルユーザインターフェース用部品を生成する手段と
を備えたグラフィカルユーザインターフェース用部品生成装置。
画像を配置した仮想的な透明シートであるレイヤを階層状に重ね合わせてなる構造を有する１又は２以上のグラフィックデータを入力する段階と、
前記グラフィックデータの前記各レイヤに配置された画像に含まれる部品画像を抽出する段階と、
所定関係にある部品画像同士を互いに切替表示可能なものとして関係付けたグラフィカルユーザインターフェース用部品を生成する段階と
を含むグラフィカルユーザインターフェース用部品生成方法。
画像を配置した仮想的な透明シートであるレイヤを階層状に重ね合わせてなる構造を有する１又は２以上のグラフィックデータを入力するステップと、
前記グラフィックデータの前記各レイヤに配置された画像に含まれる部品画像を抽出するステップと、
所定関係にある部品画像同士を互いに切替表示可能なものとして関係付けたグラフィカルユーザインターフェース用部品を生成するステップと
を含むグラフィカルユーザインターフェース用部品生成プログラム。
請求項３記載のグラフィカルユーザインターフェース用部品生成プログラムを記録したコンピュータ読み取り可能な記録媒体。