JP4196213B2

JP4196213B2 - Ｗｅｂブラウザ上での数値表示入力支援プログラム。

Info

Publication number: JP4196213B2
Application number: JP2005157010A
Authority: JP
Inventors: 稔檜山
Original assignee: 有限会社ホロニック・システムズ
Priority date: 2005-05-30
Filing date: 2005-05-30
Publication date: 2008-12-17
Anticipated expiration: 2025-05-30
Also published as: JP2006331264A

Description

本発明は、Webブラウザ上で多数の数値表示及び、入力・変更をグラフィカル・ユーザー・インターフェースを使用して見易く、また入力し易くしたWebブラウザ上での数値表示入力支援プログラムに関する。

従来、Webブラウザ上での多数の数値表示及び入力・変更は、その個数が多いほど見間違いを起こしやすく、また、入力にも手間が掛かり大変な労力を必要とし、プログラムの制約上効果的かつ効率的なユーザー・インターフェースが無かった。

数値を見易くする手段としてグラフィカル表示が有望であるが、Webブラウザ上でグラフィカルに表示しようとすると、通常はテーブル・タグを多用しなければならなかった。例えば、１行が最小５分単位の２４時間分を２０行表示する為のテーブル・タグ <td></td> のセット個数は、２４時間×６０分÷５分×２０行＝５，７６０セットとなる。
これはクライアントPCにとって尋常ではない負荷を要求するため、実用には程遠いものであった。

本発明は、これらの問題を解決するため、Ｗebブラウザ上で実行されるHTML(Hyper Text Markup Language)を使用して、テーブル・タグ<td></td> のセット個数を１０分の１以下に減らす事により、クライアントPCの負荷を軽減させ実用に耐えうるグラフィカル・ユーザー・インターフェースを提供する事にある。

上記目的を達成するために、請求項１記載の発明は、Ｗebブラウザ上で実行される、HTMLを使用して、同一行内に複数個の数値表示入力領域とひとつのグラフィック表示入力領域とを対応させて一行としたものを複数行設けるように構成し、前記数値表示入力領域を制御する数値表示制御手段、数値入力制御手段及び、入力された数値データを位置データに変換する数値・位置データ変換手段を設け、前記グラフィック表示入力領域を制御するグラフィック表示制御手段、グラフィック入力制御手段及び、入力された位置データを数値データに変換する位置・数値データ変換手段を設け、前記数値表示入力領域と前記グラフィック表示入力領域と双方向にデータの橋渡しをする為の相互通信手段とを設ける。

前記グラフィック表示入力領域に、予め入力数値の最小単位を１個とした矩形画像を１０個以上まとめたものを矩形グリッド画像として、テーブル・タグの１セットで囲って表示させる。

ユーザーが前記数値表示入力領域にキーボードやテンキー等から直接数値入力すると、前記数値入力制御手段が前記数値表示制御手段に入力された数値データを渡し、前記数値表示制御手段が受け取った数値を前記数値表示入力領域に表示し、さらに前記数値入力制御手段は前記数値・位置データ変換手段にこの数値データを送り、次に前記数値・位置データ変換手段が受け取った数値データを位置データに変換して前記相互通信手段にこの位置データを送り、前記相互通信手段は前記グラフィック表示制御手段にこの位置データを送り、前記グラフィック表示制御手段はこの受け取った位置データに該当する前記グラフィック表示入力領域の矩形画像位置に設定値としての画像（例えば赤色矩形）を表示する。

またユーザーがマウス等のポインティングデバイスを使用して前記グラフィック表示入力領域上の任意の矩形画像位置にマウスポインタを移動させると、前記グラフィック入力制御手段がその位置データを前記グラフィック表示制御手段に渡し、前記グラフィック表示制御手段がその位置データの矩形画像位置に現指示位置としての画像（例えば青色矩形）を表示する。

マウスポインタが隣の矩形画像に移動すると前記グラフィック入力制御手段が新しい位置データを前記グラフィック表示制御手段に渡し、前記グラフィック表示制御手段が既に表示していた位置の現指示位置としての画像を消去し、新しい位置データの矩形画像位置に現指示位置としての画像を表示し、マウスポインタが矩形画像上を移動する度に上記の消去と表示を繰り返す。

そして任意の矩形画像位置でマウスクリックすると、前記グラフィック入力制御手段がその位置データを前記グラフィック表示制御手段に渡し、前記グラフィック表示制御手段がマウスクリックした矩形画像位置に設定値としての画像（例えば赤色矩形）を表示する。

さらに前記グラフィック入力制御手段が前記位置・数値データ変換手段にこの位置データを送り、次に前記位置・数値データ変換手段が受け取った位置データを数値データに変換して、前記相互通信手段にこの数値データを送り、前記相互通信手段は前記数値表示制御手段にこの数値データを送り、前記数値表示制御手段はこの受け取った数値データを前記数値表示領域に数値として表示する。

前記数値表示入力領域と前記グラフィック表示入力領域の双方向入力表示を特徴とするWebブラウザ上での数値表示入力支援プログラムに関するものである。

また請求項２記載の発明は、前記グラフィック表示入力領域上からマウスクリックによって複数のセットとなる様な数値、例えば１行で開始値と終了値の様なセット値を入力する場合において、１番目（例えば開始値）の入力はマウスクリックのみとし、２番目（例えば終了値）の入力を行う時は特殊キー１（例えばCtrlキー）を押しながらマウスクリックを行い、もし３番目が有ればその入力を行う時は特殊キー２（例えばAltキー）を押しながらマウスクリックを行う、さらにもし４番目以降が有れば同様に特殊キー（ファンクションキーその他何でも使用可能）を併用してマウスクリックを行う方法で複数の数値のセット入力を可能としたことを特徴とする請求項１記載のWebブラウザ上での数値表示入力支援プログラムに関するものである。

本発明は、Ｗebブラウザ上で実行されるHTMLを使用して、テーブル・タグ <td></td> のセット個数を１０分の１以下に減らす事により、クライアントPCの負荷を軽減させ、実用に耐えうるグラフィカル・ユーザー・インターフェースを提供し、これにより多数の数値表示及び入力・変更を間違いが少なく容易かつ迅速に行える様になった。

次に、図を用いて本発明の実施の形態および動作を順次詳細に説明する。

図１は、プログラマブル・タイマの実施例である。

図１はWebブラウザ表示画面の例で、画面左側を数値表示入力領域N1とし開始時刻J1と終了時刻J2を数値（時分）で表示している。

画面右側はグラフィック表示入力領域G1で背景として最小５分単位とした矩形画像を薄色分け表示していて、開始時刻の設定画像R1として赤色矩形に白抜き“＜”と、終了時刻の設定画像R2として赤色矩形に白抜き “＞”で表現している。

背景の矩形グリッドH1は、５分毎の薄色分けで１時間分１２個を１つの背景画像とし、これをテーブル・タグ<td></td>の１セットで囲っている。

こうする事により、最小５分単位の２４時間分を２０行表示する為のテーブル・タグ <td></td> のセット個数は、２４時間×２０行＝４８０セットとなる。

グラフィック表示入力領域G1の２４時間中のどの５分位置の矩形に、現指示位置としての青色矩形R3や、設定画像としての赤色矩形R1またはR2を表示するかは、CSS、とJavaScriptを使用している。

時間スケールS1には、０時〜２３時を表示し、スクロールボタンB1によりスクロールさせている。スクロールボタンB1を使用するのは、スクロールバーを使用した場合には表示する位置によりドットの誤差があり赤色矩形R1またはR2や青色矩形R3を表示させたときズレが発生する為で、これを防止する為にスクロールボタンB1を使用している。

図２は、HTML、CSS、及びJavaScriptを使用した本件プログラム構成である。

Webブラウザ上の数値表示入力領域N1は数値表示制御手段１と数値入力制御手段２により制御されている。

グラフィック表示入力領域G1はグラフィック表示制御手段４とグラフィック入力制御手段５により制御されている。

数値入力制御手段２からの数値データは、数値表示制御手段１に渡して数値表示するとともに、数値・位置データ変換手段３にも渡して、数値データから位置データに変換して、相互通信手段７に渡し、さらにグラフィック表示制御手段４に渡して、グラフィック表示する。

ただし、この例ではグラフィック表示入力領域G1で最小５分単位としているので、数値データから位置データに変換する時、０〜４分は０分、５〜９分は５分、１０〜１４分は１０分、１５〜１９分は１５分、２０分〜２４分は２０分、２５〜２９分は２５分、３０〜３４分は３０分、３５〜３９分は３５分、４０〜４４分は４０分、４５〜４９分は４５分、５０〜５４分は５０分、５５〜５９分は５５分として位置データに変換される。

また、グラフィック入力制御手段５からの位置データは、グラフィック表示制御手段４に渡してグラフィック表示するとともに、位置・数値データ変換手段６にも渡して、位置データから数値データに変換して、相互通信手段７に渡し、さらに数値表示制御手段１に渡して、数値表示する。

ただし、この例ではグラフィック表示入力領域G1で最小５分単位としているので、数値データへの変換は０分、５分、１０分、１５分、２０分、２５分、３０分、３５分、４０分、４５分、５０分、５５分となる。

例えば図３の様に、ユーザーが数値表示入力領域N1の開始時刻J1の１行目にキーボードやテンキー等から直接数値（12:30）を入力した場合は、数値入力制御手段２が入力された数値データ（12:30）を数値表示制御手段１に渡して、数値表示制御手段１が開始時刻J1に数値データ（12:30）を表示する。さらに数値入力制御手段２は数値・位置データ変換手段３にこの数値データ（12:30）を送り、次に数値・位置データ変換手段３が数値データ（12:30）を位置データに変換して、相互通信手段７に変換した位置データを送り、相互通信手段７はグラフィック表示制御手段４にこの位置データを送り、グラフィック表示制御手段４はこの受け取った位置データ（12:30）に対応する矩形画像位置に設定画像としての開始時刻の赤色矩形R1を表示する。

そして図４の様に、ユーザーが数値表示入力領域N1の終了時刻J2の１行目にキーボードやテンキー等から直接数値（12:55）を入力した場合は、数値入力制御手段２が入力された数値データ（12:55）を数値表示制御手段１に渡して、数値表示制御手段１が終了時刻J2に数値データ（12:55）を表示する。さらに数値入力制御手段２は数値・位置データ変換手段３にこの数値データ（12:55）を送り、次に数値・位置データ変換手段３が数値データ（12:55）を位置データに変換して、相互通信手段７に変換した位置データを送り、相互通信手段７はグラフィック表示制御手段４にこの位置データを送り、グラフィック表示制御手段４はこの受け取った位置データ（12:55）に対応する矩形画像位置に設定画像としての終了時刻の赤色矩形R2を表示する。

また、ユーザーがマウス等のポインティングデバイスを使用してグラフィック表示入力領域G1上の任意の位置にマウスポインタを移動させると、その下の矩形画像位置に青色矩形R3を表示して現指示位置を示す、通過するとその矩形画像位置は青色矩形に変わる直前の矩形色に戻る。

そして図５の様にグラフィック表示入力領域G1の最下位行の(13:15)の場所でマウスクリックすると、グラフィック入力制御手段５がその矩形画像位置をグラフィック表示制御手段４に渡して、グラフィック表示制御手段４がその位置に設定画像としての開始時刻の赤色矩形R１を表示する。さらにグラフィック入力制御手段５は位置・数値データ変換手段６にこの位置データを送り、次に位置・数値データ変換手段６が位置データを数値データ(13:15)に変換して、相互通信手段７に変換した数値データ(13:15)を送り、相互通信手段７は数値表示制御手段１にこの数値データ(13:15)を送り、数値表示制御手段１はこの受け取った数値データ(13:15)を対応する数値表示入力領域N1である最下位行の開始時刻J1に設定値として数値(13:15)を表示する。

また、終了時刻をマウスクリックにより入力したい場合は、Ctrlキーを押しながらクリックすれば終了時刻の入力であるとの識別をすることが出来るので、図６の様にグラフィック表示入力領域G1の最下位行の(13:40)の場所でCtrlキーを押しながらマウスクリックすると、グラフィック入力制御手段５がその矩形画像位置をグラフィック表示制御手段４に渡してその位置に設定画像としての終了時刻の赤色矩形R2を表示し、さらにグラフィック入力制御手段５は位置・数値データ変換手段６にこの位置データを送り、次に位置・数値データ変換手段６が位置データを数値データ(13:40)に変換して、相互通信手段７に変換した数値データ(13:40)を送り、相互通信手段７は数値表示制御手段１にこの数値データ(13:40)を送り、数値表示制御手段１はこの受け取った数値データ(13:40)を対応する数値表示入力領域N1である最下位行の終了時刻J2に設定値として数値(13:40)を表示する。

上記の方法により、実質４０個の時分を同じグラフィック表示領域でまかなう事が出来る。

特殊キーとは、Ctrlキー、Altキー、Shiftキー、ファンクションキー等何でもよく、これらを併用する事により、さらに多くの時分の表示・入力個数を、プログラムを複雑にすることなく、またクライアントPCの負荷を増加させることなく制御する事が出来る。

数値とは、年月日、日時、時刻、温度、湿度、圧力、流量、速さ、重さ、長さ、容積、個数、枚数、金額、割合、その他数値で表せるものであればどのような数値でも対応可能である。

本発明は、Ｗebブラウザ上で実行されるHTMLを使用して、テーブル・タグ <td></td> のセット個数を１０分の１以下に減らす事により、クライアントPCの負荷を軽減させ実用に耐えうるグラフィカル・ユーザー・インターフェースを提供し、これにより多数の数値表示及び入力・変更の間違いを少なく容易かつ迅速に行える様になったので、例えば、Webインターフェースを使用したプログラムタイマの設定に使用することが出来る。

Webインターフェースを使用した予約管理システムに使用することが出来る。

Webインターフェースを使用した業務管理システムに使用することが出来る。

Webインターフェースを使用した工程管理システムに使用することが出来る。

Webインターフェースを使用した温度管理システムに使用することが出来る。

本発明のWebブラウザ表示画面である。本発明のプログラム構成図である。開始時刻の数値入力例である。終了時刻の数値入力例である。マウスクリックによる開始時刻の入力例である。 Ctrlキー＋マウスクリックによる終了時刻の入力例である。

符号の説明

１：数値表示制御手段
２：数値入力制御手段
３：数値・位置データ変換手段
４：グラフィック表示制御手段
５：グラフィック入力制御手段
６：位置・数値データ変換手段
７：相互通信手段
N1：数値表示入力領域
G1：グラフィック表示入力領域
B1：スクロールボタン
S1：時間スケール
H1：１時間分の矩形グリッド画像
J1：開始時刻
J2：終了時刻
R1：開始時刻の赤色矩形
R2：終了時刻の赤色矩形
R3：現指示位置の青色矩形

Claims

Ｗebブラウザ上で実行されるHTMLを使用して、同一行内に複数個の数値表示入力領域とひとつのグラフィック表示入力領域とを対応させて一行としたものを複数行設けるように構成し、
前記数値表示入力領域を制御する数値表示制御手段、数値入力制御手段及び、入力された数値データを位置データに変換する数値・位置データ変換手段と、前記グラフィック表示入力領域を制御するグラフィック表示制御手段、グラフィック入力制御手段及び、入力された位置データを数値データに変換する位置・数値データ変換手段と、前記数値表示入力領域と前記グラフィック表示入力領域と双方向にデータの橋渡しをする為の相互通信手段とを設け、
前記グラフィック表示入力領域に、予め入力数値の最小単位を１個とした矩形画像を１０個以上まとめたものを矩形グリッド画像として、テーブル・タグの１セットで囲って表示させ、
ユーザーが前記数値表示入力領域にキーボードやテンキー等から直接数値入力すると、前記数値入力制御手段が前記数値表示制御手段に入力された数値データを渡し、前記数値表示制御手段が受け取った数値を前記数値表示入力領域に表示し、さらに前記数値入力制御手段は前記数値・位置データ変換手段にこの数値データを送り、次に前記数値・位置データ変換手段が受け取った数値データを位置データに変換して前記相互通信手段にこの位置データを送り、前記相互通信手段は前記グラフィック表示制御手段にこの位置データを送り、前記グラフィック表示制御手段はこの受け取った位置データに該当する前記グラフィック表示入力領域の矩形画像位置に設定値としての図形を表示し、
またユーザーがマウス等のポインティングデバイスを使用して前記グラフィック表示入力領域上の任意の矩形画像位置にマウスポインタを移動させると、前記グラフィック入力制御手段がその位置データを前記グラフィック表示制御手段に渡し、前記グラフィック表示制御手段がその位置データの矩形画像位置に現指示位置としての図形を表示し、マウスポインタが隣の矩形画像に移動すると前記グラフィック入力制御手段が新しい位置データを前記グラフィック表示制御手段に渡し、前記グラフィック表示制御手段が既に表示していた位置の現指示位置としての図形を消去し、新しい位置データの矩形画像位置に現指示位置としての図形を表示し、マウスポインタが矩形画像上を移動する度に上記の表示と消去を繰り返し、そして任意の矩形画像位置でマウスクリックすると、前記グラフィック入力制御手段がその位置データを前記グラフィック表示制御手段に渡し、前記グラフィック表示制御手段がマウスクリックした矩形画像位置に設定値としての図形を表示し、さらに前記グラフィック入力制御手段が前記位置・数値データ変換手段にこの位置データを送り、次に前記位置・数値データ変換手段が受け取った位置データを数値データに変換して、前記相互通信手段にこの数値データを送り、前記相互通信手段は前記数値表示制御手段にこの数値データを送り、前記数値表示制御手段はこの受け取った数値データを前記数値表示領域に数値として表示する、
前記数値表示入力領域と前記グラフィック表示入力領域の双方向入力表示を特徴とするWebブラウザ上での数値表示入力支援プログラム。
前記グラフィック表示入力領域上からマウスクリックによって複数のセットとなる様な数値を入力する場合において、１番目の入力はマウスクリックのみとし、２番目の入力を行う時は特殊キー１を押しながらマウスクリックを行い、もし３番目が有ればその入力を行う時は特殊キー２を押しながらマウスクリックを行う、さらにもし４番目以降が有れば同様に特殊キーを併用してマウスクリックを行う方法で複数の数値のセット入力を可能としたことを特徴とする請求項１記載のWebブラウザ上での数値表示入力支援プログラム。