JPH06131168A - ユーザインタフェース作成支援装置 - Google Patents

Abstract

(57)【要約】 【目的】 機器のユーザインタフェース（ＵＩ）部のグ
ラフィカルなデザインと動作のデザインを容易に行うこ
と。作成されたＵＩユーザインタフェース部のデザイン
の動作シミュレーションを容易に行うこと。 【構成】 機器のＵＩ部を予め定められた属性情報を有
する部品により設計するＵＩ作成支援装置であって、部
品の図形情報を編集して、前記ＵＩ部を描いた図形情報
を生成するグラフィックス編集部１２２と、前記生成さ
れた図形情報を持つ各部品についてその動作を指示する
記述を生成する動作編集部１２３とを備える。また、設
計された結果について動作シミュレーションを行うこと
ができる。

Description

【発明の詳細な説明】

【０００１】

【産業上の利用分野】本発明は、例えば複写機、ファク
シミリ装置、卓上計算機、電話機、テレビ、ビデオデッ
キ、カーステレオ、洗濯機などの種々の分野の電気的製
品における操作部（コントロールパネル）のデザインと
動作を設計し、動作シミュレーションを行うユーザイン
タフェース作成支援装置に関し、製品のユーザインタフ
ェースコンセプトのプレゼンテーション、ユーザインタ
フェース画面の操作性の模擬テスト、機器の制御、情報
の検索などの広範囲の用途に利用できるものである。

【０００２】

【従来の技術】複写機における機能の拡大、デジタル
化、カラー化、ＦＡＸとの複合化等は、単にコピーをと
るという枠を越えて、複写機の目の前に立って原稿を加
工編集する創作的な空間をも提供しつつある。しかし、
一方では、ユーザは従来通りの操作と概念のもとで手早
く且つミスすることなしに”コピー”という作業をすす
めたいと期待している。予測のつかない操作手順はユー
ザに威圧感を与え、複写機の機能とは裏腹に、その評価
はけっして良いものとは言えなくなってしまう。機能の
充実、オフィス空間を演出する高品位な外観デザインに
加えて、コントロールパネルといわれる操作部のデザイ
ンと操作性品質の向上を総合的に検討していかなけれ
ば、複写機の真価をユーザに提供することはできない。
このような問題は、複写機のみに限らず、ユーザが操作
するユーザインタフェース部を有するその他の事務用機
器やあらゆる電化製品にも共通するところである。そこ
で、近年、コントロールパネル上での増大する操作ボタ
ンの数とそのレイアウトの問題を解決する方法として、
液晶パネルとタッチパネルを組み合せた対話型ユーザイ
ンタフェース（ＵＩ）が用いられるようになってきた。

【０００３】一方、アプリケーションプログラムのグラ
フィックユーザインタフェースを作成するための作成支
援ツールは、従来から知られている（例えば、特開平２
−２５４５３９号公報）。

【０００４】

【発明が解決しようとする課題】前記液晶パネルとタッ
チパネルの対話型ユーザインタフェースの設計に際して
は、操作に応じて表示の変化するグラフィックスとタイ
ミングを検討するために、デザイナは各変化の時点ごと
のデザインを紙上に多数描がかなければならず、この作
業は時間のかかる煩雑なものであった。また、そのよう
な多数の紙上に描いた静止した画像からデザインされた
製品の動作の推移を把握し、検討するのも容易ではなか
った。また、前記アプリケーションプログラムのグラフ
ィックユーザインタフェースを作成するための作成支援
ツールは、プログラムの作成を目的するものであり、機
器のコントロールパネルのようなユーザインタフェース
の作成、検討のための支援装置として適用できるもので
はなかった。

【０００５】本発明は、このような問題点を解決するこ
とを課題とするものである。即ち、本発明は、機器のユ
ーザインタフェース部のグラフィカルなデザインと動作
のデザインを容易に行うことのできるユーザインターフ
ェース作成支援装置を提供することを目的とするもので
ある。また、本発明は、上記作成されたユーザインタフ
ェース部のデザインの動作シミュレーションを容易に行
うことのできるユーザインターフェース作成支援装置を
提供することを目的とするものである。

【０００６】

【課題を解決するための手段】本発明は、機器のユーザ
インタフェース部を予め定められた属性情報を有する部
品により設計するユーザインタフェース作成支援装置で
あって、部品の図形情報を編集して、前記ユーザインタ
フェース部を描いた図形情報を生成する第１の手段（図
１の１２２）と、前記各部品についてその動作を指示す
る記述を生成する第２の手段（図１の１２３）とを備え
る。

【０００７】本発明の一態様においては、前記部品とし
て、ボタンなど操作の対象になる「触る部品」と、
メッセージ、状態などの変化を表す「表示する部品」
と、上記、の部品を配置する背景となる「背景に
なる部品」とが予め用意される。

【０００８】本発明の他の態様においては、前記予め用
意されている部品として、次の６種類とすることかでき
る。 他の部品の背景となる部品（フレームアイテムＦＲ
ＡＭＥ ＩＴＥＭ） フレーム上に動的な変数の表示（例、メッセージな
どの表示）を行う部品（インディケータアイテムＩＮＤ
ＩＣＡＴＯＲ ＩＴＥＭ） １つのトリガー領域を設定でき、トリガー領域の操
作によりオンＯＮとオフＯＦＦの状態を切り替える部品
（ボタンアイテムＢＵＴＴＯＮ ＩＴＥＭ） １つのトリガー領域を設定でき、トリガー領域の操
作により排他的に一つを選択可能なＮ個の状態を持つ部
品（セレクタアイテムＳＥＬＥＣＴＯＲ ＩＴＥＭ） ２つのトリガー領域を設定でき、これらのトリガー
領域の操作により排他的に一つを選択可能なＮ個の状態
を持つ部品（カスケードアイテムＣＡＳＣＡＤＥ ＩＴ
ＥＭ） 定期的な動作を実行可能にする部品（タイマアイテ
ムＴＩＭＥＲ ＩＴＥＭ） また、本発明において、前記部品は、属性情報として図
形情報、機能情報、構造情報を含む。具代的には例えば
図４に示すように、図形データ、トリガー領域、アクシ
ョンスクリプト、下層アイテムへのポインタ…などであ
る。

【０００９】また、本発明は、上記第１および第２の手
段を有する構成において、設計に用いられた部品を樹木
構造に関係づけて管理する第３の手段（図１の１２１）
を設けることができる。

【００１０】また、本発明は、前記第１、第２および第
３の手段により設計された機器のユーザインタフェース
部の動作のシミュレーションを行うために、第２の手段
により生成された前記動作を指示する記述に基づいて、
第１の手段により生成された図形情報の表示を制御する
第４の手段（図１の１３、図１１の１３）が設けられ
る。

【００１１】

【作用】本発明は固有の属性を有する部品が用意され、
この部品を基に機器のコントロールパネルのようなユー
ザインタフェース部を設計する。その設計において、デ
ザイナは、第１の手段（グラフィックス編集部１２２）
を用いて、背景となる部品の図形の上に他の所望の属性
項目を持つ部品の図形を選択配置し、描画編集すること
によりユーザインタフェース部の所望の外観の画像デー
タを生成する。また、第２の手段（動作編集部１２３）
を用いて、部品の属性項目を設定するとともに、必要な
動作の記述（アクションスクリプト）を作成することに
より動作の設計を行う。本発明によれば、描画情報だけ
でなく動作情報をも設定可能な部品を用いて、動作をも
含めたユーザインタフェース部の描画編集を行うことが
でき、操作に応じて状態の変化する動きのあるユーザイ
ンタフェース部の設計を容易に行うことができる。

【００１２】部品としては、基本的には背景になる部
品、触る部品、表示する部品があり、実際の設計を行う
には前述のわずか６種類の部品を用意するだけで、広範
な分野で状態の変化を伴うユーザインタフェース部の設
計が可能である。

【００１３】また、第３の手段（構造編集部１２１）に
より部品は樹木構造に関係づけされる。樹木構造に関係
づけされることにより、複雑な機能のユーザインタフェ
ースの設計も可能となる。

【００１４】本発明において、第４の手段（動作シミュ
レーション部１３）は、前述のように部品を用いた設計
により得られたユーザインタフェース部の部品データに
より、動作シミュレーションを行うことができる。座標
入力により部品が指示されると、その部品に関する動作
を指示する記述（アクションスクリプト）を解釈し、実
行することにより画面上で動きをシミュレーションする
ことができる。即ち、デザイナは、製品コンセプトに従
ってインタフェースの部のデザインを作成し、その作成
の途中でも、あるいは作成終了後直ちに第４の手段によ
りシミュレーションを行うことが可能である。従って、
動作をも含めたデザインの善し悪しをすぐに評価し、デ
ザインの修正を行うという検討作業が可能となり、品質
の高いユーザインタフェース部を時間をかけずに設計す
ることができる。

【００１５】更に、第４の手段（動作シミュレーション
部１３）を有することにより、本発明はユーザインタフ
ェース部の設計結果を、関係者に対し分かりやすいプレ
ゼンテーションを行うことができる。従来はこのような
プレゼンテーションでは、操作部の動きの状態ごとの多
数の図面を作成し、時間順序に従って逐一説明する必要
があったが、ユーザインタフェース部の設計結果が実際
の製品と同じ外観が画面表示され、疑似的に操作してみ
ることができ、その動作をも見ることができ、効果的な
プレゼンテーションを行うことができる。

【００１６】

【実施例】図１は本発明の一実施例の構成の概略を示す
図である。この実施例は、図１に示すように、予め用意
された操作部の部品のデータであるアイテムデータ１１
１やそのアイテムデータを基に作成、編集された操作部
の図形データ１１２などの情報を記憶するデータ記憶部
１１と、構造データ、グラフィックスおよび動作記述
（アクションスクリプト）の作成、編集を行う編集部１
２と、作成された操作部のデザイン情報による動作のシ
ミュレーションを行う動作シミュレーション部１３と、
編集あるいは動作シミュレーションのために図形データ
をラスター図形に変換するラスター図形生成部１４と、
ウィンドウシステム１５と、図形データを表示する表示
部１６と、編集操作の入力や指示位置情報を入力するた
めの入力手段であるタッチパネル１７およびそのドライ
バ１８と、マウス１９を備えている。編集部１２は、ア
イテムの構造の生成、編集を行うと共にアイテムの管理
を行う構造編集部１２１と、部品アイテムの図形情報を
編集して、操作部の図形情報を生成するグラフィックス
編集部１２２と、そのグラフィックス編集部１２２によ
り作成された図形情報における各部品の動作を指示する
記述（アクションスクリプト）を生成する動作編集部１
２３とを備えている。

【００１７】この実施例では、編集部１２および動作シ
ミュレーション部１３は、ウィンドウシステム１５を用
いたソフトウェアによって構成されるが、それを実行す
るためのハードウェアの構成例は、図２に示すように、
編集部１２によるデザイン編集時には、ワークステーシ
ョンとディスプレイ装置とポインティングデバイス（マ
ウス）からなり、動作シミュレーション部１３によるシ
ミュレーション時には操作指示部としてＲＳ−２３２Ｃ
を介してタッチパネルとそのコントローラが更に実装さ
れる。

【００１８】ユーザが編集操作するこの実施例の装置に
おけるグラフィカルユーザインタフェース（ＧＵＩ）
は、次の３つに大別される。 メインウインドウ（アイテムのレイアウト編集、図
形の編集およびシミュレーション） ツリーウインドウ（アイテムの構造表示、編集） アイテムプロパティウインドウ（アイテムの振る舞
いの編集） 図１４は上記３つのウィンドウの一例を示し、中央の一
番大きなウィンドウがメインウィンドウ、右側の縦長の
ウィンドウがツリーウィンドウ、左下の小さなウィンド
ウがアイテムプロパティウィンドウである。アイテムお
よび図形については後述するが、メインウインドウとツ
リーウインドウは、異なる観点から、データを表示した
ものであり、１対１に対応している。メインウインドウ
は、編集とシミュレーションを兼ねている。ツリーウイ
ンドウは、必要に応じて任意に表示／取消しができる。
アイテムプロパティウインドウは、アイテムの振る舞い
を編集する場合に任意に表示する。編集対象のアイテム
は１つに特定されるため、同時に２つ以上は表示されな
い。ツリーウインドウとアイテムプロパティウインドウ
を表示した状態で、シミュレーションをおこなうことが
可能である。シミュレーション中のアイテムプロパティ
ウインドウは、動作中のアイテムに対応して同期表示を
する。その他、ユーティリティウインドウとして、図形
プロパティ、カラーパレットが描画編集用に用意されて
いる。

【００１９】図形の部品化 本実施例におけるユーザインタフェース画面の部品は、
いくつかの図形のまとまりで見かけ上の意味を形作って
いる。しかし、部品は図形情報だけでなく、機能情報を
含んだ上で意味をもった部品として成立する。部品とし
ての機能は、以下の３つに大別される。 ボタンなど操作の対象になる”触る部品” メッセージ、状態などの変化を”表示する部品” の部品を配置する”背景になる部品” この組合せによる簡単なユーザインタフェース画面を図
３に示す。

【００２０】部品とアイテム 本実施例では、ボタン操作式（ダイアルなどがない）の
ユーザインタフェース画面のデザインに注目して、６種
類の部品を定義した。以後、この部品をアイテムと呼
ぶ。アイテムは、名前、ＩＤ、サイズ、図形情報、現在
の状態、タッチ領域（トリガー範囲）、動作情報などを
もつ。以下に、６つのアイテムの詳細をしめす。

【００２１】１）フレームアイテム（ＦＲＡＭＥ ＩＴ
ＥＭ） 部品となるアイテムの背景になるアイテムである。子供
アイテムを持てる唯一のアイテムであり、フレームアイ
テムを単位として、表示が制御される。フレームアイテ
ム上に子供フレームアイテムを貼り付けてもよい。構造
的には、１個の図形ポインタと子供アイテムポインタを
もっている。

【００２２】２）インディケータアイテム（ＩＮＤＩＣ
ＡＴＯＲ） フレーム上に動的な変数の表示をおこなうアイテムであ
る。メッセージなどの表示に用いる。構造的には、１個
の図形ポインタをもっている。

【００２３】３）ボタンアイテム（ＢＵＴＴＯＮ） ＯＦＦ、ＯＮの表情をもつアイテム。トリガー領域をも
ち、シミュレーション時には、このトリガー領域内を触
れると、ＯＦＦからＯＮまたはＯＮからＯＦＦの図形に
表示を変更し、アイテム内に記述された動作を解釈して
実行する。構造的には、２個の図形ポインタと２個の動
作情報と１個のタッチ領域をもっている。

【００２４】４）セレクタアイテム（ＳＥＬＥＣＴＯＲ
ＩＴＥＭ） 複数個（ｎ個）の表情をもつアイテム。状態は排他的に
１つを保持し、ｉ番目の図形を表示する。シミュレーシ
ョン時には、ｊ番目のトリガー領域内を触れると、ｉ番
目からｊ番目の図形に表示を変更し、ｊ番目に記述され
ている動作を解釈して実行する。編集時に個数ｎを増減
できる。構造的には、ｎ個の図形ポインタとｎ個の動作
情報とｎ個のタッチ領域をもっている。

【００２５】５）カスケードアイテム（ＣＡＳＣＡＤＥ
ＩＴＥＭ） 複数個（ｎ個）の表情をもつアイテム。セレクタアイテ
ムと異なるのは、トリガー領域を２個もつことである。
この２個のタッチ領域は、シミュレーション時に、それ
ぞれ（ｉ＋１）番目、（ｉ−１）番目に状態と表示を変
更するように定義されている。また、ｉが１以下、ｎ以
上になった場合に、上下限で停止するかサイクリック動
作にするかの切り替えをもつ。構造的には、ｎ個の図形
ポインタとｎ個の動作情報と２個のタッチ領域をもって
いる。

【００２６】６）タイマアイテム（ＴＩＭＥＲ ＩＴＥ
Ｍ） 定期的に動作を実行するアイテム。図形とトリガー領域
をもたない代わりに、アイテム内に記述された動作が他
のアイテムを呼び出す。構造的には、１個の動作情報と
動作呼出し間隔と現在の実行中／停止中の値をもってい
る。

【００２７】図４にそれぞれのアイテムがもつ主な情報
を示し、図６にアイテムの表示例を示す。

【００２８】アイテムの編集と管理 図６は編集部１２の処理の流れの概略を示す図である。
システムを起動し（ステップ６１）、データの新規作成
か既存データの編集かを決定し、既存データの編集の際
には既存のデータをデータ記憶部１１１から読み出して
編集部１２へ読み込む（ステップ６２）。編集部１２で
は構造の編集（ステップ６３）、グラフィックスの編集
（ステップ６４）、動作の編集（ステップ６５）をそれ
ぞれ行う。編集途上で、あるいは編集が終わったとき
に、モード切替え部１０によりシミュレーションモード
にして動作シミュレーション部１３により出来上がった
部分を確認、評価することができる（ステップ６７）。
作成されたデータはデータ記憶部１１に保存する（ステ
ップ６６）。

【００２９】具体的には、ユーザは、６個のアイテムを
組み合せて、グラフィカルなデザインと動作のデザイン
をウィンドウを通じて対話的に進めていく。新規のデザ
イン作業の場合、システムは先頭になるフレームアイテ
ムを自動的に作成する。ユーザはメインウィンドウにお
いて、この背景アイテムの枠の中に図形を描画、配置し
ていく。この枠の中でボタンとして描かれた図形は、他
の図形と区別されることはない。図形はアイテムという
単位によって管理されるからである。フレーム上のボタ
ンという機能部品は、実際に、フレームアイテムの上に
ボタンアイテムとして関係づけられなければならない。
編集上は、フレームアイテムの上にボタンアイテムを子
供として配置し、樹木構造にすることで関係付けられ
る。ボタンの図形は、このボタンアイテムの中に描画す
る。このようにして、フレームアイテムの上には複数の
部品が載り、各部品は必ずいずれかのフレームアイテム
を親としてもつように組み立てられていく。編集部１２
により構築したアイテムの樹木構造は、デザインしたユ
ーザインタフェース画面の機能構成図を示すようにな
る。図７は樹木構造の一例を示すものである。この例は
複写機の操作部の樹木構造を示し、図中の倍率選択画
面、任意倍率、固定倍率等の名前がつけられた矩形はフ
レームアイテムを示している。

【００３０】排他表示と画面切り替え 図７のように樹木構造で関係付けられたアイテムは、シ
ミュレーション中の動作の局面に応じて、その内容を意
図した図形に変化させなければならない。表示の変化に
は３通りが挙げられる。 変数により文字列表示を変更する。 アイテムの図形ポインタを変更する。 アイテムを表示対象から外す。または、表示対象に
する。

【００３１】１）図形ポインタと排他表示 予め描いておいた図形を切り替えるため、１つのアイテ
ムに複数の図形ポインタをもたせておく。アイテムは、
排他的に１つの図形ポインタのみを表示対象（編集対
象）とするように管理をおこなう。該当するアイテム
は、ボタン、セレクタ、カスケードアイテムである。ボ
タンアイテムの場合にはＯＦＦの絵とＯＮの絵が含ま
れ、”ｂｕｔｔｏｎ（０）”と”ｂｕｔｔｏｎ（１）”
の表現が現在の表示対象の図形を表している。”ｂｕｔ
ｔｏｎ（０）”をＯＦＦとするか、ＯＮとするかの特別
な区別はない。編集によって意味付けられるだけであ
る。便宜上は０をＯＦＦとしている。セレンタとカスケ
ードの場合は、ｎ個中のｉ番目を表示対象として、”ｓ
ｅｌｅｃｔｏｒ（１／４）”、”ｃａｓｃａｄｅ（３／
７）“のように表現をする。

【００３２】２）画面管理と表示規則 アイテムの表示有無の機能は、フレームアイテムのみが
もっている。フレームアイテムが表示対象外の場合に
は、フレームアイテム自身とその上に載るすべての部品
アイテムが表示されない。これは、画面切り替えという
動作形態を単位にしているためである。本実施例では、
兄弟関係のフレームに対しては１つのみを排他的に表示
する。親子関係のフレームでは、子供フレームが上に重
なる。この様子を図８に示す。表示対象は、先頭のフレ
ームから現在操作中のフレームアイテムまでと、その中
に含まれるフレーム以外の部品アイテムである。図中の
矩形がフレームアイテム、円が部品アイテムを示してい
る。また、網のアイテムが表示対象を示す。

【００３３】動作の入力 複数の図形ポインタをもつアイテムは、アイテム単体で
の表示切り替えを内部で実現するが、アイテム間で連動
した動作をおこなうには、アイテム内にその指示をもた
せる必要がある。この動作指示を、アクションスクリプ
ト（動作記述）と呼ぶ。アクションスクリプトを持つこ
とのできるアイテムは、トリガー領域をもつアイテムと
タイマアイテムである。アクションスクリプトの入力
は、アイテムプロパティウインドウ（動作編集部１２
３）中で行われる。スクリプトで指示できる動作につい
ては後述する。

【００３４】組合せの自由度 デザイナは、目的とするユーザインタフェース画面を作
成するために、異なるアイテム構造で同じ動作結果を組
み立てることができる。たとえば、図３のユーザインタ
フェース画面に対して、２通りの構造例を図９に示す。
（ａ）の場合は、［▽］［△］にボタンアイテムをそれ
ぞれ割当てているが、（ｂ）の場合には、カスケードア
イテムの２つのトリガー領域を割当てている。それぞれ
に記述されるアクションスクリプトは多少異なるが、結
果として、同じ動作を実現することが可能である。

【００３５】描画上の特徴 液晶面を対象としたデザイン作業は、一般的なグラフィ
ックデザインとは異なり、液晶の解像度の低さに応じ
た、所謂”ドット絵”の作成が主であり、”ドット絵”
作成に使われるツールは、ペイントシステムが一般的で
ある。ドットを描くデザイナには、目的の形状を解像度
によって間引き、それらしく見える”ドット絵”に形を
変形して描くセンスが必要である。また、ドットに細分
化された図形のプロポーションを変更する作業は容易で
はない。本実施例では、ぬり絵としてのペイント方式で
はなく、描いた図形をベクトルデータとして保持するド
ローイング方式を用いている。ベクトル図形とすること
で、ユーザは素早い描画とレイアウト修正が可能であ
る。本実施例が提供する描画図形を図１０（ａ）に示
す。また、ボタンなどの部品のグラフィカルなディテー
ル（凹凸、角Ｒ）を属性（プロパティ）として与えるこ
とによって、ドットとしての書き込みを極力軽減させて
いる。図形プロパティとして扱う要素を図１０（ｂ）に
示す。図形プロパティを設定してユーザインタフェース
画面をデザインすることにより、図形のディテールの表
示の品位も高いものとなる。

【００３６】また、実際の製品の液晶のピッチとワーク
ステーションのＣＲＴとのピッチが異なるために、デザ
インするユーザインタフェース画面に対して拡大表示が
必要とされる。拡大表示は、ベクトル座標をそのまま拡
大して滑らかな図形を描いてしまったり、整数倍以外の
拡大によってドットを間引いて表示したりすると、液晶
格子上の”ドット絵”と異なってしまうために、デザイ
ンの検討にはならない。そこで本実施例では、ベクター
図形のラスタースキャンコンバージョン処理と高速な整
数倍率の拡大処理を行うラスター図形生成部１４を独自
に備えている。Ｘウインドウの描画関数では、実数値計
算に展開しているために品質の高いディテールを表現で
きないからである。

【００３７】動作シミュレーション 編集モードとシミュレーションモード モード切替え部１０により編集モードとシミュレーショ
ンモードを切り替えることによって、編集モードにおい
て編集部１２で作成したユーザインタフェース画面デー
タを直ちに動作させることができる。シミュレーション
モードに切り替えた時点では、作成したデータの先頭ア
イテムからシミュレーションをおこなうが、シミュレー
ションにより変化したアイテムの状態は、そのままデー
タに反映される。したがって、その場所からの編集が可
能である。

【００３８】動作シミュレーション部の構成 動作シミュレーション部１３は図１１に示すように、ト
リガー領域テーブル１３１と、アイテム管理部１３２、
アクションスクリプト解釈部１３３、タイマーテーブル
１３４および変数テーブル１３５からなっている。アイ
テムの画面表示を切り替えるトリガーの入力手段として
図１のようにマウスやタッチパネルが接続されている
が、図１１には図示は省略されている。なお、図１１に
示すようにアクションスクリプト解釈部１３３には、通
信インタフェース１１０１を介して外部ワークステーシ
ョン１１０２で外部アプリケーションプログラム１１０
３のユーザグラフィックインタフェースのシミュレーシ
ョンを行うための構成が付加されている。

【００３９】トリガー領域テーブル１３１は、ボタン、
セレクタ、カスケード等のトリガー領域を有するアイテ
ムのトリガー領域を保持し、ユーザの指定した画面上の
座標がトリガー領域か否かを調べるためのである。座標
の指定は、タッチパネル１７、マウス１９等の入力装置
からおこなわれ、座標が入力されると、その座標（ｘ，
ｙ）がどれかのアイテムのトリガー領域に該当するかが
探索され、該当するものがあればそのアイテムのＩＤが
アイテム管理部１３２に送出される。表示対象であるカ
レントフレームのトリガー領域のみが格納され、カレン
トフレームが変更になると、アイテム管理部１３２によ
り更新される。

【００４０】アイテム管理部１３２は、シミュレーショ
ンを行うアイテムの管理を行うものであり、トリガーさ
れたアイテムの情報をそのＩＤを基にデータ記憶部１１
のアイテムデータ記憶部１１１から読み出し、アイテム
データに含まれるアクションスクリプトをアクションス
クリプト解釈部１３３へ与え、あるいはアクションスク
リプト解釈部１３３からの解釈結果の指示を受けてアイ
テムデータの図形データのポインタの変更や文字列表示
の変更、あるいはアイテムを表示対象から外しまたは表
示対象にするなどのアイテムデータの状態の変更を行っ
たりするものである。

【００４１】シミュレーションの解釈モジュールである
アクションスクリプト解釈部１３３は、アクションスク
リプトの記述子（コマンド）を解釈し、解釈の結果によ
りアイテム管理部１３２に指示を与えたり、タイマーテ
ーブル１３４や変数テーブル１３５の設定や参照を行う
ものである。アクションスクリプトで動作を記述できる
アイテムは、トリガー領域を持つボタン、セレクトタ、
カスケードの各アイテムと、時間で動作をするタイマー
アイテムである。図１２はアクションスクリプトに用意
されている記述子（コマンド）の例を示すものであり、
この例では記述子は２１種類である。コマンドは、引数
を持つものと持たないものとがある。いずれの場合
も、”（”と”）”でコマンドを挟み解釈単位（文）と
する。アイテム中には、文を複数羅列することができ、
解釈は左から順におこなわれる。記述の入力は、編集時
にアイテムプロパティウインドウを開き、その中で記述
する。”（”と”）”の整合性を入力確定時におこなっ
ている。アクションスクリプト解釈部１３３は、不適切
な引数や解釈できないコマンドの場合には、その箇所の
文を無効にする。また、アクションスクリプト解釈部１
３３は、エラーをコンソールに表示して次の文へ解釈を
進める。スクリプト中の変数はすべて文字列（任意長）
として保持され、必要に応じて数値に変換される。変換
できない文字列は、すべて”０”に変換される。この方
法により、意味の通らない記述ミスによる予測できない
評価と解釈の停止を軽減させることができる。

【００４２】シミュレーション動作の流れ 以上のように構成された動作シミュレーション部の動作
について説明する。シミュレーションの主な仕事は、ア
イテムの画面表示を切り替えることである。切り替える
トリガーとしては、マウスによる操作およびタッチパネ
ルからの座標信号と、タイマーからの定期的な信号と、
通信インタフェース１１０１を通じての外部からの信号
の３種類がある。初期状態では、変数とタイマー動作は
登録されていないので、座標信号または外部信号から動
作が開始される。

【００４３】１）トリガー領域と判定 受け付けたトリガー座標（ｘ，ｙ）が、編集により作成
した各アイテム（ボタン、セレクタ、カスケード）の持
っているトリガー範囲内に入っているかどうかが、”操
作した”という判断の基準になる。ここでは、すべての
アイテムのトリガー範囲が対象になる訳ではない。フレ
ームという画面単位でボタンなどの部品が配置されてお
り、画面が複数あれば、トリガー範囲も重なっている。
複数のフレームには、親子関係の場合と兄弟関係の場合
がある。親子のフレームは、いわゆる”ポップアップ画
面”として扱われるものであり、本実施例では、子供フ
レームのトリガー領域のみを判断の対象としている。ま
た、兄弟関係のフレームは、排他的に１つのみが表示さ
れるため、判断の対象となるのは表示されているフレー
ムのみとなる。本実施例では、最も手前（子供）に位置
して且つ表示対象となっているフレームを、カレントフ
レームと呼ぶ。トリガーの対象となるのは、カレントフ
レーム上のボタン、セレクタ、カスケードのみである。
カレントフレーム上のボタン、セレクタ、カスケードが
保持しているトリガー領域は、トリガー領域テーブル１
３１にリストアップされる。シミュレータでは、このテ
ーブルを参照して、触った部品アイテムを割り出してい
る。表示動作の過程でカレントフレームが変更された場
合には、トリガー領域テーブル１３１を新しいカレント
フレームのものへ更新する。

【００４４】２）アクションスクリプトの解釈 トリガーの対象に該当したアイテムは、アイテム自身の
状態変更と表示変更を、内部判断でおこなう。その後、
アイテム中に記述されている動作（アクションスクリプ
ト）を実行する。記述による動作は、４つに分類され
る。 他のアイテムの動作を指示する記述 タイマー動作を扱う記述 変数を扱う記述 外部へ通信する記述 他のアイテムの動作を指示する記述には、直接指定アイ
テムの表示を切り替えるものと、指定アイテムに移行し
てそのアイテムのアクションスクリプトを評価するもの
とがある。後者は、アイテム毎に記述内容を分散して部
品の振る舞いを構造化させることを可能にしている。ア
クションスクリプトの解釈によりカレントフレームが変
更になった場合には、トリガー領域テーブル１３１を更
新する。シミュレーション初期時には、新しい変数テー
ブル１３５とタイマーテーブル１３４を生成する。変数
とタイマーは、それらの設定記述を含むアクションスク
リプトを解釈した時点で、逐次変数テーブル１３５ある
いはタイマーテーブル１３４に登録される。設定されて
いない変数を参照した場合には、アクションスクリプト
解釈部１３３はその変数名を値として評価する。この評
価値は、動作のデバッグに役立っている。

【００４５】３）タイマー動作 タッチパネル１７やマウス１９からのトリガ動作以外
の、定期的な動作を実現するために、タイマー機能を実
装している。タイマーの用途には、点滅表示、アニメー
ション表示、デモンストレーションの自動実行などがあ
る。タイマーは、設定記述を含むアクションスクリプト
を解釈した時点で、タイマーテーブル１３４に登録され
る。一度登録したタイマーをシミュレーション中に削除
することはできないが、タイマーに実行／停止を指示す
ることができる。実行中のタイマーは、指定されたタイ
マーアイテムのアクションスクリプトを定期的に実行
（評価）する。

【００４６】４）通信動作 通信動作は、ＵＮＩＸのファイルポインタ（ｆｐ）をオ
ープンして、文字列単位で入出力をおこなう。入力用と
出力用のポインタを別に割当ててあり、本実施例をパイ
プにしてアプリケーションと繋ぐことが可能である。出
力データは、アクションスクリプトと変数によって任意
の文字メッセージを組み立てて、アプリケーション側で
メッセージを判断させる。入力データは、アクションス
クリプトの解釈モジュールに渡される。解釈できない文
字列は無効になるが、解釈可能な場合には、シミュレー
ション画面を外から操作することが可能である。この入
出力機能によって、外部のアプリケーションのグラフィ
ックユーザインタフェース部の働きを実現する。

【００４７】以上に詳述した本実施例の装置は、機器の
ユーザインタフェースデザイン検討支援ツールであり、
従来のアプリケーションＧＵＩ（グラフィックユーザイ
ンタフェース）作成支援ツールとは異なる。従来のアプ
リケーションＧＵＩ作成支援ツールでは、すでに用意さ
れている部品を配置し、関連づけることによって、ＧＵ
Ｉを構築していく。そこには、ＧＵＩのガイドラインが
あり、決められた作法の操作性に基づくように示唆され
ている。そして生成されるのはソースコードである。本
実施例では、Ｃ言語等のソースコードを生成せず、ＵＩ
デザイン検討ツールとして、動作を含めた描画編集とそ
のシミュレーションを直接おこなう。また、部品は用意
されたものを単に配置するのではなく、部品を機能によ
り選択して編集をする。部品の表情と形状は、描画によ
り自由に表現できる。ＵＩ画面を作成するデザイナは、
デザインコンセプトにしたがったＵＩ画面の編集とシミ
ュレーションによる動作検討ができる。この場合、ＵＩ
画面は、アプリケーションと独立して検討を進めること
ができ、また、アプリケーションに先立つＵＩ画面の検
討は、アプリケーションの作法や機能のオーバースペッ
クなどに助言をくわえることが可能である。必要であれ
ば、アプリケーションとの通信メッセージを取り決める
ことで、アプリケーションプログラマと分業してＧＵＩ
部を作成することができる。デザイナは、特別なプログ
ラミング技術をもつ必要がない。図１３は本実施例と従
来技術の作業プロセスと生成コードの比較のための図で
あり、（ａ）は従来のアプリケーションＧＵＩ作成支援
ツールの場合を示し、（ｂ）は本実施例の場合を示す。

【００４８】

【発明の効果】本発明によれば、描画情報だけでなく動
作情報をも設定可能な部品を用いて、動作をも含めたユ
ーザインタフェース部の描画編集を行うことができ、操
作に応じて状態の変化する動きのあるユーザインタフェ
ース部の設計を容易に行うことができる。

【００４９】また、本発明によれば、作成したユーザイ
ンタフェース部の動作シミュレーションを行うことがで
きるので、動作をも含めたデザインの善し悪しを直ちに
評価し、デザインの修正を行うという検討作業が可能と
なり、品質の高いユーザインタフェース部を時間をかけ
ずに設計することができる。更に、本発明はユーザイン
タフェース部の設計結果を、関係者に対し分かりやすい
説得力のあるプレゼンテーションを行うことができる。

【図面の簡単な説明】

【図１】本発明の実施例の構成の概略を示す図

【図２】実施例のハードウェア構成を示す図

【図３】簡単なユーザインタフェースの例を示す図

【図４】アイテムが持つ主な情報を示す図を示す図

【図５】本実施例の６種類のアイテムの例

【図６】編集操作の流れを示す図

【図７】樹木構造によるアイテムの管理を説明する図

【図８】（ａ）〜（ｃ）はフレーム管理による表示の例
を示す図

【図９】同じ動作を実現する異なる構造を示すもので、
（ａ）は図３のユーザインタフェースをボタンアイテム
２個で構築する場合、（ｂ）はカスケードアイテム１個
で構築する場合を示す図

【図１０】（ａ）は利用できる描画図形を示し、（ｂ）
は図形プロパティの要素を示す図

【図１１】動作シミュレーション部の構成を示す図

【図１２】アクションスクリプトの記述子の例を示す図

【図１３】本実施例と従来技術の作業プロセスと生成コ
ードの比較のための図であり、（ａ）は従来のアプリケ
ーションＧＵＩ作成支援ツールの場合を示し、（ｂ）は
本実施例の場合を示す。

【図１４】実施例の装置におけるＧＵＩの一例を示す図

【符号の説明】

１０…モード切替え部、１１…データ記憶部、１１１…
アイテムデータ、１１２…図形データ、１２…編集部、
１２１…構造編集部、１２２…グラフィックス編集部、
１２３…動作編集部、１３…動作シミュレーション部、
１３１…トリガー領域テーブル、１３２…アイテム管理
部、アクションスクリプト解釈部、１３４…タイマーテ
ーブル、１３５…変数テーブル、１４…ラスター図形生
成部、１５…ウィンドウシステム、１６…表示部、１７
…タッチパネル、１８…タッチパネルドライバ、１９…
マウス、１１０１…通信インタフェース、１１０２…外
部ワークステーション、１１０３…外部アプリケーショ
ン。

Claims (6)

【特許請求の範囲】
1. 【請求項１】 機器のユーザインタフェース部を予め定
   められた属性情報を有する部品により設計するユーザイ
   ンタフェース作成支援装置であって、 部品の図形情報を編集して、前記ユーザインタフェース
   部を描いた図形情報を生成する第１の手段と、 前記部品についてその動作を指示する記述を生成する第
   ２の手段とを備えたユーザインタフェース作成支援装
   置。
2. 【請求項２】 前記部品として、ボタンなど操作の対
   象になる「触る部品」と、メッセージ、状態などの変
   化を表す「表示する部品」と、上記、の部品を配
   置する背景となる「背景になる部品」とが予め用意され
   ていることを特徴とする請求項１記載のユーザインタフ
   ェース作成支援装置。
3. 【請求項３】 前記予め用意されている部品は、次の６
   種類であることを特徴とする請求項２記載のユーザイン
   タフェース作成支援装置。 他の部品の背景となる部品 フレーム上に動的な変数の表示を行う部品 １つのトリガー領域を設定でき、トリガー領域の操
   作によりオンとオフの状態を切り替える部品 １つのトリガー領域を設定でき、トリガー領域の操
   作により排他的に一つを選択可能なＮ個の状態を持つ部
   品 ２つのトリガー領域を設定でき、これらのトリガー
   領域の操作により排他的に一つを選択可能なＮ個の状態
   を持つ部品 定期的に動作を実行可能にする部品
4. 【請求項４】 設計に用いられた部品を樹木構造に関係
   づけて管理する第３の手段を設けたことを特徴とする請
   求項１記載のユーザインタフェース作成支援装置。
5. 【請求項５】 前記各部品は、固有な属性情報を有し、
   その属性情報は図形情報と機能情報と構造情報を含むこ
   とを特徴とする請求項１記載のユーザインタフェース作
   成支援装置。
6. 【請求項６】 請求項１記載のユーザインタフェース作
   成支援装置において、 第１、第２および第３の手段により設計された機器のユ
   ーザインタフェース部の動作のシミュレーションを行う
   ために、第２の手段により生成された前記動作を指示す
   る記述に基づいて、第１の手段により生成された図形情
   報の表示を制御する第４の手段を設けたことを特徴とす
   るもの。