JPH08161368A - ユーザインタフェース画面構築システム - Google Patents

Abstract

(57)【要約】 【目的】ユーザインタフェース部品の作成と、作成した
部品の画面へのレイアウトが自動的に行えるようにす
る。 【構成】作成したい部品上に表示される複数の文字列を
所定の区切りコードで区切って入力したテキストファイ
ル４１を外部記憶装置４０に用意しておき、このテキス
トファイル４１が指定された場合には、テキストファイ
ル入力部１２１により当該ファイル４１から文字列を順
次読み込み、レイアウト規則適用部１２３において、そ
の文字列の文字数等から文字列を書き込むベースとなる
画像を作成し、このベース画像に上記文字列を構成する
各文字の文字画像を書き込んで部品の表示イメージを作
成し、作成した複数の部品の表示イメージを、レイアウ
ト規則管理部１２２で管理されているユーザ指定のレイ
アウト規則に従って、レイアウト規則適用部１２３によ
り格子状に或いは環状に自動配置する構成とする。

Description

【発明の詳細な説明】

【０００１】

【産業上の利用分野】本発明は、表示装置の画面上にユ
ーザインタフェース部品を作成し、レイアウトするよう
な一連の作業を支援するためのユーザインタフェース画
面構築システムに関する。

【０００２】

【従来の技術】従来、表示装置の画面上にユーザインタ
フェース部品を作成し、レイアウトする場合、まず部品
をユーザ（部品作成者）の手作業により１個１個作成
し、レイアウトを行うのが一般的であった。

【０００３】例えば乗車券を発行するための（発券機向
けの）ユーザインタフェース画面を作成する場合には、
ユーザインタフェース部品上に駅名を表示する必要があ
る。従来のユーザインタフェース画面構築システムで
は、この駅名を持つ部品を１個ずつユーザが作成し、そ
れを画面上で適当な位置にユーザがレイアウトするとい
う作業の繰り返しが必要であった。

【０００４】

【発明が解決しようとする課題】上記したように従来の
ユーザインタフェース画面構築システムでは、ユーザ
は、画面上にレイアウトされるユーザインタフェース部
品を手作業により１つずつ作成し、それを画面上で適当
な位置にレイアウトするという煩雑な作業を繰り返さな
ければならないという問題があった。

【０００５】本発明は上記事情を考慮してなされたもの
でその目的は、ユーザインタフェース部品の作成が自動
的に行えるユーザインタフェース画面構築システムを提
供することにある。

【０００６】本発明の他の目的は、自動作成された複数
の部品をシステムで予め用意しておいたレイアウト規則
に従って画面上に自動的にレイアウトできるユーザイン
タフェース画面構築システムを提供することにある。

【０００７】本発明の更に他の目的は、レイアウトの対
象となる部品の個数が多い場合には、適用したレイアウ
ト規則に応じて、複数画面に分散させてレイアウトした
り、できるだけ多くの部品を１つの画面内にレイアウト
することができるユーザインタフェース画面構築システ
ムを提供することにある。

【０００８】

【課題を解決するための手段】本発明は、ユーザインタ
フェース画面等の表示に用いられる表示装置と、ユーザ
インタフェース画面を構成する各ユーザインタフェース
部品上に表示される所定の区切りコードで区切られた文
字列の群を含むテキストを格納したテキストファイルか
ら、上記区切りコードで区切られる文字列を順次読み込
むテキストファイル入力手段と、インタフェース画面の
構築のために作成される各ユーザインタフェース部品を
表示装置の画面上にレイアウトする際のレイアウト規則
を１種類以上保持・管理するレイアウト規則管理手段
と、このレイアウト規則管理手段により管理されている
レイアウト規則の１つを選択するための選択指定入力を
含む各種の情報入力に用いられる入力装置と、上記テキ
ストファイル入力手段により順次読み込まれる文字列を
単位に、ユーザインタフェース画面を構成する各ユーザ
インタフェース部品の画像情報を作成し、この作成した
各ユーザインタフェース部品の画像情報に、上記入力装
置からの選択指定入力によりレイアウト規則管理手段か
ら選択されたレイアウト規則を適用することで、当該画
像情報及び画面上へのレイアウト情報を持つ複数のイン
タフェース部品を作成するレイアウト規則適用手段と、
このレイアウト規則適用手段により作成されたユーザイ
ンタフェース画面の各インタフェース部品を、当該部品
の画像情報及びレイアウト情報をもとに表示装置の画面
上にレイアウトする画面レイアウト手段とを備えたこと
を特徴とするものである。

【０００９】また本発明は、選択されたレイアウト規則
を適用することで作成されるインタフェース部品が１画
面内にレイアウトできなくなる毎にレイアウト規則適用
手段にて新たに画面を作成し、この新たな画面を対象と
して後続のインタフェース部品の画像情報に上記レイア
ウト規則を適用することをも特徴とする。

【００１０】また本発明は、選択されたレイアウト規則
を適用することで作成されるインタフェース部品が１画
面内にレイアウトできない場合、当該部品の大きさ及び
部品のレイアウト間隔の少なくとも一方をレイアウト規
則適用手段にて調整して１画面内にレイアウトすること
をも特徴とする。

【００１１】また本発明は、表示装置の画面上にレイア
ウトされる各ユーザインタフェース部品の画像情報及び
レイアウト情報を対応するユーザインタフェース画面毎
に保持・管理するデータ管理手段を更に備え、完成した
ユーザインタフェース画面の各ユーザインタフェース部
品が当該データ管理手段に再表示可能なように保持・管
理されるようにしたことをも特徴とする。

【００１２】

【作用】上記の構成においては、区切りコードで区切ら
れた文字列の群を含むテキストが格納されたテキストフ
ァイルを用意しておくことで、画面上にレイアウトされ
る各ユーザインタフェース部品の画像情報の作成に必要
な文字列が、テキストファイル入力手段により順次抽出
される。

【００１３】レイアウト規則適用手段は、テキストファ
イル入力手段により順次抽出される文字列を単位に、ユ
ーザインタフェース画面を構成する各ユーザインタフェ
ース部品の画像情報を作成し、この作成した各ユーザイ
ンタフェース部品の画像情報に、入力装置からの選択指
定入力に応じて選択されたシステム（レイアウト規則管
理手段）の持つレイアウト規則を適用することで、当該
画像情報とレイアウト情報を持つ複数のユーザインタフ
ェース部品を自動作成する。ここで適用されるレイアウ
ト規則としては、ユーザインタフェース部品を格子状に
一定間隔でレイアウトするための第１のレイアウト規
則、或いはユーザインタフェース部品を環状に一定角度
でレイアウトするための第２のレイアウト規則などがあ
る。

【００１４】もし、レイアウト規則に従うユーザインタ
フェース部品の自動作成において、画面の大きさとユー
ザインタフェース部品の個数との関係から全ての部品が
１画面内に収まらない場合、レイアウト規則適用手段
は、新規に画面を作成して、残った部品をレイアウトす
る処理を、全ての部品がレイアウトできるまで繰り返
す。

【００１５】この他、全ての部品が１画面内に収まらな
い場合のレイアウト規則適用手段の処理として、当該部
品の大きさ及び部品のレイアウト間隔（第１のレイアウ
ト規則の適用時であれば格子間隔、第２のレイアウト規
則適用時であれば角度）の少なくとも一方を調整して１
画面内にレイアウトすることも可能である。

【００１６】以上のようにしてレイアウト規則適用手段
により作成された各インタフェース部品は、当該部品の
画像情報及びレイアウト情報をもとに１画面単位で表示
装置の画面上にレイアウト表示される。この状態でユー
ザは、入力装置を操作して、画面上のユーザインタフェ
ース部品の大きさ、レイアウト位置等を修正することが
可能である。

【００１７】完成したユーザインタフェース画面の各ユ
ーザインタフェース部品は、画面レイアウト手段の制御
により、データ管理手段に保持・管理される。このデー
タ管理手段に保持・管理されたユーザインタフェース画
面の各ユーザインタフェース部品は、入力装置からの呼
び出し指示入力に応じて、画面レイアウト手段により呼
び出され、表示装置の画面上に表示される。

【００１８】

【実施例】以下、本発明の一実施例を図面を参照して説
明する。図１は本発明の一実施例に係るユーザインタフ
ェース画面構築システムの構成を示すブロック図であ
る。

【００１９】図１のシステムは、システム全体を管理・
制御するための制御部１０と、ユーザインタフェース部
品等を表示するための（ＣＲＴディスプレイ、液晶ディ
スプレイ等の）表示装置２０と、キーボード、マウス等
からなる入力装置３０と、磁気ディスク装置等の外部記
憶装置４０とから構成される。

【００２０】外部記憶装置４０は、ユーザインタフェー
ス部品作成のためにユーザが用意したテキストファイル
（文字列ファイル）４１等を格納するのに用いられる。
このテキストファイル４１は、各部品に対応してユーザ
により入力された文字列と、その隣接文字列間を区切る
ための特定のコード等からなる。

【００２１】制御部１０は、ＣＰＵ及び主記憶により実
現されるもので、ユーザインタフェース部１１０、自動
部品処理部１２０、データ管理部１３０及び画面レイア
ウト部１４０の各機能ブロックから構成される。

【００２２】ユーザインタフェース部１１０は、表示装
置２０及び入力装置３０を介してユーザと対話するため
のものである。自動部品処理部１２０は、外部記憶装置
４０に置かれているテキストファイル４１に基づいて複
数のユーザインタフェース部品を自動作成すると共に、
この作成した各部品を自身が有しているレイアウト規則
（の中からユーザによって選択指定されたレイアウト規
則）に従って画面上に自動レイアウトするもので、テキ
ストファイル入力部１２１、レイアウト規則管理部１２
２及びレイアウト規則適用部１２３から構成される。

【００２３】テキストファイル入力部１２１は、外部記
憶装置４０に置かれているテキストファイル４１から上
記特定のコードで区切られる文字列を順次読み込むもの
である。

【００２４】レイアウト規則管理部１２２は、ユーザイ
ンタフェース部品を画面上に自動的にレイアウトするた
めの予めシステムに用意されている１つ以上のレイアウ
ト規則（ここでは２つのレイアウト規則）を保持・管理
するものである。

【００２５】レイアウト規則適用部１２３は、テキスト
ファイル入力部１２１により読み込まれた文字列をもと
にユーザインタフェース部品を作成すると共に、レイア
ウト規則管理部１２２により管理されているレイアウト
規則の中からユーザにより選択された規則を適用して、
画面へのレイアウト情報を自身の作成した部品に付加す
るものである。

【００２６】データ管理部１３０は、画面上にレイアウ
トされるユーザインタフェース部品とその画面レイアウ
ト情報を保持・管理するためのもので、部品管理部１３
１及びレイアウト管理部１３２から構成される。

【００２７】部品管理部１３１は、画面上にレイアウト
される部品にリンクされる画像情報、及びレイアウト情
報を含む部品データを保持・管理するものである。レイ
アウト管理部１３２は画面上にレイアウトされる部品を
管理するものである。

【００２８】次に、図１の構成の動作を説明する。ま
ず、画面上にレイアウトされるユーザインタフェース部
品を作成する場合、従来であれば、ユーザが１個ずつ必
要となる部品を作成し、続いてその部品を適当な位置へ
レイアウトするという作業を繰り返す必要があった。し
かし、例えば駅などで見られる発券機、或いは地理案内
システムといったものの画面（ユーザインタフェース画
面）を作成する場合、駅名、地名などが設定された部品
を１個ずつ作成するのは非常に手間のかかる作業であ
る。

【００２９】そこで本実施例では、ユーザインタフェー
ス画面の構築に必要な各ユーザインタフェース部品に設
定される文字列（ここでは、駅名或いは地名）を入力し
てユーザが予め作成したテキストファイル４１を外部記
憶装置４０内に用意し、これを制御部１０（内のテキス
トファイル入力部１２１）により読み込んで、後述する
ように自動的に部品が作成されるようにしている。

【００３０】さて、外部記憶装置４０内に用意されるテ
キストファイル４１は、ＪＩＳコード或いはＳＪＩＳコ
ードなど、国内或いは国際的に標準化されたコード体系
に則ったコードにより形成されるものとする。また、文
字列（駅名、地名）の区切りとしては、キャリッジリタ
ーン、ラインフィードなどの特定のコード（以下、区切
りコードと称する）を用いているものとする。

【００３１】このようなテキストファイル４１をテキス
トファイル入力部１２１により読み込むことにより、レ
イアウト規則適用部１２３にて部品が作成される。この
レイアウト規則適用部１２３で作成される部品の内部デ
ータ（部品データ）構造について、図２及び図３を参照
して説明する。

【００３２】まず、部品は画像データ（イメージデー
タ）として作成される。したがって部品（の画像デー
タ）は、画素と呼ばれる画面上でのドットを基本単位と
して構成され、画素を縦横に並べることで作成される。
画像が白黒（モノクロ）であれば、画素としては２値の
データを持ち、カラーであればＲ，Ｇ，Ｂなどの３つの
直交する座標系により決まる値をとる。

【００３３】ここでは、テキストファイル４１に書き込
まれている複数の文字列の１つが「東京」という文字列
であり、その文字列「東京」から部品＃１が作成される
ものとする。

【００３４】この場合、部品＃１の内部データ構造は、
図２に示すように、画面左上を原点としたときの部品＃
１の中心の右方向（ｘ方向）への座標値（オフセット
値）２０１、同じく部品＃１の中心の下方向（ｙ方向）
への座標値（オフセット値）２０２、部品＃１の幅２０
３、部品＃１の高さ２０４及び部品＃１の画像データ
（部品＃１に表示されるイメージデータ）２０５の集合
を持つ。座標値２０１，２０２は、部品＃１の画面上の
位置情報（レイアウト情報）をなし、幅２０３及び高さ
２０４は部品＃１の大きさをなし、画像データ２０５
は、幅２０３及び高さ２０４で示される大きさの部品＃
１の表示イメージをなす。

【００３５】この図２のデータ構造（内部データ構造）
を持つ部品＃１の画像データ（ビットマップ）２０５の
具体例を図３に示す。図３において、多数の小さな四角
形が画素であり、部品＃１は、画素を縦、横に並べて構
成される大きい四角形である。

【００３６】次に、テキストファイル４１からの部品作
成について、図２のデータ構造を持つ部品＃１の作成を
例に挙げながら、図４のフローチャートを参照して説明
する。

【００３７】まずユーザが入力装置３０を操作して、テ
キストファイル４１からの部品作成を指定したものとす
る。この指定入力は、ユーザインタフェース部１１０か
ら自動部品処理部１２０に与えられる。

【００３８】すると、自動部品処理部１２０内のテキス
トファイル入力部１２１が起動され、外部記憶装置４０
に格納されているユーザ指定のテキストファイル４１が
オープンされる（ステップＳ１）。

【００３９】テキストファイル入力部１２１は、オープ
ンしたユーザ指定のテキストファイル４１内に区切りコ
ードで区切られる未処理の文字列（読み込むべき文字
列）があれば（ステップＳ２）、それを読み込んでレイ
アウト規則適用部１２３に渡す（ステップＳ３）。ここ
では、「東京」という文字列（の文字コード列）がレイ
アウト規則適用部１２３に渡されたものとする。なお、
文字列読み込みは、テキストファイル４１の先頭から順
に行われる。

【００４０】レイアウト規則適用部１２３は、テキスト
ファイル入力部１２１により読み込まれた「東京」とい
う文字列（の文字コード列）を当該入力部１２１から渡
されると、その文字列を構成する各文字の画像（フォン
トイメージ、文字パターン）を書き込むためのベースに
なる画像（図３の大きい四角形）を作成する（ステップ
Ｓ４）。このベース画像は、基本的には、文字列の構成
文字数と、例えば入力装置３０を用いてユーザが選択指
定した（パラメータである）文字フォントのサイズ（こ
こでは、１６×１６画素または２４×２４画素のうちの
いずれかであるものとする）をもとに画像サイズを計算
することにより作成される。

【００４１】更に具体的に述べるならば、部品（部品＃
１）の高さとなるベース画像の縦方向サイズについて
は、使用文字フォントのサイズ（縦方向サイズ）と、当
該フォントサイズの文字画像に対して上下に何画素大き
くとるかを示す上下マージンの（２種のパラメータ）か
ら決定される。この上下マージンもユーザにより選択指
定可能であるものとする。また、部品（部品＃１）の幅
となるベース画像の横方向サイズについては、使用文字
フォントのサイズ（横方向サイズ）と、文字列の構成文
字数と、文字間（文字間の間隔）とから決定される。

【００４２】レイアウト規則適用部１２３は、ベース画
像を作成すると、そのベース画像に書き込むべき文字列
「東京」を構成する「東」と「京」のユーザ指定のフォ
ントサイズの文字画像（フォントイメージ、文字パター
ン）を、テキストファイル入力部１２１から渡された当
該「東」と「京」の各文字コードを用いて検索し、読み
込む（ステップＳ５）。

【００４３】本実施例では、図示せぬ漢字パターンＲＯ
Ｍに、例えば２種のフォントサイズ（１６×１６画素と
２４×２４画素）の多数の文字画像が文字コードに対応
して予め登録されているため、上記の検索は当該漢字パ
ターンＲＯＭを対象に行われる。

【００４４】なお、外部記憶装置４０内に漢字パターン
データ領域（図示せず）を用意して、そこに多数の文字
画像を文字コードに対応して予め登録しておくことも可
能である。

【００４５】レイアウト規則適用部１２３は、ステップ
Ｓ５の処理で（テキストファイル入力部１２１から渡さ
れた文字「東」と「京」の各文字コードに対応するユー
ザ指定のフォントサイズの）文字画像を取得すると、そ
の文字画像をステップＳ４で作成したベース画像に書き
込む（ステップＳ６）。このようにして、図２の部品＃
１中の画像データ（部品＃１の表示イメージ）２０５が
作成される。

【００４６】図３は、以上に述べた「東」と「京」の各
文字画像をベース画像に書き込むことにより作成された
部品＃１の画像データ（２０５）を示したものである。
ここでの具体的な文字画像のデータとしては、２値デー
タであれば、白画素を“０”、黒画素を“１”とするな
らば、“０”と“１”の連続であり、カラーデータであ
れば、例えばＲ，Ｇ，Ｂの順に各色の値が設定されたも
のとなる。

【００４７】なお、本実施例では、ユーザが選択指定可
能なパラメータとして、上記のフォントサイズ、上下マ
ージン、文字間の他、文字列全体のベース画像中での位
置（例えば中央、右詰め、左寄せなど）、文字色、文字
の背景色がある。また、文字の背景色として単色でな
く、ユーザが指定した画像ファイル（中のカラー画像）
を利用することも可能である。この場合、文字色との関
係が問題であり、読み込む画像によっては文字が見えな
くなる場合もあるため、同じ色画素を反転した色で表示
することで、常に文字が識別可能な状態に保つようにす
ることが好ましい。

【００４８】また本実施例では、部品としての大きさ、
即ちベース画像の大きさを固定することも指定可能であ
る。この場合、幅固定時には、文字列を例えば複数行に
表示（設定）し、高さ固定時には、フォントサイズの小
さなものを使用することで対処する。

【００４９】さて、レイアウト規則適用部１２３は、ス
テップＳ６の処理で図３に示したような部品（部品＃
１）の画像データ（表示イメージ）２０５を作成する
と、図２中の座標値２０１，２０２からなる当該部品の
位置情報を決定して部品（のデータ構造）を作成し、そ
こに当該部品の画像データ２０５をサイズ（幅２０３及
び高さ２０４）と共に書き込み、部品（部品＃１）を完
成する（ステップＳ７）。なお、部品の位置情報の決定
については、後述する。

【００５０】レイアウト規則適用部１２３は、ステップ
Ｓ７を終了すると、ステップＳ２に戻り、以降、上記し
た部品作成のためのの一連の手順を、テキストファイル
４１に未処理の文字列がなくなるまで繰り返す。

【００５１】以上のようにして、入力したテキストファ
イル４１をもとに、区切りコード（改行コードなどの特
定のコード）により区切られる文字列の個数分だけ、ユ
ーザインタフェース部品を自動的に作成することができ
る。

【００５２】このとき、作成された複数個の部品を画面
上のどの位置に表示するかが問題となる。そこで本実施
例では、ユーザが部品を画面上にどのようにレイアウト
（配置）するかを選択できるように、システム側でレイ
アウト規則を提示するようにしている。このレイアウト
規則はレイアウト規則管理部１２２により保持・管理さ
れる。

【００５３】ここで、レイアウト規則管理部１２２によ
り保持・管理されているレイアウト規則のデータ構造の
一例を図５に示す。図５の例では、レイアウト規則とし
て、図６に示すように部品を格子状に自動配置するレイ
アウト規則＃１と、図７に示すように部品を円の円周上
（環状）に自動配置するレイアウト規則＃２の２種が用
意されている。

【００５４】規則＃１は、格子を示す情報と、格子点の
間隔Ｓ（単位は画素数或いはセンチメートルなど）を示
す情報を持つ。一方、規則＃２は、円を示す情報と、円
の半径ｒ（単位は画素数或いはセンチメートルなど）、
（円の中心を基準とする）各部品間の角度θである。

【００５５】これらの規則＃１または規則＃２をレイア
ウト規則適用部１２３において各部品に適用すること
で、図２の部品データのうち、座標値２０１，２０２か
らなる位置情報を取得することができる。この規則＃１
または規則＃２のいずれを適用するかは、入力装置３０
を用いたユーザ操作により選択指定できるようになって
いる。

【００５６】そこで、図４の処理手順に従って作成され
る部品の画像データ（表示イメージ）を、レイアウト規
則＃１が選択されることにより当該規則＃１に従って格
子状にレイアウト（して位置情報を決定）する場合のレ
イアウト規則適用部１２３の処理手順について、図８の
フローチャートを参照して説明する。

【００５７】レイアウト規則適用部１２３は、ユーザ操
作によりレイアウト規則＃１が選択指定された場合、作
成した部品がレイアウトされる画面の縦方向サイズＨと
横方向サイズＷを得る（ステップＳ１１）。この画面の
縦横サイズＨ，Ｗは図示せぬメモリの所定番地に格納さ
れているものとする。

【００５８】次にレイアウト規則適用部１２３は、レイ
アウト規則管理部１２２で管理されているレイアウト規
則＃１のデータから格子（格子点）の間隔Ｓを得る（ス
テップＳ１２）。

【００５９】次にレイアウト規則適用部１２３は、部品
レイアウトの繰り返し数をカウントする横方向カウンタ
ｉと、縦方向方向カウンタｊをそれぞれ初期値１に設定
する（ステップＳ１３）。

【００６０】次にレイアウト規則適用部１２３は、レイ
アウトする部品の中心となる格子点（格子の交点）の座
標（ｘ，ｙ）を ｘ＝Ｓ＊ｉ ｙ＝Ｓ＊ｊ により計算する（ステップＳ１４）。

【００６１】次にレイアウト規則適用部１２３は、算出
した格子点の座標（ｘ，ｙ）をもとに、ｘがＷ以下であ
るか否か（即ち、部品レイアウト先の格子点が画面から
横方向に外れるか否か）をチェックする（ステップＳ１
５）。

【００６２】もし、ｘがＷ以下であれば、レイアウト規
則適用部１２３は、算出した格子点の座標（ｘ，ｙ）を
もとに、ｙがＨ以下であるか否か（即ち、部品レイアウ
ト先の格子点が画面から縦方向に外れるか否か）をチェ
ックする（ステップＳ１６）。

【００６３】もし、ｙがＨ以下であれば、即ち格子点の
座標（ｘ，ｙ）が画面内にあれば、レイアウト規則適用
部１２３は作成した部品の中にレイアウト前の部品（位
置が決まっていない部品）が存在するか否かをチェック
する（ステップＳ１７）。

【００６４】もし、レイアウト前の部品が存在するなら
ば、レイアウト規則適用部１２３は、その部品を１つ取
り出し、その部品の中心点の座標が（ステップＳ１４で
算出した）部品レイアウト先の格子点の座標（ｘ，ｙ）
に一致するように、その部品の例えば左上端の位置座標
（画面の左上端を原点としたときの右方向へのオフセッ
トと下方向へのオフセットからなる位置座標）、即ち図
２中の座標値２０１，２０２に相当する位置座標を算出
する（ステップＳ１８）。

【００６５】次にレイアウト規則適用部１２３は、横方
向カウンタｉを＋１して（ステップＳ１９）、ステップ
Ｓ１４に戻る。これにより、上記と同様の処理が、右隣
の格子点をレイアウト先（の候補）として行われること
になる。

【００６６】やがて、ステップＳ１５で、ｘがＷより大
きいことが検出されたならば、レイアウト規則適用部１
２３は、そのままでは画面から部品が外れることから、
横方向カウンタｉを１に初期化すると共に、縦方向カウ
ンタｊを＋１して（ステップＳ２０）、ステップＳ１４
に戻る。これにより、上記の同様の処理が、１つ下の格
子ラインの左端（第１番目）の格子点をレイアウト先
（の候補）として行われることになる。

【００６７】また、ステップＳ１６でｘがＨより大きい
ことが検出された場合には、これ以上画面（画面下方）
には部品をレイアウトできないことになるが、レイアウ
ト前の部品が残っていないならば（ステップＳ２１）、
上記一連の処理は終了となる。

【００６８】また、ステップＳ１６でｘがＨ以下である
ことが検出された場合でも、レイアウト前の部品が残っ
ていないならば（ステップＳ１７）、上記一連の処理は
終了となる。

【００６９】このようにして、ステップＳ１６でｘがＨ
より大きいことが検出される前に、作成した全ての部品
のレイアウト位置が決定された場合、或いはステップＳ
１６でｘがＨより大きいことが検出されても、作成した
全ての部品のレイアウト位置が既に決定されている場合
（レイアウト前の部品が残っていないた場合）には、全
ての部品について、（ステップＳ１８で決定された）レ
イアウト位置を示す位置座標（位置情報）と、（図４の
処理手順で作成された）当該部品の画像データ（２０
５）とから、図２に示したデータ構造の部品が作成され
る。

【００７０】なお、ステップＳ１６でｘがＨより大きい
ことが検出され、且つレイアウト前の部品がまだ残って
いる場合の処理については後述する。次に、図４の処理
手順に従って作成した部品を、レイアウト規則＃２が選
択されることにより当該規則＃２に従って円周上（環
状）にレイアウトする場合のレイアウト規則適用部１２
３の処理手順について、図９のフローチャートを参照し
て説明する。

【００７１】レイアウト規則適用部１２３は、ユーザ操
作によりレイアウト規則＃２が選択指定された場合、レ
イアウト規則管理部１２２で管理されている当該レイア
ウト規則＃２のデータから円の半径ｒと部品間の角度θ
を得る（ステップＳ３１）。

【００７２】次にレイアウト規則適用部１２３は、部品
レイアウトの繰り返し数をカウントするカウンタｉを初
期値０に設定する（ステップＳ３２）。次にレイアウト
規則適用部１２３は、レイアウトする部品の中心の座標
（ｘ，ｙ）を ｘ＝ｒｃｏｓ（θ＊ｉ） ｙ＝ｒｓｉｎ（θ＊ｉ） により計算する（ステップＳ３３）。

【００７３】次にレイアウト規則適用部１２３は、θ＊
ｉの値が３６０°以下であるか否かをチェックする（ス
テップＳ３４）。もし、θ＊ｉの値が３６０°以下であ
れば、即ちｉ番目に配置される部品と０番目（最初）に
配置される部品との間の半径ｒの円の中心に対してなす
角度が３６０°以下であれば、レイアウト規則適用部１
２３は、当該円の円周上での部品レイアウトが一巡して
おらず、まだレイアウトできる余地があるものと判断す
る。この場合、レイアウト規則適用部１２３は、作成し
た部品の中にレイアウト前の部品（位置が決まっていな
い部品）が存在するか否かをチェックする（ステップＳ
３５）。

【００７４】もし、レイアウト前の部品が存在するなら
ば、レイアウト規則適用部１２３は、その部品を１つ取
り出し、その部品の中心点の座標が（ステップＳ３３で
算出した）座標（ｘ，ｙ）に一致するように、その部品
の例えば左上端の位置座標（画面の左上端を原点とした
ときの右方向へのオフセットと下方向へのオフセットか
らなる位置座標）、即ち図２中の座標値２０１，２０２
に相当する位置座標を算出する（ステップＳ３６）。

【００７５】次にレイアウト規則適用部１２３は、カウ
ンタｉを＋１して（ステップＳ３７）、ステップＳ３３
に戻る。これにより、上記の同様の処理が、角度をθだ
けずらして行われることになる。

【００７６】このようにして、作成した全ての部品が半
径ｒの円の円周上にレイアウトされると、θ＊ｉが３６
０°以下であっても（ステップＳ３４）、レイアウト前
の部品が残っていないことから（ステップＳ３５）、上
記一連の処理は終了となる。

【００７７】また、ステップＳ３４でθ＊ｉが３６０°
より大きいことが検出された場合には、これ以上同一画
面上に新たな部品をレイアウトできないことになるが、
レイアウト前の部品が残っていないならば（ステップＳ
３８）、上記一連の処理は終了となる。

【００７８】そして、ステップＳ３４でθ＊ｉが３６０
°より大きいことが検出される前に、作成した全ての部
品のレイアウト位置が決定された場合、或いはステップ
Ｓ３４でθ＊ｉが３６０°より大きいことが検出されて
も、作成した全ての部品のレイアウト位置が既に決定さ
れている場合（レイアウト前の部品が残っていない場
合）には、全ての部品について、（ステップＳ３６で決
定された）レイアウト位置を示す位置座標（位置情報）
と、（図４の処理手順で作成された）当該部品の画像デ
ータ（２０５）とから、図２に示したデータ構造の部品
が作成される。

【００７９】なお、ステップＳ３４でθ＊ｉが３６０°
より大きいことが検出され、且つレイアウト前の部品が
まだ残っている場合の処理については後述する。さて、
図４の処理手順に従って作成した部品を、レイアウト規
則＃１を適用することで、図８の処理手順に従って図３
に示したように格子状に配置する場合、画面の縦横サイ
ズが決まっているならば、格子の間隔Ｓにより１画面に
レイアウトできる部品の最大個数Ｎは自動的に決定され
る。この部品の最大個数Ｎは、１画面の縦サイズがＨ、
横サイズがＷ、格子間隔がＳであることから、 Ｎ＝｛（Ｈ／Ｓ）−１｝＊｛（Ｗ／Ｓ）−１｝ となる。

【００８０】作成した部品の個数が、上記Ｎを越えた場
合には、別の画面を新たに作成し、そこにレイアウトで
きなかった部品をレイアウトすればよい。この新たな画
面にも入りきらない部品があれば、更に次の画面を作成
して、そこにレイアウトするという処理を繰り返し行え
ばよい。このとき、前の画面にレイアウトされる最後の
部品には、後続する部品が次画面にレイアウトされるこ
とを示すフラグ情報（次画面有りフラグ情報）を付加
し、次画面が表示できるようにする。この１つの画面の
最後にレイアウトされる部品（ここでは部品＃１である
ものとする）のデータ構造を図１０に示す。この図１０
のデータ構造は、図２に示した部品のデータ構造に、次
画面有りを示すフラグ情報２０６が付加された形となっ
ている。

【００８１】そこで、レイアウト規則＃１に従う部品レ
イアウト処理では、図８のフローチャートに示すよう
に、ステップＳ１６でｘがＨより大きいこと（即ち、こ
れ以上同一画面上に部品をレイアウトできないこと）が
検出され、しかもステップＳ２１でレイアウト前の部品
がまだ残っていることが検出された場合には、先行する
部品に図１０に示したように次画面有りフラグ情報２０
６が付加され（ステップＳ２２）、しかる後に新たな画
面への部品レイアウトのためにステップＳ１３に戻るよ
うになっている。

【００８２】なお、作成した部品をできる限り１画面内
に収めたい場合には、格子間隔Ｓを調整することも可能
である。一方、レイアウト規則＃２に従う部品レイアウ
ト処理では、即ち部品を円周上にレイアウトする場合に
は、各部品間の間隔を角度により決定するので、θ＊ｉ
が３６０°を越えたならば、残りの部品を次画面にレイ
アウトするようにする。

【００８３】そこで、レイアウト規則＃２に従う部品レ
イアウト処理では、図９のフローチャートに示すよう
に、ステップＳ３４でθ＊ｉが３６０°より大きいこと
（即ち、これ以上同一画面上に部品をレイアウトできな
いこと）が検出され、しかもステップＳ３８でレイアウ
ト前の部品がまだ残っていることが検出された場合に
は、先行する部品に図１０に示したように次画面有りフ
ラグ情報２０６が付加され（ステップＳ３９）、しかる
後に新たな画面への部品レイアウトのためにステップＳ
３２に戻るようになっている。

【００８４】なお、作成した部品をできる限り１画面内
に収めたい場合には、円の半径ｒ或いは角度θを調整す
ることも可能である。さて、以上のようにして（自動部
品処理部１２０内の）レイアウト規則適用部１２３によ
り作成された図２或いは図１０に示すデータ構造の部品
（部品データ）は、例えば画面単位で画面レイアウト部
１４０に渡される。

【００８５】画面レイアウト部１４０は、レイアウト規
則適用部１２３から１画面分の部品データを受け取る
と、各部品データ（を構成する座標値２０１，２０２か
らなる位置情報と、幅２０４及び高さ２０５で示される
部品サイズと、部品の画像データ２０５）に従って、図
６或いは図７に示すような複数の部品がレイアウトされ
たユーザインタフェース画面を表示装置２０に表示す
る。このとき画面レイアウト部１４０は、１画面中の最
後の部品データに次画面有りフラグ情報が付加されてい
るならば、次画面有りを示すメッセージも表示する。

【００８６】ユーザは、表示装置２０に表示されてい
る、ユーザインタフェース画面を見て、修正の必要があ
るならば、従来、部品を手作業で１個１個作成してレイ
アウトした場合と同様にして、自動作成された部品のサ
イズや部品のレイアウト位置等を修正する。

【００８７】また、ユーザは、次画面有りのメッセージ
が表示されている場合、即ち自動部品処理部１２０での
部品作成・レイアウト処理では全ての部品を１画面に配
置できなかった場合でも、自動作成した部品をできる限
り１画面に収めたいときは、入力装置３０を操作して、
レイアウト規則＃１の適用ときであれば格子間隔Ｓを調
整し、レイアウト規則＃２の適用ときであれば円の半径
ｒ或いは角度θを調整して、再度の部品作成・レイアウ
ト処理を要求する。このとき、フォントサイズ等のパラ
メータを変更することも可能である。

【００８８】ユーザからの再度の部品作成・レイアウト
処理が要求されると、その要求された処理が自動部品処
理部１２０で再度行われる。なお、次画面有りのメッセ
ージを表示する際に、残り部品数を併せて表示するなら
ば、ユーザは再度の部品作成・レイアウト処理を要求す
ることが妥当であるか否か判断しやすくなる。また、レ
イアウト規則適用部１２３において、レイアウト規則＃
１の適用ときであれば格子間隔Ｓをどの程度まで調整す
れば１画面に収めることができるか、同様にレイアウト
規則＃２の適用ときであれば円の半径ｒ或いは角度θを
どの程度まで調整すれば１画面に収めることができるか
を算出して、利用者に提示するようにしてもよい。ま
た、（隣接部品間で重なりが生じるなど）調整が不可能
な場合には、その旨を利用者に提示するようにしてもよ
い。

【００８９】上記とは逆に、１画面に全部品が収まって
いても、部品数が少ないために画面に均等に配置されて
いない場合に、格子間隔Ｓ、または円の半径ｒ或いは角
度θを調整して、再度の部品作成・レイアウト処理を要
求することも可能である。また、１画面に全部品が収ま
っていても部品数が多すぎて混雑している場合には、適
用するレイアウト規則に応じて１画面内での部品数を制
限し、別の画面を作成させることも可能である。この
際、格子間隔Ｓまたは角度θを大きな値に調整してもよ
い。

【００９０】一方、表示装置２０に表示されたユーザイ
ンタフェース画面で問題ない場合には、ユーザは入力装
置３０を用いて、その旨をシステムに通知するための入
力操作を行う。

【００９１】この場合、画面レイアウト部１４０は、表
示中のユーザインタフェース画面を構成する各部品デー
タをデータ管理部１３０内の部品管理部１３１に保持す
る。同時に画面レイアウト部１４０は、部品管理部１３
１に保持した各部品データへのポインタをデータ管理部
１３０内のレイアウト管理部１３２に保持する。このデ
ータ管理部１３０内の部品管理部１３１及びレイアウト
管理部１３２でのデータ管理構造は、従来と同様のため
詳細には述べないが、レイアウト管理部１３２における
部品データへのポインタは、画面単位で保持される。ま
た、画面単位のポインタ群の例えば最後には、次画面の
先頭部品データへのポインタを指すポインタ（次画面ポ
インタ）が設定される。この次画面ポインタが所定値
（ＮＵＬＬ値）の場合には、次画面無しとなる。この部
品管理部１３１及びレイアウト管理部１３２でのデータ
管理構造の一例を図１１に示す。

【００９２】また画面レイアウト部１４０は、次画面有
りの場合であれば、レイアウト規則適用部１２３に対し
て、次画面の部品データを要求する。以下、上記と同様
の動作が行われ、全画面分の部品データが部品管理部１
３１に保持され、この部品データへのポインタが画面単
位でレイアウト管理部１３２に保持される。

【００９３】以降、画面レイアウト部１４０は、部品管
理部１３１及びレイアウト管理部１３２に保持・管理さ
れているデータをもとに、完成したユーザインタフェー
ス画面を表示装置２０に表示することができる。

【００９４】

【発明の効果】以上詳述したように本発明によれば、駅
名、地名など、部品上に表示したい文字列だけが異なる
ようなユーザインタフェース部品を画面上にレイアウト
したいような場合に、予め文字列だけが書き込まれたテ
キストファイルを用意し、これをシステムに読み込ませ
るだけで、自動的にユーザインタフェース部品を作成す
ることができる。

【００９５】また本発明によれば、作成された複数のユ
ーザインタフェース部品を、システムに用意されている
レイアウト規則に従って、画面上に自動的にレイアウト
することができる。

【００９６】また本発明によれば、レイアウトの対象と
なる部品の個数が多い場合には、適用したレイアウト規
則に応じて、複数画面に分散させてレイアウトしたり、
できるだけ多くの部品を１つの画面内にレイアウトする
ことができる。

【００９７】以上により、従来であれば部品を１個１個
ユーザが作成して、レイアウトしていたユーザインタフ
ェース画面構築作業の効率を著しく向上させることがで
きる。

【図面の簡単な説明】

【図１】本発明の一実施例に係るユーザインタフェース
画面構築システムの構成を示すブロック図。

【図２】画面上にレイアウトされる部品のデータ構造を
示す図。

【図３】部品上に表示される画像のビットマップを示す
図。

【図４】図１中のテキストファイル４１から部品を作成
する場合の処理手順を説明するためのフローチャート。

【図５】図１中のレイアウト規則管理部１２２により保
持・管理されているレイアウト規則のデータ構造の一例
を示す図。

【図６】部品を格子状にレイアウトしたときの一例を示
す図。

【図７】部品を環状にレイアウトしたときの一例を示す
図。

【図８】部品を格子状に自動レイアウトする場合の処理
手順を説明するためのフローチャート。

【図９】部品を環状に自動レイアウトする場合の処理手
順を説明するためのフローチャート。

【図１０】次画面が存在する場合の画面上にレイアウト
される部品のデータ構造を示す図。

【図１１】図１中のデータ管理部１３０内の部品管理部
１３１及びレイアウト管理部１３２におけるデータ管理
構造の一例を示す図。

【符号の説明】

１０…制御部、２０…表示装置、３０…入力装置、４０
…外部記憶装置、４１…テキストファイル、１１０…ユ
ーザインタフェース部、１２０…自動部品処理部、１２
１…テキストファイル入力部、１２２…レイアウト規則
管理部、１２３…レイアウト規則適用部、１３０…デー
タ管理部、１３１…部品管理部、１３２…レイアウト管
理部。

Claims (5)

【特許請求の範囲】
1. 【請求項１】 ユーザインタフェース画面等の表示に用
   いられる表示装置と、 ユーザインタフェース画面を構成する各ユーザインタフ
   ェース部品上に表示される所定の区切りコードで区切ら
   れた文字列の群を含むテキストを格納したテキストファ
   イルから、前記区切りコードで区切られる文字列を順次
   読み込むテキストファイル入力手段と、 インタフェース画面の構築のために作成される各ユーザ
   インタフェース部品を前記表示装置の画面上にレイアウ
   トする際のレイアウト規則を１種類以上保持・管理する
   レイアウト規則管理手段と、 このレイアウト規則管理手段により管理されているレイ
   アウト規則の１つを選択するための選択指定入力を含む
   各種の情報入力に用いられる入力装置と、 前記テキストファイル入力手段により順次読み込まれる
   文字列を単位に、ユーザインタフェース画面を構成する
   各ユーザインタフェース部品の画像情報を作成し、この
   作成した各ユーザインタフェース部品の画像情報に、前
   記入力装置からの選択指定入力により前記レイアウト規
   則管理手段から選択されたレイアウト規則を適用するこ
   とで、当該画像情報及び前記画面上へのレイアウト情報
   を持つ複数のインタフェース部品を作成するレイアウト
   規則適用手段と、 このレイアウト規則適用手段により作成されたユーザイ
   ンタフェース画面の各インタフェース部品を、当該部品
   の画像情報及びレイアウト情報をもとに前記表示装置の
   画面上にレイアウトする画面レイアウト手段とを具備す
   ることを特徴とするユーザインタフェース画面構築シス
   テム。
2. 【請求項２】 前記レイアウト規則適用手段は、前記選
   択されたレイアウト規則を適用することで作成されるイ
   ンタフェース部品が１画面内にレイアウトできなくなる
   毎に新たに画面を作成し、この新たな画面を対象として
   後続のインタフェース部品の画像情報に前記レイアウト
   規則を適用することを特徴とする請求項１記載のユーザ
   インタフェース画面構築システム。
3. 【請求項３】 前記レイアウト規則適用手段は、前記選
   択されたレイアウト規則を適用することで作成されるイ
   ンタフェース部品が１画面内にレイアウトできない場
   合、当該部品の大きさ及び部品のレイアウト間隔の少な
   くとも一方を調整して１画面内にレイアウトすることを
   特徴とする請求項１記載のユーザインタフェース画面構
   築システム。
4. 【請求項４】 前記レイアウト規則管理手段は、前記ユ
   ーザインタフェース部品を格子状に一定間隔でレイアウ
   トするためのレイアウト規則及び前記ユーザインタフェ
   ース部品を環状に一定角度でレイアウトするためのレイ
   アウト規則の少なくとも１つを管理していることを特徴
   とする請求項１記載のユーザインタフェース画面構築シ
   ステム。
5. 【請求項５】 前記表示装置の画面上にレイアウトされ
   る前記各ユーザインタフェース部品の画像情報及びレイ
   アウト情報を対応するユーザインタフェース画面毎に保
   持・管理するデータ管理手段を更に具備し、 前記画面レイアウト手段は、完成したユーザインタフェ
   ース画面の各ユーザインタフェース部品を前記データ管
   理手段に再表示可能なように保持・管理させることを特
   徴とする請求項１記載のユーザインタフェース画面構築
   システム。