JP2007511814A - 素描を通じたユーザーインターフェース記述の自動生成 - Google Patents

Abstract

所望のグラフィックユーザーインターフェース（GUI）が、素描されてからスキャンされてメモリに読み込まれるか、あるいは動きが追跡されてメモリに記録されるスタイラスを使って素描されるかする。素描されたウィンドウ、リスト、ボタン、フレームのようなオブジェクトは自動的に認識され、作成されるべきGUIのために正規化される。オブジェクトどうしの間の包含関係はツリー階層構造に記録される。ツリー階層構造には素描におけるレイアウト情報および注釈からの情報が添加される。ツリー階層構造は次いで目標プラットフォーム上でのGUIの生成のために整形される。

Description

本発明はグラフィックユーザーインターフェース（GUI: graphic user interface）に、特にGUIの記述を生成することに関するものである。

グラフィックユーザーインターフェース（GUI）は典型的には、該GUIを生成する特定のウィンドウシステムに対応したソフトウェアルーチンを書くコンピュータプログラマーによって作成される。GUIとは、画面上に記号を表示するコンピュータプログラムまたは環境で、ユーザーが入力デバイスを通じて記号を選択することによってユーザーコマンドを生成できるようなものである。

ソフトウェアルーチンは、書いたり修正したりすることの困難に加え、通例特定のウィンドウシステム向けに仕立てられていてその限りにおいて移植性を欠いている。

GUI生成にはいくつかのドロー・プログラムが使われる。ドロー・プログラムとは、画像や図形を独立したオブジェクトとして、すなわちビットマップ画像ではなくベクトル画像として作成し、操作するのに使われるアプリケーションである。ビットマップ画像ではなくベクトル画像を使うことで編集が容易になり、記憶が節約される。

Tommへの米国特許第6,246,403号は、その開示全体をここに参照によって組み込むものであるが、標準的なGUI生成の上記の不都合な点を指摘し、さらに既存のドロー・プログラムは非プログラマーにもGUI作成を可能にするものの、通常はGUIの修正はできず、特定のウィンドウシステム向けに仕立てられている点も同様であることを指摘している。

Tommの方法論はテキストエディタを使って「テキストファイル」内にビットマップ画像を生成するというものである。テキストファイルは、コマンドの代わりに、所望のGUIに似た絵柄情報を含む。GUIの要素（ウィンドウ、ボタン、リストなど）を画面上に描くには、ユーザーは画面内を動き回って、そのGUI要素の境界を定めるために繰り返し特定のキャラクタを置く。ユーザーは各要素に対して任意的に、GUIでその要素内に表示される「ここを押す」のような名前と、たとえばその特定の要素がボタンであることを示す「button」のような機能的に記述するデータ型とを用いて注釈を付ける。画面上のどの要素が他のどの要素の内部にあるかを定義するデータツリー構造は、諸要素に付随するデータ型および名前のほかに、諸要素のレイアウトも含む。このフォーマットでは、GUI記述は、そのGUIのための目標プラットフォームに固有のアプリケーションプログラムインターフェース（API: application program interface）に対して容易に伝達できる。

しかし、インターフェースを定義するための境界デリミタを繰り返し入力することはユーザーにとって面倒なことがある。たとえば、Tommはインターフェースをデザインするためにハイフン、プラス記号、縦棒の使用を例示しているが、これはかなりの努力を伴う。また、必要とされるキーボードはいつも便利に利用できるとは限らない。とりわけ携帯用情報端末（PDA: personal digital assistant）、携帯電話および複合型の携帯装置といったモバイル機器についてはそうである。

Tranへの米国特許第6,054,990号は、その開示全体をここに参照によって組み込むものであるが、素描をベクトル化し、一連のベクトルを一つまたは複数の参照オブジェクトと比較して三角形などの最良一致オブジェクトを決定することに関するものである。

プログラミングをしないユーザーにとって簡単かつ便利であり、選択されたプラットフォームに容易に移行できるGUI生成が必要とされている。

本発明は、従来技術における上述した欠点を克服することに向けられたものである。

本発明によれば、ユーザーはペンおよびデジタイザーを使って、あるいは代替的には光学スキャン可能媒体上に、スキャンされるべき所望のGUIを素描しうる。自動的な段階において、ぶれのある直線が認識されてまっすぐにされ、線どうしは適宜平行にされて、あらかじめ保存されている参照オブジェクトと似させられる。自動的に、画面上でどのオブジェクトが他のどのオブジェクトの内部にあるかが決定される。このデータならびにオブジェクトの機能的な記述および作成されるGUI内でのオブジェクトどうしの間の重なり合いの優先度を含むレイアウト情報を反映するユーザーインターフェース記述が生成される。

具体的には、本発明に基づくユーザーインターフェース記述生成方法は、オブジェクトを手で素描して作成すべきGUIを表す素描を作成し、自動的にその後の諸機能を実行してユーザーインターフェース記述を生成するステップを含んでいる。特に、前記素描を調べてオブジェクトの素描バージョンを同定し、その素描バージョンがそれぞれの参照画像に似るよう適合される。この適合バージョンから、該適合バージョンどうしの間での相対的な包含の階層構造が決定される。最後に、その階層構造からGUIを作成するためのユーザーインターフェース記述が生成される。

ここに開示される本発明の詳細は、図面を援用して説明される。同様の特徴はいくつかの図を通じて同一の番号を付けてある。

図１は、限定的でない例として、本発明に基づくユーザーインターフェース記述生成装置１００を示している。装置１００は、Tranへの米国特許第6,054,990号に記載されているように中央処理装置（CPU）１１０、読み出し専用メモリ（ROM）１２０、ランダムアクセスメモリ（RAM）１３０、ペン／デジタイザーユニット１４０および液晶ディスプレイ（LCD）１５０を含む。装置１００にはまた、スキャナ１６０、素描エディタ１７０ならびに上記の構成要素すべてを接続するデータおよび制御バス１８０が盛り込まれている。

図２に例示的に描かれているように、ROM１２０内のコンピュータプログラム２００は素描同定手段２１０、素描正規化手段２２０、階層構造決定手段２３０および記述生成手段２４０を含む。プログラム２００のこれらのモジュールのそれぞれは、適宜互いに通信できるようリンクされており、そのことは図２ではリンク２５０によって概念的に表されている。あるいはまた、これらのモジュールおよびROM１２０はたとえば専用プロセッサのようなハードウェアにおいて実現されてもよい。

図３に示されているように、素描３００は適合されて、電子的記憶媒体、ここではRAM１３０中に正規化された素描３０４が生成される。素描３００はスキャナ１６０を使ったスキャンによりメモリに読み込まれるのでもよいし、あるいは素描する間にペン／デジタイザーユニット１４０によってリアルタイムでメモリに記録されていたのでもよい。

素描３００は４つの素描バージョンのオブジェクト３０８から３２０からなる。前記バージョン３０８〜３０２のおのおのは、輪郭線３２４〜３３６のうちのそれぞれ一つによって境界が定められており、分割線３４０〜３５２のうちのそれぞれ一つの分割線を含んでいる。この例では、前記オブジェクトまたは部品のおのおのは、タブパネルを表している。これは、集積回路（IC）設計者メニューの一区画であって、関係するオプションおよびコントロールのセットを表示するために選択することができる。

素描の適合により、輪郭線３２４〜３３６の各辺はまっすぐにされて、ベクトル画像のような対応する参照オブジェクトに似させられる。関連する参照オブジェクトは、垂直もしくは水平の直線であってもよいし、あるいは参照オブジェクト３５６〜３６８のうちのいずれかのような長方形であってもよい。参照オブジェクト３５６〜３６８はROM１２０またはRAM１３０に保存されており、規格化されたオブジェクトと同一でなく相似（比例的に大きさを変えてある）であってもよい。適合はまた、輪郭線３２４〜３３６の向かい合う辺を平行にする。分割線３４０〜３５２は同様にまっすぐにされ、それぞれの輪郭の辺と平行にされる。ただし、参照ベクトル画像が円の場合のように直線でない、あるいは平行でない線をもつ場合には、適合は素描バージョンを、適宜線をまっすぐにしたり平行にしたりしないようにして参照オブジェクトに似させる。素描と一つまたは複数の参照オブジェクトとの一致を調べる工程はTranに記載されている。

図３がさらに示しているように、正規化された素描を使って、オブジェクト間の包含を定義するツリー階層構造３７２が生成される。素描はもともとはビットマップ画像としてスキャンされるなり記録されるなりしたものである。適合すなわち正規化によって素描は一つまたは複数の参照オブジェクトに適合するよう修正され、参照オブジェクトはベクトル画像であることもあるが、適合された素描は好ましくはビットマップ形式のままである。Tommへの米国特許第6,246,403号はビットマップ画像間の包含のツリー表現を形成しているので、この技法を正規化された素描に適用してもよい。ここでは、ツリー階層構造３７２はXMLのような階層的な、構造化されたマークアップ言語において実装されている。当該GUIの目標プラットフォームのためのアプリケーションプログラムインターフェース（API）は容易にプログラムできる。

図４は、本発明に基づく、素描されたオブジェクトの注釈および素描４００内でのオブジェクトの重なり合いを図示している。素描バージョン４０２は分割線４０４をもち、任意的に「panel」のデータ型４０６をもつ。このデータ型は対応するオブジェクトが図３との関連で議論したようなタブパネルであることを示しうる。再び図４を参照すると、素描バージョン４０８はスタック順すなわち「ｚ順」の印４１０、この例では数字の「１」を用いて注釈が付けられている。したがって、数字の「１」はこの素描バージョンに対応するオブジェクトの、それぞれ優先度の注釈を付けられた他の素描バージョンのオブジェクトに対する優先度を表す。特に、スタック順が２以上のオブジェクトがパネル４０６オブジェクトと交わる場合（素描の際に、あるいは将来のいつか、たとえば作成されるGUI内でウィンドウの移動により）、パネル４０６は優先度が低いほうのウィンドウの上に重なる優先度をもつ。よって優先度が高いほうのパネル４０６は重ねられたウィンドウを、両オブジェクトの重なり合うすなわち交わっている部分にわたって隠す。分割線４０４は素描されたオブジェクト４０２をラベル領域４１２とコンテンツ領域４１４とに分割する。ラベル領域はコンテンツ領域より小さくなっている。「panel」の語は、該「panel」の語がコンテンツ領域４１４ではなくラベル領域４１２内に位置しているおかげでデータ型として認識される。同じことは、優先度の印にも当てはまり、これもラベル領域内に位置している場合に優先度の印として認識される。これと対照的に、Tommの記載する注釈付けプロセスは、箱形の境界上に注釈を導入するために箱形の境界を定めるための反復キャラクタが中断されるという、より難しいものとなっている。

「button」のデータ型４１８をもつ素描バージョン４１６はパネル４０６と交わるが、スタック順の印は欠いている。バージョン４１６はバージョン４０８のコンテンツ領域内にあるので、バージョン４１６はバージョン４０８内に含まれているものとして認識され、そのため生成されるGUI内ではバージョン４１６に対応するオブジェクトはバージョン４０８に対応するオブジェクト内に画面上で含まれる。同じように、素描バージョン４０２内に示されている素描バージョンに対応するオブジェクトのすべては作成されるGUI内ではパネル４０６内に画面上で含まれる。代替的な実施例では、交わりのあるバージョンの包含は、一方または両方のバージョンが優先度の印を欠いている場合、データ型に基づいて解決される。たとえば「button」は他のどんなデータ型よりも内部に含まれている必要があるなどとすることができる。

図４においてさらに示されているように、ボタンバージョン４１８はフレームバージョン４２２のコンテンツ領域４２０内に含まれており、よって生成されるGUIにおいてもボタンはフレームで囲まれる。「list」バージョンは前記フレームバージョン４２２に対応するオブジェクトの上に重なる優先度をもつリストを示しているが、これは両者の優先度の印４２４，４２６のためである。

これらの規則は単に例示的であって、本発明の意図される範囲を限定するものではない。

図５は、本発明のある実施形態５００においてスキャナおよび光学式文字認識（OCR）とともに用いた動作を示している。参照オブジェクトが電子的記憶装置ROM１２０またはRAM１３０にあらかじめ記憶される（ステップ５１０）。スキャナ１６０は素描をスキャンしてRAM１３０に入力する（ステップ５２０）。素描同定手段２１０がオブジェクトの素描されたバージョンをたとえばあらかじめ保存された一連の参照ベクトルと当該素描もしくは当該素描の一部分との間の最良一致を決定することによって同定する（ステップ５３０）。同定された素描バージョンは、該素描を正規化するために、素描正規化手段２２０によって参照オブジェクトに適合させられ、光学式文字認識（OCR）を通じて注釈のデータ型および優先度の印が認識される（ステップ５４０）。階層構造決定手段２３０が次いで、作成されるGUIにおけるオブジェクトの適合されたバージョンどうしの間での画面上の包含の階層構造を決定する。データ型、優先度およびその他の注釈は、Tommにおいて詳述されるようにレイアウトを定義する画面座標とともに、生成されるツリー階層構造に含められる（ステップ５５０）。記述生成器２４０は、目標プラットフォーム上にGUIを作成する際にAPIによって使用可能な形でユーザーインターフェース記述を生成する（ステップ５６０）。その後素描は編集されか、あるいは新しい素描が作成されるかし（ステップ５７０）、ステップ５２０のスキャンにかけられる。

図６は、ペン／デジタイズユニットおよび素描エディタとともに用いた本発明の動作を示している。図５と同一のステップは同じ参照符号を保持している。ユーザーはペンを操作することによって素描を行う。ペンはたとえばライトペンまたはTranにあるように電磁場によってその動きが感知されるペンでありうる。ペン／デジタイザー１４０のデジタイザーがペンの動きによってたどられるそれぞれの画面座標を記録する（ステップ６１５）。これは新しい素描をなすこともあるし、あるいは修正中の以前に処理されたスケッチへの追加をなすこともある。記録はリアルタイムで起こる（ステップ６２０）。素描されたバージョンは次いで、上述したのと同様に、同定され（ステップ５３０）、正規化され（ステップ６４０）、やはり上記したように階層構造が決定され、ユーザーインターフェース記述が生成される（ステップ５５０〜５６０）。素描はRAM１３０に保存され（ステップ６７０）、新しい素描が処理のために準備されることもできる（ステップ６８０、NO分枝）。そうでなければ、素描がその後編集される場合（ステップ６８０）、素描に追加をする際にユーザーの助けとなるよう、LCD１５０上に表示されてもよい（ステップ６９０）。あるいはまた、編集が素描中のオブジェクトの削除、変更または移動を伴うならば、画面上でグラフィックオブジェクトを対話的に編集するために既知の仕方でメニューを操作するために、ペンにボタンが設けられていてもよいし、あるいは他の入力デバイスが実装されていてもよい。

本発明の好ましい実施形態と考えられるものが示され、記述されてきたが、もちろん、形態または詳細におけるさまざまな修正および変更が本発明の精神から外れることなく容易になし得ることは理解されるであろう。したがって、本発明は記述され、示された厳密な形に限定されるのではなく、付属の特許請求の範囲内にはいりうるあらゆる修正をカバーするものと解釈されるべきことが意図されている。

本発明に基づくユーザーインターフェース記述生成装置のブロック図である。 本発明に基づくプログラムのブロック図である。 本発明に基づく、素描の適合と、素描のユーザーインターフェース記述への変換との概念図である。 本発明に基づくGUIの素描を描いた図である。 スキャナおよび光学式文字認識（OCR）とともに用いる本発明の動作を図示するフロー図である。 ペン／デジタイズユニットおよび素描エディタとともに用いる本発明の動作を図示するフロー図である。

Claims (20)

1. 作成されるべきグラフィックユーザーインターフェース（GUI）を表す諸オブジェクトの手書き素描を調べて前記オブジェクトの素描バージョンを同定するための素描同定器と、
   同定された素描バージョンをそれぞれの参照画像に似るよう適合させるための素描正規化器と、
   前記適合されたバージョンから、該適合されたバージョンどうしの間の相対的な包含の階層構造を決定するための階層構造決定器と、
   前記階層構造から前記GUIを作成するためのユーザーインターフェース記述を生成するための記述生成器、
   とを有することを特徴とする、ユーザーインターフェース記述生成装置。
2. 前記参照画像がベクトル画像を有することを特徴とする、請求項１記載の装置。
3. 前記素描正規化器が線をまっすぐにし、線を互いに平行にするよう構成されていることを特徴とする、請求項１記載の装置。
4. 前記手書き素描がキャラクタを含み、前記素描同定器が光学式文字認識（OCR）を適用するよう構成されていることを特徴とする、請求項１記載の装置。
5. 前記記述生成器がさらに、前記適合バージョンのレイアウトを含むユーザーインターフェース記述を生成するよう構成されていることを特徴とする、請求項１記載の装置。
6. 前記記述生成器が前記ユーザーインターフェース記述を前記GUIのための目標プラットフォームに固有なフォーマットにして生成するよう構成されていることを特徴とする、請求項１記載の装置。
7. 前記記述生成器が前記記述を階層的な、構造化されたマークアップ言語において生成するよう構成されていることを特徴とする、請求項１記載の装置。
8. 電子的記憶媒体と、
   素描を作成するためのハンドヘルドペンと、
   素描が作成されていくにつれてリアルタイムで前記媒体中に素描を記録するためのデジタイザー、
   とをさらに有することを特徴とする、請求項１記載の装置。
9. 当該装置が前記適合バージョンを含んでいる正規化された素描を前記媒体中に保存し、当該装置がさらに前記媒体中に保存されている正規化された素描を編集するための素描エディタを有しており、前記デジタイザーがペンからの入力に従って前記媒体中に保存されている前記正規化された素描に追補を行うよう構成されている、ことを特徴とする、請求項８記載の装置。
10. 前記参照画像を保存するための電子的な記憶媒体をさらに有しており、
    前記素描同定器が前記素描バージョンを同定する際に前記保存されている参照画像を使うよう構成されていることを特徴とする、請求項１記載の装置。
11. 前記記述生成器が、前記素描内のオブジェクトの素描バージョンへの注釈に基づいたスタック順を反映するようユーザーインターフェース記述を生成するよう構成されており、前記注釈が、注釈を付けられたオブジェクトの少なくとも一つの他のオブジェクトに対する、当該GUIにおいて二つのオブジェクトのうちのどちらが該二つのうちの他方の上に重なる優先度をもつかについての優先度を示すことを特徴とする、請求項１記載の装置。
12. 前記注釈があるオブジェクトの前記素描バージョン内の分割線に基づく優先度を示していることを認識するようさらに構成されていることを特徴とする、請求項１１記載の装置。
13. 作成されるべきグラフィックユーザーインターフェース（GUI）を表す素描を作成するためにオブジェクトを手書きで素描し、
    自動的に：
    前記素描を調べて前記オブジェクトの素描バージョンを同定し、
    同定された素描バージョンをそれぞれの参照画像に似るよう適合させ、
    前記適合されたバージョンから、該適合されたバージョンどうしの間の相対的な包含の階層構造を決定し、
    前記階層構造から前記GUIを作成するためのユーザーインターフェース記述を生成する、
    機能を実行する、
    ステップを有することを特徴とする、ユーザーインターフェース記述生成方法。
14. 前記素描ステップが、前記オブジェクトの少なくとも一つへの注釈として、前記GUIにおけるオブジェクトの機能のラベルを素描するステップをさらに含むことを特徴とする、請求項１３記載の方法。
15. 前記素描ステップが、オブジェクトの前記素描バージョンの少なくとも一つへの注釈として、そのオブジェクトの他のオブジェクトのうちの少なくとも一つに対するスタック順のそれぞれの指標を素描するステップをさらに含んでおり、該指標が前記GUIにおいて二つのオブジェクトのうちのどちらが該二つのうちの他方の上に重なる優先度をもつかを示すものであることを特徴とする、請求項１３記載の方法。
16. あるオブジェクトの素描バージョンの少なくとも一つがあるオブジェクトの別の素描バージョンと交わり、前記素描ステップがさらに、二つの互いに交わるバージョンのうちの少なくとも一つへの注釈として前記GUIにおけるそれぞれのオブジェクトの機能のラベルを素描するステップをさらに含むことを特徴とする、請求項１３記載の方法。
17. 前記階層構造決定ステップが、前記二つの互いに交わるオブジェクトのそれぞれのオブジェクトを前記注釈素描ステップにおいて作成された注釈に基づいて前記階層構造内で相対的に位置づけることを特徴とする、請求項１６記載の方法。
18. 前記素描ステップが：
    前記素描を作成するために手でペンを操作し、
    前記素描が作成されていくにつれてリアルタイムで前記素描を媒体に記録する、
    ステップをさらに有することを特徴とする、請求項１３記載の方法。
19. 前記調べるステップにおいて実行される同定において助けとするために前記参照画像をあらかじめ保存しておくステップをさらに有することを特徴とする、請求項１３記載の方法。
20. ユーザーインターフェース記述を生成するためにプロセッサによって実行されるコンピュータプログラムが保存されているコンピュータ可読媒体を有するコンピュータプログラムプロダクトであって、前記コンピュータプログラムが：
    作成されるべきグラフィックユーザーインターフェース（GUI）を表す諸オブジェクトの手書き素描を調べて前記オブジェクトの素描バージョンを同定するための命令のシーケンスと、
    同定された素描バージョンをそれぞれの参照画像に似るよう適合させるための命令のシーケンスと、
    前記適合されたバージョンから、該適合されたバージョンどうしの間の相対的な包含の階層構造を決定するための命令のシーケンスと、
    前記階層構造から前記GUIを作成するためのユーザーインターフェース記述を生成するための命令のシーケンス、
    とを有することを特徴とするコンピュータプログラムプロダクト。

Images