(57)【要約】【課題】グラフィックデザイナーのデザインどおりの外観を持ち、その外観が機能に応じてダイナミックに変化するグラフィカルユーザインターフェースを容易に生成すること。【解決手段】グラフィカルユーザインターフェース生成装置であって、デザイン画像の中から指定された領域の画像をコピーする画像処理部と、画像処理部がコピーした画像を、グラフィカルユーザインターフェースの外観を構成する部品画像として格納する部品画像格納部と、部品画像格納部に記憶されている部品画像と、当該部品画像を用いて生成されるグラフィカルユーザインターフェースの機能を定義する情報とに基づいて、グラフィカルユーザインターフェースのコードを生成する主制御部とを備える。【選択図】図１
2013152603.tif 000002
【特許請求の範囲】
【請求項１】
デザイン画像の中から指定された領域の画像をコピーする画像処理部と、
前記画像処理部がコピーした画像を、グラフィカルユーザインターフェースの外観を構成する部品画像として格納する部品画像格納部と、
前記部品画像格納部に記憶されている部品画像と、当該部品画像を用いて生成される前記グラフィカルユーザインターフェースの機能を定義する情報とに基づいて、前記グラフィカルユーザインターフェースのコードを生成する主制御部と
を備えるグラフィカルユーザインターフェース生成装置。
【請求項２】
前記画像処理部は、コピーした画像から、指定された領域に定義された機能に伴って表示状態が変化した際の画像を生成し、
前記主制御部は、機能に伴って表示状態を変化させる制御するコードを組で生成する
請求項１に記載のグラフィカルユーザインターフェース生成装置。
【請求項３】
前記主制御部は、前記指定された領域に対し指定された機能の種類によって画像の生成枚数、生成方法、及び表示状態を制御するコードを変化させる
請求項２に記載のグラフィカルユーザインターフェース生成装置。
【請求項４】
前記画像処理部は、前記コピーした画像に共通部品として不適切な領域が含まれていた場合は、その領域を適切な画像に変更する
請求項２又は３に記載のグラフィカルユーザインターフェース生成装置。
【請求項５】
前記画像処理部は、不適切な領域の周辺の画像を参照して不適切な領域を補完する
請求項４に記載のグラフィカルユーザインターフェース生成装置。
【発明の詳細な説明】
【技術分野】
【０００１】
本発明は、グラフィカルユーザインターフェース生成装置に関する。特に本発明は、グラフィカルユーザインターフェースを生成するグラフィカルユーザインターフェース生成装置に関する。
【背景技術】
【０００２】
グラフィカルユーザインターフェースを生成する技術は、様々なものが知られている（例えば、特許文献１〜６参照。）。ここで、グラフィカルユーザインターフェースとは、ユーザに対する情報の表示にグラフィックを多用し、大半の基礎的な操作をマウス等のポインティングデバイスによって行うことができるユーザインターフェースのことである。
【０００３】
例えば、特許文献１には、仮想的な計器図をフェースプレートウィンドウに表示する、プロセス制御用の操作監視用表示装置が記載されている。より具体的に説明すると、特許文献１に記載の操作監視用表示装置は、ユーザにより定義される表示デザイン、操作デザイン、汎用名定義の少なくとも１つより成るフェースプレートデザイン情報に基づきデザインであるリンクパーツを作成する。そして、操作監視用表示装置は、リンクパーツに対して、ユーザにより定義され汎用名と実際のタグ名／アイテム名のプロセス等との割り当て表である汎用名セットの選択的な割付を実行して仮想的な計器図を表示するためのグラフィックオブジェクトを作成する。そして、操作監視用表示装置は、グラフィックオブジェクトを読み込んでフェースプレートウィンドウに仮想的な計器図を表示させる。このような構成の操作監視用表示装置によっては、フェースプレートウィンドウを、ユーザ仕様でグラフィカルに表示することができるので、ジョブ毎に自由なフェースプレートウィンドウを作成し、ジョブの特色を出すことができる。
【０００４】
また、特許文献２には、比較的定型性の高いコンテンツを対象とし、その定型性をテンプレートとして登録しておくことによって効率よくコンテンツを作成するマルチメディア編集装置が記載されている。より具体的に説明すると、特許文献２に記載のマルチメディア編集装置は、複数のマルチメディアコンテンツに共通の論理構造、レイアウト構造、物理動作を記述したテンプレートを管理する。また、マルチメディア編集装置は、テキスト、写真、動画等の素材情報を管理する。そして、マルチメディア編集装置は、テンプレートに素材情報を組み合わせる。そして、マルチメディア編集装置は、テンプレート中の論理構造と素材情報との合成を行う。そして、マルチメディア編集装置は、テンプレート中のレイアウト構造と素材情報との合成を行う。そして、マルチメディア編集装置は、合成された論理構造に基づき、テンプレート中の物理動作が素材情報のどの情報を用いるかを決定する。そして、マルチメディア編集装置は、素材情報が、テンプレート中に記述されている制約条件を満足しているかどうかを調べ、満足していない場合には素材情報の組み合わせを抑制する。このような構成のマルチメディア編集装置によっては、定型性のあるマルチメディアコンテンツを制作する場合に、写真等の素材情報を、視覚的、又は論理的に組み合わせるだけで、定型性と多様性の両方を満足し、効率よく最終コンテンツを制作することができる。
【０００５】
また、特許文献３には、画面を介して入力された操作指示に基づいて、操作指示による実行要求に係る処理、又は表示される画面を変更するための画面遷移を実行する、グラフィカルユーザインターフェースによるアプリケーションを構築する方法が記載されている。
【０００６】
しかしながら、特許文献１〜３に記載の技術は、予め用意されたユーザインターフェース部品を使用しているので、ターゲットとするユーザ層や、ソフトウェアが動作するハードウェアの能力に合わない見かけユーザことになる不都合が生じていた。ここで、ソフトウェアとは、狭義にはコンピュータプログラムとほぼ同じ意味である。
【０００７】
それに対処するため、例えば特許文献４や特許文献５においては、ユーザインターフェース部品を構造化した設計としている。そして、その外観を決めるグラフィックパターンと、それを使用するロジックを独立して持ち、共通したロジックで参照グラフィックパターンを差し替えることでユーザ層やハードウェアの能力に合ったユーザインターフェース部品として動作できるようにしている。
【０００８】
しかし、これらは全て予め決められたユーザインターフェース部品として保持している部品を使用しており、インタフェースの画面デザインをする際は、それらの部品を並べることで構成していくことについては変わりがなかった。
【０００９】
これをユーザの手元でのカスタマイズまでも可能にする方法として特許文献６が提案された。  
【先行技術文献】
【特許文献】
【００１０】
【特許文献１】特許第４６２６７８５号公報
【特許文献２】特許第２９９４９９６号公報
【特許文献３】特許第４３５８４１４号公報
【特許文献４】特許第３７５５５００号公報
【特許文献５】特許第３７６０９０４号公報
【特許文献６】特開２０００−２７６３３９号公報
【発明の概要】
【発明が解決しようとする課題】
【００１１】
特許文献６に記載の画面データの処理システムは、画面データをプログラムコードに変換してカスタマイズを行う技術である。そのため、特許文献６に記載の画面データの処理システムによっては、カスタマイズの内容をコードによって表現できないこともあるため、画面デザインに限界がある。
【００１２】
一方、実際のアプリケーションにおいてはグラフィックデザイナーが画面の構想を練って１枚の画像にまとめあげる。そして、それをプログラムの実装作業を行う作業者に渡して、実装作業者は画像から画面部品をコピーしてロジックと組み合わせてアプリケーションに搭載することでユーザインターフェース部品を作り出すという手順を踏んでいた。ここで、グラフィックデザイナーとは、グラフィックデザインやグラフィックアートの領域にあって、画像、タイポグラフィ、モーショングラフィックス等を組み合わせてデザイン作品を制作するデザイナーである。また、コピーとは、画面上に表示されている画像の一部を指定して、その部分を複写する操作である。
【００１３】
この際、部品によってはその部品が動作した際に外観を変える画像が必要となる。例えばボタンであれば、通常の画像のほかに押下状態の画像が必要となる。また、チェックボックスではチェックされた状態とチェックされていない状態、それぞれの通常状態と押下状態等が必要となる。実装作業者はグラフィックデザイナーに対して追加の発注を行うか、コピーした画面部品の画像を加工して必要とする画像を得て、ロジックと組み合わせてユーザインターフェース部品を作成していた。
【００１４】
これら一連の作業が必要となるため、アプリケーションの外観をグラフィックデザイナーが描いた画像に合わせこむには、多大な作業時間を要していた。
【００１５】
本発明の目的は、上述した課題を解決するグラフィカルユーザインターフェース生成装置を提供することにある。
【課題を解決するための手段】
【００１６】
上記課題を解決するために、本発明の第１の形態によると、グラフィカルユーザインターフェース生成装置であって、デザイン画像の中から指定された領域の画像をコピーする画像処理部と、画像処理部がコピーした画像を、グラフィカルユーザインターフェースの外観を構成する部品画像として格納する部品画像格納部と、部品画像格納部に記憶されている部品画像と、当該部品画像を用いて生成されるグラフィカルユーザインターフェースの機能を定義する情報とに基づいて、グラフィカルユーザインターフェースのコードを生成する主制御部とを備える。
【００１７】
なおまた、上記の発明の概要は、本発明の必要な特徴の全てを列挙したものではない。また、これらの特徴群のサブコンビネーションもまた、発明となり得る。
【発明の効果】
【００１８】
以上の説明から明らかなように、この発明によっては、グラフィックデザイナーのデザインどおりの外観を持ち、その外観が機能に応じてダイナミックに変化するグラフィカルユーザインターフェースを容易に生成することができる。
【図面の簡単な説明】
【００１９】
【図１】一実施形態に係るグラフィカルユーザインターフェース生成装置１００のブロック構成の一例を示す図である。
【図２】ボタン部分を領域指定した例を示す図である。
【図３】枠データの指定例を示す図である。
【図４】画像を枠でコピーしたところを示す図である。
【図５】不適切な両機の指定と適切な画像の補完の例を示す図である。
【図６】補完の完了したコピー画像の例を示す図である。
【図７】押下状態として使用する反転画像を示す図である。
【図８】重ね合わせるアイコン画像の処理例を示す図である。
【図９】チェックボックスとして指定した際の画像例を示す図である。
【図１０】領域定義主処理を示す図である。
【図１１】コピー画像処理の例を示す図である。
【図１２】コード生成処理の例を示す図である。
【発明を実施するための形態】
【００２０】
以下、発明の実施の形態を通じて本発明を説明するが、以下の実施形態は特許請求の範囲にかかる発明を限定するものではなく、また、実施形態の中で説明されている特徴の組み合わせの全てが発明の解決手段に必須であるとは限らない。
【００２１】
図１は、一実施形態に係るグラフィカルユーザインターフェース生成装置１００のブロック構成の一例を示す。グラフィカルユーザインターフェース生成装置１００は、グラフィカルユーザインターフェースを生成する装置である。
【００２２】
グラフィカルユーザインターフェース生成装置１００は、デザイン画像格納部１１０、表示部１２０、操作部１３０、画像処理部１４０、部品画像格納部１５０、部品定義格納部１６０、及び主制御部１７０を備える。
【００２３】
デザイン画像格納部１１０には、デザイン画像が格納される。ここで、デザイン画像とは、ソフトウェアの画面を構成する画像であり、例えば、グラフィックデザイナーがデザインした画像である。
【００２４】
表示部１２０は、文字や図形を表示する装置である。
【００２５】
入力部１３０は、グラフィカルユーザインターフェース生成装置１００に、データや情報、指示等を与えるためのものである。
【００２６】
画像処理部１４０は、デザイン画像格納部１１０の中の特定の領域の画像をコピーし、それを加工することができる。
【００２７】
部品画像格納部１５０は、コピーした、あるいは加工した画像を格納しておくことができ、コード生成時には、そのコードから参照できる画像としてシステムに提供できる。
【００２８】
部品定義格納部１６０は操作者による定義を記憶することができ、アプリケーション画面を構成する複数の領域のデータを保持できる。その内部は、座標、枠のタイプ、枠に書き入れる文字、イメージ画像の指定ができるようにメモリが確保されている。
【００２９】
主制御部１７０には、グラフィカルユーザインターフェース生成制御データＤ１０が保持されており、部品のタイプごとに画像処理を行う際の手順Ｄ１１と部品をアプリケーションの一部として動作させるときの雛形コードＤ１２が格納されている。
【００３０】
図２以降、図９までは実際の動作の具体的な例を表示している。これらを参照しながら図１０以降を用いて動作の説明を行う。
【００３１】
図１０は、主制御部１７０による主制御のフローチャートである。操作部１３０を介してデザイン画像Ｉが指定されると（Ｓ１０１）、主制御部１７０は、デザイン画像Ｉのファイルを、デザイン画像格納部１１０に格納する（Ｓ１０２）。そして、グラフィカルユーザインターフェース生成装置１００はデザイン画像を表示して編集待ちに入る（Ｓ１０３）。編集処理として領域指定が指定されたら（Ｓ１０４：Ｙｅｓ）、図２に示すようにデザイン画像Ｉ上に選択枠Ｓ１０を表示し、これを変形（拡大縮小移動）させて領域を指定させる。位置が決定したら、枠データのｓｘ、ｓｙ、ｅｘ、ｅｙに値を格納する（Ｓ１０５）。属性指定の場合は（Ｓ１０６：Ｙｅｓ）、図３で示すような入力欄Ｅ１０を用いて操作者に指定させる。表示文字列の入力欄Ｂ１１は、例えばボタンの場合、ボタン上に表示する文字列を指定できる。この文字列は動作コードに組み込まれることになる。画像仮パス名の入力欄Ｂ１２は、ボタンの背景画像や、アイコン画像を指定するものとして使用される。種別の入力欄Ｂ１３は部品のタイプを表すもので、それぞれ枠データに格納される（Ｓ１０７）。画像処理の場合には（Ｓ１０８：Ｙｅｓ）、画像処理部１４０により、格納されている枠データを用いてデザイン画像格納部１１０の画像をコピーして加工処理がなされる（Ｓ２００）。コード生成処理が指定されると（Ｓ１０９：Ｙｅｓ）、枠データに格納されたデータを用いて、実際にアプリケーションに組み込まれる具体的な値を用いたコードが生成され（Ｓ３００）、本装置から出力されて処理を終了する。
【００３２】
図１１は、画像処理部１４０による画像処理をフローチャートで表したものである。画像処理の大元はデザイン画像格納部１１０の画像データである。この画像から、枠データに記録された座標部分の画像がコピーされる（Ｓ２０１）。図４は、ボタン部分の画像Ｉ１０がコピーされた様子を表している。次に、イメージデータとして不適切な領域の補完が行われる（Ｓ２０２：Ｙｅｓ→Ｓ２０３）。例えばボタンの場合には、ボタン上にアイコンや文字列を表示できるので、イメージ上のそれらの要素は不要な模様である。図５は、それらを選択枠Ｓ１１、１２で範囲指定して消去する補完過程を示したものである。この処理は、人間が目視で範囲を指定してもよいし、部品の種類と周囲の色の連続性から自動的に判別するようにしてもよい。補完は、例えばＹ方向に同じ高さの画素を左右から取り出して、適当に誤差拡散させながら並べるようにすればよい。図５の例では上下方向に淡いグラデーションがかかっているのでこの方法で適切に処理できる。もし、グラデーションがなければ一定値を書き込むだけでもよい。補完の完了した部品画像Ｉ１１が図６に示されている。また、この部品画像Ｉ１１はボタンなので（Ｓ２０５：Ｙｅｓ）、図７に示すような押下状態を表す反転された部品画像Ｉ１２が生成されて保存される（Ｓ２０６）。ボタンの中で不適切領域とされたアイコン部分は、図８に示すように、選択枠Ｓ２０にて領域を指定して、改めて画像Ｉ２０がコピーされ、周囲と内部を透明色で置換されて、部品画像Ｉ２１として保存される（Ｓ２０４）。この判断も人間が行っても、自動で行うことも可能である。図１１の種類の判別がチェックボックスだった場合は（Ｓ２０７：Ｙｅｓ）、図９に示すように、選択枠Ｓ３０にて選択されてコピーした画像から、単純な反転ではない部品画像Ｉ３１〜３６を生成する（Ｓ２０８）。この場合は種類としてチェックボックスが指定されているため、不適切領域はなく、内部にチェックマーク部分を含むことが暗黙的に約束されており、それに従って内部の塗り分けを行っている。部品画像Ｉ３１は、単純なコピー（周囲は透明色化）の画像である。部品画像Ｉ３２は、その反転の画像である。部品画像Ｉ３３は、コピー画像の内部のチェック部分を他の色に置換した画像である。部品画像Ｉ３４は、周囲を他の色にした画像である。部品画像Ｉ３５は、両方を他の色にした画像である。部品画像Ｉ３６は、反転した上で他の色にした画像である。
【００３３】
図１２は、主制御部１７０による最終的なコード生成の動作を表したものである。生成は枠データごとに行われ、枠データが存在している場合（Ｓ３０１：Ｙｅｓ）、その枠の部品タイプに従って（Ｓ３０２）、雛形コードが選択され（Ｓ３０３）、座標データや各種の属性が組み込まれる（Ｓ３０４）。画像がある部品の場合は（Ｓ３０５）、生成された各状態の画像の参照指定が雛形コードに組み込まれる（Ｓ３０６）。
【００３４】
これにより、デザイン画像上の領域と種別を指定することで、デザイン画像と同じ見かけで動作するグラフィカルユーザインターフェースが生成される。
【００３５】
以上説明したように、グラフィカルユーザインターフェース生成装置１００は、グラフィックデザイナーの描いたデザイン画像をベースとして、指定した領域がどんな種類のユーザインターフェース部品であるかを指定する作業を行うのに利用される。このとき、グラフィカルユーザインターフェース生成装置１００は、その部分の画像をコピーして、指定された機能に応じた加工を自動的に行って複数の画像リソースを発生し、そのリソースを参照する部品コードを自動的に生成する。そのため、グラフィックデザイナーのデザインどおりの外観を持ち、かつ、機能に応じてダイナミックに外観が変化するグラフィカルユーザインターフェースを即座に生成することができるようになる。
【００３６】
以上、本発明を実施の形態を用いて説明したが、本発明の技術的範囲は、上記実施の形態に記載の範囲には限定されない。上記実施の形態に、多様な変更、又は改良を加えることが可能であることが当業者に明らかである。そのような変更、又は改良を加えた形態も本発明の技術的範囲に含まれ得ることが、特許請求の範囲の記載から明らかである。
【００３７】
特許請求の範囲、明細書、及び図面中において示したシステム、方法、装置、プログラム、及び記録媒体における動作、手順、ステップ、及び段階等の各処理の実行順序は、特段「より前に」、「先立って」等と明示していない。また、前の処理の出力を後の処理で用いるのでない限り、任意の順序で実現し得ることに留意すべきである。特許請求の範囲、明細書、及び図面中の動作フローに関して、便宜上「まず、」、「次に、」等を用いて説明したとしても、この順で実施することが必須であることを意味するものではない。
【００３８】
上記の実施形態の一部、又は全部は、以下の付記のようにも記載され得るが、以下には限られない。
【００３９】
（付記１）デザイン画像の中から指定された領域の画像をコピーする画像処理部と、前記画像処理部がコピーした画像を、グラフィカルユーザインターフェースの外観を構成する部品画像として格納する部品画像格納部と、前記部品画像格納部に記憶されている部品画像と、当該部品画像を用いて生成される前記グラフィカルユーザインターフェースの機能を定義する情報とに基づいて、前記グラフィカルユーザインターフェースのコードを生成する主制御部とを備えるグラフィカルユーザインターフェース生成装置。
【００４０】
（付記２）前記画像処理部は、コピーした画像から、指定された領域に定義された機能に伴って表示状態が変化した際の画像を生成し、前記主制御部は、機能に伴って表示状態を変化させる制御するコードを組で生成する付記１に記載のグラフィカルユーザインターフェース生成装置。
【００４１】
（付記３）前記主制御部は、前記指定された領域に対し指定された機能の種類によって画像の生成枚数、生成方法、及び表示状態を制御するコードを変化させる付記２に記載のグラフィカルユーザインターフェース生成装置。
【００４２】
（付記４）前記画像処理部は、前記コピーした画像に共通部品として不適切な領域が含まれていた場合は、その領域を適切な画像に変更する付記２又は３に記載のグラフィカルユーザインターフェース生成装置。
【００４３】
（付記５）前記画像処理部は、不適切な領域の周辺の画像を参照して不適切な領域を補完する付記４に記載のグラフィカルユーザインターフェース生成装置。
【符号の説明】
【００４４】
１００  グラフィカルユーザインターフェース生成装置
１１０  デザイン画像格納部
１２０  表示部
１３０  操作部
１４０  画像処理部
１５０  部品画像格納部
１６０  部品定義格納部
１７０  主制御部
Ｂ１０  入力欄
Ｂ１１  表示文字列の入力欄
Ｂ１２  画像仮パス名の入力欄
Ｂ１３  種別の入力欄
Ｄ１０  グラフィカルユーザインターフェース生成制御データ
Ｄ１１  画像処理手順
Ｄ１２  雛形コード
Ｉ  デザイン画像
Ｉ１０  画像
Ｉ１１  部品画像
Ｉ１２  部品画像
Ｉ２０  画像
Ｉ２１  部品画像
Ｉ３１  部品画像
Ｉ３２  部品画像
Ｉ３３  部品画像
Ｉ３４  部品画像
Ｉ３５  部品画像
Ｉ３６  部品画像
Ｓ１０  選択枠
Ｓ１１  選択枠
Ｓ１２  選択枠
Ｓ２０  選択枠
Ｓ３０  選択枠
【図１】
2013152603.tif 000003
【図３】
2013152603.tif 000004
【図１０】
2013152603.tif 000005
【図１１】
2013152603.tif 000006
【図１２】
2013152603.tif 000007
【図２】
2013152603.tif 000008
【図４】
2013152603.tif 000009
【図５】
2013152603.tif 000010
【図６】
2013152603.tif 000011
【図７】
2013152603.tif 000012
【図８】
2013152603.tif 000013
【図９】
2013152603.tif 000014