JPH1097415A - Ｇｕｉ画面レイアウト設計方式 - Google Patents

Abstract

(57)【要約】 （修正有） 【課題】 ＧＵＩガイドライン等に基づく制約を伴うＧ
ＵＩ画面レイアウトの設計の生産性、保守性を向上させ
ること。 【解決手段】 ＧＵＩ画面レイアウト設計方式は、ＧＵ
Ｉビルダ部１と、ＧＵＩ部品についてあらかじめユーザ
自身が定義する制約を記述し保持する制約記述部４とで
構成され、ＧＵＩビルダ部１は、ユーザが設定するＧＵ
Ｉ部品の属性と属性値のデータを保持し管理する属性値
管理部７と、制約記述部４に記述された個々の制約とＧ
ＵＩ部品の属性との関連データを保持管理する制約−属
性値関連管理部８と、属性値管理部７のデータが制約記
述部４に記述された個々の制約を満たすか否かチェック
する制約チェック部９とを有し、ユーザがＧＵＩ部品の
属性値を設定する毎に、制約を満たすか否かチェック
し、該チェック結果を表示させることにより、制約を満
たすＧＵＩ部品の設定のみを行えるようにする。

Description

【発明の詳細な説明】

【０００１】

【発明の属する技術分野】本発明は、ユーザによる情報
参照・入力の操作性を向上させるグラフィカルユーザイ
ンターフェース（以下、ＧＵＩと略称する）を備える計
算機上のプログラムの開発における、ＧＵＩ画面レイア
ウトを設計する装置、方法に関する。

【０００２】

【従来の技術】計算機上で実行されるプログラムに対す
るユーザインターフェースとして、画面上で視覚的に情
報の参照、入力操作を行うことができるＧＵＩが多く採
用されている。

【０００３】ＧＵＩを採用したプログラムのＧＵＩ部分
の設計・開発は、初期の頃はすべてプログラムのコーデ
ィングによってＧＵＩ部品（ボタン、ラベル、入力部品
等）の配置、イベント処理等の実現を行っていたが、現
在では、このＧＵＩの構築を支援する環境として、ＧＵ
Ｉビルダと呼ばれるＧＵＩ構築ツールを利用することが
多い。

【０００４】このＧＵＩビルダとは、それ自身がＧＵＩ
を備えるプログラムとなっており、ユーザがＧＵＩビル
ダの画面上で、ＧＵＩ部品をマウス等の入力装置を使っ
てＷＹＳＩＷＹＧ(what you see is what you get)形式
で自由に配置し、大きさ、色等についてはＧＵＩ部品属
性として値を設定することによって、各ＧＵＩ部品の位
置、大きさ、色等の決定、すなわちＧＵＩ画面レイアウ
ト設計を行うためのものである。さらにＧＵＩビルダ
は、その画面上で設計したレイアウトをもとに、最終的
にＧＵＩ部分のプログラムを生成する。

【０００５】一方、現実にＧＵＩを備えるシステムの開
発を行う場合には、ＧＵＩ画面のレイアウトの見かけや
ＧＵＩによる操作に関してシステム全体の統一性が顧客
から求められるため、開発前に、画面レイアウト、すな
わちＧＵＩ部品の配置位置や色等に関する共通的な規約
をＧＵＩガイドラインとして定めて文書にしておき、そ
れに沿ってＧＵＩ画面レイアウト設計を行うことが一般
的である。また、開発後、設計が完成した実際の画面を
顧客に見せた後に、ＧＵＩ部品の配置位置、色等の変更
要求、すなわちＧＵＩガイドラインの変更を顧客から要
求されることも現実問題としてあり得る。なお、このよ
うに、ＧＵＩビルダを用いてＧＵＩ画面レイアウト設計
を行うに際してユーザ自らがＧＵＩガイドライン等に基
づいて定義しまたは変更を行うＧＵＩ部品属性等の制約
を本明細書では以下「ガイドライン制約」という。

【０００６】しかし、ＧＵＩビルダ自体には当然上記し
たガイドライン制約などはまったく考慮されていず、Ｇ
ＵＩ部品を画面上のどこにでも配置することができてし
まう等、一般的に部品属性値の設定が無制限であるた
め、従来のＧＵＩビルダを用いて現実にシステム開発を
行う場合は、開発者自身がＧＵＩガイドライン等の文書
を参照し、理解し、ガイドライン制約を満たしているか
を自分の目で見て判断しながら、ＧＵＩガイドラインに
沿ったＧＵＩ画面レイアウトを設計しなければならな
い。

【０００７】この問題に関連し、ＧＵＩビルダ上でのＧ
ＵＩ画面レイアウト設計に制約を取り込んだ技術とし
て、特開平５−２２４９０４号に開示された技術があ
る。図７は特開平５−２２４９０４号で開示されている
装置のブロック図である。

【０００８】図７において、ＧＵＩ３２は表示装置３９
の制御プログラムである。編集装置３１は、その本体で
ある処理装置３３に、ＧＵＩ３２の複数のＧＵＩ部品を
管理するブラウザ３４と、これらの部品を単位要素とし
て編集されるＧＵＩデータを管理する編集データ管理部
３６と、入力装置を通じてのユーザ入力をＧＵＩ３２の
イベントとして受け取り、この受け取ったイベントを解
析してブラウザ３４および編集データ管理部３６の処理
態様を決定する編集動作解析部３５とを備えて構成され
ている。記憶装置３８はＧＵＩデータやＧＵＩ部品のデ
ータを格納保持する。

【０００９】この編集装置３１では、各ＧＵＩ部品はそ
の属性として、構造や存在条件等を示す型や、イベント
についてのこの型により与えられる制約条件を有する。
編集動作解析部３５では、各ＧＵＩ部品の型や、型によ
り与えられる制約条件をもとに、毎回イベントの適否を
型推論し、その結果、該当する部品についての制約条件
が満たされないと判断したときは、そのイベントに対応
するユーザの入力を無効とする。

【００１０】すなわち、特開平５−２２４９０２号に開
示されているのは、ＧＵＩビルダに組み込みの形で各Ｇ
ＵＩ部品等についての制約条件を定義し、ＧＵＩビルダ
に対するユーザの各操作について、その制約を満たさな
い操作を拒否し、制約を満たす操作のみを許可するとい
う装置、手法である。

【００１１】この特開平５−２２４９０２号で考えられ
ているＧＵＩ部品等についての制約は型を用いて記述さ
れていて型推論によってチェックが行われる。制約の記
述は例えば、

【００１２】

【数１】 は、ｘ１というＧＵＩ部品が型Π１をもって存在するこ
とを表し、

【００１３】

【数２】 は、Π１の型の部品はΠ２の型の部品に重ね合わせられ
るということを表している。

【００１４】また、

【００１５】

【数３】 という推論規則は、以下の意味を持つ。 （１）予め用意されている部品群Γから、現在Δ１，ｘ
１で示されるＧＵＩ部品群、Δ２，ｘ２で示されるＧＵ
Ｉ部品群、Δ３で示されるＧＵＩ部品が作られている。 （２）部品ｘ１の構造は型Π１が、部品ｘ２の構造は型
Π２がそれぞれ示している。 （３）また、部品群Γのもとで、型Π２が示す構造の上
に型Π１が示す構造を重ね合わせることができる。 （４）以上の条件のもとで、実際に部品ｘ１が部品ｘ２
の上に重なった部品ｘ１∠ｘ２が作られ、その構造を示
す型がΠ１∠Π２である。

【００１６】

【発明が解決しようとする課題】しかし、ガイドライン
制約を伴うＧＵＩ画面レイアウトの設計を従来技術を用
いて現実に行おうとした場合、次に挙げるような問題が
生じる。 ［１］ＧＵＩガイドラインのように、ＧＵＩビルダのユ
ーザが後から定義を行ったり変更を行うようなユーザ自
身によって定義されるガイドライン制約が、従来のＧＵ
Ｉビルダでは考慮されていない。

【００１７】特開平５−２２４９０４号で考えられてい
る制約は、例えばボタンの上にはボタンを配置できない
等の、ＧＵＩとして一般的にあり得ないものを主として
制約として定義するものであり、その制約を型を用いて
表現し、型推論によって判断を行うものなので、実際の
ＧＵＩガイドラインに現れるような、具体的な属性値を
考えた制約の記述を考慮したものではない。

【００１８】そのため、ＧＵＩガイドラインに沿ったＧ
ＵＩ画面レイアウト設計を行うためには、特開平５−２
２４９０４号で述べられている制約とは別に、開発者が
ＧＵＩガイドラインの文書を参照し、そのガイドライン
制約を理解し、そのガイドライン制約を満たすようなＧ
ＵＩ画面レイアウトを考慮しながら設計開発を行う必要
がある。そのため、ガイドライン制約を伴うシステムの
ＧＵＩ画面レイアウト設計工数が大きくなるという問題
がある。 ［２］ガイドライン制約がシステムの開発途中で変更さ
れることがあり得るが、大規模なシステム開発において
は、ＧＵＩ画面数、ＧＵＩ部品数が非常に数多くなるた
め、ガイドライン制約が変更された場合には、その変更
に応じて、どの画面のどの部品属性を変更すべきかを逐
一調べ、それらをすべて修正しなければならず、修正の
ための工数が大きくなる。

【００１９】この問題に関し、特開平５−２２４９０４
号で考えられている制約は、ＧＵＩビルダ（部品）を提
供するときに与えられる不可変な制約で、後から変更さ
れる可能性があるユーザ自身が定義したガイドライン制
約としての位置付けは想定されていない。したがって、
制約が変更された場合の影響を特定するなどの、制約の
変更に対する支援が考慮されていない。

【００２０】そのため、ＧＵＩ部品等についてのガイド
ライン制約が変更された場合は、従来通り、その制約の
変更で影響を受けるＧＵＩ部品をすべての画面から探し
出して修正する必要があるため、関連するＧＵＩ画面レ
イアウトの修正工数が大きい。

【００２１】本発明の目的は、上記のような従来技術の
問題を解決し、ＧＵＩガイドライン等に基づく制約を伴
うＧＵＩ画面レイアウトの設計の生産性、保守性を向上
させることにある。

【００２２】

【課題を解決するための手段】上記目的を達成するため
に、本発明によるＧＵＩ画面レイアウト設計方式は、Ｇ
ＵＩ画面レイアウト設計およびＧＵＩ画面プログラムの
生成を行うＧＵＩビルダ部と、ＧＵＩ部品についてあら
かじめユーザ自身が定義する制約を記述し保持する制約
記述部とで構成され、前記ＧＵＩビルダ部は、ユーザが
設定する前記ＧＵＩ部品の属性と属性値のデータを保持
し管理する属性値管理部と、前記制約記述部に記述され
た個々の制約とＧＵＩ部品の属性との関連データを保持
管理する制約−属性値関連管理部と、前記属性値管理部
のデータが前記制約記述部に記述された個々の制約を満
たすか否かチェックする制約チェック部と、前記制約チ
ェック部でのチェック結果をユーザに表示するために処
理するチェック結果処理部とを有し、ユーザがＧＵＩ部
品の属性値を設定する毎に、前記制約−属性値関連管理
部が該ＧＵＩ部品についての制約の有無を判断し、前記
制約−属性値関連管理部が該ＧＵＩ部品についての制約
があると判断したときには前記制約チェック部が前記制
約記述部から呼び出した制約と前記属性値管理部からの
データに基づき制約を満たすか否かチェックし、該チェ
ック結果を前記チェック結果処理部を介して表示させる
ことにより、制約を満たすＧＵＩ部品の設定のみを行え
るようにしたことを特徴とする。

【００２３】かかるＧＵＩ画面レイアウト設計方式を採
用することにより、ＧＵＩビルダのユーザはＧＵＩビル
ダ上で設定可能な属性値に合わせてＧＵＩ部品の設定変
更を行っていけば、ユーザがＧＵＩガイドライン等の制
約を意識しなくても該制約を満たすＧＵＩ画面レイアウ
ト設計を行うことができ、設計工数を削減することがで
きる。

【００２４】さらに、前記ＧＵＩ画面レイアウト設計方
式において、前記ＧＵＩビルダ部が、前記制約記述部に
記述された制約の更新の有無と更新された制約の特定に
ついてチェックし管理する制約更新管理部を有し、前記
ＧＵＩビルダ部を起動させる毎に、前記制約更新管理部
が制約の更新の有無のチェックと更新された制約の特定
を行い、前記制約チェック部を介して更新された制約に
関連する設定済のＧＵＩ部品を表示させ、かつ該ＧＵＩ
部品の属性値が該更新された制約を満たすか否かチェッ
クさせ表示させるようにすれば、ＧＵＩガイドライン変
更時に、関連してどのＧＵＩ部品のどの属性を修正すべ
きかを示すことができるようになり、ＧＵＩガイドライ
ン等の制約の変更時のＧＵＩ画面レイアウト修正工数を
削減することができる。

【００２５】

【発明の実施の形態】以下、本発明による実施の形態に
ついて図面を参照して説明する。 ［構成の説明］図１は本発明によるＧＵＩ画面レイアウ
ト設計方式の全体の構成を示すブロック図である。本発
明によるＧＵＩ画面レイアウト設計方式はＧＵＩビルダ
部１と制約記述部４とで構成されている。

【００２６】ＧＵＩビルダ部１は、基本的な機能として
は従来のＧＵＩビルダと同様であり、表示装置（図示せ
ず）でＧＵＩビルダ画面２を見ながら、入力装置（図示
せず）を使って、ＧＵＩ部品の配置、属性値の設定等を
行い、ＧＵＩ画面を設計し、最終的に画面プログラム３
を生成するものである。

【００２７】本発明ではこのＧＵＩビルダ部１の外部
に、ＧＵＩガイドライン等に基づきユーザ自身が定義す
る制約を記述するための制約記述部４を設ける。この制
約記述部４はファイル、データベース等の形で制約の記
述を格納保持可能である。

【００２８】制約記述部４は、制約を、 ａｔｔｒ（画面名、部品の種類、部品名、属性名） 演
算子 属性値 の形式で記述し、保存する。画面名、部品名には特別な
記号として＊を記述することができ、これは任意の画面
名、部品名を意味する。

【００２９】ここで演算子は以下のものを利用できる。

【００３０】＝＝ ：等しい ！＝ ：等しくない ＞ ：大きい ＞＝ ：大きい、または等しい ＜ ：小さい ＜＝ ：小さい、または等しい また、以下の演算子も利用することができる。

【００３１】ｎｏｔ （制約） ａｎｄ （制約，制約） ｏｒ （制約） 本発明によるＧＵＩ画面レイアウト設計方式では、ＧＵ
Ｉビルダ部１で設計編集されるすべてのＧＵＩ部品の属
性が、制約記述部４でこの形式で記述されるガイドライ
ン制約を満たさなければならないように構成されてい
る。

【００３２】次に、ＧＵＩビルダ部１内の構成について
説明する。

【００３３】まず、エディタ部５は、ＧＵＩビルダ部１
自身のＧＵＩ部分であり、ＧＵＩビルダ画面２の表示、
入力の受付を行う部分である。属性値管理部７は、ＧＵ
Ｉビルダ部１上で設定される、ＧＵＩ部品の属性と属性
値に関するデータを保持し管理する部分である。また、
制約チェック部９は、設定されたあるＧＵＩ部品の属性
値に対して、制約記述部４中に格納されている関連する
制約記述を呼び出し解釈して、その設定された属性値が
制約を満たしているか否かを判断し、その結果をチェッ
ク結果処理部１１に受け渡す部分である。

【００３４】制約−属性値関連管理部８は、制約記述部
４中の個々の制約と、属性値管理部７中の部品属性との
関連（どの制約がどの部品属性に関連するものか）を管
理している部分である。

【００３５】制約更新管理部１０は、制約記述部４が更
新されたか否か、更新された場合は制約記述部４中のど
の制約が更新されたか、あるいは新しい制約が加えられ
たかについてチェックし管理する部分である。

【００３６】チェック結果処理部１１は、部品の属性値
が制約を満たしているか否かについて制約チェック部９
がチェックした結果に基づいて、エディタ部５を介して
エラーメッセージを出したり、違反をしているＧＵＩ部
品を表示する、等ガイドライン制約に従った画面設計を
適切に進行させるための処理を行う部分である。

【００３７】本発明は以上の要素から構成される。次
に、本発明の動作の説明を行う。 ［動作の説明］以下、本発明の動作をユーザの利用手順
に沿って、図１、２、３、４を用いて説明する。

【００３８】まず、ＧＵＩを備えるプログラムのシステ
ム開発に先立って、ＧＵＩガイドライン（ＧＵＩ画面の
共通的な規約）を作成し、そのＧＵＩガイドラインに基
づいて制約記述部４に制約を記述し格納する。ここで
は、制約記述部４はファイルで実現するものとする。

【００３９】制約としては、例えば、特定のボタンの配
置できる座標の範囲であるとか、特定のボタンの背景
色、特定のラベルに指定できるフォント名等が考えられ
る。この記述された制約条件により、実際にＧＵＩの開
発に際してＧＵＩビルダ部１によって設定、変更される
ＧＵＩ部品の属性はすべてこの制約条件を満たさなけれ
ばならないことになる。

【００４０】続いて、ユーザ（ＧＵＩを備えるプログラ
ムのシステム開発者）はこのＧＵＩビルダ部１でＧＵＩ
画面レイアウト設計を行う。この手順を図１、図２およ
び図４を用いて説明する。図２は、ＧＵＩビルダ部１を
用いての設計手順を説明するフローチャートであり、図
４は図１中のＧＵＩビルダ画面２の画面例を示す図であ
る。なお、ＧＵＩビルダ部１上の利用手順の基本的な流
れは、従来のＧＵＩビルダの利用手順と同様である。

【００４１】まず、ＧＵＩビルダ部１を起動させ（Ｓ
１）、実際の設計に入る前に制約記述部４の内容が更新
されているか否かチェックする（Ｓ２）。なお、更新さ
れている場合については後段で詳述するので、ここでは
更新されていなかったとして先に進む。

【００４２】次に、ＧＵＩ画面のレイアウト設計を開始
して（Ｓ３）、まず新たにＧＵＩ部品を配置する手順に
ついて説明する。新たにＧＵＩ部品を配置する場合（Ｓ
４）は、図４に示す部品パレット２２からマウスで配置
したい部品を選択し、インスタンスとしての部品名を入
力する。これは制約記述部４で部品名を利用して制約を
記述しているためである。部品名を入力した後、現在設
計している画面２３の一点をマウスでクリックすること
によって部品の配置場所を決定する。

【００４３】ここで、まず、制約−属性値関連管理部８
（図１参照）が属性値管理部７を介して、今配置しよう
としている部品名に関連する制約があるかどうかをチェ
ックする（Ｓ５）。もし制約がなければそのまま配置可
能である（Ｓ６）。

【００４４】もし、制約があればクリックされた位置の
座標に対して、制約チェック部９は関連する制約を制約
記述部４から呼び出し、解釈し、その座標の属性値が制
約を満たしていればその部品はそこにそのまま配置され
る（Ｓ６）。もし制約を満たしていなければその位置へ
の配置は無効として配置前の状態のままで、チェック結
果処理部１１を介してＧＵＩビルダ画面２にエラーメッ
セージを出す（Ｓ７）。

【００４５】なお、ＧＵＩ部品についての大きさ、色等
の部品属性を設定あるいは変更する場合（Ｓ８）につい
ても、ＧＵＩ部品の配置操作の場合と同様に制約−属性
値関連管理部８が属性値管理部７（図１参照）を介し
て、今設定、変更しようとしている部品名に関連する制
約があるかどうかをチェックし（Ｓ９）、制約がない、
あるいは制約を満たしている場合は、そのまま部品属性
の設定、変更が行われる（Ｓ−１０）。もし、制約を満
たしていなければその設定、変更が無効としてＧＵＩビ
ルダ画面２にエラーメッセージが出される（Ｓ７）。

【００４６】次に、ＧＵＩガイドライン等に基づくユー
ザ定義の制約が変更された場合の操作について図１、図
２および図３を用いて説明する。ここでは、ＧＵＩガイ
ドラインを設計、変更する人と、ＧＵＩビルダ部１を利
用してＧＵＩ画面を設計する人とは別であると考えてい
るため、ＧＵＩガイドラン等の変更はＧＵＩビルダ部１
の使用中には行わないとする。

【００４７】まず、ガイドライン制約を変更する場合
は、制約記述部４の対応する制約記述の内容を変更する
（これを以下「制約の更新」という）。

【００４８】ＧＵＩビルダ部１が起動された時（Ｓ１）
には必ず制約更新管理部１０によって制約記述部４中の
制約が更新されたかどうか判断される（Ｓ２）。制約更
新管理部１０が、制約記述部４が更新されたと判断する
と、以下手順は図３に示すフローに移行する。次いで、
制約更新管理部１０は制約が更新されたと判断した場合
はどの部品属性について制約が更新されたか、あるいは
新しい制約が加えられたかについてチェックする（Ｆ
１）。そして、制約更新管理部１０は更新された制約デ
ータを制約チェック部９に受け渡し、制約チェック部９
は更新された制約データを受け取ると、その制約を現在
までに設定したＧＵＩ画面レイアウトが満たしているか
どうかをチェックする（Ｆ２）。

【００４９】もし変更された制約を満たさない部品属性
があれば、その部品名をチェック結果処理部１１に渡
し、チェック結果処理部１１はその部品をＧＵＩビルダ
画面２上で色を変えるなどして示す（Ｆ４）。また、変
更された制約を満たさない部品属性がない場合でも、そ
の部品属性は制約の変更に関連があるということで、色
を変えるなどしてＧＵＩビルダ画面２上に示す（Ｆ３、
Ｆ５）。

【００５０】

【実施例】以下、本発明の一実施例について、図１、図
２、図３および図４を参照して説明する。

【００５１】まず、ＧＵＩを備えるプログラムのシステ
ム開発の前に、ＧＵＩガイドライン（ＧＵＩ画面の共通
的な規約）を設計し、そのＧＵＩガイドラインをもとに
制約記述部４に制約の記述を行い格納する。

【００５２】本実施例では、ＧＵＩガイドラインにおい
て、次のような制約を共通規約として定めることにす
る。 規約１：ボタンは画面の右から１００ドット以内にしか
配置してはいけない。 規約２：ボタンの幅は１００ドットか、２００ドットで
なければならない。 規約３：画面１のラベルの背景色は赤か青でなければな
らない。

【００５３】制約記述部４は、このＧＵＩガイドライン
のようなユーザ定義の制約を記述するものであり、記述
形式は発明の実施の形態の［構成］の欄で説明した通り
である。制約記述部４に制約を記述した後は、開発され
るＧＵＩのＧＵＩ部品の属性は、すべてこの制約記述部
４に記述された制約を満足する値でなければならなくな
る。

【００５４】以下に挙げるのは、上記したＧＵＩガイド
ラインの規約１、２、３の、制約記述部４での記述例で
ある（但し、設計中の画面の横幅を１０００ドットとす
る）。

【００５５】 制約１： attr (*, ボタン, *, left) >= 1000 - 100 制約２： or ((attr (*, ボタン, *, width) == 100),
(attr (*, ボタン, *, width) == 200)) 制約３： or ((attr (画面1, ラベル, *, backcolor) =
= red),(attr (画面1, ラベル, *, backcolor) == blu
e)) 続いて、ユーザは、このＧＵＩビルダ部１上でＧＵＩ画
面レイアウトの設計を開始する。このＧＵＩ画面レイア
ウト設計をするユーザと、ＧＵＩガイドラインを設計す
るユーザは一般に別のユーザである。

【００５６】次に、図１、２、３、４を参照しながら、
本実施例を動作手順にしたがって詳細に説明する。

【００５７】ＧＵＩビルダ部１上でのＧＵＩ画面レイア
ウトの設計方法の基本的な流れは従来のＧＵＩビルダを
用いる方法と大きくは変わらない。

【００５８】ＧＵＩビルダ部１上で部品の配置を行う場
合（図２のステップＳ４）は、部品パレット２２（図４
参照）からマウスでクリックすることによって、配置し
たいＧＵＩ部品を選択する。ここではＧＵＩ部品として
ボタンを選択する。次に、そのＧＵＩ部品につける名前
（部品名）を入力する。これは上記の制約記述が部品名
を用いて属性を指定し、その制約を記述しているためで
ある。ここではこのボタンに対し、“ボタン１”という
名前をつけることにする。

【００５９】次に、このＧＵＩ部品（ここではボタン）
を配置したい場所をクリックすれば、そこに配置され
る。但し、このクリックを行った際に、制約−属性値関
連管理部８がこの部品名（ここでは“ボタン１”）に関
連する制約があるかどうかを調べる。

【００６０】制約−属性値関連管理部８は、制約中の＊
を展開し、例えばテーブル形式で、どの制約とどの部品
属性とが関連するかを管理するものである。例えば“ボ
タン１”のｘ座標に関して、上記した制約１が関連する
ことがわかるようになっている。このテーブル形式等に
よる制約と部品属性との関連データは、例えばユーザが
制約記述部４に制約を記述し格納した後、制約チェック
部９と属性値管理部７を介して制約−属性値関連管理部
８に生成される。

【００６１】もし、関連する制約がなければクリックし
た位置にそのまま配置することができる（Ｓ６）が、こ
の例のように関連する制約（制約１）がある場合は、次
に、制約チェック部９が現在の属性値（クリックした位
置座標）が、その制約（制約１）を満たしているかどう
かをチェックする（Ｓ５）。

【００６２】ここで制約が満たされていれば、クリック
した位置にそのまま配置することができる（Ｓ６）が、
制約が満たされていなければ、制約に違反している旨
と、その制約の内容を表示し（Ｓ７）、現在の位置座標
の選択を無効にし、配置場所選択の状態（Ｓ４）に戻
る。この制約チェックの結果に依存する処理は、チェッ
ク結果処理部１１を通して行われる。

【００６３】制約チェック部９は、図５に示されるよう
に制約チェックエンジン部９ａ、演算子定義のデータを
保持する演算子定義部９ｂ、および属性値定義のデータ
を保持する属性値定義部９ｃから構成されている。

【００６４】属性値定義は、属性値管理部７が管理する
属性値を attr (画面名，部品の種類，部品名，属性) = 属性値 の形式で持つものである。

【００６５】今、例えば属性値管理部７からのデータに
基づいて次のように定義がされたとする。 attr (画面1, ボタン, ボタン1, left) = 800 attr (画面1, ボタン, ボタン1, top) = 500 attr (画面1, ボタン, ボタン1, width) = 100 attr (画面2, ボタン, ボタン2, width) = 200 attr (画面1, ラベル, ラベル1, backcolor) = red attr (画面1, ラベル, ラベル2, backcolor) = blue attr (画面2, ラベル, ラベル3, backcolor) = blue 演算子定義は、比較のための演算子等に関するデータ
で、例えば、演算子＝＝，ａｎｄについては、 x == x = true x == y = false and (true, true) = true and (false, x) = false and (x, false) = false のように、演算子＝＝，ａｎｄが成り立てばｔｒｕｅ、
成り立たなければｆａｌｓｅとなるように定義されてい
る。

【００６６】制約チェックエンジン部９ａは、制約記述
部４から呼び出した制約について、属性値管理部７から
のデータに基づき属性値定義の＝の左辺、演算子定義の
＝の左辺とマッチする部分について、属性値定義の＝の
右辺、演算子定義の＝の右辺で置き換え（書き換え）を
行い、その結果ｔｒｕｅまで書き換えられれば制約を満
たす、ｆａｌｓｅであれば制約を満たさない、とするも
のである。

【００６７】今、例としてボタンの配置された座標が
（８００，５００）であったとすると制約１が満たされ
ないので、指定した場所へのボタン１の配置は無効とい
うことになる。

【００６８】次に、ＧＵＩ部品の配置以外の、別の属性
の設定の場合について説明する。

【００６９】ＧＵＩ部品の大きさについては、ＧＵＩ部
品の周囲の部分をマウスでクリックし、そのままドラッ
グすることで大きさを変化させる。この場合はドラッグ
を離した段階で制約のチェックを行い、制約を満たす大
きさであれば有効、制約を満たさない大きさであれば無
効とする。

【００７０】その他、ＧＵＩ部品の色等については、こ
こではＧＵＩビルダ部１のメニューから開く、属性エデ
ィタ２４（図４参照）で、設定するものとする。

【００７１】属性エディタ２４とは、現在選択されてい
るＧＵＩ部品の各属性を設定するためのエディタで、Ｇ
ＵＩ部品の各属性について、選択入力、または値入力に
よって属性値を設定できるものとする。

【００７２】この場合はこの属性エディタ２４で、ある
属性に属性値を設定した段階で制約のチェックを行い、
制約を満たす属性値であれば有効、制約を満たさない属
性値であれば無効とする。

【００７３】以上のように、ＧＵＩ部品の配置、属性値
の設定を、制約記述中の制約の自動チェックが行われな
がら繰り返すことで、ＧＵＩ画面レイアウトの設計を行
う。次に、ＧＵＩガイドライン等に基づくガイドライン
制約が変更された場合の操作について説明する。いま、
ＧＵＩガイドラインを設計、変更する人と、ＧＵＩビル
ダ部１を利用してＧＵＩ画面を設計する人は別であると
考えているため、ＧＵＩガイドラインの変更はＧＵＩビ
ルダ部１の使用時には行わないと考えている。

【００７４】まず、ＧＵＩガイドライン等の制約を変更
する場合は、対応する制約記述部４の制約記述を変更す
る。ここで、例えば上記したＧＵＩガイドラインの規約
３が次のように変更されたとする。 規約３：画面１のラベルの背景色は赤か黄でなければな
らない。 この場合、この変更に合わせて制約記述部４中の制約３
も次のように変更する。 制約３： or ((attr (画面1, ラベル, *, backcolor) =
= red),(attr (画面1, ラベル, *, backcolor) == yell
ow)) ＧＵＩビルダ部１は起動時に制約更新管理部１０によっ
て制約記述が更新されたかどうか、更新された場合は制
約記述部４中のどの制約が更新されたか、あるいは新し
い制約が加えられたか否かをチェックする（図２中ステ
ップＳ２）。

【００７５】この制約更新管理部１０が制約記述部４が
更新されたと判断すると、その制約（この場合制約３）
を制約チェック部９に受け渡す。制約チェック部９は更
新された制約を受け取ると、その制約を現在までに設定
したＧＵＩ画面レイアウトが満たしているかどうかをチ
ェックする（図３中ステップＦ２）。

【００７６】制約チェック部９は、まず制約−属性値関
連管理部８を通して、制約３がＧＵＩ部品のラベル１と
ラベル２に関連することを知ることができるようになっ
ている。制約チェック部９はラベル１の属性値が制約３
を満たすかどうかチェックし、次にラベル２の属性値が
制約３を満たすかどうかチェックする（Ｆ２）。

【００７７】もし変更された制約を満たさない部品属性
があれば、その部品属性名をチェック結果処理部１１に
渡し、チェック結果処理部１１はその部品をＧＵＩビル
ダ画面２上で色を変えるなどして示す（Ｆ４）。

【００７８】この場合はラベル１は変更された制約を満
たしているが、修正する可能性があるということで、色
を変えて（ラベル２とも色を変えて）示す。

【００７９】

【発明の他の実施の形態】図６は本発明によるＧＵＩ画
面レイアウト設計方式の第２の実施の形態の機能ブロッ
ク図である。図６において、図１と同一の参照番号で示
す要素の機能は図１とまったく同じである。異なってい
る点は、図１で示した実施の形態のように制約記述部４
をＧＵＩビルダ部１の外部ファイルのような形式で持つ
のではなく、ＧＵＩビルダ部１内部に制約記述部４をデ
ータとして持ち、専用の制約エディタ部１２を持ってい
ることである。動作については第１の実施の形態と同じ
である。

【００８０】なお、第１の実施の形態のように制約記述
部４を外部ファイルのような形式で持ったときは、制約
を後から変更しようとする場合や制約を変更後に一括し
てその影響を特定する場合等に、ＧＵＩビルダ部１内に
制約記述部４を設けるのに比し、便宜である場合があ
る。

【００８１】

【発明の効果】本発明による第１の効果は、ＧＵＩガイ
ドライン等に基づく制約を伴うＧＵＩ画面レイアウト設
計において、従来ユーザがＧＵＩガイドライン等の文書
を参照し、その制約を理解し、制約を満たしているかど
うかをユーザ自らが判断しながら行っていたＧＵＩ画面
レイアウト設計の工数を削減することができることであ
る。

【００８２】その理由は、まずＧＵＩガイドライン等に
基づきユーザ自らが定義するガイドライン制約をあらか
じめ制約記述として記述し保持しておくことができ、Ｇ
ＵＩ画面レイアウト設計時には制約チェック部によって
その制約を満たさないようなＧＵＩ部品の属性値設定は
システム的に不可能にするからである。すなわち、制約
を満たすようなＧＵＩ部品の属性値設定を自動的にナビ
ゲートすることによって、ユーザがＧＵＩガイドライン
等の制約を意識せずに、ＧＵＩビルダ上でＧＵＩ画面レ
イアウト設計が行えるためである。

【００８３】本発明による第２の効果は、ＧＵＩガイド
ライン等に基づく制約を伴うＧＵＩ画面レイアウト設計
において、品質向上、テスト工数の削減が図れることで
ある。

【００８４】その理由は、制約記述部、制約チェック部
によってＧＵＩガイドライン等に基づく制約を満たすよ
うな属性値の設定以外は設定不可能になるため、ＧＵＩ
ガイドライン等に基づく制約に違反するような画面レイ
アウトが作成されるというバグは自動的になくなるため
である。

【００８５】本発明による第３の効果は、ＧＵＩガイド
ライン等に基づく制約を伴うＧＵＩ画面レイアウト設計
において、従来はＧＵＩガイドラインが変更されるとど
の画面のどの部品がその変更の影響を受けるかを逐一調
べながらすべて修正していかなければならなかったのに
対して、ＧＵＩガイドライン変更時のＧＵＩレイアウト
修正工数の削減が図れることである。

【００８６】その理由は、制約記述中の各制約と、その
各制約に関連する部品、および属性との関係を管理する
制約−属性値関係管理部と、制約記述が更新されたかど
うかをチェックする制約更新管理部と、制約の変更によ
って制約違反となった部品をＧＵＩビルダ画面上で示し
チェック結果処理部とを設けることにより、設計途中で
ＧＵＩガイドライン等の制約、すなわち制約記述が変更
された場合に、その変更に伴って修正すべきＧＵＩ部品
属性を特定し、ＧＵＩビルダ画面上で示すことが可能と
なることと、また、その際の修正も、制約チェック部に
より、変更後の制約を満たす設定しか許されないので、
制約の変更内容を意識せずに容易に行うことができるた
めである。

【００８７】以上、全体の効果として、ＧＵＩガイドラ
イン等の制約を伴うＧＵＩレイアウト設計に関する生産
性、保守性の向上が期待できる。

【図面の簡単な説明】

【図１】本発明によるＧＵＩ画面レイアウト設計方式の
全体の構成を示すブロック図である。

【図２】本発明によるＧＵＩ画面レイアウト設計方式の
設計手順を説明するフローチャートである。

【図３】本発明によるＧＵＩ画面レイアウト設計方式の
設計手順を説明するフローチャートである。

【図４】本発明によるＧＵＩ画面レイアウト設計方式の
ＧＵＩビルダの画面例を示す図である。

【図５】本発明によるＧＵＩ画面レイアウト設計方式に
おける制約チェック部のブロック図である。

【図６】本発明によるＧＵＩ画面レイアウト設計方式の
他の実施の形態の全体の構成を示すブロック図である。

【図７】従来技術である特開平５−２２４９０４号に開
示された装置の機能ブロック図である。

【符号の説明】

１ ＧＵＩビルダ ２ ＧＵＩビルダ画面 ３ 生成される画面プログラム ４ 制約記述部 ５ エディタ部 ６ プログラム生成部 ７ 属性値管理部 ８ 制約−属性値関連管理部 ９ 制約チェック部 １０ 制約更新管理部 １１ チェック結果処理部

Claims (3)

【特許請求の範囲】
1. 【請求項１】 ＧＵＩ画面レイアウト設計およびＧＵＩ
   画面プログラムの生成を行うＧＵＩビルダ部と、ＧＵＩ
   部品についてあらかじめユーザ自身が定義する制約を記
   述し保持する制約記述部とで構成され、 前記ＧＵＩビルダ部は、ユーザが設定する前記ＧＵＩ部
   品の属性と属性値のデータを保持し管理する属性値管理
   部と、前記制約記述部に記述された個々の制約とＧＵＩ
   部品の属性との関連データを保持管理する制約−属性値
   関連管理部と、前記属性値管理部のデータが前記制約記
   述部に記述された個々の制約を満たすか否かチェックす
   る制約チェック部と、前記制約チェック部でのチェック
   結果をユーザに表示するために処理するチェック結果処
   理部とを有し、 ユーザがＧＵＩ部品の属性値を設定する毎に、前記制約
   −属性値関連管理部が該ＧＵＩ部品についての制約の有
   無を判断し、前記制約−属性値関連管理部が該ＧＵＩ部
   品についての制約があると判断したときには前記制約チ
   ェック部が前記制約記述部から呼び出した制約と前記属
   性値管理部からのデータに基づき制約を満たすか否かチ
   ェックし、該チェック結果を前記チェック結果処理部を
   介して表示させることにより、制約を満たすＧＵＩ部品
   の設定のみを行えるようにしたことを特徴とするＧＵＩ
   画面レイアウト設計方式。
2. 【請求項２】 前記ＧＵＩビルダ部が、更に前記制約記
   述部に記述された制約の更新の有無と更新された制約の
   特定についてチェックし管理する制約更新管理部を有
   し、前記ＧＵＩビルダ部を起動させる毎に、前記制約更
   新管理部が制約の更新の有無のチェックと更新された制
   約の特定を行い、前記制約チェック部を介して更新され
   た制約に関連する設定済のＧＵＩ部品を表示させ、かつ
   該ＧＵＩ部品の属性値が該更新された制約を満たすか否
   かチェックさせ表示させることを特徴とする請求項１に
   記載のＧＵＩ画面レイアウト設計方式。
3. 【請求項３】 前記制約記述部が前記ＧＵＩビルダ部内
   部に設けられていることを特徴とする請求項１または２
   に記載のＧＵＩ画面レイアウト設計方式。